Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

🧪 Test case for List #89

Merged
merged 1 commit into from
May 29, 2021
+268 −2
Merged

🧪 Test case for List #89

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
267 changes: 267 additions & 0 deletions __tests__/components/List/List.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,267 @@
import React from 'react';
import { CollapsibleList, List, ListItem } from '../../../src';
import { Md3DRotation, MdAcUnit } from 'react-icons/md';

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

describe('List', () => {
it('should render a basic list', () => {
render(
<List>
<ListItem avatar={<MdAcUnit />}>Basic Item List 1</ListItem>
<ListItem avatar={<Md3DRotation />}>Basic Item List 2</ListItem>
</List>,
);

const ul = document.querySelector('ul');
expect(ul).toHaveStyle(`
padding: 8px 0;
margin: 0;
list-style: none;
width: 100%;
box-sizing: border-box;
border-radius: 6px;
background: #ffffff;
display: block;
border-collapse: collapse;
`);

const listItems = ul.querySelectorAll('.list-item');

expect(listItems[0]).toHaveStyle(`
align-items: center;
display: flex;
background: #ffffff;
border-collapse: collapse;
padding: 0px;
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
list-style: none;
overflow: hidden;
`);

expect(listItems[0].querySelectorAll('div')[0]).toHaveStyle(`
flex: 0 1 auto;
padding: 12px 16px 12px 18px;
margin: 0px;
`);
expect(listItems[0].querySelector('svg').innerHTML).toContain(
// Path for cross svg.
'M22 11h-4.17l3.24-3.24-1.41-1.42L15 11h-2V9l4.66-4.66-1.42-1.41L13 6.17V2h-2v4.17L7.76 2.93 6.34 4.34 11 9v2H9L4.34 6.34 2.93 7.76 6.17 11H2v2h4.17l-3.24 3.24 1.41 1.42L9 13h2v2l-4.66 4.66 1.42 1.41L11 17.83V22h2v-4.17l3.24 3.24 1.42-1.41L13 15v-2h2l4.66 4.66 1.41-1.42L17.83 13H22z',
);

expect(listItems[0].querySelectorAll('div')[1]).toHaveStyle(`
flex: 1 0 auto;
padding: 12px 16px 12px 18px;
margin: 0px;
`);
expect(listItems[0].querySelectorAll('div')[2].innerHTML).toBe('Basic Item List 1');

// Last child
expect(listItems[1]).toHaveStyle(`
border: none;
`);
expect(listItems[1].querySelectorAll('div')[2].innerHTML).toBe('Basic Item List 2');
});

it('should render an empty list', () => {
render(<List />);

expect(document.querySelector('ul').querySelector('div')).toBeEmptyDOMElement();
});

it('Should render a list with background color', () => {
render(
<List backgroundColor="orange">
<ListItem subtitle="Do you Know Lorem Ipsum?">Basic Item List</ListItem>
</List>,
);

const ul = document.querySelector('ul');
expect(ul).toHaveStyle(`
background: orange;
`);
});

it('Should render a list with custom style', () => {
render(
<List style={{ width: '80%' }}>
<ListItem subtitle="Do you Know Lorem Ipsum?">Basic Item List</ListItem>
</List>,
);

const ul = document.querySelector('ul');
expect(ul).toHaveStyle(`
width: 80%;
`);
});

it('should render a list with subtitle', () => {
render(
<List>
<ListItem subtitle="Do you Know Lorem Ipsum?">Basic Item List</ListItem>
</List>,
);

const subtitle = document.querySelector('span');
expect(subtitle).toHaveStyle(`
font-size: 12px;
font-weight: normal;
font-style: normal;
color: rgba(0, 0, 0, 0.54);
`);
expect(subtitle.innerHTML).toBe('Do you Know Lorem Ipsum?');
});

it('should render a collapsible list', () => {
render(
<List>
<CollapsibleList header={'Hello World'}>
<List elevation={0}>
<ListItem subtitle="Do you Know Lorem Ipsum?">Basic Item List</ListItem>
<ListItem>Basic Item List 2</ListItem>
</List>
</CollapsibleList>
<ListItem>Basic Item List 2</ListItem>
</List>,
);

const CollapsibleElement = document.querySelector('ul').querySelector('div');

expect(CollapsibleElement.querySelector('li')).toHaveStyle(`
cursor: pointer;
`);

expect(CollapsibleElement.querySelectorAll('div')[1].innerHTML).toBe('Hello World');
expect(CollapsibleElement.querySelector('svg').innerHTML).toContain('M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z');

expect(CollapsibleElement.querySelectorAll('div')[3]).toHaveStyle(`
max-height: 0;
`);

act(() => {
fireEvent.click(CollapsibleElement.querySelectorAll('div')[2]);
});

expect(CollapsibleElement.querySelectorAll('div')[3]).toHaveStyle(`
max-height: 100vh;
overflow-y: hidden;
transition: all .6s cubic-bezier(0.4, 0, 0.2, 1);
`);

expect(CollapsibleElement.querySelectorAll('div')[5]).toHaveStyle(`
padding: 12px 16px 12px 38px;
`);

expect(CollapsibleElement.querySelectorAll('div')[6].innerHTML).toBe('Basic Item List');
expect(CollapsibleElement.querySelectorAll('span')[1].innerHTML).toBe('Do you Know Lorem Ipsum?');

act(() => {
fireEvent.click(CollapsibleElement.querySelectorAll('div')[2]);
});
expect(CollapsibleElement.querySelectorAll('div')[3]).toHaveStyle(`
max-height: 0;
`);
});

it('should render a densed list', () => {
render(
<List densed>
<ListItem avatar={<MdAcUnit />} subtitle="Hello">
Basic Item List 1
</ListItem>
<ListItem>Basic Item List 2</ListItem>
</List>,
);

const ul = document.querySelector('ul');
expect(ul).toHaveStyle(`
padding: 4px 0;
`);

expect(ul.querySelectorAll('div')[0]).toHaveStyle(`
padding: 6px 8px 6px 9px;
`);
expect(ul.querySelectorAll('div')[1]).toHaveStyle(`
padding: 6px 8px 6px 9px;
`);
});

it('Should render a densed collapsible list', () => {
render(
<List densed>
<CollapsibleList header={'Hello World'}>
<List densed elevation={0}>
<ListItem subtitle="Do you Know Lorem Ipsum?">Basic Item List</ListItem>
<ListItem>Basic Item List 2</ListItem>
</List>
</CollapsibleList>
</List>,
);

const CollapsibleElement = document.querySelector('ul').querySelector('div');
expect(CollapsibleElement.querySelectorAll('div')[5]).toHaveStyle(`
padding: 6px 8px 6px 28px;
`);
});

it('should render a Collapsible list with onChange', () => {
const fn = jest.fn();

render(
<List>
<CollapsibleList onChange={fn} header={'Hello World'}>
<List elevation={0}>
<ListItem subtitle="Do you Know Lorem Ipsum?">Basic Item List</ListItem>
</List>
</CollapsibleList>
<ListItem subtitle="Do you Know Lorem Ipsum?">Basic Item List</ListItem>
</List>,
);

const CollapsibleElement = document.querySelector('ul').querySelector('div');

act(() => {
fireEvent.click(CollapsibleElement.querySelectorAll('div')[2]);
});

expect(fn).toBeCalledTimes(1);
});

// For 100% coverage
it('Should render an open collapsible list', () => {
render(
<List>
<CollapsibleList open={true} header={'Hello World'}>
<List elevation={0}>
<ListItem subtitle="Do you Know Lorem Ipsum?">Basic Item List</ListItem>
</List>
</CollapsibleList>
</List>,
);

const CollapsibleElement = document.querySelector('ul').querySelector('div');
expect(CollapsibleElement.querySelectorAll('div')[3]).toHaveStyle(`
max-height: 100vh;
overflow-y: hidden;
transition: all .6s cubic-bezier(0.4, 0, 0.2, 1);
`);
});

it('Should render a single densed collapsible list', () => {
render(
<List densed>
<CollapsibleList header={'Hello World'}>
<List densed elevation={0}>
<ListItem>Basic Item List 2</ListItem>
</List>
</CollapsibleList>
</List>,
);

const CollapsibleElement = document.querySelector('ul').querySelector('div');
expect(CollapsibleElement.querySelectorAll('div')[5]).toHaveStyle(`
padding: 6px 8px 6px 28px;
`);
});
});
2 changes: 1 addition & 1 deletion src/components/List/List.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export const List: React.FC<ListProps> = (props) => {
style={props.style}
>
{Array.isArray(props.children)
? (props.children as React.ReactElement[])?.map(
? (props.children as React.ReactElement[]).map(
(v, i) =>
v &&
React.cloneElement(v, {
Expand Down
1 change: 0 additions & 1 deletion src/components/List/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ export const listItem = (background: string, clickable: boolean) =>
cursor: clickable && 'pointer',
listStyle: 'none',
overflow: 'hidden',
padding: '6px 8px 6px 9px',
'&:hover': {
filter: hoverColor(background),
background: background,
Expand Down