FP-1650: Test Cases for _common/Button #640
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,20 +1,171 @@ | ||
| // WARNING: Relies on `Icon` because of `getByRole('img')` | ||
| import React from 'react'; | ||
| import { render } from '@testing-library/react'; | ||
| import Button, * as BTN from './Button'; | ||
|
|
||
| import '@testing-library/jest-dom/extend-expect'; | ||
|
|
||
| const TEST_TEXT = '…'; | ||
| const TEST_TYPE = 'primary'; | ||
| const TEST_SIZE = 'medium'; | ||
|
|
||
| function testClassnamesByType(type, size, getByRole, getByTestId) { | ||
| const root = getByRole('button'); | ||
| const text = getByTestId('text'); | ||
| const typeClassName = BTN.TYPE_MAP[type]; | ||
| const sizeClassName = BTN.SIZE_MAP[size]; | ||
| expect(root.className).toMatch('root'); | ||
| expect(root.className).toMatch(new RegExp(typeClassName)); | ||
| expect(root.className).toMatch(new RegExp(sizeClassName)); | ||
| expect(text.className).toMatch('text'); | ||
| } | ||
|
|
||
| function muteTypeNotLinkNoSizeLog(type, size) { | ||
| if (type !== 'link' && !size) console.debug = jest.fn(); | ||
| } | ||
|
|
||
| function isPropertyLimitation(type, size) { | ||
| let isLimited = false; | ||
|
|
||
| if ( | ||
| (type === 'primary' && size === 'small') || | ||
| (type !== 'link' && !size) || | ||
| (type === 'link' && size) | ||
| ) | ||
| isLimited = true; | ||
|
|
||
| return isLimited; | ||
| } | ||
|
|
||
| function getExpectedType(type, size) { | ||
| let expType = type; | ||
| if (type === 'primary' && size === 'small') { | ||
| expType = ''; | ||
| } | ||
| return expType; | ||
| } | ||
|
|
||
| describe('Button', () => { | ||
wesleyboar marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| it('uses given text', () => { | ||
| muteTypeNotLinkNoSizeLog(); | ||
| const { getByTestId } = render(<Button>{TEST_TEXT}</Button>); | ||
| expect(getByTestId('text').textContent).toEqual(TEST_TEXT); | ||
| }); | ||
|
|
||
| describe('icons exist as expected when', () => { | ||
| test('only `iconNameBefore` is given', () => { | ||
| muteTypeNotLinkNoSizeLog(); | ||
| const { queryByTestId } = render( | ||
| <Button iconNameBefore="folder">{TEST_TEXT}</Button> | ||
| ); | ||
| expect(queryByTestId('icon-before')).toBeInTheDocument(); | ||
| expect(queryByTestId('icon-after')).not.toBeInTheDocument(); | ||
| }); | ||
| test('only `iconNameAfter` is given', () => { | ||
| muteTypeNotLinkNoSizeLog(); | ||
| const { queryByTestId } = render( | ||
| <Button iconNameAfter="folder">{TEST_TEXT}</Button> | ||
| ); | ||
| expect(queryByTestId('icon-before')).not.toBeInTheDocument(); | ||
| expect(queryByTestId('icon-after')).toBeInTheDocument(); | ||
| }); | ||
| test('both `iconNameAfter` and `iconNameBefore` are given', () => { | ||
| muteTypeNotLinkNoSizeLog(); | ||
| const { queryByTestId } = render( | ||
| <Button iconNameBefore="folder" iconNameAfter="file"> | ||
| {TEST_TEXT} | ||
| </Button> | ||
| ); | ||
| expect(queryByTestId('icon-before')).toBeInTheDocument(); | ||
| expect(queryByTestId('icon-after')).toBeInTheDocument(); | ||
| }); | ||
| }); | ||
wesleyboar marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| describe('all type & size combinations render accurately', () => { | ||
| it.each(BTN.TYPES)('type is "%s"', (type) => { | ||
| muteTypeNotLinkNoSizeLog(); | ||
| if (isPropertyLimitation(type, TEST_SIZE)) { | ||
| return Promise.resolve(); | ||
| } | ||
|
Comment on lines
+79
to
+81
There was a problem hiding this comment. |
||
| const { getByRole, getByTestId } = render( | ||
| <Button type={type} size={TEST_SIZE}> | ||
| {TEST_TEXT} | ||
| </Button> | ||
| ); | ||
|
|
||
| testClassnamesByType(type, TEST_SIZE, getByRole, getByTestId); | ||
| }); | ||
| it.each(BTN.SIZES)('size is "%s"', (size) => { | ||
| muteTypeNotLinkNoSizeLog(); | ||
| if (isPropertyLimitation(TEST_TYPE, size)) { | ||
| return Promise.resolve(); | ||
| } | ||
| const { getByRole, getByTestId } = render( | ||
| <Button type={TEST_TYPE} size={size}> | ||
| {TEST_TEXT} | ||
| </Button> | ||
| ); | ||
|
|
||
| testClassnamesByType(TEST_TYPE, size, getByRole, getByTestId); | ||
| }); | ||
| }); | ||
|
|
||
| describe('loading', () => { | ||
| it('does not render button without text', () => { | ||
| muteTypeNotLinkNoSizeLog(); | ||
| const { queryByTestId } = render( | ||
| <Button data-testid="no button here">{TEST_TEXT}</Button> | ||
| ); | ||
| const el = queryByTestId('no button here'); | ||
| expect(el).toBeNull; | ||
| }); | ||
| it('disables button when in loading state', () => { | ||
| muteTypeNotLinkNoSizeLog(); | ||
| const { queryByText } = render( | ||
| <Button isLoading={true}>Loading Button</Button> | ||
| ); | ||
| const el = queryByText('Loading Button'); | ||
| expect(el).toBeDisabled; | ||
| }); | ||
| }); | ||
|
|
||
| describe('property limitation', () => { | ||
| test('type is "link" & ANY size`', () => { | ||
| console.warn = jest.fn(); | ||
| const { getByRole, getByTestId } = render( | ||
| <Button type="link" size={TEST_SIZE}> | ||
| {TEST_TEXT} | ||
| </Button> | ||
| ); | ||
| const expectedType = 'link'; | ||
| const expectedSize = ''; | ||
|
|
||
| testClassnamesByType(expectedType, expectedSize, getByRole, getByTestId); | ||
| expect(console.warn).toHaveBeenCalled(); | ||
| }); | ||
| test('type is "primary" & size is "small"', () => { | ||
| console.error = jest.fn(); | ||
| const { getByRole, getByTestId } = render( | ||
| <Button type="primary" size="small"> | ||
| {TEST_TEXT} | ||
| </Button> | ||
| ); | ||
| const expectedType = 'secondary'; | ||
| const expectedSize = 'small'; | ||
|
|
||
| testClassnamesByType(expectedType, expectedSize, getByRole, getByTestId); | ||
| expect(console.error).toHaveBeenCalled(); | ||
| }); | ||
| test('type is not "link" & NO size`', () => { | ||
| console.debug = jest.fn(); | ||
| const { getByRole, getByTestId } = render( | ||
| <Button type="primary">{TEST_TEXT}</Button> | ||
| ); | ||
| const expectedType = 'primary'; | ||
| const expectedSize = 'short'; | ||
|
|
||
| testClassnamesByType(expectedType, expectedSize, getByRole, getByTestId); | ||
| expect(console.debug).toHaveBeenCalled(); | ||
| }); | ||
| }); | ||
| }); | ||
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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Extra: So that other elements can identify their
<Button>instance in test cases.