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..e4cb919a622 100644 --- a/packages/react-core/src/components/List/__tests__/List.test.tsx +++ b/packages/react-core/src/components/List/__tests__/List.test.tsx @@ -1,120 +1,120 @@ 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 '@testing-library/jest-dom'; + 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 = () => ( - - - First - Second - Third - - + + First + Second + Third + ); -describe('list', () => { +describe('List', () => { test('simple list', () => { - const view = render( + const { asFragment } = render( ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('inline list', () => { - const view = render( + const { asFragment } = render( ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('ordered list', () => { - const view = mount( + const { asFragment } = render( Apple Banana Orange ); - expect(view.find('ol').length).toBe(1); + expect(asFragment()).toMatchSnapshot(); }); test('ordered list starts with 2nd item', () => { - const view = mount( + render( Banana Orange ); - expect(view.find('ol').prop('start')).toBe(2); + expect(screen.getByRole('list')).toHaveAttribute('start', '2'); }); test('ordered list items will be numbered with uppercase letters', () => { - const view = mount( + render( Banana Orange ); - expect(view.find('ol').prop('type')).toBe('A'); + expect(screen.getByRole('list')).toHaveAttribute('type', 'A'); }); 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')).toHaveClass('pf-m-inline'); }); test('bordered list', () => { - const view = render( + render( ); - expect(view.container).toMatchSnapshot(); + expect(screen.getAllByRole('list')[0]).toHaveClass('pf-m-bordered'); }); test('plain list', () => { - const view = render( + render( ); - expect(view.container).toMatchSnapshot(); + expect(screen.getAllByRole('list')[0]).toHaveClass('pf-m-plain'); }); test('icon list', () => { - const view = render( + const { asFragment } = render( }>Apple }>Banana }>Orange ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('icon large list', () => { - const view = render( - + const { asFragment } = render( + }>Apple }>Banana }>Orange ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).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..14dd687d626 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,35 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`list bordered list 1`] = ` -
- -
-`; - -exports[`list icon large list 1`] = ` -
+exports[`List icon large list 1`] = ` +
    @@ -100,11 +72,11 @@ exports[`list icon large list 1`] = ` Orange
-
+ `; -exports[`list icon list 1`] = ` -
+exports[`List icon list 1`] = ` +
    @@ -175,11 +147,11 @@ exports[`list icon list 1`] = ` Orange
-
+ `; -exports[`list inline list 1`] = ` -
+exports[`List inline list 1`] = ` +
    @@ -203,39 +175,36 @@ exports[`list inline list 1`] = `
-
+ `; -exports[`list plain list 1`] = ` -
- -
+ Apple + +
  • + Banana +
    • +
  • + Orange +
    • + + `; -exports[`list simple list 1`] = ` -
    +exports[`List simple list 1`] = ` +
      @@ -259,5 +228,5 @@ exports[`list simple list 1`] = `
    -
    + `; 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..09404907e6f 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,50 @@ import React from 'react'; -import { render } from '@testing-library/react'; -import { mount } from 'enzyme'; + +import { render, screen } from '@testing-library/react'; +import "@testing-library/jest-dom"; + import { Menu } from '../Menu'; -test('should render Menu successfully', () => { - const view = render( - - content - +describe('Menu', () => { + test('should render Menu successfully', () => { + const { asFragment } = render( + + content + ); - expect(view.container).toMatchSnapshot(); -}); + expect(asFragment()).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')).toHaveClass('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')).toHaveClass('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')).toHaveClass('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..b0d4903d893 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,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`should render Menu successfully 1`] = ` -
    +exports[`Menu 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 -
    + `; 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..094a0abf167 100644 --- a/packages/react-core/src/components/Modal/__tests__/Modal.test.tsx +++ b/packages/react-core/src/components/Modal/__tests__/Modal.test.tsx @@ -1,6 +1,9 @@ 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'; @@ -16,76 +19,71 @@ 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(); + expect(props.onClose).not.toBeCalled(); + }); -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).toHaveClass(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).not.toHaveClass(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..c2c02e4f32f 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'; @@ -15,250 +18,218 @@ const props = { ] }; -// eslint-disable-next-line no-undef -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(); -}); +const renderNav = (ui: React.ReactElement>) => + render({ui}); -test('Simple Nav List', () => { - const view = mount( - , - { context } - ); - expect(view).toMatchSnapshot(); -}); +describe('Nav', () => { + beforeEach(() => { + window.location.hash = '#link1'; + }); -test('Expandable Nav List', () => { - const view = mount( - + ); + + userEvent.click(screen.getByText('Link 2')); + expect(asFragment()).toMatchSnapshot(); + }); + + test('Expandable Nav List', () => { + const { asFragment } = renderNav( + + ); + expect(asFragment()).toMatchSnapshot(); + }); -test('Expandable Nav List with aria label', () => { - const view = mount( - + ); + expect(asFragment()).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..8c75986cf41 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,1098 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Dark Nav List 1`] = ` - + `; -exports[`Default Nav List - Trigger item active update 1`] = ` - + `; -exports[`Default Nav List 1`] = ` - + `; -exports[`Expandable Nav List - Trigger toggle 1`] = ` - + `; -exports[`Expandable Nav List 1`] = ` - -`; - -exports[`Expandable Nav List with aria label 1`] = ` - + `; -exports[`Horizontal Nav List 1`] = ` - + `; -exports[`Horizontal SubNav List 1`] = ` - + `; -exports[`Nav Grouped List 1`] = ` - -`; - -exports[`Nav List with custom item nodes 1`] = ` - + `; -exports[`Simple Nav List 1`] = ` - -`; - -exports[`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..41681a7c446 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,18 @@ import React from '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(); -}); +import { render, screen } from '@testing-library/react'; +import "@testing-library/jest-dom"; -test('className is added to the root element', () => { - const view = shallow(); - expect(view.prop('className')).toMatchSnapshot(); -}); +import { NotificationDrawer } from '../NotificationDrawer'; + +describe('NotificationDrawer', () => { + test('renders with PatternFly Core styles', () => { + const { asFragment } = render(); + expect(asFragment()).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')).toHaveClass('extra-class'); + }); }); 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..c12da82340e 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,18 @@ import React from '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(); -}); +import { render, screen } from '@testing-library/react'; +import "@testing-library/jest-dom"; -test('className is added to the root element', () => { - const view = shallow(); - expect(view.prop('className')).toMatchSnapshot(); -}); +import { NotificationDrawerBody } from '../NotificationDrawerBody'; + +describe('NotificationDrawerBody', () => { + test('renders with PatternFly Core styles', () => { + const { asFragment } = render(); + expect(asFragment()).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')).toHaveClass('extra-class'); + }); }); 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..417e753d06b 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,28 @@ import React from '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(); -}); +import { render, screen } from '@testing-library/react'; +import "@testing-library/jest-dom"; -test('className is added to the root element', () => { - const view = shallow( - - ); - expect(view.prop('className')).toMatchSnapshot(); -}); +import { NotificationDrawerGroup } from '../NotificationDrawerGroup'; -test('extra props are spread to the root element', () => { - const testId = 'notification-drawer'; - const view = shallow( - - ); - expect(view.prop('data-testid')).toBe(testId); -}); +describe('NotificationDrawerGroup', () => { + test('renders with PatternFly Core styles', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); -test('drawer group with isExpanded applied ', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); -}); + test('className is added to the root element', () => { + render(); + expect(screen.getByTestId('test-id')).toHaveClass('extra-class'); + }); + + test('drawer group with isExpanded applied ', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); -test('drawer group with isRead applied ', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + test('drawer group with isRead applied ', () => { + const { asFragment } = render(); + expect(asFragment()).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..55104200325 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,18 @@ import React from '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(); -}); +import { render, screen } from '@testing-library/react'; +import "@testing-library/jest-dom"; -test('className is added to the root element', () => { - const view = shallow(); - expect(view.prop('className')).toMatchSnapshot(); -}); +import { NotificationDrawerGroupList } from '../NotificationDrawerGroupList'; + +describe('NotificationDrawerGroupList', () => { + test('renders with PatternFly Core styles', () => { + const { asFragment } = render(); + expect(asFragment()).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')).toHaveClass('extra-class'); + }); }); 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..7c450b42288 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,33 @@ import React from '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(); -}); +import { render, screen } from '@testing-library/react'; +import "@testing-library/jest-dom"; -test('className is added to the root element', () => { - const view = shallow(); - expect(view.prop('className')).toMatchSnapshot(); -}); +import { NotificationDrawerHeader } from '../NotificationDrawerHeader'; -test('extra props are spread to the root element', () => { - const testId = 'notification-drawer'; - const view = shallow(); - expect(view.prop('data-testid')).toBe(testId); -}); +describe('NotificationDrawerHeader', () => { + test('renders with PatternFly Core styles', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); -test('drawer header with count applied', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); -}); + test('className is added to the root element', () => { + render(); + expect(screen.getByText('Notifications').parentElement).toHaveClass('extra-class'); + }); -test('drawer header with title applied', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); -}); + test('drawer header with count applied', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); + + test('drawer header with title applied', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); -test('drawer header with custom unread text applied', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + test('drawer header with custom unread text applied', () => { + const { asFragment } = render(); + expect(asFragment()).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..3b467611f76 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,23 @@ import React from '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(); -}); +import { render, screen } from '@testing-library/react'; +import "@testing-library/jest-dom"; -test('className is added to the root element', () => { - const view = shallow(); - expect(view.prop('className')).toMatchSnapshot(); -}); +import { NotificationDrawerList } from '../NotificationDrawerList'; -test('extra props are spread to the root element', () => { - const testId = 'notification-drawer'; - const view = shallow(); - expect(view.prop('data-testid')).toBe(testId); -}); +describe('NotificationDrawerList', () => { + test('renders with PatternFly Core styles', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); + + test('className is added to the root element', () => { + render(); + expect(screen.getByRole('list')).toHaveClass('extra-class'); + }); -test('drawer list with hidden applied ', () => { - const view = render(