mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 17:59:57 +08:00
48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
|
import React, { useState } from 'react';
|
||
|
import { mount } from 'enzyme';
|
||
|
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 = jest.fn();
|
||
|
const remove = jest.fn();
|
||
|
jest.spyOn(window, 'matchMedia').mockReturnValue({
|
||
|
matches: true,
|
||
|
addEventListener: add,
|
||
|
removeEventListener: remove,
|
||
|
} as any);
|
||
|
|
||
|
const wrapper = mount(<Content />);
|
||
|
const newMatch = window.matchMedia as jest.Mock;
|
||
|
|
||
|
// subscribe at first
|
||
|
expect(newMatch.mock.calls.length).toBe(1);
|
||
|
expect(add.mock.calls.length).toBe(1);
|
||
|
expect(remove.mock.calls.length).toBe(0);
|
||
|
|
||
|
wrapper.find('#toggle').at(0).simulate('click');
|
||
|
// unsubscribe then subscribe again
|
||
|
expect(newMatch.mock.calls.length).toBe(2);
|
||
|
expect(add.mock.calls.length).toBe(2);
|
||
|
expect(remove.mock.calls.length).toBe(1);
|
||
|
|
||
|
jest.restoreAllMocks();
|
||
|
});
|