docs: Add max overflow test

Author: zombieJ

examples/blink.tsx

@@ -3,6 +3,10 @@ import Overflow from '../src';
 import '../assets/index.less';
 import './common.less';
 
+const overflowSharedStyle: React.CSSProperties = {
+  background: 'rgba(0, 255, 0, 0.1)',
+};
+
 interface ItemType {
   value: string | number;
   label: string;
@@ -37,6 +41,7 @@ function renderRest(items: ItemType[]) {
 }
 
 const data = createData(5);
+const data2 = createData(2);
 
 const Demo = () => {
   return (
@@ -46,13 +51,22 @@ const Demo = () => {
       </p>
       <div
         style={{
-          boxShadow: '0 0 1px green',
-          maxWidth: 300,
+          border: '10px solid green',
           marginTop: 32,
+          display: 'inline-block',
         }}
       >
         <Overflow<ItemType>
           data={data}
+          style={{ width: 300, ...overflowSharedStyle }}
+          renderItem={renderItem}
+          renderRest={renderRest}
+          maxCount="responsive"
+        />
+
+        <Overflow<ItemType>
+          data={data2}
+          style={{ width: 180, ...overflowSharedStyle }}
           renderItem={renderItem}
           renderRest={renderRest}
           maxCount="responsive"

src/Overflow.tsx

@@ -42,7 +42,6 @@ function Overflow<ItemType = any>(
   } = props;
 
   const createUseState = useBatchFrameState();
-  // const disabled = maxCount !== RESPONSIVE;
 
   const [containerWidth, setContainerWidth] = createUseState(0);
   const [itemWidths, setItemWidths] = createUseState(

tests/responsive.spec.tsx

@@ -38,7 +38,47 @@ describe('Overflow.Responsive', () => {
 
     wrapper.initSize(100, 20); // [0][1][2][3][4][+2](5)(6)
     expect(wrapper.findItems()).toHaveLength(6);
+    [true, true, true, true, false, false].forEach((display, i) => {
+      expect(wrapper.findItems().at(i).props().display).toBe(display);
+    });
     expect(wrapper.findRest()).toHaveLength(1);
     expect(wrapper.findRest().text()).toEqual('+ 2 ...');
   });
+
+  it('remove to clean up', () => {
+    const data = getData(6);
+
+    const wrapper = mount(
+      <Overflow<ItemType>
+        data={data}
+        itemKey="key"
+        renderItem={renderItem}
+        maxCount="responsive"
+      />,
+    );
+    wrapper.initSize(100, 20);
+
+    // Remove one
+    const newData = [...data];
+    newData.splice(1, 1);
+    wrapper.setProps({ data: newData });
+
+    expect(wrapper.findItems()).toHaveLength(5);
+    expect(wrapper.findRest().text()).toEqual('+ 1 ...');
+  });
+
+  it('none to overflow', () => {
+    const wrapper = mount(
+      <Overflow<ItemType>
+        data={getData(5)}
+        itemKey="key"
+        renderItem={renderItem}
+        maxCount="responsive"
+      />,
+    );
+
+    wrapper.initSize(100, 20);
+    expect(wrapper.findItems()).toHaveLength(5);
+    expect(wrapper.findRest().props().display).toBeFalsy();
+  });
 });

tests/setup.js

@@ -3,7 +3,7 @@ const Adapter = require('enzyme-adapter-react-16');
 const { act } = require('react-dom/test-utils');
 require('regenerator-runtime/runtime');
 
-window.requestAnimationFrame = (func) => {
+window.requestAnimationFrame = func => {
   window.setTimeout(func, 16);
 };
 
@@ -12,7 +12,10 @@ Enzyme.configure({ adapter: new Adapter() });
 Object.assign(Enzyme.ReactWrapper.prototype, {
   triggerResize(clientWidth) {
     act(() => {
-      this.find('ResizeObserver').first().props().onResize({}, { clientWidth });
+      this.find('ResizeObserver')
+        .first()
+        .props()
+        .onResize({}, { clientWidth });
       jest.runAllTimers();
       this.update();
     });
@@ -36,7 +39,7 @@ Object.assign(Enzyme.ReactWrapper.prototype, {
   },
   findItems() {
     return this.find('Item').filterWhere(
-      (item) => item.props().className !== 'rc-overflow-item-rest',
+      item => item.props().className !== 'rc-overflow-item-rest',
     );
   },
   findRest() {

tests/wrapper.ts

@@ -2,7 +2,7 @@ import { mount as enzymeMount, ReactWrapper } from 'enzyme';
 
 export type MountParam = Parameters<typeof enzymeMount>;
 
-export interface WrapperType extends ReactWrapper {
+export interface WrapperType extends ReactWrapper<any, any> {
   triggerResize: (offsetWidth: number) => WrapperType;
   triggerItemResize: (index: number, offsetWidth: number) => WrapperType;
   initSize: (width: number, itemWidth: number) => WrapperType;