chore: part 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(1));
+  const [data, setData] = React.useState(createData(2));
 
   return (
     <div style={{ padding: 32 }}>
@@ -80,7 +80,7 @@ const Demo = () => {
         style={{
           border: '5px solid green',
           padding: 8,
-          maxWidth: 300,
+          width: 100,
           marginTop: 32,
         }}
       >

jest.config.js

@@ -1,4 +1,5 @@
 module.exports = {
   setupFiles: ['./tests/setup.js'],
   snapshotSerializers: [require.resolve('enzyme-to-json/serializer')],
+  setupFilesAfterEnv: ['<rootDir>/tests/setupFilesAfterEnv.ts']
 };

package.json

@@ -49,6 +49,8 @@
     "rc-util": "^5.19.2"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^12.0.0",
     "@types/classnames": "^2.2.9",
     "@types/enzyme": "^3.10.8",
     "@types/jest": "^26.0.23",

src/Overflow.tsx

@@ -185,9 +185,10 @@ 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 &&
-      (suffixFixedStartVal === undefined ||
-        suffixFixedStartVal === suffixFixedStart)
+      displayCount === count
+      // displayCount === count &&
+      // (suffixFixedStartVal === undefined ||
+      //   suffixFixedStartVal === suffixFixedStart)
     ) {
       return;
     }
@@ -206,6 +207,7 @@ function Overflow<ItemType = any>(
 
   // ================================= Size =================================
   function onOverflowResize(_: object, element: HTMLElement) {
+    console.log('resize overflow');
     setContainerWidth(element.clientWidth);
   }
 
@@ -237,6 +239,7 @@ function Overflow<ItemType = any>(
   }
 
   useLayoutEffect(() => {
+    console.log('Effect:', mergedContainerWidth, mergedRestWidth, mergedData);
     if (mergedContainerWidth && mergedRestWidth && mergedData) {
       let totalWidth = suffixWidth;
 

tests/github.spec.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { render, act } from '@testing-library/react';
+import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
+import Overflow from '../src';
+
+import { _rs as onResize } from 'rc-resize-observer/lib/utils/observerUtil';
+
+interface ItemType {
+  label: React.ReactNode;
+  key: React.Key;
+}
+
+function renderItem(item: ItemType) {
+  return item.label;
+}
+
+function renderRest(items: ItemType[]) {
+  return `+${items.length}...`;
+}
+
+describe('Overflow.github', () => {
+  function getData(count: number) {
+    return new Array(count).fill(undefined).map((_, index) => ({
+      label: `Label ${index}`,
+      key: `k-${index}`,
+    }));
+  }
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  const clientWidths = {
+    'rc-overflow': 100,
+  };
+
+  beforeAll(() => {
+    spyElementPrototypes(HTMLDivElement, {
+      clientWidth: {
+        get() {
+          let targetWidth = 0;
+          Object.keys(clientWidths).forEach(key => {
+            if (this.className.includes(key)) {
+              targetWidth = clientWidths[key];
+            }
+          });
+
+          return targetWidth;
+        },
+      },
+    });
+  });
+
+  async function triggerResize(target: HTMLElement) {
+    await act(async () => {
+      onResize([{ target } as any]);
+      for (let i = 0; i < 10; i += 1) {
+        await Promise.resolve();
+      }
+    });
+  }
+
+  it('only one', async () => {
+    const { container } = render(
+      <Overflow<ItemType>
+        data={getData(2)}
+        itemKey="key"
+        renderItem={renderItem}
+        renderRest={renderRest}
+        maxCount="responsive"
+      />,
+    );
+
+    // width resize
+    await triggerResize(container.querySelector('.rc-overflow'));
+
+    setTimeout(() => {
+      console.log(2333);
+    }, 1000);
+
+    act(() => {
+      jest.runAllTimers();
+    });
+    act(() => {
+      jest.runAllTimers();
+    });
+    console.log(jest.getTimerCount());
+  });
+});

tests/setupFilesAfterEnv.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';