test: of it

Author: zombieJ

examples/basic.tsx

@@ -47,7 +47,7 @@ function renderRest(items: ItemType[]) {
 
 const Demo = () => {
   const [responsive, setResponsive] = React.useState(true);
-  const [data, setData] = React.useState(createData(2));
+  const [data, setData] = React.useState(createData(1));
 
   return (
     <div style={{ padding: 32 }}>
@@ -80,7 +80,7 @@ const Demo = () => {
         style={{
           border: '5px solid green',
           padding: 8,
-          width: 100,
+          maxWidth: 300,
           marginTop: 32,
         }}
       >

src/Overflow.tsx

@@ -185,10 +185,9 @@ function Overflow<ItemType = any>(
     // We take `mergedData` as deps which may cause dead loop if it's dynamic generate.
     // ref: https://github.com/ant-design/ant-design/issues/36559
     if (
-      displayCount === count
-      // displayCount === count &&
-      // (suffixFixedStartVal === undefined ||
-      //   suffixFixedStartVal === suffixFixedStart)
+      displayCount === count &&
+      (suffixFixedStartVal === undefined ||
+        suffixFixedStartVal === suffixFixedStart)
     ) {
       return;
     }
@@ -207,7 +206,6 @@ function Overflow<ItemType = any>(
 
   // ================================= Size =================================
   function onOverflowResize(_: object, element: HTMLElement) {
-    console.log('resize overflow');
     setContainerWidth(element.clientWidth);
   }
 
@@ -239,7 +237,6 @@ function Overflow<ItemType = any>(
   }
 
   useLayoutEffect(() => {
-    console.log('Effect:', mergedContainerWidth, mergedRestWidth, mergedData);
     if (mergedContainerWidth && mergedRestWidth && mergedData) {
       let totalWidth = suffixWidth;
 

tests/github.spec.tsx

@@ -34,24 +34,28 @@ describe('Overflow.github', () => {
     jest.useRealTimers();
   });
 
-  const clientWidths = {
+  const widths = {
     'rc-overflow': 100,
+    'rc-overflow-item': 90,
+  };
+
+  const propDef = {
+    get() {
+      let targetWidth = 0;
+      Object.keys(widths).forEach(key => {
+        if (this.className.includes(key)) {
+          targetWidth = widths[key];
+        }
+      });
+
+      return targetWidth;
+    },
   };
 
   beforeAll(() => {
     spyElementPrototypes(HTMLDivElement, {
-      clientWidth: {
-        get() {
-          let targetWidth = 0;
-          Object.keys(clientWidths).forEach(key => {
-            if (this.className.includes(key)) {
-              targetWidth = clientWidths[key];
-            }
-          });
-
-          return targetWidth;
-        },
-      },
+      clientWidth: propDef,
+      offsetWidth: propDef,
     });
   });
 
@@ -75,19 +79,29 @@ describe('Overflow.github', () => {
       />,
     );
 
-    // width resize
+    // width & rest resize
     await triggerResize(container.querySelector('.rc-overflow'));
-
-    setTimeout(() => {
-      console.log(2333);
-    }, 1000);
+    await triggerResize(container.querySelector('.rc-overflow-item-rest'));
 
     act(() => {
       jest.runAllTimers();
     });
+
+    const items = Array.from(
+      container.querySelectorAll<HTMLDivElement>(
+        '.rc-overflow-item:not(.rc-overflow-item-rest)',
+      ),
+    );
+
+    for (let i = 0; i < items.length; i += 1) {
+      await triggerResize(items[i]);
+    }
     act(() => {
       jest.runAllTimers();
     });
-    console.log(jest.getTimerCount());
+
+    expect(container.querySelector('.rc-overflow-item-rest')).toHaveStyle({
+      opacity: 1,
+    });
   });
 });