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

test(component): refactor Button component tests #651

Merged
merged 1 commit into from
Dec 1, 2021
Merged

test(component): refactor Button component tests #651

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
2 changes: 2 additions & 0 deletions packages/big-design/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,9 +60,11 @@
"@babel/preset-typescript": "^7.15.0",
"@bigcommerce/configs": "^0.15.2-alpha.0",
"@bigcommerce/pack": "^0.1.1-alpha.0",
"@testing-library/dom": "^8.11.1",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^12.1.2",
"@testing-library/react-hooks": "^7.0.2",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.0.2",
"@types/node": "^13.1.8",
"@types/react": "^17.0.2",
Expand Down
91 changes: 46 additions & 45 deletions packages/big-design/src/components/Button/spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,188 +1,189 @@
import { AddIcon } from '@bigcommerce/big-design-icons';
import { screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React, { createRef } from 'react';
import 'jest-styled-components';

import { fireEvent, render } from '@test/utils';
import { render } from '@test/utils';

import { StyleableButton } from './private';

import { Button } from './index';

test('render default button', () => {
const { container } = render(<Button>Button</Button>);
render(<Button>Button</Button>);

expect(container.firstChild).toMatchSnapshot();
expect(screen.getByRole('button')).toMatchSnapshot();
});

test('render disabled button', () => {
const { container } = render(<Button disabled>Button</Button>);
render(<Button disabled>Button</Button>);

expect(container.firstChild).toMatchSnapshot();
expect(screen.getByRole('button')).toMatchSnapshot();
});

test('render destructive button', () => {
const { container } = render(<Button actionType="destructive">Button</Button>);
render(<Button actionType="destructive">Button</Button>);

expect(container.firstChild).toMatchSnapshot();
expect(screen.getByRole('button')).toMatchSnapshot();
});

test('render destructive disabled button', () => {
const { container } = render(
render(
<Button actionType="destructive" disabled>
Button
</Button>,
);

expect(container.firstChild).toMatchSnapshot();
expect(screen.getByRole('button')).toMatchSnapshot();
});

test('render secondary button', () => {
const { container } = render(<Button variant="secondary">Button</Button>);
render(<Button variant="secondary">Button</Button>);

expect(container.firstChild).toMatchSnapshot();
expect(screen.getByRole('button')).toMatchSnapshot();
});

test('render secondary disabled button', () => {
const { container } = render(
render(
<Button variant="secondary" disabled>
Button
</Button>,
);

expect(container.firstChild).toMatchSnapshot();
expect(screen.getByRole('button')).toMatchSnapshot();
});

test('render secondary destructive button', () => {
const { container } = render(
render(
<Button variant="secondary" actionType="destructive">
Button
</Button>,
);

expect(container.firstChild).toMatchSnapshot();
expect(screen.getByRole('button')).toMatchSnapshot();
});

test('render secondary destructive disabled button', () => {
const { container } = render(
render(
<Button variant="secondary" actionType="destructive" disabled>
Button
</Button>,
);

expect(container.firstChild).toMatchSnapshot();
expect(screen.getByRole('button')).toMatchSnapshot();
});

test('render subtle button', () => {
const { container } = render(<Button variant="subtle">Button</Button>);
render(<Button variant="subtle">Button</Button>);

expect(container.firstChild).toMatchSnapshot();
expect(screen.getByRole('button')).toMatchSnapshot();
});

test('render subtle disabled button', () => {
const { container } = render(
render(
<Button variant="subtle" disabled>
Button
</Button>,
);

expect(container.firstChild).toMatchSnapshot();
expect(screen.getByRole('button')).toMatchSnapshot();
});

test('render subtle destructive button', () => {
const { container } = render(
render(
<Button variant="subtle" actionType="destructive">
Button
</Button>,
);

expect(container.firstChild).toMatchSnapshot();
expect(screen.getByRole('button')).toMatchSnapshot();
});

test('render subtle destructive disabled button', () => {
const { container } = render(
render(
<Button variant="subtle" actionType="destructive" disabled>
Button
</Button>,
);

expect(container.firstChild).toMatchSnapshot();
expect(screen.getByRole('button')).toMatchSnapshot();
});

test('render loading button', () => {
const { container } = render(<Button isLoading={true}>Button</Button>);
render(<Button isLoading={true}>Button</Button>);

expect(container.firstChild).toMatchSnapshot();
expect(screen.getByRole('button')).toMatchSnapshot();
});

test('render icon only button', () => {
const { container } = render(<Button iconOnly={<AddIcon />}>Button</Button>);
render(<Button iconOnly={<AddIcon />}>Button</Button>);

expect(container.firstChild).toMatchSnapshot();
expect(screen.getByRole('button')).toMatchSnapshot();
});

test('render icon left button', () => {
const { container } = render(<Button iconLeft={<AddIcon />}>Button</Button>);
render(<Button iconLeft={<AddIcon />}>Button</Button>);

expect(container.firstChild).toMatchSnapshot();
expect(screen.getByRole('button')).toMatchSnapshot();
});

test('render icon right button', () => {
const { container } = render(<Button iconRight={<AddIcon />}>Button</Button>);
render(<Button iconRight={<AddIcon />}>Button</Button>);

expect(container.firstChild).toMatchSnapshot();
expect(screen.getByRole('button')).toMatchSnapshot();
});

test('render icon left and right button', () => {
const { container } = render(
render(
<Button iconLeft={<AddIcon />} iconRight={<AddIcon />}>
Button
</Button>,
);

expect(container.firstChild).toMatchSnapshot();
expect(screen.getByRole('button')).toMatchSnapshot();
});

test('forwards ref', () => {
const ref = createRef<HTMLButtonElement>();

const { container } = render(<Button ref={ref} />);
const button = container.querySelector('button');
render(<Button ref={ref} />);

expect(button).toBe(ref.current);
expect(screen.getByRole('button')).toBe(ref.current);
});

test('triggers onClick', () => {
const onClick = jest.fn();

const { container } = render(<Button onClick={onClick} />);
const button = container.firstChild as HTMLElement;
render(<Button onClick={onClick} />);

fireEvent.click(button);
userEvent.click(screen.getByRole<HTMLButtonElement>('button'));

expect(onClick).toHaveBeenCalled();
});

test('does not forward styles', () => {
const { container } = render(<Button className="test" style={{ background: 'red' }} />);

expect(container.getElementsByClassName('test').length).toBe(0);
expect(container.getElementsByClassName('test')).toHaveLength(0);
expect(container.firstChild).not.toHaveStyle('background: red');
});

test('private StyleableButton forwards styles', () => {
const { container } = render(<StyleableButton className="test" style={{ background: 'red' }} />);

expect(container.getElementsByClassName('test').length).toBe(1);
expect(container.getElementsByClassName('test')).toHaveLength(1);
expect(container.firstChild).toHaveStyle('background: red');
});

test('render only icon only with left and right icons button', () => {
const plusIcon = <AddIcon data-testid="icon-only" />;
const { getAllByTestId } = render(

render(
<Button iconLeft={plusIcon} iconOnly={plusIcon} iconRight={plusIcon}>
Button
</Button>,
);

expect(getAllByTestId('icon-only').length).toBe(1);
expect(screen.getAllByTestId('icon-only')).toHaveLength(1);
});
31 changes: 31 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2861,6 +2861,20 @@
lz-string "^1.4.4"
pretty-format "^27.0.2"

"@testing-library/dom@^8.11.1":
version "8.11.1"
resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.11.1.tgz#03fa2684aa09ade589b460db46b4c7be9fc69753"
integrity sha512-3KQDyx9r0RKYailW2MiYrSSKEfH0GTkI51UGEvJenvcoDoeRYs0PZpi2SXqtnMClQvCqdtTTpOfFETDTVADpAg==
dependencies:
"@babel/code-frame" "^7.10.4"
"@babel/runtime" "^7.12.5"
"@types/aria-query" "^4.2.0"
aria-query "^5.0.0"
chalk "^4.1.0"
dom-accessibility-api "^0.5.9"
lz-string "^1.4.4"
pretty-format "^27.0.2"

"@testing-library/jest-dom@^5.14.1":
version "5.14.1"
resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.14.1.tgz#8501e16f1e55a55d675fe73eecee32cdaddb9766"
Expand Down Expand Up @@ -2895,6 +2909,13 @@
"@babel/runtime" "^7.12.5"
"@testing-library/dom" "^8.0.0"

"@testing-library/user-event@^13.5.0":
version "13.5.0"
resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-13.5.0.tgz#69d77007f1e124d55314a2b73fd204b333b13295"
integrity sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==
dependencies:
"@babel/runtime" "^7.12.5"

"@tootallnate/once@1":
version "1.1.2"
resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
Expand Down Expand Up @@ -3484,6 +3505,11 @@ aria-query@^4.2.2:
"@babel/runtime" "^7.10.2"
"@babel/runtime-corejs3" "^7.10.2"

aria-query@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.0.0.tgz#210c21aaf469613ee8c9a62c7f86525e058db52c"
integrity sha512-V+SM7AbUwJ+EBnB8+DXs0hPZHO0W6pqBcc0dW90OwtVG02PswOu/teuARoLQjdDOH+t9pJgGnW5/Qmouf3gPJg==

arr-diff@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
Expand Down Expand Up @@ -5157,6 +5183,11 @@ dom-accessibility-api@^0.5.6:
resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.6.tgz#3f5d43b52c7a3bd68b5fb63fa47b4e4c1fdf65a9"
integrity sha512-DplGLZd8L1lN64jlT27N9TVSESFR5STaEJvX+thCby7fuCHonfPpAlodYc3vuUYbDuDec5w8AMP7oCM5TWFsqw==

dom-accessibility-api@^0.5.9:
version "0.5.10"
resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.10.tgz#caa6d08f60388d0bb4539dd75fe458a9a1d0014c"
integrity sha512-Xu9mD0UjrJisTmv7lmVSDMagQcU9R5hwAbxsaAE/35XPnPLJobbuREfV/rraiSaEj/UOvgrzQs66zyTWTlyd+g==

dom-iterator@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/dom-iterator/-/dom-iterator-1.0.0.tgz#9c09899846ec41c2d257adc4d6015e4759ef05ad"
Expand Down