From 913e9dda4c66d74efd892edbc5836c5d52036d9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 29 Jul 2022 22:36:24 +0800 Subject: [PATCH 1/2] chore: part of it --- examples/basic.tsx | 4 +- jest.config.js | 1 + package.json | 2 + src/Overflow.tsx | 9 ++-- tests/github.spec.tsx | 93 +++++++++++++++++++++++++++++++++++++ tests/setupFilesAfterEnv.ts | 1 + 6 files changed, 105 insertions(+), 5 deletions(-) create mode 100644 tests/github.spec.tsx create mode 100644 tests/setupFilesAfterEnv.ts diff --git a/examples/basic.tsx b/examples/basic.tsx index c572396..e5fbe55 100644 --- a/examples/basic.tsx +++ b/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 (
@@ -80,7 +80,7 @@ const Demo = () => { style={{ border: '5px solid green', padding: 8, - maxWidth: 300, + width: 100, marginTop: 32, }} > diff --git a/jest.config.js b/jest.config.js index 86627c3..9a92751 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,4 +1,5 @@ module.exports = { setupFiles: ['./tests/setup.js'], snapshotSerializers: [require.resolve('enzyme-to-json/serializer')], + setupFilesAfterEnv: ['/tests/setupFilesAfterEnv.ts'] }; diff --git a/package.json b/package.json index e506345..eedb242 100644 --- a/package.json +++ b/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", diff --git a/src/Overflow.tsx b/src/Overflow.tsx index d4c6b83..f9e0e93 100644 --- a/src/Overflow.tsx +++ b/src/Overflow.tsx @@ -185,9 +185,10 @@ function Overflow( // 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( // ================================= Size ================================= function onOverflowResize(_: object, element: HTMLElement) { + console.log('resize overflow'); setContainerWidth(element.clientWidth); } @@ -237,6 +239,7 @@ function Overflow( } useLayoutEffect(() => { + console.log('Effect:', mergedContainerWidth, mergedRestWidth, mergedData); if (mergedContainerWidth && mergedRestWidth && mergedData) { let totalWidth = suffixWidth; diff --git a/tests/github.spec.tsx b/tests/github.spec.tsx new file mode 100644 index 0000000..0f3404e --- /dev/null +++ b/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( + + 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()); + }); +}); diff --git a/tests/setupFilesAfterEnv.ts b/tests/setupFilesAfterEnv.ts new file mode 100644 index 0000000..7b0828b --- /dev/null +++ b/tests/setupFilesAfterEnv.ts @@ -0,0 +1 @@ +import '@testing-library/jest-dom'; From e7e0dcd3e71b32b8b23ed7506c2db48d05622836 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 29 Jul 2022 23:02:27 +0800 Subject: [PATCH 2/2] test: of it --- examples/basic.tsx | 4 ++-- src/Overflow.tsx | 9 +++----- tests/github.spec.tsx | 52 +++++++++++++++++++++++++++---------------- 3 files changed, 38 insertions(+), 27 deletions(-) diff --git a/examples/basic.tsx b/examples/basic.tsx index e5fbe55..c572396 100644 --- a/examples/basic.tsx +++ b/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 (
@@ -80,7 +80,7 @@ const Demo = () => { style={{ border: '5px solid green', padding: 8, - width: 100, + maxWidth: 300, marginTop: 32, }} > diff --git a/src/Overflow.tsx b/src/Overflow.tsx index f9e0e93..d4c6b83 100644 --- a/src/Overflow.tsx +++ b/src/Overflow.tsx @@ -185,10 +185,9 @@ function Overflow( // 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( // ================================= Size ================================= function onOverflowResize(_: object, element: HTMLElement) { - console.log('resize overflow'); setContainerWidth(element.clientWidth); } @@ -239,7 +237,6 @@ function Overflow( } useLayoutEffect(() => { - console.log('Effect:', mergedContainerWidth, mergedRestWidth, mergedData); if (mergedContainerWidth && mergedRestWidth && mergedData) { let totalWidth = suffixWidth; diff --git a/tests/github.spec.tsx b/tests/github.spec.tsx index 0f3404e..05b21f4 100644 --- a/tests/github.spec.tsx +++ b/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( + '.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, + }); }); });