ant-design/components/layout/__tests__/dynamic-breakpoint.test.tsx
Dunqing 6759887c44
chore: migrate to vitest (#42506)
* chore: migrate to vitest

* chore: update ci

* fix: test correctly

* test: support puppeteer

* chore: update coverage

* chore: update include/exclude

* chore: update config

* test: update incorrect tests

* chore: update script

* chore: update

* fix: should close browser at the ended

* chore: improve

* fix: test cause tsc error

* fix: eslint error

* chore: exclude correctly

* test: update snap and fix some tests

* chore: update test config

* fix: countup.js

* fix: incorrect test

* chore: update reference

* test: update

* fix: countup.js

* fix: timeout

* chore: update site test

* fix: fixed countup version

* chore: remove unsed code

* test: update

* test: update demo timeout

* test: update timeout

* chore: update image test

* chore: update threads

* fix: image/svg+xml test failed

* chore: limits threads

* test: update test coverage include

* chore: remove jest files

* chore: rename jest to vi

* chore: update document

* chore: fix missing @types/jsdom

* chore: update coverage

* chore: update snap

* fix:watermark test cases are incorrect

* feat: update ignore comment

* test: fix test case

* test: reset body scrollTop

* test: clean up

* test: use vi

* test: update snapshot

* test: update snapshot

* test: fix dropdown test failed

* fix: toHaveStyle cause test fail

* test: improve test case

* test: fix

* fix: color failed, refer to https://github.com/jsdom/jsdom/pull/3560

* test: fix

* test: fix

* test: fix circular import

* test: revert

* ci: coverage failed

* test: fix c8 ignore comment

* chore: incorrect config

* chore: fix ignore ci

* test: revert svg+xml

* test: fix realTimers

* feat: rc-trigger should be remove

* test: fix some failed test

* chore: remove unused deps and configure eslint-plugin-vitest

* test: update snap

* chore: remove jest

* test: fix lint error

---------

Co-authored-by: 二货机器人 <smith3816@gmail.com>
Co-authored-by: afc163 <afc163@gmail.com>
2023-06-07 11:54:50 +08:00

50 lines
1.4 KiB
TypeScript

import React, { useState } from 'react';
import { fireEvent, render } from '../../../tests/utils';
import Sider from '../Sider';
const Content = () => {
const [breakpoint, setBreakpoint] = useState('sm');
const toggleBreakpoint = () => {
if (breakpoint === 'sm') {
setBreakpoint('lg');
} else {
setBreakpoint('sm');
}
};
return (
<Sider breakpoint={breakpoint as any}>
<button type="button" id="toggle" onClick={toggleBreakpoint}>
Toggle
</button>
</Sider>
);
};
it('Dynamic breakpoint in Sider component', () => {
const add = vi.fn();
const remove = vi.fn();
const newMatch = vi.spyOn(window, 'matchMedia').mockReturnValue({
matches: true,
addEventListener: add,
removeEventListener: remove,
} as any);
const { container } = render(<Content />);
// Record here since React 18 strict mode will render twice at first mount
const originCallTimes = newMatch.mock.calls.length;
expect(originCallTimes <= 2).toBeTruthy();
// subscribe at first
expect(add.mock.calls).toHaveLength(originCallTimes);
expect(remove.mock.calls).toHaveLength(originCallTimes - 1);
fireEvent.click(container.querySelector('#toggle') as Element);
expect(newMatch.mock.calls).toHaveLength(originCallTimes + 1);
expect(add.mock.calls).toHaveLength(originCallTimes + 1);
expect(remove.mock.calls).toHaveLength(originCallTimes);
vi.restoreAllMocks();
});