From 53b14d00fc17221179d42d754f17084ba298a5ec Mon Sep 17 00:00:00 2001 From: Jeff Puzzo Date: Wed, 30 Mar 2022 11:13:03 -0400 Subject: [PATCH 1/3] chore: migrate tests to rtl (4) --- .../__snapshots__/AccessConsole.test.tsx.snap | 1 - .../FormSelect/__tests__/FormSelect.test.tsx | 1 - .../components/List/__tests__/List.test.tsx | 75 +- .../__snapshots__/List.test.tsx.snap | 262 +-- .../components/Menu/__tests__/Menu.test.tsx | 67 +- .../__snapshots__/Menu.test.tsx.snap | 46 +- .../components/Modal/__tests__/Modal.test.tsx | 133 +- .../__tests__/ModalBoxCloseButton.test.tsx | 23 +- .../ModalBoxCloseButton.test.tsx.snap | 16 - .../src/components/Nav/__tests__/Nav.test.tsx | 402 ++-- .../__tests__/__snapshots__/Nav.test.tsx.snap | 1949 +---------------- .../__tests__/NotificationDrawer.test.tsx | 25 +- .../__tests__/NotificationDrawerBody.test.tsx | 25 +- .../NotificationDrawerGroup.test.tsx | 45 +- .../NotificationDrawerGroupList.test.tsx | 25 +- .../NotificationDrawerHeader.test.tsx | 49 +- .../__tests__/NotificationDrawerList.test.tsx | 33 +- .../NotificationDrawerListItem.test.tsx | 46 +- .../NotificationDrawerListItemBody.test.tsx | 27 +- .../NotificationDrawerListItemHeader.test.tsx | 54 +- .../NotificationDrawer.test.tsx.snap | 10 +- .../NotificationDrawerBody.test.tsx.snap | 10 +- .../NotificationDrawerGroup.test.tsx.snap | 143 +- .../NotificationDrawerGroupList.test.tsx.snap | 10 +- .../NotificationDrawerHeader.test.tsx.snap | 84 +- .../NotificationDrawerList.test.tsx.snap | 18 +- .../NotificationDrawerListItem.test.tsx.snap | 11 +- ...tificationDrawerListItemBody.test.tsx.snap | 23 +- ...ficationDrawerListItemHeader.test.tsx.snap | 131 +- .../__tests__/OverflowMenu.test.tsx | 28 +- .../__tests__/OverflowMenuControl.test.tsx | 16 +- .../__tests__/OverflowMenuGroup.test.tsx | 34 +- .../__tests__/OverflowMenuItem.test.tsx | 18 +- .../__snapshots__/OverflowMenu.test.tsx.snap | 38 +- .../OverflowMenuControl.test.tsx.snap | 22 +- .../OverflowMenuGroup.test.tsx.snap | 33 - .../OverflowMenuItem.test.tsx.snap | 24 +- .../__snapshots__/TopologyView.test.tsx.snap | 165 +- 38 files changed, 629 insertions(+), 3493 deletions(-) delete mode 100644 packages/react-core/src/components/Modal/__tests__/__snapshots__/ModalBoxCloseButton.test.tsx.snap delete mode 100644 packages/react-core/src/components/OverflowMenu/__tests__/__snapshots__/OverflowMenuGroup.test.tsx.snap diff --git a/packages/react-console/src/components/AccessConsoles/__tests__/__snapshots__/AccessConsole.test.tsx.snap b/packages/react-console/src/components/AccessConsoles/__tests__/__snapshots__/AccessConsole.test.tsx.snap index 72d3027ded0..e23c1415c0e 100644 --- a/packages/react-console/src/components/AccessConsoles/__tests__/__snapshots__/AccessConsole.test.tsx.snap +++ b/packages/react-console/src/components/AccessConsoles/__tests__/__snapshots__/AccessConsole.test.tsx.snap @@ -53,7 +53,6 @@ exports[`AccessConsoles switching SerialConsole and VncConsole 1`] = ` "value": null, } } - shouldResetOnSelect={true} toggleAriaLabel="Options menu" toggleIcon={null} toggleId="pf-c-console__type-selector" 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 7b984bc210b..b3f650e5688 100644 --- a/packages/react-core/src/components/FormSelect/__tests__/FormSelect.test.tsx +++ b/packages/react-core/src/components/FormSelect/__tests__/FormSelect.test.tsx @@ -4,7 +4,6 @@ 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'; diff --git a/packages/react-core/src/components/List/__tests__/List.test.tsx b/packages/react-core/src/components/List/__tests__/List.test.tsx index da517d44a90..bc1ec07a23d 100644 --- a/packages/react-core/src/components/List/__tests__/List.test.tsx +++ b/packages/react-core/src/components/List/__tests__/List.test.tsx @@ -1,11 +1,12 @@ import React from 'react'; -import { render } from '@testing-library/react'; -import { mount } from 'enzyme'; -import { List, ListVariant, ListComponent, OrderType } from '../List'; -import { ListItem } from '../ListItem'; + +import { render, screen } from '@testing-library/react'; + import BookOpen from '@patternfly/react-icons/dist/esm/icons/book-open-icon'; import Key from '@patternfly/react-icons/dist/esm/icons/key-icon'; import Desktop from '@patternfly/react-icons/dist/esm/icons/desktop-icon'; +import { List, ListVariant, ListComponent, OrderType } from '../List'; +import { ListItem } from '../ListItem'; const ListItems = () => ( @@ -17,104 +18,84 @@ const ListItems = () => ( ); -describe('list', () => { +describe('List', () => { test('simple list', () => { - const view = render( - + render( + ); - expect(view.container).toMatchSnapshot(); + expect(screen.getByTestId('list-test-id').outerHTML).toMatchSnapshot(); }); test('inline list', () => { - const view = render( - + render( + ); - expect(view.container).toMatchSnapshot(); + expect(screen.getByTestId('list-test-id').outerHTML).toMatchSnapshot(); }); test('ordered list', () => { - const view = mount( + render( Apple Banana Orange ); - expect(view.find('ol').length).toBe(1); - }); - - test('ordered list starts with 2nd item', () => { - const view = mount( - - Banana - Orange - - ); - expect(view.find('ol').prop('start')).toBe(2); - }); - - test('ordered list items will be numbered with uppercase letters', () => { - const view = mount( - - Banana - Orange - - ); - expect(view.find('ol').prop('type')).toBe('A'); + expect(screen.getByRole('list').outerHTML).toMatchSnapshot(); }); test('inlined ordered list', () => { - const view = mount( + render( Apple Banana Orange ); - expect(view.find('ol.pf-m-inline').length).toBe(1); + expect(screen.getByRole('list').className).toContain('pf-m-inline'); }); test('bordered list', () => { - const view = render( - + render( + ); - expect(view.container).toMatchSnapshot(); + expect(screen.getByTestId('list-test-id').className).toContain('pf-m-bordered'); }); test('plain list', () => { - const view = render( - + render( + ); - expect(view.container).toMatchSnapshot(); + expect(screen.getByTestId('list-test-id').className).toContain('pf-m-plain'); }); test('icon list', () => { - const view = render( - + render( + }>Apple }>Banana }>Orange ); - expect(view.container).toMatchSnapshot(); + expect(screen.getByTestId('list-test-id').outerHTML).toMatchSnapshot(); }); test('icon large list', () => { - const view = render( - + render( + }>Apple }>Banana }>Orange ); - expect(view.container).toMatchSnapshot(); + expect(screen.getByTestId('list-test-id').outerHTML).toMatchSnapshot(); }); }); diff --git a/packages/react-core/src/components/List/__tests__/__snapshots__/List.test.tsx.snap b/packages/react-core/src/components/List/__tests__/__snapshots__/List.test.tsx.snap index 26f99e727f4..7b8a2703038 100644 --- a/packages/react-core/src/components/List/__tests__/__snapshots__/List.test.tsx.snap +++ b/packages/react-core/src/components/List/__tests__/__snapshots__/List.test.tsx.snap @@ -1,263 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`list bordered list 1`] = ` -
-
    -
      -
    • - First -
      • -
    • - Second -
      • -
    • - Third -
      • -
    -
