-
Notifications
You must be signed in to change notification settings - Fork 65
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
test(component): refactor Button component tests (#651)
- Loading branch information
1 parent
3c9ac79
commit e015ff6
Showing
3 changed files
with
79 additions
and
45 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters