ant-design/components/drawer/__tests__/Drawer.test.js
afc163 4ee9253467
refactor(drawer): rewrite with hook from @hosseinmd ()
* refactor: drawer to functional component and  hooks

* chore: clean code default value

* perf: remove doesn't necessary useCallback

* chore: useContext instead of Consumer

* fix ref

* Add Drawer displayName

* fix tsc

* fix tsc

Co-authored-by: Hossein Mohammadi <hosseinm.developer@gmail.com>
2021-02-05 10:47:17 +08:00

162 lines
4.2 KiB
JavaScript

import React from 'react';
import { render, mount } from 'enzyme';
import Drawer from '..';
import ConfigProvider from '../../config-provider';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
const DrawerTest = ({ getContainer }) => (
<div>
<Drawer visible width={400} getContainer={getContainer}>
Here is content of Drawer
</Drawer>
</div>
);
describe('Drawer', () => {
mountTest(Drawer);
rtlTest(Drawer);
it('render correctly', () => {
const wrapper = render(
<Drawer visible width={400} getContainer={false}>
Here is content of Drawer
</Drawer>,
);
expect(wrapper).toMatchSnapshot();
});
it('getContainer return undefined', () => {
let wrapper = mount(<DrawerTest getContainer={() => undefined} />);
expect(wrapper.render()).toMatchSnapshot();
wrapper = mount(<DrawerTest getContainer={false} />);
expect(wrapper.render()).toMatchSnapshot();
});
it('render top drawer', () => {
const wrapper = render(
<Drawer visible height={400} placement="top" getContainer={false}>
Here is content of Drawer
</Drawer>,
);
expect(wrapper).toMatchSnapshot();
});
it('have a title', () => {
const wrapper = render(
<Drawer visible title="Test Title" getContainer={false}>
Here is content of Drawer
</Drawer>,
);
expect(wrapper).toMatchSnapshot();
});
it('closable is false', () => {
const wrapper = render(
<Drawer visible closable={false} getContainer={false}>
Here is content of Drawer
</Drawer>,
);
expect(wrapper).toMatchSnapshot();
});
it('destroyOnClose is true', () => {
const wrapper = render(
<Drawer destroyOnClose visible={false} getContainer={false}>
Here is content of Drawer
</Drawer>,
);
expect(wrapper).toMatchSnapshot();
});
it('className is test_drawer', () => {
const wrapper = render(
<Drawer destroyOnClose visible={false} className="test_drawer" getContainer={false}>
Here is content of Drawer
</Drawer>,
);
expect(wrapper).toMatchSnapshot();
});
it('style/drawerStyle/headerStyle/bodyStyle should work', () => {
const style = {
backgroundColor: '#08c',
};
const wrapper = render(
<Drawer
visible
style={style}
drawerStyle={style}
headerStyle={style}
bodyStyle={style}
getContainer={false}
>
Here is content of Drawer
</Drawer>,
);
expect(wrapper).toMatchSnapshot();
});
it('have a footer', () => {
const wrapper = render(
<Drawer visible footer="Test Footer" getContainer={false}>
Here is content of Drawer
</Drawer>,
);
expect(wrapper).toMatchSnapshot();
});
it('forceRender works', () => {
const wrapper = mount(
<Drawer>
<button type="button" className="forceRender">
should not be rendered
</button>
</Drawer>,
);
expect(wrapper.find('button.forceRender').length).toBe(0);
const wrapper2 = mount(
<Drawer forceRender>
<button type="button" className="forceRender">
should be rendered
</button>
</Drawer>,
);
expect(wrapper2.find('button.forceRender').length).toBe(1);
});
it('support closeIcon', () => {
const wrapper = render(
<Drawer visible closable closeIcon={<span>close</span>} width={400} getContainer={false}>
Here is content of Drawer
</Drawer>,
);
expect(wrapper).toMatchSnapshot();
});
it('ConfigProvider should not warning', () => {
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
mount(
<ConfigProvider virtual>
<Drawer visible>Bamboo is Light</Drawer>
</ConfigProvider>,
);
expect(errorSpy).not.toHaveBeenCalled();
errorSpy.mockRestore();
});
it('should support ref', () => {
const ref = React.createRef();
mount(
<Drawer visible ref={ref} width={400}>
Here is content of Drawer
</Drawer>,
);
expect(typeof ref.current.push).toBe('function');
expect(typeof ref.current.pull).toBe('function');
});
});