-
-`; +exports[`List icon large list 1`] = `"
  • Apple
  • Banana
  • Orange
"`; -exports[`list icon large list 1`] = ` -
-
    -
  • - - - - Apple -
    • -
  • - - - - Banana -
    • -
  • - - - - Orange -
    • -
-
-`; +exports[`List icon list 1`] = `"
  • Apple
  • Banana
  • Orange
"`; -exports[`list icon list 1`] = ` -
-
    -
  • - - - - Apple -
    • -
  • - - - - Banana -
    • -
  • - - - - Orange -
    • -
-
-`; +exports[`List inline list 1`] = `"
    • First
    • Second
    • Third
"`; -exports[`list inline list 1`] = ` -
-
    -
      -
    • - First -
      • -
    • - Second -
      • -
    • - Third -
      • -
    -
-
-`; +exports[`List ordered list 1`] = `"
  1. Apple
  2. Banana
  3. Orange
"`; -exports[`list plain list 1`] = ` -
-
    -
      -
    • - First -
      • -
    • - Second -
      • -
    • - Third -
      • -
    -
-
-`; - -exports[`list simple list 1`] = ` -
-
    -
      -
    • - First -
      • -
    • - Second -
      • -
    • - Third -
      • -
    -
-
-`; +exports[`List simple list 1`] = `"
    • First
    • Second
    • Third
