Skip to content

Commit

Permalink
🎉 Add test for drawer. (#91)
Browse files Browse the repository at this point in the history
  • Loading branch information
@prateekshourya29
prateekshourya29 authored May 31, 2021
1 parent e7175be commit fd9409a
Show file tree
Hide file tree
Showing 4 changed files with 185 additions and 21 deletions.
180 changes: 180 additions & 0 deletions __tests__/components/Drawer/Drawer.spec.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,180 @@
import React from 'react';
import { Button, Drawer } from '../../../src';

import '@testing-library/jest-dom';
import { fireEvent, render, act } from '@testing-library/react';

const CreateDrawer = (props: {
isOpen?: boolean;
isStyle?: boolean;
placement?: 'right' | 'left' | 'bottom' | 'top';
}) => {
const [open, update] = React.useState(!!props.isOpen);
return (
<>
<Button onClick={() => update(!open)}>Open</Button>
<Drawer
style={props.isStyle && { background: 'orange' }}
placement={props.placement || 'right'}
isVisible={open}
onClose={() => update(!open)}
>
<div>Hello, World!</div>
</Drawer>
</>
);
};

describe('Drawer', () => {
it('Shuould open a simple drawer', () => {
render(<CreateDrawer />);

act(() => {
fireEvent.click(document.querySelector('button'));
});

const drawer = document.querySelector('.sha-el-drawer').parentElement;
expect(drawer.querySelectorAll('div')[0]).toHaveStyle(`
position: fixed;
width: 100%;
height: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 2;
`);
expect(drawer.querySelectorAll('div')[1]).toHaveStyle(`
position: fixed;
box-sizing: border-box;
background: #ffffff;
z-index: 2;
height: 100%;
overflow-y: auto;
overflow-x: auto;
`);
expect(drawer.querySelectorAll('div')[1]).toHaveStyle(`
right: 0;
top: 0;
width: auto;
height: 100%;
animation: animation-jrgenw 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
`);
});

it('Should close a drawer', () => {
jest.useFakeTimers();
render(<CreateDrawer isOpen={true} />);

let drawerMask = document.querySelector('.sha-el-drawer');

expect(drawerMask.parentElement.querySelectorAll('div')[1].classList.length).toBe(7);

act(() => {
fireEvent.click(drawerMask);
});

expect(drawerMask.parentElement.querySelectorAll('div')[1].classList.length).toBe(8);

act(() => {
jest.runAllTimers();
});

drawerMask = document.querySelector('.sha-el-drawer');
expect(drawerMask).toBeNull();
});

it('Should render a drawer with onClose prop', () => {
jest.useFakeTimers();
const fn = jest.fn();
render(
<Drawer isVisible onClose={fn}>
<div>Hello, World!</div>
</Drawer>,
);

act(() => {
fireEvent.click(document.querySelector('.sha-el-drawer'));
});
act(() => {
jest.runAllTimers();
});
expect(fn).toBeCalledTimes(1);
});

it('Should render a drawer with custom styles', () => {
render(<CreateDrawer isOpen isStyle />);

const drawer = document.querySelector('.sha-el-drawer').parentElement;
expect(drawer.querySelectorAll('div')[1]).toHaveStyle(`
background: orange;
`);
});

it('Should open a drawer in left', () => {
render(<CreateDrawer placement="left" />);

act(() => {
fireEvent.click(document.querySelector('button'));
});

const drawer = document.querySelector('.sha-el-drawer').parentElement;
expect(drawer.querySelectorAll('div')[1]).toHaveStyle(`
left: 0;
width: auto;
height: 100%;
top: 0;
animation: animation-1lgtpsr 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
`);
});

it('Should open a drawer in bottom', () => {
render(<CreateDrawer placement="bottom" />);

act(() => {
fireEvent.click(document.querySelector('button'));
});

const drawer = document.querySelector('.sha-el-drawer').parentElement;
expect(drawer.querySelectorAll('div')[1]).toHaveStyle(`
bottom: 0;
width: 100%;
height: auto;
left: 0;
animation: animation-16uu6p2 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
`);
});

it('Should open a drawer in top', () => {
render(<CreateDrawer placement="top" />);

act(() => {
fireEvent.click(document.querySelector('button'));
});

const drawer = document.querySelector('.sha-el-drawer').parentElement;
expect(drawer.querySelectorAll('div')[1]).toHaveStyle(`
top: 0;
width: 100%;
height: auto;
left: 0;
animation: animation-fv4k3y 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
`);
});

it('Should open a drawer with padding, border & elevation', () => {
render(
<Drawer isVisible padding={22} elevation={20} border={4}>
<div>Hello, World!</div>
</Drawer>,
);

const drawer = document.querySelector('.sha-el-drawer').parentElement;
expect(drawer.querySelectorAll('div')[1]).toHaveStyle(`
border: 2px solid hsla(0,0%,0%,.2);
box-shadow: 0px 10px 13px -6px rgba(34,41,47,0.12),0px 20px 31px 3px rgba(34,41,47,0.08),0px 8px 38px 7px rgba(34,41,47,0.05);
padding: 22px;
`);
});
});
3 changes: 2 additions & 1 deletion src/components/Drawer/Drawer.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export default {
} as Meta;

const Template: Story<DrawerProps> = (args) => {
const [open, update] = React.useState(true);
const [open, update] = React.useState(args.isVisible);
return (
<>
<Button onClick={() => update(!open)}>Open</Button>
Expand All @@ -34,4 +34,5 @@ Basic.args = {
<p>LOREM IPSUM................</p>
</Card>
),
isVisible: true,
};
2 changes: 1 addition & 1 deletion src/components/Drawer/Drawer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export const Drawer: React.FunctionComponent<DrawerProps> = (props) => {
return (
<Portal>
<>
<div className={css.maskStyle} onClick={() => props.onClose && beforeClose()} />
<div className={classes(css.maskStyle, 'sha-el-drawer')} onClick={() => props.onClose && beforeClose()} />
<div
style={props.style}
className={classes(
Expand Down
21 changes: 2 additions & 19 deletions src/components/Drawer/style.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,19 +89,8 @@ export const style = (theme: Theme) => ({
background: theme.background,
zIndex: zLayoutModal,
height: '100%',
'& .header': {
padding: '16px 24px',
borderBottom: '1px solid #ccc',
},
'& .body': {
padding: '16px 24px',
overflowY: 'auto',
overflowX: 'auto',
},
'& .footer': {
padding: '16px 24px',
borderTop: '1px solid #ccc',
},
overflowY: 'auto',
overflowX: 'auto',
}),
maskStyle: css({
position: 'fixed',
Expand Down Expand Up @@ -132,19 +121,13 @@ export const style = (theme: Theme) => ({
width: 'auto',
height: '100%',
animation: `${slideInRight} 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both`,
'& .body': {
height: '100%',
},
}),
slideInLeft: css({
left: '0',
width: 'auto',
height: '100%',
top: '0',
animation: `${slideInLeft} 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both`,
'& .body': {
height: '100%',
},
}),
slideInTop: css({
top: '0',
Expand Down

0 comments on commit fd9409a

Please sign in to comment.