test: basic test case

Author: zombieJ

package.json

@@ -48,6 +48,8 @@
   },
   "devDependencies": {
     "@types/classnames": "^2.2.9",
+    "@types/enzyme": "^3.10.8",
+    "@types/jest": "^26.0.18",
     "@types/react": "^16.14.2",
     "@types/react-dom": "^16.9.10",
     "@umijs/fabric": "^2.0.8",

src/Item.tsx

@@ -9,7 +9,7 @@ export interface ItemProps<ItemType> {
   renderItem?: (item: ItemType) => React.ReactNode;
   responsive?: boolean;
   itemKey?: React.Key;
-  registerSize: (key: React.Key, width: number) => void;
+  registerSize: (key: React.Key, width: number | null) => void;
   children?: React.ReactNode;
   display: boolean;
   order: number;
@@ -32,13 +32,13 @@ export default function Item<ItemType>(props: ItemProps<ItemType>) {
   const mergedHidden = responsive && !display;
 
   // ================================ Effect ================================
-  function internalRegisterSize(width: number) {
+  function internalRegisterSize(width: number | null) {
     registerSize(itemKey!, width);
   }
 
   React.useEffect(
     () => () => {
-      internalRegisterSize(0);
+      internalRegisterSize(null);
     },
     [],
   );

src/Overflow.tsx

@@ -112,11 +112,11 @@ function Overflow<ItemType = any>(
     setContainerWidth(element.clientWidth);
   }
 
-  function registerSize(key: React.Key, width: number) {
+  function registerSize(key: React.Key, width: number | null) {
     setItemWidths((origin) => {
       const clone = new Map(origin);
 
-      if (!width) {
+      if (width === null) {
         clone.delete(key);
       } else {
         clone.set(key, width);
@@ -125,8 +125,8 @@ function Overflow<ItemType = any>(
     });
   }
 
-  function registerOverflowSize(_: React.Key, width: number) {
-    setRestWidth(width);
+  function registerOverflowSize(_: React.Key, width: number | null) {
+    setRestWidth(width || 0);
     setPrevRestWidth(restWidth);
   }
 

tests/index.spec.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import Overflow from '../src';
+import { mount } from './wrapper';
+
+interface ItemType {
+  label: string;
+  key: number;
+}
+
+function renderItem(item: ItemType) {
+  return item.label;
+}
+
+describe('Overflow', () => {
+  function getData(count: number) {
+    return new Array(count).fill(undefined).map((_, index) => ({
+      label: `Label ${index}`,
+      key: index,
+    }));
+  }
+
+  it('no maxCount', () => {
+    const wrapper = mount(
+      <Overflow<ItemType> data={getData(6)} renderItem={renderItem} />,
+    );
+    expect(wrapper.find('ResizeObserver')).toHaveLength(0);
+    expect(wrapper.find('div.rc-overflow-item')).toHaveLength(6);
+    expect(wrapper.findRest()).toHaveLength(0);
+  });
+
+  it('number maxCount', () => {
+    const wrapper = mount(
+      <Overflow<ItemType>
+        data={getData(6)}
+        renderItem={renderItem}
+        maxCount={4}
+      />,
+    );
+    expect(wrapper.find('ResizeObserver')).toHaveLength(0);
+    expect(wrapper.find('div.rc-overflow-item')).toHaveLength(4 + 1);
+    expect(wrapper.findRest()).toHaveLength(1);
+  });
+
+  it('renderRest', () => {
+    const wrapper = mount(
+      <Overflow
+        data={getData(6)}
+        renderItem={renderItem}
+        renderRest={(omittedItems) => `Bamboo: ${omittedItems.length}`}
+        maxCount={3}
+      />,
+    );
+
+    expect(wrapper.findRest().text()).toEqual('Bamboo: 3');
+  });
+});

tests/index.spec.tsx

@@ -10,20 +10,25 @@ window.requestAnimationFrame = (func) => {
 Enzyme.configure({ adapter: new Adapter() });
 
 Object.assign(Enzyme.ReactWrapper.prototype, {
-  triggerMotionEvent(target) {
-    const motionEvent = new Event('transitionend');
-    if (target) {
-      Object.defineProperty(motionEvent, 'target', {
-        get: () => target.getDOMNode(),
-      });
-    }
-
+  triggerResize(offsetWidth) {
     act(() => {
-      const element = this.find('CSSMotion').getDOMNode();
-      element.dispatchEvent(motionEvent);
-      this.update();
+      this.find('ResizeObserver').first().props().onResize({ offsetWidth });
     });
-
-    return this;
+  },
+  triggerItemResize(index, offsetWidth) {
+    act(() => {
+      this.find('Item')
+        .at(index)
+        .find('ResizeObserver')
+        .props()
+        .onResize({ offsetWidth });
+    });
+  },
+  initSize(width, itemWidth) {
+    this.triggerResize(width);
+    this.triggerItemResize(itemWidth);
+  },
+  findRest() {
+    return this.find('div.rc-overflow-item-rest');
   },
 });

tests/setup.js

@@ -0,0 +1,14 @@
+import { mount as enzymeMount, ReactWrapper } from 'enzyme';
+
+export type MountParam = Parameters<typeof enzymeMount>;
+
+export interface WrapperType extends ReactWrapper {
+  triggerResize: (offsetWidth: number) => WrapperType;
+  triggerItemResize: (index: number, offsetWidth: number) => WrapperType;
+  initSize: (width: number, itemWidth: number) => WrapperType;
+  findRest: () => WrapperType;
+}
+
+export function mount(...args: MountParam) {
+  return enzymeMount(...args) as WrapperType;
+}