test: Init responsive test

Author: zombieJ

src/Overflow.tsx

@@ -159,6 +159,9 @@ function Overflow<ItemType = any>(
       }
     }
   }, [containerWidth, itemWidths, mergedRestWidth, getKey, mergedData]);
+  
+
+  console.log('>>>', displayCount);
 
   // ================================ Render ================================
   let overflowNode = (

tests/index.spec.tsx

@@ -24,7 +24,7 @@ describe('Overflow', () => {
       <Overflow<ItemType> data={getData(6)} renderItem={renderItem} />,
     );
     expect(wrapper.find('ResizeObserver')).toHaveLength(0);
-    expect(wrapper.find('div.rc-overflow-item')).toHaveLength(6);
+    expect(wrapper.findItems()).toHaveLength(6);
     expect(wrapper.findRest()).toHaveLength(0);
   });
 
@@ -37,7 +37,7 @@ describe('Overflow', () => {
       />,
     );
     expect(wrapper.find('ResizeObserver')).toHaveLength(0);
-    expect(wrapper.find('div.rc-overflow-item')).toHaveLength(4 + 1);
+    expect(wrapper.findItems()).toHaveLength(4 + 1);
     expect(wrapper.findRest()).toHaveLength(1);
   });
 

tests/responsive.spec.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import Overflow from '../src';
+import { mount } from './wrapper';
+
+interface ItemType {
+  label: React.ReactNode;
+  key: React.Key;
+}
+
+function renderItem(item: ItemType) {
+  return item.label;
+}
+
+describe('Overflow.Responsive', () => {
+  function getData(count: number) {
+    return new Array(count).fill(undefined).map((_, index) => ({
+      label: `Label ${index}`,
+      key: `k-${index}`,
+    }));
+  }
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('basic', () => {
+    const wrapper = mount(
+      <Overflow<ItemType>
+        data={getData(6)}
+        renderItem={renderItem}
+        maxCount="responsive"
+      />,
+    );
+
+    wrapper.initSize(100, 20); // [0][1][2][3][4][+2]
+    expect(wrapper.findItems()).toHaveLength(5);
+    expect(wrapper.findRest()).toHaveLength(1);
+    expect(wrapper.findRest().text()).toEqual('+2...');
+  });
+});

tests/setup.js

@@ -10,12 +10,14 @@ window.requestAnimationFrame = func => {
 Enzyme.configure({ adapter: new Adapter() });
 
 Object.assign(Enzyme.ReactWrapper.prototype, {
-  triggerResize(offsetWidth) {
+  triggerResize(clientWidth) {
     act(() => {
       this.find('ResizeObserver')
         .first()
         .props()
-        .onResize({ offsetWidth });
+        .onResize({}, { clientWidth });
+      jest.runAllTimers();
+      this.update();
     });
   },
   triggerItemResize(index, offsetWidth) {
@@ -25,11 +27,18 @@ Object.assign(Enzyme.ReactWrapper.prototype, {
         .find('ResizeObserver')
         .props()
         .onResize({ offsetWidth });
+      jest.runAllTimers();
+      this.update();
     });
   },
   initSize(width, itemWidth) {
     this.triggerResize(width);
-    this.triggerItemResize(itemWidth);
+    this.find('Item').forEach((_, index) => {
+      this.triggerItemResize(index, itemWidth);
+    });
+  },
+  findItems() {
+    return this.find('div.rc-overflow-item');
   },
   findRest() {
     return this.find('div.rc-overflow-item-rest');

tests/wrapper.ts

@@ -6,6 +6,7 @@ export interface WrapperType extends ReactWrapper {
   triggerResize: (offsetWidth: number) => WrapperType;
   triggerItemResize: (index: number, offsetWidth: number) => WrapperType;
   initSize: (width: number, itemWidth: number) => WrapperType;
+  findItems: () => WrapperType;
   findRest: () => WrapperType;
 }