test(fullscreen): change unit test

Author: LuckyFBB

src/fullscreen/__tests__/__snapshots__/index.test.tsx.snap

@@ -1,18 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`test Fullscreen should default render correctly 1`] = `
-<span>
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
+<div>
+  <div
+    class="dtc-fullscreen"
   >
-    <img
-      class="dtc-fullscreen-icon"
-      src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTMyMDcwODIxNTI3IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM3MzciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNMzM5LjQzMiA2My41OTRIOTkuOTQ0Yy0xOS44NTEgMC0zNiAxNi4xNDktMzYgMzZ2MjM5LjQ4OGMwIDE3LjY3MyAxNC4zMjcgMzIgMzIgMzJzMzItMTQuMzI3IDMyLTMyVjEyNy41OTRoMjExLjQ4N2MxNy42NzMgMCAzMi0xNC4zMjcgMzItMzIgMC4wMDEtMTcuNjczLTE0LjMyNi0zMi0zMS45OTktMzJ6TTMzOS40MzIgODk1LjUwM0gxMjcuOTQ0VjY4NC4wMTZjMC0xNy42NzMtMTQuMzI3LTMyLTMyLTMycy0zMiAxNC4zMjctMzIgMzJ2MjM5LjQ4N2MwIDE5Ljg1MSAxNi4xNDkgMzYgMzYgMzZoMjM5LjQ4N2MxNy42NzMgMCAzMi0xNC4zMjcgMzItMzJzLTE0LjMyNi0zMi0zMS45OTktMzJ6TTkyOCA2NTEuOTE1Yy0xNy42NzMgMC0zMiAxNC4zMjctMzIgMzJ2MjExLjQ4N0g2ODQuNTEzYy0xNy42NzMgMC0zMiAxNC4zMjctMzIgMzJzMTQuMzI3IDMyIDMyIDMySDkyNGMxOS44NTEgMCAzNi0xNi4xNDkgMzYtMzZWNjgzLjkxNWMwLTE3LjY3My0xNC4zMjctMzItMzItMzJ6TTkyNCA2NC4xNTFINjg0LjUxM2MtMTcuNjczIDAtMzIgMTQuMzI3LTMyIDMyczE0LjMyNyAzMiAzMiAzMkg4OTZ2MjExLjQ4OGMwIDE3LjY3MyAxNC4zMjcgMzIgMzIgMzJzMzItMTQuMzI3IDMyLTMyVjEwMC4xNTFjMC0xOS44NTEtMTYuMTQ5LTM2LTM2LTM2eiIgZmlsbD0iIzUxNTE1MSIgcC1pZD0iMzczOCI+PC9wYXRoPjwvc3ZnPg=="
-    />
     <span>
-      全屏
+      <button
+        class="ant-btn ant-btn-default dtc-button"
+        type="button"
+      >
+        <span
+          class="dtc-button__icon dtc-button__icon--middle"
+        >
+          <span
+            data-mock-icon="FullscreenOutlined"
+          />
+        </span>
+        <span
+          class="dtc-button__text dtc-button__text--middle"
+        >
+          全屏
+        </span>
+      </button>
     </span>
-  </button>
-</span>
+  </div>
+</div>
 `;

src/fullscreen/__tests__/index.test.tsx

@@ -10,8 +10,8 @@ describe('test Fullscreen', () => {
     });
     test('should default render correctly', () => {
         const { container } = render(<Fullscreen />);
-        expect(container.firstChild).toMatchSnapshot();
-        expect(container.querySelector('.ant-btn')?.firstChild).toHaveClass('dtc-fullscreen-icon');
+        expect(container).toMatchSnapshot();
+        expect(container.querySelector('.ant-btn')?.firstChild).toHaveClass('dtc-button__icon');
         expect(container.innerHTML).toMatch('全屏');
     });
     test('should customIcon render correctly', () => {
@@ -36,13 +36,13 @@ describe('test Fullscreen', () => {
     });
     test('should custom iconStyle render correctly', () => {
         const iconStyle = {
-            width: 12,
-            height: 12,
+            fontSize: 20,
             marginRight: 5,
         };
-        render(<Fullscreen iconStyle={iconStyle} />);
-        const img = screen.getByRole('img');
-        expect(img).toHaveStyle(`width: 12px; height: 12px; margin-right: 5px;`);
+        const { container } = render(<Fullscreen iconStyle={iconStyle} />);
+        expect(container.querySelector('.ant-btn')?.firstChild?.firstChild).toHaveStyle(
+            'font-size: 20px; margin-right: 5px;'
+        );
     });
     test('button fireEvent correct', () => {
         const { container } = render(<Fullscreen />);