"`; diff --git a/packages/react-core/src/components/Menu/__tests__/Menu.test.tsx b/packages/react-core/src/components/Menu/__tests__/Menu.test.tsx index 50e7ad34b16..35aa383d4c9 100644 --- a/packages/react-core/src/components/Menu/__tests__/Menu.test.tsx +++ b/packages/react-core/src/components/Menu/__tests__/Menu.test.tsx @@ -1,46 +1,47 @@ import React from 'react'; -import { render } from '@testing-library/react'; -import { mount } from 'enzyme'; +import { render, screen } from '@testing-library/react'; import { Menu } from '../Menu'; -test('should render Menu successfully', () => { - const view = render( - - content - +describe('Menu', () => { + test('should render Menu successfully', () => { + render( + + content + ); - expect(view.container).toMatchSnapshot(); -}); + expect(screen.getByText('content').outerHTML).toMatchSnapshot(); + }); -describe('with isPlain', () => { + describe('with isPlain', () => { test('should render Menu with plain styles applied', () => { - const view = mount( - - content - - ); - expect(view.find('div.pf-m-plain')).toMatchSnapshot(); + render( + + content + + ); + expect(screen.getByText('content').className).toContain('pf-m-plain'); }); -}); + }); -describe('with isScrollable', () => { + describe('with isScrollable', () => { test('should render Menu with scrollable styles applied', () => { - const view = mount( - - content - - ); - expect(view.find('div.pf-m-scrollable')).toMatchSnapshot(); + render( + + content + + ); + expect(screen.getByText('content').className).toContain('pf-m-scrollable'); }); -}); + }); -describe('with isNavFlyout', () => { + describe('with isNavFlyout', () => { test('should render Menu with nav flyout styles applied', () => { - const view = mount( - - content - - ); - expect(view.find('div.pf-m-nav')).toMatchSnapshot(); + render( + + content + + ); + expect(screen.getByText('content').className).toContain('pf-m-nav'); }); -}); \ No newline at end of file + }); +}); diff --git a/packages/react-core/src/components/Menu/__tests__/__snapshots__/Menu.test.tsx.snap b/packages/react-core/src/components/Menu/__tests__/__snapshots__/Menu.test.tsx.snap index f393c092906..4908c0ab5c9 100644 --- a/packages/react-core/src/components/Menu/__tests__/__snapshots__/Menu.test.tsx.snap +++ b/packages/react-core/src/components/Menu/__tests__/__snapshots__/Menu.test.tsx.snap @@ -1,47 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`should render Menu successfully 1`] = ` -
-
- content -
-
-`; - -exports[`with isNavFlyout should render Menu with nav flyout styles applied 1`] = ` -
- content -
-`; - -exports[`with isPlain should render Menu with plain styles applied 1`] = ` -
- content -
-`; - -exports[`with isScrollable should render Menu with scrollable styles applied 1`] = ` -
- content -
-`; +exports[`Menu should render Menu successfully 1`] = `"
content
"`; diff --git a/packages/react-core/src/components/Modal/__tests__/Modal.test.tsx b/packages/react-core/src/components/Modal/__tests__/Modal.test.tsx index b54795b8654..39af869335b 100644 --- a/packages/react-core/src/components/Modal/__tests__/Modal.test.tsx +++ b/packages/react-core/src/components/Modal/__tests__/Modal.test.tsx @@ -1,10 +1,13 @@ import * as React from 'react'; -import { shallow, mount } from 'enzyme'; -import { KEY_CODES } from '../../../helpers/constants'; + +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import '@testing-library/jest-dom'; + import { css } from '../../../../../react-styles/dist/js'; import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop'; -import { Modal } from '../Modal'; +import { Modal, ModalProps } from '../Modal'; jest.spyOn(document, 'createElement'); jest.spyOn(document.body, 'addEventListener'); @@ -16,76 +19,70 @@ const props = { children: 'modal content' }; -test('Modal creates a container element once for div', () => { - const view = shallow(); - view.update(); - expect(document.createElement).toBeCalledWith('div'); - expect(document.createElement).toHaveBeenCalledTimes(1); -}); +describe('Modal', () => { + test('Modal creates a container element once for div', () => { + render(); + expect(document.createElement).toBeCalledWith('div'); + }); -test('modal closes with escape', () => { - shallow(); - const mock: any = (document.body.addEventListener as any).mock; - const [event, handler] = mock.calls[0]; - expect(event).toBe('keydown'); - handler({ keyCode: KEY_CODES.ESCAPE_KEY }); - expect(props.onClose).toBeCalled(); -}); + test('modal closes with escape', () => { + render(); -test('modal does not call onClose for esc key if it is not open', () => { - shallow(); - const mock: any = (document.body.addEventListener as any).mock; - const [event, handler] = mock.calls[0]; - expect(event).toBe('keydown'); - handler({ keyCode: KEY_CODES.ESCAPE_KEY }); - expect(props.onClose).not.toBeCalled(); -}); + userEvent.type(screen.getByText(props.title), '{esc}'); + expect(props.onClose).toBeCalled(); + }); -test('Each modal is given a new id', () => { - const first = shallow(); - const second = shallow(); - expect((first.instance() as any).descriptorId).not.toBe((second.instance() as any).descriptorId); -}); + test('modal does not call onClose for esc key if it is not open', () => { + render(); + expect(screen.queryByRole('dialog')).toBeNull(); + }); -test('modal removes body backdropOpen class when removed', () => { - const view = shallow(); - view.update(); - expect(document.body.className).toContain(css(styles.backdropOpen)); - view.setProps({ isOpen: false }); - view.update(); - expect(document.body.className).not.toContain(css(styles.backdropOpen)); -}); + test('modal has body backdropOpen class when open', () => { + render(); + expect(document.body.className).toContain(css(styles.backdropOpen)); + }); -test('modal shows/hides the close button based on showClose (default true)', () => { - const view = mount(); - view.update(); - expect(view.exists('.pf-c-modal-box .pf-c-button')).toBeTruthy(); - view.setProps({ showClose: false }); - view.update(); - expect(view.exists('.pf-c-modal-box .pf-c-button')).toBeFalsy(); -}); + test('modal has no body backdropOpen class when not open', () => { + render(); + expect(document.body.className).not.toContain(css(styles.backdropOpen)); + }); -test('modal generates console error when no accessible name is provided', () => { - const props = { - onClose: jest.fn(), - isOpen: true, - children: 'modal content' - }; - const consoleErrorMock = jest.fn(); - global.console = { error: consoleErrorMock } as any; - shallow(); - expect(consoleErrorMock).toBeCalled(); -}); + test('modal shows the close button when showClose is true (true by default)', () => { + render(); + expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument(); + }); + + test('modal does not show the close button when showClose is false', () => { + render(); + expect(screen.queryByRole('button', { name: 'Close' })).toBeNull(); + }); + + test('modal generates console error when no accessible name is provided', () => { + const props = { + onClose: jest.fn(), + isOpen: true, + children: 'modal content' + }; + const consoleErrorMock = jest.fn(); + global.console = { error: consoleErrorMock } as any; + + render(); + + expect(consoleErrorMock).toBeCalled(); + }); + + test('modal generates console warning when conflicting accessible name strategies are provided', () => { + const props = { + hasNoBodyWrapper: true, + onClose: jest.fn(), + isOpen: true, + children: 'modal content' + }; + const consoleErrorMock = jest.fn(); + global.console = { error: consoleErrorMock } as any; + + render(); -test('modal generates console warning when conflicting accessible name strategies are provided', () => { - const props = { - hasNoBodyWrapper: true, - onClose: jest.fn(), - isOpen: true, - children: 'modal content' - }; - const consoleErrorMock = jest.fn(); - global.console = { error: consoleErrorMock } as any; - shallow(); - expect(consoleErrorMock).toBeCalled(); + expect(consoleErrorMock).toBeCalled(); + }); }); diff --git a/packages/react-core/src/components/Modal/__tests__/ModalBoxCloseButton.test.tsx b/packages/react-core/src/components/Modal/__tests__/ModalBoxCloseButton.test.tsx index aa59e59ec92..ef22c97a93f 100644 --- a/packages/react-core/src/components/Modal/__tests__/ModalBoxCloseButton.test.tsx +++ b/packages/react-core/src/components/Modal/__tests__/ModalBoxCloseButton.test.tsx @@ -1,14 +1,17 @@ import * as React from 'react'; -import { shallow } from 'enzyme'; + +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; + import { ModalBoxCloseButton } from '../ModalBoxCloseButton'; -test('ModalBoxCloseButton Test', () => { - const mockfn = jest.fn(); - const view = shallow(); - expect(view).toMatchSnapshot(); - view - .find('.test-box-close-button-class') - .at(0) - .simulate('click'); - expect(mockfn.mock.calls).toHaveLength(1); +describe('ModalBoxCloseButton', () => { + test('onClose called when clicked', () => { + const onClose = jest.fn(); + + render(); + + userEvent.click(screen.getByRole('button')); + expect(onClose).toHaveBeenCalledTimes(1); + }); }); diff --git a/packages/react-core/src/components/Modal/__tests__/__snapshots__/ModalBoxCloseButton.test.tsx.snap b/packages/react-core/src/components/Modal/__tests__/__snapshots__/ModalBoxCloseButton.test.tsx.snap deleted file mode 100644 index 0b9ff6eb67f..00000000000 --- a/packages/react-core/src/components/Modal/__tests__/__snapshots__/ModalBoxCloseButton.test.tsx.snap +++ /dev/null @@ -1,16 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ModalBoxCloseButton Test 1`] = ` - -`; diff --git a/packages/react-core/src/components/Nav/__tests__/Nav.test.tsx b/packages/react-core/src/components/Nav/__tests__/Nav.test.tsx index 37803b8c94c..8e8a770deec 100644 --- a/packages/react-core/src/components/Nav/__tests__/Nav.test.tsx +++ b/packages/react-core/src/components/Nav/__tests__/Nav.test.tsx @@ -1,6 +1,9 @@ import * as React from 'react'; -import { mount } from 'enzyme'; -import { Nav } from '../Nav'; + +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; + +import { Nav, NavContext } from '../Nav'; import { NavList } from '../NavList'; import { NavGroup } from '../NavGroup'; import { NavItem } from '../NavItem'; @@ -20,245 +23,228 @@ beforeEach(() => { window.location.hash = '#link1'; }); -const context = { - onSelect: () => undefined as any, - onToggle: () => undefined as any -}; - -test('Default Nav List', () => { - const view = mount( - , - { context } - ); - expect(view).toMatchSnapshot(); -}); - -test('Dark Nav List', () => { - const view = mount( - , - { context } - ); - expect(view).toMatchSnapshot(); -}); - -test('Default Nav List - Trigger item active update', () => { - window.location.hash = '#link2'; - const view = mount( - , - { context } - ); - view - .find({ href: '#link2' }) - .first() - .simulate('click'); - expect(view).toMatchSnapshot(); -}); - -test('Simple Nav List', () => { - const view = mount( - , - { context } - ); - expect(view).toMatchSnapshot(); -}); +const renderNav = (ui: React.ReactElement>) => + render({ui}); -test('Expandable Nav List', () => { - const view = mount( - + ); + + userEvent.click(screen.getByText('Link 2')); + expect(screen.getByRole('navigation').outerHTML).toMatchSnapshot(); + }); -test('Expandable Nav List - Trigger toggle', () => { - window.location.hash = '#link2'; - const view = mount( - + ); + expect(screen.getByRole('navigation').outerHTML).toMatchSnapshot(); + }); + + test('Expandable Nav List', () => { + renderNav( + + ); + expect(screen.getByRole('navigation').outerHTML).toMatchSnapshot(); + }); + + test('Expandable Nav verify onExpand', () => { + const onExpand = jest.fn(); + + renderNav( + + ); + + userEvent.click(screen.getByRole('button')); + expect(onExpand).toBeCalled(); + }); + + test('Expandable Nav List - Trigger toggle', () => { + window.location.hash = '#link2'; + renderNav( + + ); -test('Expandable Nav List with aria label', () => { - const view = mount( - + ); + expect(screen.getByRole('navigation').outerHTML).toMatchSnapshot(); + }); }); diff --git a/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap b/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap index b928bd8cba3..e523e496165 100644 --- a/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap +++ b/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap @@ -1,1950 +1,25 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Dark Nav List 1`] = ` - -`; +exports[`Nav Dark Nav List 1`] = `""`; -exports[`Default Nav List - Trigger item active update 1`] = ` - -`; +exports[`Nav Default Nav List - Trigger item active update 1`] = `""`; -exports[`Default Nav List 1`] = ` - -`; +exports[`Nav Default Nav List 1`] = `""`; -exports[`Expandable Nav List - Trigger toggle 1`] = ` - -`; +exports[`Nav Expandable Nav List - Trigger toggle 1`] = `""`; -exports[`Expandable Nav List 1`] = ` - -`; +exports[`Nav Expandable Nav List 1`] = `""`; -exports[`Expandable Nav List with aria label 1`] = ` - -`; +exports[`Nav Expandable Nav List with aria label 1`] = `""`; -exports[`Horizontal Nav List 1`] = ` - -`; +exports[`Nav Horizontal Nav List 1`] = `""`; -exports[`Horizontal SubNav List 1`] = ` - -`; +exports[`Nav Horizontal SubNav List 1`] = `""`; -exports[`Nav Grouped List 1`] = ` - -`; +exports[`Nav Nav Grouped List 1`] = `""`; -exports[`Nav List with custom item nodes 1`] = ` - -`; +exports[`Nav Nav List with custom item nodes 1`] = `""`; -exports[`Simple Nav List 1`] = ` - -`; +exports[`Nav Simple Nav List 1`] = `""`; -exports[`Tertiary Nav List 1`] = ` - -`; +exports[`Nav Tertiary Nav List 1`] = `""`; diff --git a/packages/react-core/src/components/NotificationDrawer/__tests__/NotificationDrawer.test.tsx b/packages/react-core/src/components/NotificationDrawer/__tests__/NotificationDrawer.test.tsx index 449d60b9f88..a4b264deb32 100644 --- a/packages/react-core/src/components/NotificationDrawer/__tests__/NotificationDrawer.test.tsx +++ b/packages/react-core/src/components/NotificationDrawer/__tests__/NotificationDrawer.test.tsx @@ -1,20 +1,15 @@ import React from 'react'; +import { render, screen } from '@testing-library/react'; import { NotificationDrawer } from '../NotificationDrawer'; -import { render } from '@testing-library/react'; -import { shallow } from 'enzyme'; -test('renders with PatternFly Core styles', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); -}); - -test('className is added to the root element', () => { - const view = shallow(); - expect(view.prop('className')).toMatchSnapshot(); -}); +describe('NotificationDrawer', () => { + test('renders with PatternFly Core styles', () => { + render(); + expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot(); + }); -test('extra props are spread to the root element', () => { - const testId = 'notification-drawer'; - const view = shallow(); - expect(view.prop('data-testid')).toBe(testId); + test('className is added to the root element', () => { + render(); + expect(screen.getByTestId('test-id').className).toMatchSnapshot(); + }); }); diff --git a/packages/react-core/src/components/NotificationDrawer/__tests__/NotificationDrawerBody.test.tsx b/packages/react-core/src/components/NotificationDrawer/__tests__/NotificationDrawerBody.test.tsx index 5168dd24261..9315a8883ee 100644 --- a/packages/react-core/src/components/NotificationDrawer/__tests__/NotificationDrawerBody.test.tsx +++ b/packages/react-core/src/components/NotificationDrawer/__tests__/NotificationDrawerBody.test.tsx @@ -1,20 +1,15 @@ import React from 'react'; +import { render, screen } from '@testing-library/react'; import { NotificationDrawerBody } from '../NotificationDrawerBody'; -import { render } from '@testing-library/react'; -import { shallow } from 'enzyme'; -test('renders with PatternFly Core styles', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); -}); - -test('className is added to the root element', () => { - const view = shallow(); - expect(view.prop('className')).toMatchSnapshot(); -}); +describe('NotificationDrawerBody', () => { + test('renders with PatternFly Core styles', () => { + const view = render(); + expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot(); + }); -test('extra props are spread to the root element', () => { - const testId = 'notification-drawer'; - const view = shallow(); - expect(view.prop('data-testid')).toBe(testId); + test('className is added to the root element', () => { + const view = render(); + expect(screen.getByTestId('test-id').className).toMatchSnapshot(); + }); }); diff --git a/packages/react-core/src/components/NotificationDrawer/__tests__/NotificationDrawerGroup.test.tsx b/packages/react-core/src/components/NotificationDrawer/__tests__/NotificationDrawerGroup.test.tsx index 5cb52df7a8f..0d7bf422dfd 100644 --- a/packages/react-core/src/components/NotificationDrawer/__tests__/NotificationDrawerGroup.test.tsx +++ b/packages/react-core/src/components/NotificationDrawer/__tests__/NotificationDrawerGroup.test.tsx @@ -1,34 +1,25 @@ import React from 'react'; +import { render, screen } from '@testing-library/react'; import { NotificationDrawerGroup } from '../NotificationDrawerGroup'; -import { render } from '@testing-library/react'; -import { shallow } from 'enzyme'; -test('renders with PatternFly Core styles', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); -}); +describe('NotificationDrawerGroup', () => { + test('renders with PatternFly Core styles', () => { + render(); + expect(screen.getByText('Critical Alerts').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(); + expect(screen.getByText('Critical Alerts').className).toMatchSnapshot(); + }); -test('extra props are spread to the root element', () => { - const testId = 'notification-drawer'; - const view = shallow( - - ); - expect(view.prop('data-testid')).toBe(testId); -}); - -test('drawer group with isExpanded applied ', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); -}); + test('drawer group with isExpanded applied ', () => { + render(); + expect(screen.getByText('Critical Alerts').outerHTML).toMatchSnapshot(); + }); -test('drawer group with isRead applied ', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + test('drawer group with isRead applied ', () => { + render(); + expect(screen.getByText('Critical Alerts').outerHTML).toMatchSnapshot(); + }); }); diff --git a/packages/react-core/src/components/NotificationDrawer/__tests__/NotificationDrawerGroupList.test.tsx b/packages/react-core/src/components/NotificationDrawer/__tests__/NotificationDrawerGroupList.test.tsx index eb824401d78..ee363fffb40 100644 --- a/packages/react-core/src/components/NotificationDrawer/__tests__/NotificationDrawerGroupList.test.tsx +++ b/packages/react-core/src/components/NotificationDrawer/__tests__/NotificationDrawerGroupList.test.tsx @@ -1,20 +1,15 @@ import React from 'react'; +import { render, screen } from '@testing-library/react'; import { NotificationDrawerGroupList } from '../NotificationDrawerGroupList'; -import { render } from '@testing-library/react'; -import { shallow } from 'enzyme'; -test('renders with PatternFly Core styles', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); -}); - -test('className is added to the root element', () => { - const view = shallow(); - expect(view.prop('className')).toMatchSnapshot(); -}); +describe('NotificationDrawerGroupList', () => { + test('renders with PatternFly Core styles', () => { + render(); + expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot(); + }); -test('extra props are spread to the root element', () => { - const testId = 'notification-drawer'; - const view = shallow(); - expect(view.prop('data-testid')).toBe(testId); + test('className is added to the root element', () => { + render(); + expect(screen.getByTestId('test-id').className).toMatchSnapshot(); + }); }); diff --git a/packages/react-core/src/components/NotificationDrawer/__tests__/NotificationDrawerHeader.test.tsx b/packages/react-core/src/components/NotificationDrawer/__tests__/NotificationDrawerHeader.test.tsx index 67b4645c50a..c10c3a6d812 100644 --- a/packages/react-core/src/components/NotificationDrawer/__tests__/NotificationDrawerHeader.test.tsx +++ b/packages/react-core/src/components/NotificationDrawer/__tests__/NotificationDrawerHeader.test.tsx @@ -1,35 +1,30 @@ import React from 'react'; +import { render, screen } from '@testing-library/react'; import { NotificationDrawerHeader } from '../NotificationDrawerHeader'; -import { render } from '@testing-library/react'; -import { shallow } from 'enzyme'; -test('renders with PatternFly Core styles', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); -}); - -test('className is added to the root element', () => { - const view = shallow(); - expect(view.prop('className')).toMatchSnapshot(); -}); +describe('NotificationDrawerHeader', () => { + test('renders with PatternFly Core styles', () => { + render(); + expect(screen.getByText('Notifications').outerHTML).toMatchSnapshot(); + }); -test('extra props are spread to the root element', () => { - const testId = 'notification-drawer'; - const view = shallow(); - expect(view.prop('data-testid')).toBe(testId); -}); + test('className is added to the root element', () => { + render(); + expect(screen.getByText('Notifications').className).toMatchSnapshot(); + }); -test('drawer header with count applied', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); -}); + test('drawer header with count applied', () => { + render(); + expect(screen.getByText('Notifications').outerHTML).toMatchSnapshot(); + }); -test('drawer header with title applied', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); -}); + test('drawer header with title applied', () => { + render(); + expect(screen.getByText('Some Title').outerHTML).toMatchSnapshot(); + }); -test('drawer header with custom unread text applied', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + test('drawer header with custom unread text applied', () => { + render(); + expect(screen.getByText('2 unread alerts').outerHTML).toMatchSnapshot(); + }); }); diff --git a/packages/react-core/src/components/NotificationDrawer/__tests__/NotificationDrawerList.test.tsx b/packages/react-core/src/components/NotificationDrawer/__tests__/NotificationDrawerList.test.tsx index 203e698dc94..bccf4daf9f6 100644 --- a/packages/react-core/src/components/NotificationDrawer/__tests__/NotificationDrawerList.test.tsx +++ b/packages/react-core/src/components/NotificationDrawer/__tests__/NotificationDrawerList.test.tsx @@ -1,25 +1,20 @@ import React from 'react'; +import { render, screen } from '@testing-library/react'; import { NotificationDrawerList } from '../NotificationDrawerList'; -import { render } from '@testing-library/react'; -import { shallow } from 'enzyme'; -test('renders with PatternFly Core styles', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); -}); - -test('className is added to the root element', () => { - const view = shallow(); - expect(view.prop('className')).toMatchSnapshot(); -}); +describe('NotificationDrawerList', () => { + test('renders with PatternFly Core styles', () => { + render(); + expect(screen.getByRole('list').outerHTML).toMatchSnapshot(); + }); -test('extra props are spread to the root element', () => { - const testId = 'notification-drawer'; - const view = shallow(); - expect(view.prop('data-testid')).toBe(testId); -}); + test('className is added to the root element', () => { + render(); + expect(screen.getByRole('list').className).toMatchSnapshot(); + }); -test('drawer list with hidden applied ', () => { - const view = render(