mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-10 16:59:17 +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();
|
|
});
|