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..da0e6a508f1 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,8 @@ -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 "@testing-library/jest-dom"; + import AddressBookIcon from '@patternfly/react-icons/dist/esm/icons/address-book-icon'; import { EmptyState, EmptyStateVariant } from '../EmptyState'; import { EmptyStateBody } from '../EmptyStateBody'; @@ -12,8 +14,8 @@ import { Title, TitleSizes } from '../../Title'; describe('EmptyState', () => { test('Main', () => { - const view = render( - + render( + HTTP Proxies @@ -28,58 +30,59 @@ 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')).toHaveClass('custom-empty-state-body 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')).toHaveClass('custom-empty-state-secondary 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'); + render(); + expect(screen.getByTestId('icon-test-id').outerHTML).toContain('pf-c-empty-state__icon'); }); test('Wrap icon in a div', () => { - const view = shallow( + const view = render( { id="empty-state-icon" /> ); - expect(view.find('div').props().className).toBe('pf-c-empty-state__icon custom-empty-state-icon'); - expect(view.find('AddressBookIcon').length).toBe(1); - }); + + expect(view.container.querySelector('div')).toHaveClass('pf-c-empty-state__icon custom-empty-state-icon'); + expect(view.container.querySelector('svg')).toBeInTheDocument(); + }) 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..051c79f1cc9 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,217 @@ import React from 'react'; + +import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; + +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( + const { asFragment } = render( ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).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).toHaveClass('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).toHaveClass('pf-m-no-padding-top'); }); test('should render form group variant with required label', () => { - const view = render( + const { asFragment } = render( ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('should render form group variant with node label', () => { - const view = render( + const { asFragment } = render( Header}> ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('should render form group with additonal label info', () => { - const view = render( + const { asFragment } = render( Header} labelInfo="more info"> ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('should render form group variant with function label', () => { - const view = render( + render( ); - expect(view.container).toMatchSnapshot(); + + expect(screen.getByText('label')).toBeInTheDocument(); }); test('should render form group variant with node helperText', () => { - const view = render( + render( Header}> ); - expect(view.container).toMatchSnapshot(); + + expect(screen.getByRole('heading', { name: 'Header' })).toBeInTheDocument(); }); test('should render form group variant with function helperText', () => { - const view = render( + render( ); - expect(view.container).toMatchSnapshot(); + + expect(screen.getByText('label')).toBeInTheDocument(); }); test('should render horizontal form group variant', () => { - const view = render( + const { asFragment } = render(
); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('should render stacked horizontal form group variant', () => { - const view = render( + const { asFragment } = render(
); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('should render helper text above input', () => { - const view = render( + const { asFragment } = render(
); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('should render form group variant without label', () => { - const view = render( + const { asFragment } = render( ); - expect(view.container).toMatchSnapshot(); - }); - - test('should render form group required variant', () => { - const view = render( - - - - ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('should render form group invalid variant', () => { - const view = render( - + const { asFragment } = render( + ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('should render form group validated success variant', () => { - const view = mount( - + const { asFragment } = render( + ); - expect(view.find('.pf-c-form__helper-text.pf-m-success').length).toBe(1); - expect(view).toMatchSnapshot(); + + expect(screen.getByTestId('form-group-test-id').querySelector('input + div')).toHaveClass('pf-m-success'); + expect(asFragment()).toMatchSnapshot(); }); test('should render form group validated error variant', () => { - const view = render( - + const { asFragment } = render( + ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('should render form group validated warning variant', () => { - const view = mount( - + const { asFragment } = render( + ); - expect(view.find('.pf-c-form__helper-text.pf-m-warning').length).toBe(1); - expect(view).toMatchSnapshot(); + + expect(screen.getByTestId('form-group-test-id').querySelector('input + div')).toHaveClass('pf-m-warning'); + expect(asFragment()).toMatchSnapshot(); }); test('should render correctly when label is not a string with Children = Array', () => { - const view = render( + const { asFragment } = render( ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).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..a1cf9815318 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,7 +1,7 @@ // 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`] = ` +
@@ -32,14 +32,13 @@ exports[`FormGroup component should render correctly when label is not a string id="id" /> -
- + `; -exports[`FormGroup component should render default form group variant 1`] = ` -
+exports[`FormGroup should render default form group variant 1`] = ` +
@@ -73,11 +72,11 @@ exports[`FormGroup component should render default form group variant 1`] = `
- + `; -exports[`FormGroup component should render form group invalid variant 1`] = ` -
+exports[`FormGroup should render form group invalid variant 1`] = ` +
@@ -111,11 +110,11 @@ exports[`FormGroup component should render form group invalid variant 1`] = `
- + `; -exports[`FormGroup component should render form group required variant 1`] = ` -
+exports[`FormGroup should render form group validated error variant 1`] = ` +
@@ -124,20 +123,13 @@ exports[`FormGroup component should render form group required variant 1`] = ` >
@@ -147,16 +139,16 @@ exports[`FormGroup component 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 success variant 1`] = ` +
- - -
-
-
-`; - -exports[`FormGroup component should render form group validated success variant 1`] = ` - -
-
- - -
-
Validated FormGroup
- + `; -exports[`FormGroup component should render form group validated warning variant 1`] = ` - +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 component should render form group variant with function label 1`] = ` -
-
-
- - -
-
- - -
-
-
-`; - -exports[`FormGroup component 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`] = ` +
@@ -401,14 +250,13 @@ exports[`FormGroup component 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`] = ` +
@@ -428,8 +276,7 @@ exports[`FormGroup component should render form group variant with required labe aria-hidden="true" class="pf-c-form__label-required" > - - * + * @@ -440,14 +287,13 @@ exports[`FormGroup component should render form group variant with required labe -
- + `; -exports[`FormGroup component should render form group variant without label 1`] = ` -
+exports[`FormGroup should render form group variant without label 1`] = ` +
@@ -457,14 +303,13 @@ exports[`FormGroup component should render form group variant without label 1`] -
- + `; -exports[`FormGroup component should render form group with additonal label info 1`] = ` -
+exports[`FormGroup should render form group with additonal label info 1`] = ` +
@@ -500,14 +345,13 @@ exports[`FormGroup component should render form group with additonal label info -
- + `; -exports[`FormGroup component should render helper text above input 1`] = ` -
+exports[`FormGroup should render helper text above input 1`] = ` +
- + `; -exports[`FormGroup component should render horizontal form group variant 1`] = ` -
+exports[`FormGroup should render horizontal form group variant 1`] = ` +
- -`; - -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`] = ` -
+exports[`FormGroup should render stacked horizontal form group variant 1`] = ` +
- + `; 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..7b984bc210b 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,10 @@ 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 '@testing-library/jest-dom'; + +import { Form } from '../../Form'; import { FormSelect } from '../FormSelect'; import { FormSelectOption } from '../FormSelectOption'; import { FormSelectOptionGroup } from '../FormSelectOptionGroup'; @@ -49,136 +53,141 @@ 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 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')).toHaveAttribute('required'); + }); + + test('FormSelect passes value and event to onChange handler', () => { + const myMock = jest.fn(); + + render( + + + + ); + + userEvent.selectOptions(screen.getByLabelText('Some label'), 'Mr'); -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); + expect(myMock).toBeCalled(); + expect(myMock.mock.calls[0][0]).toEqual('mr'); + }); }); 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..2cf1a416d87 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,19 @@ // 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 validated success FormSelect input 1`] = `""`; -exports[`validated error FormSelect input 1`] = ` -
- -
-`; - -exports[`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( -