From 236c28c4ecd3e01e44536da5377f6c0594382e43 Mon Sep 17 00:00:00 2001 From: Jeff Puzzo Date: Wed, 23 Mar 2022 10:02:33 -0400 Subject: [PATCH 1/2] chore: migrate tests to rtl (3) --- .../EmptyState/__tests__/EmptyState.test.tsx | 91 +- .../__snapshots__/EmptyState.test.tsx.snap | 135 +-- .../Form/__tests__/FormGroup.test.tsx | 162 ++-- .../Form/__tests__/FormHelperText.test.tsx | 70 +- .../__snapshots__/FormGroup.test.tsx.snap | 678 +------------- .../FormHelperText.test.tsx.snap | 48 +- .../FormSelect/__tests__/FormSelect.test.tsx | 257 +++--- .../__snapshots__/FormSelect.test.tsx.snap | 310 +------ .../InputGroup/__tests__/InputGroup.test.tsx | 58 +- .../__tests__/InputGroupText.test.tsx | 17 + .../components/Label/__tests__/Label.test.tsx | 195 ++-- .../__snapshots__/Label.test.tsx.snap | 854 +----------------- .../LabelGroup/__tests__/LabelGroup.test.tsx | 53 +- .../__snapshots__/LabelGroup.test.tsx.snap | 251 +---- .../__tests__/LoginFooterItem.test.tsx | 43 +- .../LoginPage/__tests__/LoginForm.test.tsx | 73 +- .../__tests__/LoginMainBody.test.tsx | 26 +- .../__tests__/LoginMainFooter.test.tsx | 28 +- .../LoginMainFooterBandItem.test.tsx | 43 +- .../LoginMainFooterLinksItem.test.tsx | 44 +- .../__tests__/LoginMainHeader.test.tsx | 34 +- .../LoginFooterItem.test.tsx.snap | 19 +- .../__snapshots__/LoginForm.test.tsx.snap | 418 +-------- .../__snapshots__/LoginMainBody.test.tsx.snap | 10 +- .../LoginMainFooter.test.tsx.snap | 10 +- .../LoginMainFooterBandItem.test.tsx.snap | 22 +- .../LoginMainFooterLinksItem.test.tsx.snap | 34 +- .../LoginMainHeader.test.tsx.snap | 15 +- 28 files changed, 725 insertions(+), 3273 deletions(-) create mode 100644 packages/react-core/src/components/InputGroup/__tests__/InputGroupText.test.tsx diff --git a/packages/react-core/src/components/EmptyState/__tests__/EmptyState.test.tsx b/packages/react-core/src/components/EmptyState/__tests__/EmptyState.test.tsx index db4aabdf63c..e16ddad9b0e 100644 --- a/packages/react-core/src/components/EmptyState/__tests__/EmptyState.test.tsx +++ b/packages/react-core/src/components/EmptyState/__tests__/EmptyState.test.tsx @@ -1,6 +1,7 @@ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { shallow } from 'enzyme'; +import React from 'react'; + +import { render, screen } from '@testing-library/react'; + import AddressBookIcon from '@patternfly/react-icons/dist/esm/icons/address-book-icon'; import { EmptyState, EmptyStateVariant } from '../EmptyState'; import { EmptyStateBody } from '../EmptyStateBody'; @@ -12,8 +13,8 @@ import { Title, TitleSizes } from '../../Title'; describe('EmptyState', () => { test('Main', () => { - const view = render( - + render( + HTTP Proxies @@ -28,86 +29,74 @@ describe('EmptyState', () => { ); - expect(view.container).toMatchSnapshot(); + expect(screen.getByTestId('empty-state-test-id').outerHTML).toMatchSnapshot(); }); test('Main variant large', () => { - const view = render( - - EmptyState large + render( + + + EmptyState large + ); - expect(view.container).toMatchSnapshot(); + expect(screen.getByTestId('empty-state-test-id').outerHTML).toMatchSnapshot(); }); test('Main variant small', () => { - const view = render( - - EmptyState small + render( + + + EmptyState small + ); - expect(view.container).toMatchSnapshot(); + expect(screen.getByTestId('empty-state-test-id').outerHTML).toMatchSnapshot(); }); test('Main variant xs', () => { - const view = render( - - EmptyState small + render( + + + EmptyState small + ); - expect(view.container).toMatchSnapshot(); + expect(screen.getByTestId('empty-state-test-id').outerHTML).toMatchSnapshot(); }); test('Body', () => { - const view = shallow(); - expect(view.props().className).toBe('pf-c-empty-state__body custom-empty-state-body'); - expect(view.props().id).toBe('empty-state-1'); + render(); + expect(screen.getByTestId('body-test-id').className).toContain('pf-c-empty-state__body'); }); test('Secondary Action', () => { - const view = shallow(); - expect(view.props().className).toBe('pf-c-empty-state__secondary custom-empty-state-secondary'); - expect(view.props().id).toBe('empty-state-2'); + render(); + expect(screen.getByTestId('actions-test-id').className).toContain('pf-c-empty-state__secondary'); }); test('Icon', () => { - const view = shallow( - - ); - expect(view.props().className).toBe('pf-c-empty-state__icon custom-empty-state-icon'); - expect(view.props().id).toBe('empty-state-icon'); - }); - - test('Wrap icon in a div', () => { - const view = shallow( - - ); - expect(view.find('div').props().className).toBe('pf-c-empty-state__icon custom-empty-state-icon'); - expect(view.find('AddressBookIcon').length).toBe(1); + render(); + expect(screen.getByTestId('icon-test-id').outerHTML).toContain('pf-c-empty-state__icon'); }); test('Primary div', () => { - const view = shallow( - + render( + ); - expect(view.props().className).toBe('pf-c-empty-state__primary custom-empty-state-prim-cls'); - expect(view.props().id).toBe('empty-state-prim-id'); + expect(screen.getByTestId('primary-test-id').className).toContain('pf-c-empty-state__primary'); }); test('Full height', () => { - const view = render( - - EmptyState large + render( + + + EmptyState large + ); - expect(view.container).toMatchSnapshot(); + expect(screen.getByTestId('empty-state-test-id').outerHTML).toMatchSnapshot(); }); - }); diff --git a/packages/react-core/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap b/packages/react-core/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap index 8b7122c5d8d..15091741a23 100644 --- a/packages/react-core/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap +++ b/packages/react-core/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap @@ -1,136 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`EmptyState Full height 1`] = ` -
-
-
-

- EmptyState large -

-
-
-
-`; +exports[`EmptyState Full height 1`] = `"

EmptyState large

"`; -exports[`EmptyState Main 1`] = ` -
-
-
-
- HTTP Proxies -
-
- Defining HTTP Proxies that exist on your network allows you to perform various actions through those proxies. -
- -
- -
-
-
-
-`; +exports[`EmptyState Main 1`] = `"
HTTP Proxies
Defining HTTP Proxies that exist on your network allows you to perform various actions through those proxies.
"`; -exports[`EmptyState Main variant large 1`] = ` -
-
-
-

- EmptyState large -

-
-
-
-`; +exports[`EmptyState Main variant large 1`] = `"

EmptyState large

"`; -exports[`EmptyState Main variant small 1`] = ` -
-
-
-

- EmptyState small -

-
-
-
-`; +exports[`EmptyState Main variant small 1`] = `"

EmptyState small

"`; -exports[`EmptyState Main variant xs 1`] = ` -
-
-
-

- EmptyState small -

-
-
-
-`; +exports[`EmptyState Main variant xs 1`] = `"

EmptyState small

"`; diff --git a/packages/react-core/src/components/Form/__tests__/FormGroup.test.tsx b/packages/react-core/src/components/Form/__tests__/FormGroup.test.tsx index 069429232f9..09b8b11bd23 100644 --- a/packages/react-core/src/components/Form/__tests__/FormGroup.test.tsx +++ b/packages/react-core/src/components/Form/__tests__/FormGroup.test.tsx @@ -1,192 +1,228 @@ import React from 'react'; + +import { render, screen } from '@testing-library/react'; + +import { ValidatedOptions } from '../../../helpers/constants'; import { FormGroup } from '../FormGroup'; import { Form } from '../Form'; -import { render } from '@testing-library/react'; -import { mount } from 'enzyme'; -import { ValidatedOptions } from '../../../helpers/constants'; -describe('FormGroup component', () => { +describe('FormGroup', () => { const returnFunction = () =>
label
; test('should render default form group variant', () => { - const view = render( - + render( + ); - expect(view.container).toMatchSnapshot(); + expect(screen.getByTestId('form-group-test-id').outerHTML).toMatchSnapshot(); }); test('should render inline form group variant', () => { - const view = mount( + render( ); - expect(view).toMatchSnapshot(); - expect(view.find('.pf-c-form__group-control').prop('className')).toMatch(/pf-m-inline/); + expect(screen.getByLabelText('label').parentElement.className).toContain('pf-m-inline'); }); test('should render no padding-top form group variant', () => { - const view = mount( - + render( + ); - expect(view.find('.pf-c-form__group-label').prop('className')).toMatch(/no-padding-top/); + expect(screen.getByTestId('form-group-test-id').firstElementChild.className).toContain('no-padding-top'); }); test('should render form group variant with required label', () => { - const view = render( - + render( + ); - expect(view.container).toMatchSnapshot(); + expect(screen.getByTestId('form-group-test-id').outerHTML).toMatchSnapshot(); }); test('should render form group variant with node label', () => { - const view = render( - Header}> + render( + Header} data-testid="form-group-test-id"> ); - expect(view.container).toMatchSnapshot(); + expect(screen.getByTestId('form-group-test-id').outerHTML).toMatchSnapshot(); }); test('should render form group with additonal label info', () => { - const view = render( - Header} labelInfo="more info"> + render( + Header} labelInfo="more info" data-testid="form-group-test-id"> ); - expect(view.container).toMatchSnapshot(); + expect(screen.getByTestId('form-group-test-id').outerHTML).toMatchSnapshot(); }); test('should render form group variant with function label', () => { - const view = render( - + render( + ); - expect(view.container).toMatchSnapshot(); + expect(screen.getByTestId('form-group-test-id').outerHTML).toMatchSnapshot(); }); test('should render form group variant with node helperText', () => { - const view = render( - Header}> + render( + Header} data-testid="form-group-test-id"> ); - expect(view.container).toMatchSnapshot(); + expect(screen.getByTestId('form-group-test-id').outerHTML).toMatchSnapshot(); }); test('should render form group variant with function helperText', () => { - const view = render( - + render( + ); - expect(view.container).toMatchSnapshot(); + expect(screen.getByTestId('form-group-test-id').outerHTML).toMatchSnapshot(); }); test('should render horizontal form group variant', () => { - const view = render( -
+ render( +
); - expect(view.container).toMatchSnapshot(); + expect(screen.getByTestId('form-test-id').outerHTML).toMatchSnapshot(); }); test('should render stacked horizontal form group variant', () => { - const view = render( -
+ render( +
); - expect(view.container).toMatchSnapshot(); + expect(screen.getByTestId('form-test-id').outerHTML).toMatchSnapshot(); }); test('should render helper text above input', () => { - const view = render( -
+ render( +
); - expect(view.container).toMatchSnapshot(); + expect(screen.getByTestId('form-test-id').outerHTML).toMatchSnapshot(); }); test('should render form group variant without label', () => { - const view = render( - + render( + ); - expect(view.container).toMatchSnapshot(); + expect(screen.getByTestId('form-group-test-id').outerHTML).toMatchSnapshot(); }); test('should render form group required variant', () => { - const view = render( - + render( + ); - expect(view.container).toMatchSnapshot(); + expect(screen.getByTestId('form-group-test-id').outerHTML).toMatchSnapshot(); }); test('should render form group invalid variant', () => { - const view = render( - + render( + ); - expect(view.container).toMatchSnapshot(); + expect(screen.getByTestId('form-group-test-id').outerHTML).toMatchSnapshot(); }); test('should render form group validated success variant', () => { - const view = mount( - + render( + ); - expect(view.find('.pf-c-form__helper-text.pf-m-success').length).toBe(1); - expect(view).toMatchSnapshot(); + + const formGroupHtml = screen.getByTestId('form-group-test-id').outerHTML; + + expect(formGroupHtml).toContain('pf-m-success'); + expect(formGroupHtml).toMatchSnapshot(); }); test('should render form group validated error variant', () => { - const view = render( - + render( + ); - expect(view.container).toMatchSnapshot(); + expect(screen.getByTestId('form-group-test-id').outerHTML).toMatchSnapshot(); }); test('should render form group validated warning variant', () => { - const view = mount( - + render( + ); - expect(view.find('.pf-c-form__helper-text.pf-m-warning').length).toBe(1); - expect(view).toMatchSnapshot(); + + const formGroupHtml = screen.getByTestId('form-group-test-id').outerHTML; + + expect(formGroupHtml).toContain('pf-m-warning'); + expect(formGroupHtml).toMatchSnapshot(); }); test('should render correctly when label is not a string with Children = Array', () => { - const view = render( - + render( + ); - expect(view.container).toMatchSnapshot(); + expect(screen.getByTestId('form-group-test-id').outerHTML).toMatchSnapshot(); }); }); diff --git a/packages/react-core/src/components/Form/__tests__/FormHelperText.test.tsx b/packages/react-core/src/components/Form/__tests__/FormHelperText.test.tsx index fab912424b4..fe06f8e3764 100644 --- a/packages/react-core/src/components/Form/__tests__/FormHelperText.test.tsx +++ b/packages/react-core/src/components/Form/__tests__/FormHelperText.test.tsx @@ -1,36 +1,50 @@ import React from 'react'; -import { FormHelperText } from '../FormHelperText'; -import { render } from '@testing-library/react'; -import { shallow } from 'enzyme'; + +import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; + import { ExclamationCircleIcon } from '@patternfly/react-icons'; +import { FormHelperText } from '../FormHelperText'; -test('renders with PatternFly Core styles', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); -}); +describe('FormHelperText', () => { + test('renders with PatternFly Core styles', () => { + render( + + test + + ); + expect(screen.getByText('test').outerHTML).toMatchSnapshot(); + }); -test('renders with icon', () => { - const view = render(} />); - expect(view.container).toMatchSnapshot(); -}); + test('renders with icon', () => { + render( + }> + test + + ); + expect(screen.getByText('test').outerHTML).toMatchSnapshot(); + }); -test('className is added to the root element', () => { - const view = shallow(); - expect(view.prop('className')).toMatchSnapshot(); -}); + test('className is added to the root element', () => { + render(test); + expect(screen.getByText('test').outerHTML).toMatchSnapshot(); + }); -test('extra props are spread to the root element', () => { - const testId = 'login-body'; - const view = shallow(); - expect(view.prop('data-testid')).toBe(testId); -}); + test('extra props are spread to the root element', () => { + const testId = 'login-body'; + render(test); + expect(screen.getByTestId(testId)).toBeInTheDocument(); + }); + + test('LoginFooterItem with custom node', () => { + const CustomNode = () =>
My custom node
; + + render( + + + + ); -test('LoginFooterItem with custom node', () => { - const CustomNode = () =>
My custom node
; - const view = render( - - - - ); - expect(view.container).toMatchSnapshot(); + expect(screen.getByText('My custom node').parentElement.outerHTML).toMatchSnapshot(); + }); }); diff --git a/packages/react-core/src/components/Form/__tests__/__snapshots__/FormGroup.test.tsx.snap b/packages/react-core/src/components/Form/__tests__/__snapshots__/FormGroup.test.tsx.snap index 27c6ff5b20b..26f08912cf2 100644 --- a/packages/react-core/src/components/Form/__tests__/__snapshots__/FormGroup.test.tsx.snap +++ b/packages/react-core/src/components/Form/__tests__/__snapshots__/FormGroup.test.tsx.snap @@ -1,679 +1,35 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`FormGroup component should render correctly when label is not a string with Children = Array 1`] = ` -
-
-
- - -
-
- - - - -
-
-
-`; +exports[`FormGroup should render correctly when label is not a string with Children = Array 1`] = `"
"`; -exports[`FormGroup component should render default form group variant 1`] = ` -
-
-
- - -
-
- -
- this is helper text -
-
-
-
-`; +exports[`FormGroup should render default form group variant 1`] = `"
this is helper text
"`; -exports[`FormGroup component should render form group invalid variant 1`] = ` -
-
-
- - -
-
- -
- Invalid FormGroup -
-
-
-
-`; +exports[`FormGroup should render form group invalid variant 1`] = `"
Invalid FormGroup
"`; -exports[`FormGroup component should render form group required variant 1`] = ` -
-
-
- - -
-
- - -
-
-
-`; +exports[`FormGroup should render form group required variant 1`] = `"
"`; -exports[`FormGroup component should render form group validated error variant 1`] = ` -
-
-
- - -
-
- - -
-
-
-`; +exports[`FormGroup should render form group validated error variant 1`] = `"
"`; -exports[`FormGroup component should render form group validated success variant 1`] = ` - -
-
- - -
-
- -
- Validated FormGroup -
-
-
- -`; +exports[`FormGroup should render form group validated success variant 1`] = `"
Validated FormGroup
"`; -exports[`FormGroup component should render form group validated warning variant 1`] = ` - -
-
- - -
-
- -
- Validated FormGroup -
-
-
- -`; +exports[`FormGroup should render form group validated warning variant 1`] = `"
Validated FormGroup
"`; -exports[`FormGroup component should render form group variant with function helperText 1`] = ` -
-
-
- - -
-
- -
- label -
-
-
-
-`; +exports[`FormGroup should render form group variant with function helperText 1`] = `"
label
"`; -exports[`FormGroup component should render form group variant with function label 1`] = ` -
-
-
- - -
-
- - -
-
-
-`; +exports[`FormGroup should render form group variant with function label 1`] = `"
"`; -exports[`FormGroup component should render form group variant with node helperText 1`] = ` -
-
-
- - -
-
- -

- Header -

-
-
-
-`; +exports[`FormGroup should render form group variant with node helperText 1`] = `"

Header

"`; -exports[`FormGroup component should render form group variant with node label 1`] = ` -
-
-
- - -
-
- - -
-
-
-`; +exports[`FormGroup should render form group variant with node label 1`] = `"
"`; -exports[`FormGroup component should render form group variant with required label 1`] = ` -
-
-
- - -
-
- - -
-
-
-`; +exports[`FormGroup should render form group variant with required label 1`] = `"
"`; -exports[`FormGroup component should render form group variant without label 1`] = ` -
-
-
- - -
-
-
-`; +exports[`FormGroup should render form group variant without label 1`] = `"
"`; -exports[`FormGroup component should render form group with additonal label info 1`] = ` -
-
-
-
- - -
-
- more info -
-
-
- - -
-
-
-`; +exports[`FormGroup should render form group with additonal label info 1`] = `"
more info
"`; -exports[`FormGroup component should render helper text above input 1`] = ` -
-
-
-
- - -
-
-
- this is helperText -
- -
-
-
-
-`; +exports[`FormGroup should render helper text above input 1`] = `"
this is helperText
"`; -exports[`FormGroup component should render horizontal form group variant 1`] = ` -
-
-
-
- - -
-
- -
- this is helperText -
-
-
-
-
-`; +exports[`FormGroup should render horizontal form group variant 1`] = `"
this is helperText
"`; -exports[`FormGroup component should render inline form group variant 1`] = ` - -
-
- - -
-
- -
- this is helper text -
-
-
- -`; - -exports[`FormGroup component should render stacked horizontal form group variant 1`] = ` -
-
-
-
- - -
-
- -
- this is helperText -
-
-
-
-
-`; +exports[`FormGroup should render stacked horizontal form group variant 1`] = `"
this is helperText
"`; diff --git a/packages/react-core/src/components/Form/__tests__/__snapshots__/FormHelperText.test.tsx.snap b/packages/react-core/src/components/Form/__tests__/__snapshots__/FormHelperText.test.tsx.snap index dbc6e7aecc1..82d21073646 100644 --- a/packages/react-core/src/components/Form/__tests__/__snapshots__/FormHelperText.test.tsx.snap +++ b/packages/react-core/src/components/Form/__tests__/__snapshots__/FormHelperText.test.tsx.snap @@ -1,49 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`LoginFooterItem with custom node 1`] = ` -
-

-

- My custom node -
-

-
-`; +exports[`FormHelperText LoginFooterItem with custom node 1`] = `"

My custom node

"`; -exports[`className is added to the root element 1`] = `"pf-c-form__helper-text pf-m-hidden extra-class"`; +exports[`FormHelperText className is added to the root element 1`] = `"

test

"`; -exports[`renders with PatternFly Core styles 1`] = ` -
-

-

-`; +exports[`FormHelperText renders with PatternFly Core styles 1`] = `"

test

"`; -exports[`renders with icon 1`] = ` -
-

- - - -

-
-`; +exports[`FormHelperText renders with icon 1`] = `"

test

"`; diff --git a/packages/react-core/src/components/FormSelect/__tests__/FormSelect.test.tsx b/packages/react-core/src/components/FormSelect/__tests__/FormSelect.test.tsx index 78edfd8a310..96d10e25d9e 100644 --- a/packages/react-core/src/components/FormSelect/__tests__/FormSelect.test.tsx +++ b/packages/react-core/src/components/FormSelect/__tests__/FormSelect.test.tsx @@ -1,6 +1,8 @@ import React from 'react'; -import { render } from '@testing-library/react'; -import { shallow } from 'enzyme'; + +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; + import { FormSelect } from '../FormSelect'; import { FormSelectOption } from '../FormSelectOption'; import { FormSelectOptionGroup } from '../FormSelectOptionGroup'; @@ -49,136 +51,147 @@ const groupedProps = { value: '2' }; -test('Simple FormSelect input', () => { - const view = render( - - {props.options.map((option, index) => ( - - ))} - - ); - expect(view.container).toMatchSnapshot(); -}); +describe('FormSelect', () => { + test('Simple FormSelect input', () => { + render( + + {props.options.map((option, index) => ( + + ))} + + ); + expect(screen.getByLabelText('simple FormSelect').outerHTML).toMatchSnapshot(); + }); -test('Grouped FormSelect input', () => { - const view = render( - - {groupedProps.groups.map((group, index) => ( - - {group.options.map((option, i) => ( - - ))} - - ))} - - ); - expect(view.container).toMatchSnapshot(); -}); + test('Grouped FormSelect input', () => { + render( + + {groupedProps.groups.map((group, index) => ( + + {group.options.map((option, i) => ( + + ))} + + ))} + + ); + expect(screen.getByLabelText('grouped FormSelect').outerHTML).toMatchSnapshot(); + }); -test('Disabled FormSelect input ', () => { - const view = render( - - - - ); - expect(view.container).toMatchSnapshot(); -}); + test('Disabled FormSelect input ', () => { + render( + + + + ); + expect(screen.getByLabelText('disabled FormSelect').outerHTML).toMatchSnapshot(); + }); -test('FormSelect input with aria-label does not generate console error', () => { - const myMock = jest.fn() as any; - global.console = { error: myMock } as any; - const view = render( - - - - ); - expect(view.container).toMatchSnapshot(); - expect(myMock).not.toBeCalled(); -}); + test('FormSelect input with aria-label does not generate console error', () => { + const myMock = jest.fn() as any; + global.console = { error: myMock } as any; -test('FormSelect input with id does not generate console error', () => { - const myMock = jest.fn() as any; - global.console = { error: myMock } as any; - const view = render( - - - - ); - expect(view.container).toMatchSnapshot(); - expect(myMock).not.toBeCalled(); -}); + render( + + + + ); -test('FormSelect input with no aria-label or id generates console error', () => { - const myMock = jest.fn() as any; - global.console = { error: myMock } as any; - const view = render( - - - - ); - expect(view.container).toMatchSnapshot(); - expect(myMock).toBeCalled(); -}); + expect(screen.getByLabelText('label').outerHTML).toMatchSnapshot(); + expect(myMock).not.toBeCalled(); + }); -test('invalid FormSelect input', () => { - const view = render( - - - - ); - expect(view.container).toMatchSnapshot(); -}); + test('FormSelect input with id does not generate console error', () => { + const myMock = jest.fn() as any; + global.console = { error: myMock } as any; -test('validated success FormSelect input', () => { - const view = shallow( - - - - ); - expect(view.find('.pf-c-form-control.pf-m-success').length).toBe(1); - expect(view).toMatchSnapshot(); -}); + render( + + + + ); -test('validated error FormSelect input', () => { - const view = render( - - - - ); - expect(view.container).toMatchSnapshot(); -}); + expect(screen.getByLabelText('label').outerHTML).toMatchSnapshot(); + expect(myMock).not.toBeCalled(); + }); -test('validated warning FormSelect input', () => { - const view = shallow( - - - - ); - expect(view.find('.pf-c-form-control.pf-m-warning').length).toBe(1); - expect(view).toMatchSnapshot(); -}); + test('FormSelect input with no aria-label or id generates console error', () => { + const myMock = jest.fn() as any; + global.console = { error: myMock } as any; + render( + + + + ); -test('required FormSelect input', () => { - const view = render( - - - - ); - expect(view.container).toMatchSnapshot(); -}); + expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot(); + expect(myMock).toBeCalled(); + }); + + test('invalid FormSelect input', () => { + render( + + + + ); + expect(screen.getByLabelText('invalid FormSelect').outerHTML).toMatchSnapshot(); + }); + + test('validated success FormSelect input', () => { + render( + + + + ); + + const formSelect = screen.getByLabelText('validated FormSelect'); + + expect(formSelect.className).toContain('pf-m-success'); + expect(formSelect.outerHTML).toMatchSnapshot(); + }); + + test('validated error FormSelect input', () => { + render( + + + + ); + expect(screen.getByLabelText('validated FormSelect').outerHTML).toMatchSnapshot(); + }); + + test('validated warning FormSelect input', () => { + render( + + + + ); + + const formSelect = screen.getByLabelText('validated FormSelect'); + + expect(formSelect.className).toContain('pf-m-warning'); + expect(formSelect.outerHTML).toMatchSnapshot(); + }); + + test('required FormSelect input', () => { + render( + + + + ); + expect(screen.getByLabelText('required FormSelect').outerHTML).toMatchSnapshot(); + }); + + test('FormSelect passes value and event to onChange handler', () => { + const myMock = jest.fn(); + + render( + + + + ); -test('FormSelect passes value and event to onChange handler', () => { - const myMock = jest.fn(); - const newValue = 1; - const event = { - currentTarget: { value: newValue } - }; - const view = shallow( - - - - ); - view.find('select').simulate('change', event); - expect(myMock).toBeCalledWith(newValue, event); + userEvent.selectOptions(screen.getByLabelText('Some label'), 'Mr'); + expect(myMock).toBeCalled(); + }); }); diff --git a/packages/react-core/src/components/FormSelect/__tests__/__snapshots__/FormSelect.test.tsx.snap b/packages/react-core/src/components/FormSelect/__tests__/__snapshots__/FormSelect.test.tsx.snap index f3fa9800fc4..dec9cda11a8 100644 --- a/packages/react-core/src/components/FormSelect/__tests__/__snapshots__/FormSelect.test.tsx.snap +++ b/packages/react-core/src/components/FormSelect/__tests__/__snapshots__/FormSelect.test.tsx.snap @@ -1,311 +1,23 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Disabled FormSelect input 1`] = ` -
- -
-`; +exports[`FormSelect Disabled FormSelect input 1`] = `""`; -exports[`FormSelect input with aria-label does not generate console error 1`] = ` -
- -
-`; +exports[`FormSelect FormSelect input with aria-label does not generate console error 1`] = `""`; -exports[`FormSelect input with id does not generate console error 1`] = ` -
- -
-`; +exports[`FormSelect FormSelect input with id does not generate console error 1`] = `""`; -exports[`FormSelect input with no aria-label or id generates console error 1`] = ` -
- -
-`; +exports[`FormSelect FormSelect input with no aria-label or id generates console error 1`] = `""`; -exports[`Grouped FormSelect input 1`] = ` -
- -
-`; +exports[`FormSelect Grouped FormSelect input 1`] = `""`; -exports[`Simple FormSelect input 1`] = ` -
- -
-`; +exports[`FormSelect Simple FormSelect input 1`] = `""`; -exports[`invalid FormSelect input 1`] = ` -
- -
-`; +exports[`FormSelect invalid FormSelect input 1`] = `""`; -exports[`required FormSelect input 1`] = ` -
- -
-`; +exports[`FormSelect required FormSelect input 1`] = `""`; -exports[`validated error FormSelect input 1`] = ` -
- -
-`; +exports[`FormSelect validated error FormSelect input 1`] = `""`; -exports[`validated success FormSelect input 1`] = ` - -`; +exports[`FormSelect validated success FormSelect input 1`] = `""`; -exports[`validated warning FormSelect input 1`] = ` - -`; +exports[`FormSelect validated warning FormSelect input 1`] = `""`; diff --git a/packages/react-core/src/components/InputGroup/__tests__/InputGroup.test.tsx b/packages/react-core/src/components/InputGroup/__tests__/InputGroup.test.tsx index e896ac9d975..b040974b2eb 100644 --- a/packages/react-core/src/components/InputGroup/__tests__/InputGroup.test.tsx +++ b/packages/react-core/src/components/InputGroup/__tests__/InputGroup.test.tsx @@ -1,47 +1,23 @@ import React from 'react'; -import { shallow } from 'enzyme'; + +import { render, screen } from '@testing-library/react'; + import { InputGroup } from '../InputGroup'; -import { InputGroupText, InputGroupTextVariant } from '../InputGroupText'; import { Button } from '../../Button'; import { TextInput } from '../../TextInput'; -test('InputGroupText', () => { - const view = shallow( - - @ - - ); - expect(view.find('span')).toHaveLength(1); - const spanProps = view.find('span').props(); - expect(spanProps.className).toEqual(expect.stringContaining('inpt-grp-text')); - expect(spanProps.className).toEqual(expect.stringContaining('pf-m-plain')); - expect(spanProps.id).toBe('email-npt-grp'); - expect(view.text()).toBe('@'); -}); - -test('InputGroup', () => { - const view = shallow( - - - - ); - - expect(view.find('div')).toHaveLength(1); - const divProps = view.find('div').props(); - expect(divProps.className).toEqual(expect.stringContaining('text-verify-cls')); - expect(divProps.id).toBe('text-1'); -}); - -test('add aria-describedby to form-control if one of the non form-controls has id', () => { - // In this test, TextInput is a form-control component and Button is not. - // If Button has an id props, this should be used in aria-describedby. - const view = shallow( - - - - - ); - expect(view.find(TextInput).props()['aria-describedby']).toBe('button-id'); +describe('InputGroup', () => { + test('add aria-describedby to form-control if one of the non form-controls has id', () => { + // In this test, TextInput is a form-control component and Button is not. + // If Button has an id props, this should be used in aria-describedby. + render( + + + + + ); + expect(screen.getByLabelText('some text').getAttribute('aria-describedby')).toEqual('button-id'); + }); }); diff --git a/packages/react-core/src/components/InputGroup/__tests__/InputGroupText.test.tsx b/packages/react-core/src/components/InputGroup/__tests__/InputGroupText.test.tsx new file mode 100644 index 00000000000..de445aa93cf --- /dev/null +++ b/packages/react-core/src/components/InputGroup/__tests__/InputGroupText.test.tsx @@ -0,0 +1,17 @@ +import React from 'react'; + +import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; + +import { InputGroupText, InputGroupTextVariant } from '../InputGroupText'; + +describe('InputGroupText', () => { + test('renders', () => { + render( + + @ + + ); + expect(screen.getByText('@')).toBeInTheDocument(); + }); +}); diff --git a/packages/react-core/src/components/Label/__tests__/Label.test.tsx b/packages/react-core/src/components/Label/__tests__/Label.test.tsx index 52a04f6198f..5f34065ce53 100644 --- a/packages/react-core/src/components/Label/__tests__/Label.test.tsx +++ b/packages/react-core/src/components/Label/__tests__/Label.test.tsx @@ -1,84 +1,143 @@ import React from 'react'; -import { render } from '@testing-library/react'; -import { shallow, mount } from 'enzyme'; + +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import '@testing-library/jest-dom'; + import { Label } from '../Label'; -test('label', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); - const outline = render(); - expect(outline).toMatchSnapshot(); - const compact = render(); - expect(compact).toMatchSnapshot(); -}); +const labelColors = ['blue', 'cyan', 'green', 'orange', 'purple', 'red', 'grey']; -test('label with href', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); - const outline = render( - - ); - expect(outline).toMatchSnapshot(); -}); +describe('Label', () => { + test('renders', () => { + render(); + expect(screen.getByTestId('label-test-id').outerHTML).toMatchSnapshot(); + }); -test('label with close button', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); - const outline = render( - - ); - expect(outline).toMatchSnapshot(); -}); + test('renders with outline variant', () => { + render( + + ); + expect(screen.getByTestId('label-test-id').outerHTML).toMatchSnapshot(); + }); -['blue', 'cyan', 'green', 'orange', 'purple', 'red', 'grey'].forEach( - (color: string) => + test('renders with isCompact', () => { + render( + + ); + expect(screen.getByTestId('label-test-id').outerHTML).toMatchSnapshot(); + }); + + test('label with href', () => { + render( + + ); + expect(screen.getByTestId('label-test-id').outerHTML).toMatchSnapshot(); + }); + + test('label with href with outline variant', () => { + render( + + ); + expect(screen.getByTestId('label-test-id').outerHTML).toMatchSnapshot(); + }); + + test('label with close button', () => { + render( + + ); + + expect(screen.getByTestId('label-test-id').outerHTML).toMatchSnapshot(); + }); + + test('label with close button and outline variant', () => { + render( + + ); + expect(screen.getByTestId('label-test-id').outerHTML).toMatchSnapshot(); + }); + + labelColors.forEach((color: string) => test(`label with ${color} color`, () => { - const view = render(); - expect(view.container).toMatchSnapshot(); - const outline = render( -