diff --git a/packages/react-core/src/components/Dropdown/__tests__/DropdownToggleCheckbox.test.tsx b/packages/react-core/src/components/Dropdown/__tests__/DropdownToggleCheckbox.test.tsx index d7db8376ea2..7d505b84250 100644 --- a/packages/react-core/src/components/Dropdown/__tests__/DropdownToggleCheckbox.test.tsx +++ b/packages/react-core/src/components/Dropdown/__tests__/DropdownToggleCheckbox.test.tsx @@ -54,6 +54,6 @@ describe('DropdownToggleCheckbox', () => { render(); userEvent.click(screen.getByRole('checkbox')); - expect(props.onChange.mock.calls[0][0]).toBe(true); + expect(props.onChange).toHaveBeenCalledWith(true, expect.any(Object)); }); }); diff --git a/packages/react-core/src/components/Page/__tests__/Generated/Page.test.tsx b/packages/react-core/src/components/Page/__tests__/Generated/Page.test.tsx deleted file mode 100644 index 512e98ffbb4..00000000000 --- a/packages/react-core/src/components/Page/__tests__/Generated/Page.test.tsx +++ /dev/null @@ -1,28 +0,0 @@ -/** - * This test was generated - */ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { Page } from '../../Page'; -// any missing imports can usually be resolved by adding them here -import {} from '../..'; - -it('Page should match snapshot (auto-generated)', () => { - const view = render( - ReactNode} - className={"''"} - header={null} - sidebar={null} - skipToContent={null} - role={'string'} - mainContainerId={'null'} - isManagedSidebar={false} - defaultManagedSidebarIsOpen={true} - onPageResize={(): void => null} - breadcrumb={null} - mainAriaLabel={'string'} - /> - ); - expect(view.container).toMatchSnapshot(); -}); diff --git a/packages/react-core/src/components/Page/__tests__/Generated/__snapshots__/Page.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/Generated/__snapshots__/Page.test.tsx.snap deleted file mode 100644 index eb35b855cbc..00000000000 --- a/packages/react-core/src/components/Page/__tests__/Generated/__snapshots__/Page.test.tsx.snap +++ /dev/null @@ -1,19 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Page should match snapshot (auto-generated) 1`] = ` -
-
-
- ReactNode -
-
-
-`; diff --git a/packages/react-core/src/components/Page/__tests__/Page.test.tsx b/packages/react-core/src/components/Page/__tests__/Page.test.tsx index 4e1800d3fd0..4006f7eaa08 100644 --- a/packages/react-core/src/components/Page/__tests__/Page.test.tsx +++ b/packages/react-core/src/components/Page/__tests__/Page.test.tsx @@ -1,6 +1,8 @@ import * as 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 { Page } from '../Page'; import { PageHeader } from '../PageHeader'; import { PageSidebar } from '../PageSidebar'; @@ -18,135 +20,88 @@ const props = { className: 'my-page-class' }; -test('Check page vertical layout example against snapshot', () => { - const Header = undefined} />; - const Sidebar = ; - const view = render( - - Section with default background - Section with light background - Section with dark background - Section with darker background - - ); - expect(view.container).toMatchSnapshot(); -}); +describe('Page', () => { + test('Check page vertical layout example against snapshot', () => { + const Header = undefined} />; + const Sidebar = ; -test('Check dark page against snapshot', () => { - const Header = undefined} />; - const Sidebar = ; - const view = render( - - Section with default background - Section with light background - Section with dark background - Section with darker background - - ); - expect(view.container).toMatchSnapshot(); -}); + const { asFragment } = render( + + Section with default background + Section with light background + Section with dark background + Section with darker background + + ); -test('Check page horizontal layout example against snapshot', () => { - const Header = ; - const Sidebar = ; - const view = render( - - Section with default background - Section with light background - Section with dark background - Section with darker background - - ); - expect(view.container).toMatchSnapshot(); -}); + expect(asFragment()).toMatchSnapshot(); + }); -test('Check page to verify breadcrumb is created', () => { - const Header = ; - const Sidebar = ; - const PageBreadcrumb = () => ( - - Section Home - Section Title - Section Title - - Section Landing - - - ); - const view = mount( - }> - Section with default background - Section with light background - Section with dark background - Section with darker background - - ); - expect(view).toMatchSnapshot(); - expect(view.find('.pf-c-page__main').getDOMNode().id).toBe(''); -}); + test('Check dark page against snapshot', () => { + const Header = undefined} />; + const Sidebar = ; -test('Check page to verify breadcrumb is created - PageBreadcrumb syntax', () => { - const Header = ; - const Sidebar = ; + const { asFragment } = render( + + Section with default background + Section with light background + Section with dark background + Section with darker background + + ); - const view = mount( - - - - Section Home - Section Title - Section Title - - Section Landing - - - - Section with default background - Section with light background - Section with dark background - Section with darker background - - ); - expect(view).toMatchSnapshot(); - expect(view.find('.pf-c-page__main').getDOMNode().id).toBe(''); -}); + expect(asFragment()).toMatchSnapshot(); + }); -test('Check page to verify nav is created - PageNavigation syntax', () => { - const Header = ; - const Sidebar = ; + test('Check page horizontal layout example against snapshot', () => { + const Header = ; + const Sidebar = ; - const view = mount( - - - - - Section with default background - Section with light background - Section with dark background - Section with darker background - - ); - expect(view).toMatchSnapshot(); - expect(view.find('.pf-c-page__main').getDOMNode().id).toBe(''); -}); + const { asFragment } = render( + + Section with default background + Section with light background + Section with dark background + Section with darker background + + ); -test('Check page to verify grouped nav and breadcrumb - new components syntax', () => { - const Header = ; - const Sidebar = ; + expect(asFragment()).toMatchSnapshot(); + }); + + test('Check page to verify breadcrumb is created', () => { + const Header = ; + const Sidebar = ; + const PageBreadcrumb = () => ( + + Section Home + Section Title + Section Title + + Section Landing + + + ); - const view = mount( - - + const { asFragment } = render( + }> + Section with default background + Section with light background + Section with dark background + Section with darker background + + ); + + expect(screen.getByRole('main')).not.toHaveAttribute('id'); + expect(asFragment()).toMatchSnapshot(); + }); + + test('Check page to verify breadcrumb is created - PageBreadcrumb syntax', () => { + const Header = ; + const Sidebar = ; + + const { asFragment } = render( + Section Home @@ -157,6 +112,23 @@ test('Check page to verify grouped nav and breadcrumb - new components syntax', + Section with default background + Section with light background + Section with dark background + Section with darker background + + ); + + expect(screen.getByRole('main')).not.toHaveAttribute('id'); + expect(asFragment()).toMatchSnapshot(); + }); + + test('Check page to verify nav is created - PageNavigation syntax', () => { + const Header = ; + const Sidebar = ; + + const { asFragment } = render( + - - Section with default background - Section with light background - Section with dark background - Section with darker background - - ); - expect(view).toMatchSnapshot(); - expect(view.find('.pf-c-page__main').getDOMNode().id).toBe(''); -}); + Section with default background + Section with light background + Section with dark background + Section with darker background + + ); + + expect(screen.getByRole('main')).not.toHaveAttribute('id'); + expect(asFragment()).toMatchSnapshot(); + }); + + test('Check page to verify grouped nav and breadcrumb - new components syntax', () => { + const Header = ; + const Sidebar = ; + + const { asFragment } = render( + + + + + Section Home + Section Title + Section Title + + Section Landing + + + + + + + + Section with default background + Section with light background + Section with dark background + Section with darker background + + ); + + expect(screen.getByRole('main')).not.toHaveAttribute('id'); + expect(asFragment()).toMatchSnapshot(); + }); + + test('Check page to verify grouped nav and breadcrumb - old / props syntax', () => { + const Header = ; + const Sidebar = ; + const crumb = ( + + + Section Home + Section Title + Section Title + + Section Landing + + + + ); + const nav = ( + + ); + + const { asFragment } = render( + + Section with default background + Section with light background + Section with dark background + Section with darker background + + ); -test('Check page to verify grouped nav and breadcrumb - old / props syntax', () => { - const Header = ; - const Sidebar = ; - const crumb = ( - + expect(screen.getByRole('main')).not.toHaveAttribute('id'); + expect(asFragment()).toMatchSnapshot(); + }); + + test('Check page to verify skip to content points to main content region', () => { + const Header = ; + const Sidebar = ; + const PageBreadcrumb = ( Section Home Section Title @@ -194,73 +258,29 @@ test('Check page to verify grouped nav and breadcrumb - old / props syntax', () Section Landing - - ); - const nav = ( - - ); - const view = mount( - - Section with default background - Section with light background - Section with dark background - Section with darker background - - ); - expect(view).toMatchSnapshot(); - expect(view.find('.pf-c-page__main').getDOMNode().id).toBe(''); -}); + ); + const mainId = 'main-content-page-layout-test-nav'; + const PageSkipToContent = Skip to Content; + + const { asFragment } = render( + + Section with default background + Section with light background + Section with dark background + Section with darker background + + ); -test('Check page to verify skip to content points to main content region', () => { - const Header = ; - const Sidebar = ; - const PageBreadcrumb = ( - - Section Home - Section Title - Section Title - - Section Landing - - - ); - const mainId = 'main-content-page-layout-test-nav'; - const PageSkipToContent = Skip to Content; - const view = mount( - - Section with default background - Section with light background - Section with dark background - Section with darker background - - ); - expect(view).toMatchSnapshot(); - expect(view.find('.pf-c-page').getDOMNode().id).toBe(props.id); - expect(view.find('.pf-c-page__main').getDOMNode().id).toBe(mainId); + expect(screen.getByRole('main')).toHaveAttribute('id', mainId); + expect(screen.getByTestId('page-test-id')).toHaveAttribute('id', props.id); + expect(asFragment()).toMatchSnapshot(); + }); }); diff --git a/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap index 7b70c639c60..dfa2c9fb4a3 100644 --- a/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap +++ b/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Check dark page against snapshot 1`] = ` -
+exports[`Page Check dark page against snapshot 1`] = ` +
-
+ `; -exports[`Check page horizontal layout example against snapshot 1`] = ` -
+exports[`Page Check page horizontal layout example against snapshot 1`] = ` +
-
+ `; -exports[`Check page to verify breadcrumb is created - PageBreadcrumb syntax 1`] = ` - - } - id="PageId" - isBreadcrumbWidthLimited={false} - isManagedSidebar={false} - isNotificationDrawerExpanded={false} - mainTabIndex={-1} - onNotificationDrawerExpand={[Function]} - onPageResize={[Function]} - sidebar={ - - } -> +exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax 1`] = ` +
- -
- -
- Navigation -
- PageHeaderTools | Avatar -
- - + Logo + +
-
+ Navigation
- + PageHeaderTools | Avatar + +
+
+
- -
+
- - + + + + Section Landing + + + + + +
-
- Section with default background -
- - +
-
- Section with light background -
- - +
-
- Section with dark background -
- - +
-
- Section with darker background -
- + Section with darker background +
- + `; -exports[`Check page to verify breadcrumb is created 1`] = ` -} - className="my-page-class" - defaultManagedSidebarIsOpen={true} - getBreakpoint={[Function]} - header={ - - } - id="PageId" - isBreadcrumbWidthLimited={false} - isManagedSidebar={false} - isNotificationDrawerExpanded={false} - mainTabIndex={-1} - onNotificationDrawerExpand={[Function]} - onPageResize={[Function]} - sidebar={ - - } -> +exports[`Page Check page to verify breadcrumb is created 1`] = ` +
- -
- -
- Navigation -
- PageHeaderTools | Avatar -
- - + Logo + +
-
+ Navigation
- + PageHeaderTools | Avatar + +
+
+
- - - - - + + + + + Section Landing + + + +
- -
- Section with default background -
- - +
-
- Section with light background -
- - +
-
- Section with dark background -
- - +
-
- Section with darker background -
- + Section with darker background +
- + `; -exports[`Check page to verify grouped nav and breadcrumb - new components syntax 1`] = ` - - } - id="PageId" - isBreadcrumbWidthLimited={false} - isManagedSidebar={false} - isNotificationDrawerExpanded={false} - mainTabIndex={-1} - onNotificationDrawerExpand={[Function]} - onPageResize={[Function]} - sidebar={ - - } -> +exports[`Page Check page to verify grouped nav and breadcrumb - new components syntax 1`] = ` +
- -
- -
- Navigation -
- PageHeaderTools | Avatar -
- - + Logo + +
-
+ Navigation
- + PageHeaderTools | Avatar + +
+
+
- -
- -
+
    - - - -
- - -
- -
- -
- - -
- Section with default background -
- - -
- Section with light background -
- - -
- Section with dark background + + + + + Section Title + + +
  • + + + + + Section Landing + +
    • + +
    -     - -
    - Section with darker background -
    -     -
    -
    - -`; - -exports[`Check page to verify grouped nav and breadcrumb - old / props syntax 1`] = ` - - - - Section Home - - - Section Title - - - Section Title - - - Section Landing - - - - } - className="my-page-class" - defaultManagedSidebarIsOpen={true} - getBreakpoint={[Function]} - groupProps={ - Object { - "hasShadowTop": true, - "sticky": "bottom", - } - } - header={ - - } - id="PageId" - isBreadcrumbGrouped={true} - isBreadcrumbWidthLimited={false} - isManagedSidebar={false} - isNotificationDrawerExpanded={false} - isTertiaryNavGrouped={true} - mainTabIndex={-1} - onNotificationDrawerExpand={[Function]} - onPageResize={[Function]} - sidebar={ - - } - tertiaryNav={ - - } -> -
    - -
    - -
    - Navigation -
    - PageHeaderTools | Avatar -
    -     - -
    -
    -
    - -
    - -
    -
    - -
    -
    - -
    + +
  • - - - -
    • -     -
    + + Policy + + +
  • + + Authentication + +
    • +
  • + + Network Services + +
    • +
  • + + Server + +
    • + + +
    -     - +
    -
    - Section with default background -
    - - +
    -
    - Section with light background -
    - - +
    -
    - Section with dark background -
    - - +
    -
    - Section with darker background -
    - + Section with darker background +
    - + `; -exports[`Check page to verify nav is created - PageNavigation syntax 1`] = ` - - } - id="PageId" - isBreadcrumbWidthLimited={false} - isManagedSidebar={false} - isNotificationDrawerExpanded={false} - mainTabIndex={-1} - onNotificationDrawerExpand={[Function]} - onPageResize={[Function]} - sidebar={ - - } -> +exports[`Page Check page to verify grouped nav and breadcrumb - old / props syntax 1`] = ` +
    - -
    - -
    - Navigation -
    - PageHeaderTools | Avatar -
    -     - + Logo + +
    -
    + Navigation
    - + PageHeaderTools | Avatar + +
    +
    +
    - +
    - +
    +
    +
    - -
    -     - -
    - Section with default background +
    -     - +
    -
    - Section with light background -
    - - +
    -
    - Section with dark background -
    - - +
    -
    - Section with darker background -
    - + Section with dark background +
    +
    + Section with darker background +
    - + `; -exports[`Check page to verify skip to content points to main content region 1`] = ` - - - Section Home - - - Section Title - - +
    +
    +
    - Section Title - - + Logo + +
    +
    - Section Landing - - - } - className="my-page-class" - defaultManagedSidebarIsOpen={true} - getBreakpoint={[Function]} - header={ - - } - id="PageId" - isBreadcrumbWidthLimited={false} - isManagedSidebar={false} - isNotificationDrawerExpanded={false} - mainContainerId="main-content-page-layout-test-nav" - mainTabIndex={-1} - onNotificationDrawerExpand={[Function]} - onPageResize={[Function]} - sidebar={ - - } - skipToContent={ - + PageHeaderTools | Avatar +
    +
    - Skip to Content - - } -> +
    +
    +
    +
    + +
    +
    + Section with default background +
    +
    + Section with light background +
    +
    + Section with dark background +
    +
    + Section with darker background +
    +
    +
    + +`; + +exports[`Page Check page to verify skip to content points to main content region 1`] = ` +
    - - - Skip to Content - - - +
    -
    - -
    - Navigation -
    - PageHeaderTools | Avatar -
    - - + Logo + +
    -
    + Navigation
    - + PageHeaderTools | Avatar + +
    +
    +
    - - - + + + + + Section Landing + + + +
    - -
    - Section with default background -
    -     - +
    -
    - Section with light background -
    - - +
    -
    - Section with dark background -
    - - +
    -
    - Section with darker background -
    - + Section with darker background +
    - + `; -exports[`Check page vertical layout example against snapshot 1`] = ` -
    +exports[`Page Check page vertical layout example against snapshot 1`] = ` +
    -
    + `; diff --git a/packages/react-core/src/components/Pagination/__tests__/Generated/Pagination.test.tsx b/packages/react-core/src/components/Pagination/__tests__/Generated/Pagination.test.tsx deleted file mode 100644 index d490dcb4aed..00000000000 --- a/packages/react-core/src/components/Pagination/__tests__/Generated/Pagination.test.tsx +++ /dev/null @@ -1,58 +0,0 @@ -/** - * This test was generated - */ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { Pagination } from '../../Pagination'; -// any missing imports can usually be resolved by adding them here -import {} from '../..'; - -it('Pagination should match snapshot (auto-generated)', () => { - const view = render( - ReactNode} - className={"''"} - itemCount={42} - variant={'top'} - isDisabled={false} - isCompact={false} - perPage={42} - perPageOptions={[ - { - title: '10', - value: 10 - }, - { - title: '20', - value: 20 - }, - { - title: '50', - value: 50 - }, - { - title: '100', - value: 100 - } - ]} - defaultToFullPage={false} - firstPage={1} - page={0} - offset={0} - itemsStart={null} - itemsEnd={null} - widgetId={"'pagination-options-menu'"} - dropDirection={'up'} - titles={undefined} - toggleTemplate={'string'} - onSetPage={() => undefined} - onFirstClick={() => undefined} - onPreviousClick={() => undefined} - onNextClick={() => undefined} - onLastClick={() => undefined} - onPageInput={() => undefined} - onPerPageSelect={() => undefined} - /> - ); - expect(view.container).toMatchSnapshot(); -}); diff --git a/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/Pagination.test.tsx.snap b/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/Pagination.test.tsx.snap deleted file mode 100644 index 639db873b34..00000000000 --- a/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/Pagination.test.tsx.snap +++ /dev/null @@ -1,205 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Pagination should match snapshot (auto-generated) 1`] = ` -
    -
    -
    - string -
    -
    -
    - - string - - -
    -
    - - ReactNode -
    -
    -`; diff --git a/packages/react-core/src/components/Pagination/__tests__/Pagination.test.tsx b/packages/react-core/src/components/Pagination/__tests__/Pagination.test.tsx index 071f6b9c221..de4b8b4686b 100644 --- a/packages/react-core/src/components/Pagination/__tests__/Pagination.test.tsx +++ b/packages/react-core/src/components/Pagination/__tests__/Pagination.test.tsx @@ -1,332 +1,284 @@ import React from 'react'; -import { render } from '@testing-library/react'; -import { mount } from 'enzyme'; -import { Pagination, PaginationVariant } from '../index'; - -describe('component render', () => { - test('should render correctly top', () => { - const wrapper = render(); - expect(wrapper.container).toMatchSnapshot(); - }); - test('should render correctly bottom', () => { - const wrapper = render(); - expect(wrapper.container).toMatchSnapshot(); - }); - - test('should render correctly compact', () => { - const wrapper = render(); - expect(wrapper.container).toMatchSnapshot(); - }); +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import '@testing-library/jest-dom'; - test('should render correctly sticky', () => { - const wrapper = render(); - expect(wrapper.container).toMatchSnapshot(); - }); - - test('should render correctly bottom sticky', () => { - const wrapper = render(); - expect(wrapper.container).toMatchSnapshot(); - }); - - test('should render correctly disabled', () => { - const wrapper = render(); - expect(wrapper.container).toMatchSnapshot(); - }); - - test('limited number of pages', () => { - const wrapper = render(); - expect(wrapper.container).toMatchSnapshot(); - }); - - test('zero results', () => { - const wrapper = render(); - expect(wrapper.container).toMatchSnapshot(); - }); - - test('last page', () => { - const wrapper = render(); - expect(wrapper.container).toMatchSnapshot(); - }); - - test('custom perPageOptions', () => { - const wrapper = render(); - expect(wrapper.container).toMatchSnapshot(); - }); - - test('empty per page options', () => { - const wrapper = render(); - expect(wrapper.container).toMatchSnapshot(); - }); - - test('no items', () => { - const wrapper = render(); - expect(wrapper.container).toMatchSnapshot(); - }); - - test('custom start end', () => { - const wrapper = render(); - expect(wrapper.container).toMatchSnapshot(); - }); - - test('titles', () => { - const wrapper = render(); - expect(wrapper.container).toMatchSnapshot(); - }); +import { Pagination, PaginationVariant } from '../index'; - test('custom pagination toggle', () => { - const wrapper = render( - // eslint-disable-next-line no-template-curly-in-string - - ); - expect(wrapper.container).toMatchSnapshot(); - }); +describe('Pagination', () => { + describe('component render', () => { + test('should render correctly top', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); - test('up drop direction', () => { - const wrapper = render(); - expect(wrapper.container).toMatchSnapshot(); - }); + test('should render correctly bottom', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); - test('indeterminate count (no item count)', () => { - const toggle = mount( - - ).find('span.pf-c-options-menu__toggle-text'); - expect(toggle.find('b').at(0).text()).toBe('1 - 10'); - expect(toggle).toMatchSnapshot(); - }); + test('should render correctly compact', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); - test('toggleTemplate toggle text with function', () => { - const toggle = mount( - (
    {firstIndex} - {lastIndex} of many
    )} /> - ).find('span.pf-c-options-menu__toggle-text'); - expect(toggle.find('div').text()).toBe('1 - 10 of many'); - expect(toggle).toMatchSnapshot(); - }); + test('should render correctly sticky', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); - test('toggleTemplate toggle text with string', () => { - const toggle = mount( - - ).find('span.pf-c-options-menu__toggle-text'); - expect(toggle.text()).toBe('I am a string'); - expect(toggle).toMatchSnapshot(); - }); -}); + test('should render correctly bottom sticky', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); -describe('API', () => { - describe('onSetPage', () => { - const onSetPage = jest.fn(); - - test('should call first', () => { - const wrapper = mount(); - wrapper - .find('[data-action="first"]') - .first() - .simulate('click'); - expect(onSetPage.mock.calls).toHaveLength(1); - expect(onSetPage.mock.calls[0][1]).toBe(1); + test('should render correctly disabled', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); - test('should call previous', () => { - const wrapper = mount(); - wrapper - .find('[data-action="previous"]') - .first() - .simulate('click'); - expect(onSetPage.mock.calls).toHaveLength(1); - expect(onSetPage.mock.calls[0][1]).toBe(2); + test('limited number of pages', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); - test('should call next', () => { - const wrapper = mount(); - wrapper - .find('[data-action="next"]') - .first() - .simulate('click'); - expect(onSetPage.mock.calls).toHaveLength(1); - expect(onSetPage.mock.calls[0][1]).toBe(2); + test('zero results', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); - test('should call last', () => { - const wrapper = mount(); - wrapper - .find('[data-action="last"]') - .first() - .simulate('click'); - expect(onSetPage.mock.calls).toHaveLength(1); - expect(onSetPage.mock.calls[0][1]).toBe(4); + test('last page', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); - test('should call input', () => { - const wrapper = mount(); - wrapper - .find('input') - .first() - .simulate('change', { target: { value: '1' } }) - .simulate('keydown', { keyCode: 13 }); - expect(onSetPage.mock.calls).toHaveLength(1); - expect(onSetPage.mock.calls[0][1]).toBe(1); + test('custom perPageOptions', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); - test('should call input wrong value', () => { - const wrapper = mount(); - wrapper - .find('input') - .first() - .simulate('change', { target: { value: 'a' } }) - .simulate('keydown', { keyCode: 13 }); - expect(onSetPage.mock.calls).toHaveLength(1); - expect(onSetPage.mock.calls[0][1]).toBe(1); + test('empty per page options', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); - test('should call input huge page number', () => { - const wrapper = mount(); - wrapper - .find('input') - .first() - .simulate('change', { target: { value: '10' } }) - .simulate('keydown', { keyCode: 13 }); - expect(onSetPage.mock.calls).toHaveLength(1); - expect(onSetPage.mock.calls[0][1]).toBe(4); + test('custom start end', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); - test('should call input small page number', () => { - const wrapper = mount(); - wrapper - .find('input') - .first() - .simulate('change', { target: { value: '-10' } }) - .simulate('keydown', { keyCode: 13 }); - expect(onSetPage.mock.calls).toHaveLength(1); - expect(onSetPage.mock.calls[0][1]).toBe(1); + test('titles', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); - test('should NOT call', () => { - const wrapper = mount(); - wrapper - .find('[data-action="last"]') - .first() - .simulate('click'); - expect(onSetPage.mock.calls).toHaveLength(0); + test('custom pagination toggle', () => { + const { asFragment } = render( + + ); + expect(asFragment()).toMatchSnapshot(); }); - }); - describe('onFirst', () => { - const onFirst = jest.fn(); - test('should call', () => { - const wrapper = mount(); - wrapper - .find('[data-action="first"]') - .first() - .simulate('click'); - expect(onFirst.mock.calls).toHaveLength(1); - expect(onFirst.mock.calls[0][1]).toBe(1); + test('up drop direction', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); - test('should NOT call', () => { - const wrapper = mount(); - wrapper - .find('[data-action="first"]') - .first() - .simulate('click'); - expect(onFirst.mock.calls).toHaveLength(0); + test('indeterminate count (no item count)', () => { + render(); + expect(screen.getAllByText('1 - 10')[0]).toBeInTheDocument(); }); - }); - describe('onLast', () => { - const onLast = jest.fn(); - test('should call', () => { - const wrapper = mount(); - wrapper - .find('[data-action="last"]') - .first() - .simulate('click'); - expect(onLast.mock.calls).toHaveLength(1); - expect(onLast.mock.calls[0][1]).toBe(4); + test('toggleTemplate toggle text with function', () => { + render( + ( +
    + {firstIndex} - {lastIndex} of many +
    + )} + /> + ); + expect(screen.getAllByText('1 - 10 of many')[0]).toBeInTheDocument(); }); - test('should NOT call', () => { - const wrapper = mount(); - wrapper - .find('[data-action="last"]') - .first() - .simulate('click'); - expect(onLast.mock.calls).toHaveLength(0); + test('toggleTemplate toggle text with string', () => { + render(); + expect(screen.getAllByText('I am a string')[0]).toBeInTheDocument(); }); }); - describe('onPrevious', () => { - const onPrevious = jest.fn(); - test('should call', () => { - const wrapper = mount(); - wrapper - .find('[data-action="previous"]') - .first() - .simulate('click'); - expect(onPrevious.mock.calls).toHaveLength(1); - expect(onPrevious.mock.calls[0][1]).toBe(2); + describe('API', () => { + describe('onSetPage', () => { + const onSetPage = jest.fn(); + + test('should call first', () => { + render(); + + userEvent.click(screen.getByRole('button', { name: 'Go to first page' })); + expect(onSetPage).toHaveBeenCalled(); + }); + + test('should call previous', () => { + render(); + + userEvent.click(screen.getByRole('button', { name: 'Go to previous page' })); + expect(onSetPage).toHaveBeenCalled(); + }); + + test('should call next', () => { + render(); + + userEvent.click(screen.getByRole('button', { name: 'Go to next page' })); + expect(onSetPage).toHaveBeenCalled(); + }); + + test('should call last', () => { + render(); + + userEvent.click(screen.getByRole('button', { name: 'Go to last page' })); + expect(onSetPage).toHaveBeenCalled(); + }); + + test('should call input', () => { + render(); + + const input = screen.getByLabelText('Current page'); + userEvent.type(input, '1'); + userEvent.type(input, '{enter}'); + + expect(onSetPage).toHaveBeenCalled(); + }); + + test('should call input wrong value', () => { + render(); + + const input = screen.getByLabelText('Current page'); + userEvent.type(input, 'a'); + userEvent.type(input, '{enter}'); + + expect(onSetPage).toHaveBeenCalled(); + }); + + test('should call input huge page number', () => { + render(); + + const input = screen.getByLabelText('Current page'); + userEvent.type(input, '10'); + userEvent.type(input, '{enter}'); + + expect(onSetPage).toHaveBeenCalled(); + }); + + test('should call input small page number', () => { + render(); + + const input = screen.getByLabelText('Current page'); + userEvent.type(input, '-10'); + userEvent.type(input, '{enter}'); + + expect(onSetPage).toHaveBeenCalled(); + }); + + test('should NOT call', () => { + render(); + + userEvent.click(screen.getByRole('button', { name: 'Go to last page' })); + expect(onSetPage).not.toHaveBeenCalled(); + }); }); - test('should NOT call', () => { - const wrapper = mount(); - wrapper - .find('[data-action="previous"]') - .first() - .simulate('click'); - expect(onPrevious.mock.calls).toHaveLength(0); + describe('onFirst', () => { + const onFirst = jest.fn(); + test('should call', () => { + render(); + + userEvent.click(screen.getByRole('button', { name: 'Go to first page' })); + expect(onFirst).toHaveBeenCalled(); + }); + + test('should NOT call', () => { + render(); + + userEvent.click(screen.getByRole('button', { name: 'Go to first page' })); + expect(onFirst).not.toHaveBeenCalled(); + }); }); - }); - describe('onNext', () => { - const onNext = jest.fn(); - test('should call', () => { - const wrapper = mount(); - wrapper - .find('[data-action="next"]') - .first() - .simulate('click'); - expect(onNext.mock.calls).toHaveLength(1); - expect(onNext.mock.calls[0][1]).toBe(2); + describe('onLast', () => { + const onLast = jest.fn(); + test('should call', () => { + render(); + + userEvent.click(screen.getByRole('button', { name: 'Go to last page' })); + expect(onLast).toHaveBeenCalled(); + }); + + test('should NOT call', () => { + render(); + + userEvent.click(screen.getByRole('button', { name: 'Go to last page' })); + expect(onLast).not.toHaveBeenCalled(); + }); }); - test('should NOT call', () => { - const wrapper = mount(); - wrapper - .find('[data-action="previous"]') - .first() - .simulate('click'); - expect(onNext.mock.calls).toHaveLength(0); + describe('onPrevious', () => { + const onPrevious = jest.fn(); + test('should call', () => { + render(); + + userEvent.click(screen.getByRole('button', { name: 'Go to previous page' })); + expect(onPrevious).toHaveBeenCalled(); + }); + + test('should NOT call', () => { + render(); + + userEvent.click(screen.getByRole('button', { name: 'Go to previous page' })); + expect(onPrevious).not.toHaveBeenCalled(); + }); }); - }); - describe('onPerPage', () => { - const onPerPage = jest.fn(); - test('should call', () => { - const wrapper = mount(); - wrapper - .find('.pf-c-options-menu button') - .first() - .simulate('click'); - wrapper.update(); - wrapper - .find('ul li [data-action="per-page-20"]') - .first() - .simulate('click'); - expect(onPerPage.mock.calls).toHaveLength(1); - expect(onPerPage.mock.calls[0][1]).toBe(20); + describe('onNext', () => { + const onNext = jest.fn(); + test('should call', () => { + render(); + + userEvent.click(screen.getByRole('button', { name: 'Go to next page' })); + expect(onNext).toHaveBeenCalled(); + }); + + test('should NOT call', () => { + render(); + + userEvent.click(screen.getByRole('button', { name: 'Go to previous page' })); + expect(onNext).not.toHaveBeenCalled(); + }); }); - test('should NOT call', () => { - const wrapper = mount(); - wrapper - .find('.pf-c-options-menu button') - .first() - .simulate('click'); - wrapper.update(); - wrapper - .find('ul li [data-action="per-page-20"]') - .first() - .simulate('click'); - expect(onPerPage.mock.calls).toHaveLength(0); + describe('onPerPage', () => { + const onPerPage = jest.fn(); + test('should call', () => { + render(); + + userEvent.click(screen.getByRole('button', { name: 'Items per page' })); + userEvent.click(screen.getByText('20 per page')); + + expect(onPerPage).toHaveBeenCalled(); + }); + + test('should NOT call', () => { + render(); + + userEvent.click(screen.getByRole('button', { name: 'Items per page' })); + userEvent.click(screen.getByText('20 per page')); + + expect(onPerPage).not.toHaveBeenCalled(); + }); }); }); }); diff --git a/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap b/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap index d33f730edc1..6d92aa8ffda 100644 --- a/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap +++ b/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap @@ -1,13 +1,13 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`component render custom pagination toggle 1`] = ` -
    +exports[`Pagination component render custom pagination toggle 1`] = ` +
    -
    +     `; -exports[`component render custom perPageOptions 1`] = ` -
    +exports[`Pagination component render custom perPageOptions 1`] = ` +
    - -9 - - - 10 + -9 - 10 - - of - + of 40 -
    - -9 - - - 10 + -9 - 10 - - of - + of 40 -
    -
    + `; -exports[`component render custom start end 1`] = ` -
    +exports[`Pagination component render custom start end 1`] = ` +
    - -9 - - - 10 + -9 - 10 - - of - + of 40 -
    - 5 - - - 15 + 5 - 15 - - of - + of 40 -
    -
    +     `; -exports[`component render empty per page options 1`] = ` -
    +exports[`Pagination component render empty per page options 1`] = ` +
    - -9 - - - 10 + -9 - 10 - - of - + of 40 -
    -
    -`; - -exports[`component render indeterminate count (no item count) 1`] = ` - - - - 1 - - - 10 - - - of - - - 0 - - - - + `; -exports[`component render last page 1`] = ` -
    +exports[`Pagination component render last page 1`] = ` +
    - 11 - - - 20 + 11 - 20 - - of - + of 20 -
    - 11 - - - 20 + 11 - 20 - - of - + of 20 -
    -
    + `; -exports[`component render limited number of pages 1`] = ` -
    +exports[`Pagination component render limited number of pages 1`] = ` +
    - -19 - - - 20 + -19 - 20 - - of - + of 20 -
    - -19 - - - 20 + -19 - 20 - - of - + of 20 -
    -
    + `; -exports[`component render no items 1`] = ` -
    -
    -
    - - 0 - - - 0 - - - of - - - 0 - - - -
    -
    -
    - - - 0 - - - 0 - - - of - - - 0 - - - - - -
    -
    - -
    -
    -`; - -exports[`component render should render correctly bottom 1`] = ` -
    +exports[`Pagination component render should render correctly bottom 1`] = ` +
    - -9 - - - 10 + -9 - 10 - - of - + of 20 -
    -
    + `; -exports[`component render should render correctly bottom sticky 1`] = ` -
    +exports[`Pagination component render should render correctly bottom sticky 1`] = ` +
    - -9 - - - 10 + -9 - 10 - - of - + of 20 -
    -
    + `; -exports[`component render should render correctly compact 1`] = ` -
    +exports[`Pagination component render should render correctly compact 1`] = ` +
    - -9 - - - 10 + -9 - 10 - - of - + of 20 -
    - -9 - - - 10 + -9 - 10 - - of - + of 20 -
    -
    + `; -exports[`component render should render correctly disabled 1`] = ` -
    +exports[`Pagination component render should render correctly disabled 1`] = ` +
    - -9 - - - 10 + -9 - 10 - - of - + of 20 -
    - -9 - - - 10 + -9 - 10 - - of - + of 20 -
    -
    + `; -exports[`component render should render correctly sticky 1`] = ` -
    +exports[`Pagination component render should render correctly sticky 1`] = ` +
    - -9 - - - 10 + -9 - 10 - - of - + of 20 -
    - -9 - - - 10 + -9 - 10 - - of - + of 20 -
    -
    + `; -exports[`component render should render correctly top 1`] = ` -
    +exports[`Pagination component render should render correctly top 1`] = ` +
    - -9 - - - 10 + -9 - 10 - - of - + of 20 -
    - -9 - - - 10 + -9 - 10 - - of - + of 20 -
    -
    + `; -exports[`component render titles 1`] = ` -
    +exports[`Pagination component render titles 1`] = ` +
    - -9 - - - 10 + -9 - 10 - - of - + of 40 - - values + values
    - -9 - - - 10 + -9 - 10 - - of - + of 40 - - values + values
    -
    -`; - -exports[`component render toggleTemplate toggle text with function 1`] = ` - - -
    - 1 - - - 10 - of many -
    -     -     -`; - -exports[`component render toggleTemplate toggle text with string 1`] = ` - - I am a string - +     `; -exports[`component render up drop direction 1`] = ` -
    +exports[`Pagination component render up drop direction 1`] = ` +
    - -9 - - - 10 + -9 - 10 - - of - + of 40 -
    - -9 - - - 10 + -9 - 10 - - of - + of 40 -
    -
    +     `; -exports[`component render zero results 1`] = ` -
    +exports[`Pagination component render zero results 1`] = ` +
    - 0 - - - 0 + 0 - 0 - - of - + of 0 -
    - 0 - - - 0 + 0 - 0 - - of - + of 0 -
    -
    + `; diff --git a/packages/react-core/src/components/Radio/__tests__/Generated/Radio.test.tsx b/packages/react-core/src/components/Radio/__tests__/Generated/Radio.test.tsx deleted file mode 100644 index ef8271b40f6..00000000000 --- a/packages/react-core/src/components/Radio/__tests__/Generated/Radio.test.tsx +++ /dev/null @@ -1,29 +0,0 @@ -/** - * This test was generated - */ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { Radio } from '../../Radio'; -// any missing imports can usually be resolved by adding them here -import {} from '../..'; - -it('Radio should match snapshot (auto-generated)', () => { - const view = render( - ReactNode
    } - name={'string'} - onChange={() => {}} - aria-label={'string'} - description={
    ReactNode
    } - /> - ); - expect(view.container).toMatchSnapshot(); -}); diff --git a/packages/react-core/src/components/Radio/__tests__/Generated/__snapshots__/Radio.test.tsx.snap b/packages/react-core/src/components/Radio/__tests__/Generated/__snapshots__/Radio.test.tsx.snap deleted file mode 100644 index 0d18ea20c20..00000000000 --- a/packages/react-core/src/components/Radio/__tests__/Generated/__snapshots__/Radio.test.tsx.snap +++ /dev/null @@ -1,36 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Radio should match snapshot (auto-generated) 1`] = ` -
    - -
    -`; diff --git a/packages/react-core/src/components/Radio/__tests__/Radio.test.tsx b/packages/react-core/src/components/Radio/__tests__/Radio.test.tsx index a703d758250..b2b04371821 100644 --- a/packages/react-core/src/components/Radio/__tests__/Radio.test.tsx +++ b/packages/react-core/src/components/Radio/__tests__/Radio.test.tsx @@ -1,96 +1,90 @@ -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 userEvent from '@testing-library/user-event'; +import '@testing-library/jest-dom'; + import { Radio } from '../Radio'; const props = { onChange: jest.fn() }; -describe('Radio check component', () => { +describe('Radio', () => { test('controlled', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('uncontrolled', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('isDisabled', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('isLabelBeforeButton', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('isLabelWrapped', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('label is string', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('label is function', () => { const functionLabel = () =>

    Header

    ; - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('label is node', () => { - const view = render(Header} id="check" isChecked aria-label="check" name="check" />); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(Header} id="check" isChecked aria-label="check" name="check" />); + expect(asFragment()).toMatchSnapshot(); }); test('passing class', () => { - const view = render( - - ); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('passing HTML attribute', () => { - const view = render( - - ); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('Radio passes value and event to onChange handler', () => { - const newValue = true; - const event = { - currentTarget: { checked: newValue } - }; - const view = shallow(); - view.find('input').simulate('change', event); - expect(props.onChange).toBeCalledWith(newValue, event); + render(); + + userEvent.click(screen.getByRole('radio')); + expect(props.onChange).toHaveBeenCalledWith(true, expect.any(Object)); }); test('Radio description', () => { - const view = shallow(); - const descriptionEl = view.find('span[className="pf-c-radio__description"]'); - expect(descriptionEl.length).toBe(1); - expect(descriptionEl.text()).toBe('Text description...'); + render(); + expect(screen.getByText('Text description...')).toBeInTheDocument(); }); test('Radio body', () => { - const view = shallow(); - const bodyEl = view.find('span[className="pf-c-radio__body"]'); - expect(bodyEl.length).toBe(1); - expect(bodyEl.text()).toBe('Text body...'); + render(); + expect(screen.getByText('Text body...')).toBeInTheDocument(); }); test('should throw console error when no id is given', () => { const myMock = jest.fn(); global.console = { ...global.console, error: myMock }; - shallow(); + + render(); + expect(myMock).toBeCalled(); }); }); diff --git a/packages/react-core/src/components/Radio/__tests__/__snapshots__/Radio.test.tsx.snap b/packages/react-core/src/components/Radio/__tests__/__snapshots__/Radio.test.tsx.snap index 08414720a01..4c97d87e65f 100644 --- a/packages/react-core/src/components/Radio/__tests__/__snapshots__/Radio.test.tsx.snap +++ b/packages/react-core/src/components/Radio/__tests__/__snapshots__/Radio.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Radio check component controlled 1`] = ` -
    +exports[`Radio controlled 1`] = ` +
    @@ -18,11 +18,11 @@ exports[`Radio check component controlled 1`] = ` type="radio" />
    -
    + `; -exports[`Radio check component isDisabled 1`] = ` -
    +exports[`Radio isDisabled 1`] = ` +
    @@ -39,11 +39,11 @@ exports[`Radio check component isDisabled 1`] = ` type="radio" />
    -
    + `; -exports[`Radio check component isLabelBeforeButton 1`] = ` -
    +exports[`Radio isLabelBeforeButton 1`] = ` +
    @@ -64,11 +64,11 @@ exports[`Radio check component isLabelBeforeButton 1`] = ` type="radio" />
    -
    + `; -exports[`Radio check component isLabelWrapped 1`] = ` -
    +exports[`Radio isLabelWrapped 1`] = ` + -
    + `; -exports[`Radio check component label is function 1`] = ` -
    +exports[`Radio label is function 1`] = ` +
    @@ -117,11 +117,11 @@ exports[`Radio check component label is function 1`] = `
    -
    + `; -exports[`Radio check component label is node 1`] = ` -
    +exports[`Radio label is node 1`] = ` +
    @@ -145,11 +145,11 @@ exports[`Radio check component label is node 1`] = `
    -
    + `; -exports[`Radio check component label is string 1`] = ` -
    +exports[`Radio label is string 1`] = ` +
    @@ -171,11 +171,11 @@ exports[`Radio check component label is string 1`] = ` Label
    -
    + `; -exports[`Radio check component passing HTML attribute 1`] = ` -
    +exports[`Radio passing HTML attribute 1`] = ` +
    @@ -198,11 +198,11 @@ exports[`Radio check component passing HTML attribute 1`] = ` label
    -
    + `; -exports[`Radio check component passing class 1`] = ` -
    +exports[`Radio passing class 1`] = ` +
    @@ -224,11 +224,11 @@ exports[`Radio check component passing class 1`] = ` label
    -
    + `; -exports[`Radio check component uncontrolled 1`] = ` -
    +exports[`Radio uncontrolled 1`] = ` +
    @@ -244,5 +244,5 @@ exports[`Radio check component uncontrolled 1`] = ` type="radio" />
    -
    + `; diff --git a/packages/react-core/src/components/SearchInput/__tests__/SearchInput.test.tsx b/packages/react-core/src/components/SearchInput/__tests__/SearchInput.test.tsx index a3f436f2506..7fc87c75105 100644 --- a/packages/react-core/src/components/SearchInput/__tests__/SearchInput.test.tsx +++ b/packages/react-core/src/components/SearchInput/__tests__/SearchInput.test.tsx @@ -1,6 +1,9 @@ import React from 'react'; -import { render } from '@testing-library/react'; -import { mount } from 'enzyme'; + +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import '@testing-library/jest-dom'; + import { SearchInput } from '../SearchInput'; import { FormGroup } from '../../Form'; import { Button } from '../../Button'; @@ -15,76 +18,92 @@ const props = { onSearch: jest.fn() }; -test('simple search input', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); -}); +describe('SearchInput', () => { + test('simple search input', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); -test('search input with hint', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); -}); + test('search input with hint', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); -test('result count', () => { - const view = mount(); - expect(view.find('.pf-c-badge')).toMatchSnapshot(); -}); + test('result count', () => { + render(); + expect(screen.getByTestId('test-id').querySelector('.pf-c-badge')).toBeInTheDocument(); + }); -test('navigable search results', () => { - const view = mount( - ); - expect(view.find('.pf-c-search-input__nav')).toMatchSnapshot(); - expect(view.find('.pf-c-badge')).toMatchSnapshot(); - - view.find('.pf-c-button').at(0).simulate('click', {}); - expect(props.onPreviousClick).toBeCalled(); - view.find('.pf-c-button').at(1).simulate('click', {}); - expect(props.onNextClick).toBeCalled(); - view.find('.pf-c-button').at(2).simulate('click', {}); - expect(props.onClear).toBeCalled(); -}); + test('navigable search results', () => { + render(); -test('hide clear button', () => { - const { onClear, ...testProps } = props; - const view = mount( - - ); - expect(view.find('.pf-c-search-input__clear').length).toBe(0); -}); + const input = screen.getByTestId('test-id'); + expect(input.querySelector('.pf-c-search-input__nav')).toBeInTheDocument(); + expect(input.querySelector('.pf-c-badge')).toBeInTheDocument(); -test('advanced search', () => { - const view = mount( - - ); - view.find('.pf-c-button').at(2).simulate('click', {}); - expect(props.onSearch).toBeCalled(); - expect(view.find('input')).toMatchSnapshot(); -}); + userEvent.click(screen.getByRole('button', { name: 'Previous' })); + expect(props.onPreviousClick).toBeCalled(); + + userEvent.click(screen.getByRole('button', { name: 'Next' })); + expect(props.onNextClick).toBeCalled(); + + userEvent.click(screen.getByRole('button', { name: 'Reset' })); + expect(props.onClear).toBeCalled(); + }); + + test('hide clear button', () => { + const { onClear, ...testProps } = props; + + render(); + expect(screen.queryByRole('button', { name: 'Reset' })).not.toBeInTheDocument(); + }); + + test('advanced search', () => { + const { asFragment } = render( + + ); + + userEvent.click(screen.getByRole('button', { name: 'Search' })); + + expect(props.onSearch).toBeCalled(); + expect(asFragment()).toMatchSnapshot(); + }); + + test('advanced search with custom attributes', () => { + const { asFragment } = render( + + + + } + value="username:player firstname:john" + onChange={props.onChange} + onSearch={props.onSearch} + onClear={props.onClear} + /> + ); + + userEvent.click(screen.getByRole('button', { name: 'Search' })); -test('advanced search with custom attributes', () => { - const view = mount( - } - value='username:player firstname:john' - onChange={props.onChange} - onSearch={props.onSearch} - onClear={props.onClear} - /> - ); - view.find('.pf-c-button').at(2).simulate('click', {}); - expect(props.onSearch).toBeCalled(); - expect(view.find('input')).toMatchSnapshot(); + expect(props.onSearch).toBeCalled(); + expect(asFragment()).toMatchSnapshot(); + }); }); diff --git a/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap b/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap index d14bd74a411..2ebb5456932 100644 --- a/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap +++ b/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap @@ -1,156 +1,249 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`advanced search 1`] = ` - -`; - -exports[`advanced search with custom attributes 1`] = ` - -`; - -exports[`navigable search results 1`] = ` - - + + +
    + - - -
    + +`; + +exports[`SearchInput advanced search with custom attributes 1`] = ` + +
    - +
    + + + + + + + + + + + +
    -     - - -`; - -exports[`navigable search results 2`] = ` - - 3 / 7 - -`; - -exports[`result count 1`] = ` - - 3 - + +
    +
    + `; -exports[`search input with hint 1`] = ` -
    +exports[`SearchInput search input with hint 1`] = ` +
    @@ -300,11 +393,11 @@ exports[`search input with hint 1`] = `
    -
    +     `; -exports[`simple search input 1`] = ` -
    +exports[`SearchInput simple search input 1`] = ` +
    @@ -447,5 +540,5 @@ exports[`simple search input 1`] = `
    -
    + `; diff --git a/packages/react-core/src/components/Select/__tests__/Generated/Select.test.tsx b/packages/react-core/src/components/Select/__tests__/Generated/Select.test.tsx deleted file mode 100644 index 61e0f99fd45..00000000000 --- a/packages/react-core/src/components/Select/__tests__/Generated/Select.test.tsx +++ /dev/null @@ -1,49 +0,0 @@ -/** - * This test was generated - */ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { Select } from '../../Select'; -// any missing imports can usually be resolved by adding them here -import { SelectOptionObject } from '../..'; - -it('Select should match snapshot (auto-generated)', () => { - const view = render( - + const { asFragment } = render( + ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('renders disabled successfully', () => { - const view = render( - {selectOptions} ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('renders expanded successfully', () => { - const view = render( - {selectOptions} ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('renders expanded successfully with custom objects', () => { - const view = render( - {selectOptionsCustom} ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); }); test('renders up direction successfully', () => { - const view = render( - {selectOptions} ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); describe('custom select filter', () => { @@ -99,7 +122,7 @@ describe('select', () => { : selectOptions; return typeaheadFilteredChildren; }; - const view = mount( + render( ); - view.find('input').simulate('change', { target: { value: 'r' } }); - view.update(); - expect((view.find('Select').state('typeaheadFilteredChildren') as []).length).toBe(3); - expect(view).toMatchSnapshot(); + + userEvent.type(screen.getByTestId('test-id').querySelector('input'), 'r'); + + expect(screen.getByText('Mr')).toBeInTheDocument(); + expect(screen.getByText('Mrs')).toBeInTheDocument(); + expect(screen.getByText('Other')).toBeInTheDocument(); }); }); test('renders select groups successfully', () => { - const view = render( - {selectOptions} {selectOptions} ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); }); @@ -134,73 +168,88 @@ test('renders select with favorites successfully', () => { , , , - + ]; - const view = render( - + + {selectOptionsFavorites} + + + {selectOptionsFavorites} + ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); describe('checkbox select', () => { test('renders closed successfully', () => { - const view = render( - {selectOptions} ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('renders checkbox select selections properly', () => { - const view = render( - {selectOptions} ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('renders checkbox select selections properly when isCheckboxSelectionBadgeHidden is true', () => { - const view = render( - {selectOptions} ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('renders expanded successfully', () => { - const view = render( - {selectOptions} ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('renders expanded with filtering successfully', () => { - const view = render( - - ); - expect(view.container).toMatchSnapshot(); - }); - - test('renders expanded with filtering successfully', () => { - const view = render( + const { asFragment } = render( ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('renders expanded successfully with custom objects', () => { - const view = render( - {selectOptionsCustom} ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('renders checkbox select groups successfully', () => { - const view = render( - {selectOptions} {selectOptions} ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); }); describe('typeahead select', () => { test('renders closed successfully', () => { - const view = render( - {selectOptions} ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('renders expanded successfully', () => { - const view = render( - {selectOptions} ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('renders selected successfully', () => { - const view = render( - - ); - expect(view.container).toMatchSnapshot(); - }); - - xtest('test onChange', () => { - const mockEvent = { target: { value: 'test' } } as React.ChangeEvent; - const view = mount( - {selectOptions} ); - const inst = view.find('Select').instance() as any; - inst.onChange(mockEvent); - view.update(); - expect(view).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('test select existing option on a non-creatable select', () => { - const mockEvent = { target: { value: 'Oth' } } as React.ChangeEvent; - const view = mount( - {selectOptions} ); - const inst = view.find('Select').instance() as any; - inst.onChange(mockEvent); - inst.handleTypeaheadKeys('enter'); - view.update(); - expect(view).toMatchSnapshot(); - }); - // the way we generate random select option ids, and options update as the user types means - // that the snapshots for typeahead select don't match the views after options update. - xtest('test isInputValuePersisted', () => { - const mockEvent = { target: { value: 'zzz' } } as React.ChangeEvent; - const view = mount( - - ); - const inst = view.find('Select').instance() as any; - inst.onChange(mockEvent); - inst.handleTypeaheadKeys('tab'); - view.update(); - expect(view).toMatchSnapshot(); - }); + const input = screen.getByTestId('test-id').querySelector('input'); + userEvent.type(input, 'Other'); + userEvent.type(input, '{enter}'); - xtest('test select non-existing option on a non-creatable select', () => { - const mockEvent = { target: { value: 'NonExistingOption' } } as React.ChangeEvent; - const view = mount( - - ); - const inst = view.find('Select').instance() as any; - inst.onChange(mockEvent); - inst.handleTypeaheadKeys('enter'); - view.update(); - expect(view).toMatchSnapshot(); - }); - - xtest('test creatable option', () => { - const mockEvent = { target: { value: 'test' } } as React.ChangeEvent; - const view = mount( - - ); - const inst = view.find('Select').instance() as any; - inst.onChange(mockEvent); - view.update(); - expect(view).toMatchSnapshot(); + expect(screen.getByText('Other')).toBeVisible(); }); }); describe('typeahead multi select', () => { test('renders closed successfully', () => { - const view = render( - {selectOptions} ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('renders expanded successfully', () => { - const view = render( - {selectOptions} ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('renders selected successfully', () => { - const view = render( + const { asFragment } = render( ); - expect(view.container).toMatchSnapshot(); - }); - - xtest('test onChange', () => { - const mockEvent = { target: { value: 'test' } } as React.ChangeEvent; - const view = mount( - - ); - const inst = view.find('Select').instance() as any; - inst.onChange(mockEvent); - view.update(); - expect(view).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); }); @@ -388,89 +396,124 @@ describe('API', () => { test('click on item', () => { const mockToggle = jest.fn(); const mockSelect = jest.fn(); - const view = mount( - {selectOptions} ); - view - .find('button') - .at(1) - .simulate('click'); - expect(mockToggle.mock.calls).toHaveLength(0); - expect(mockSelect.mock.calls).toHaveLength(1); + + userEvent.click(screen.getByRole('option', { name: 'Mr' })); + + expect(mockToggle).not.toHaveBeenCalled(); + expect(mockSelect).toHaveBeenCalled(); }); test('children only, no console error', () => { const myMock = jest.fn(); global.console = { ...global.console, error: myMock }; - mount( + + render( ); + expect(myMock).not.toBeCalled(); }); }); - describe('toggle icon', () => { const ToggleIcon =
    Icon
    ; + test('select single', () => { - const view = mount( - {selectOptions} ); - expect(view.find('span.pf-c-select__toggle-icon')).toMatchSnapshot(); + expect(screen.getByText('Icon')).toBeInTheDocument(); }); test('select checkbox', () => { - const view = mount( - {selectOptions} ); - expect(view.find('span.pf-c-select__toggle-icon')).toMatchSnapshot(); + expect(screen.getByText('Icon')).toBeInTheDocument(); }); test('typeahead select', () => { - const view = mount( - {selectOptions} ); - expect(view.find('span.pf-c-select__toggle-icon')).toMatchSnapshot(); + expect(screen.getByText('Icon')).toBeInTheDocument(); }); test('typeahead multi select', () => { - const view = mount( - {selectOptions} ); - expect(view.find('span.pf-c-select__toggle-icon')).toMatchSnapshot(); + expect(screen.getByText('Icon')).toBeInTheDocument(); }); }); describe('select with custom content', () => { test('renders closed successfully', () => { - const view = render(); + expect(screen.queryByText('testing custom')).toBeNull(); }); + test('renders expanded successfully', () => { - const view = render(); + expect(screen.getByText('testing custom')).toBeInTheDocument(); }); }); describe('select with placeholder', () => { test('applies the placeholder class when not selected', () => { - const view = mount(); + expect(screen.getByRole('button', { name: 'Options menu' })).toHaveClass('pf-m-placeholder'); }); test('does not apply the placeholder class when selected', () => { - const view = mount( + ); + expect(screen.getByRole('button', { name: 'Options menu' })).not.toHaveClass('pf-m-placeholder'); }); -}); \ No newline at end of file +}); diff --git a/packages/react-core/src/components/Select/__tests__/SelectToggle.test.tsx b/packages/react-core/src/components/Select/__tests__/SelectToggle.test.tsx index b4da7d7eaf3..7414b87a657 100644 --- a/packages/react-core/src/components/Select/__tests__/SelectToggle.test.tsx +++ b/packages/react-core/src/components/Select/__tests__/SelectToggle.test.tsx @@ -1,148 +1,86 @@ import React from 'react'; -import { render } from '@testing-library/react'; -import { mount } from 'enzyme'; -import { SelectToggle } from '../SelectToggle'; - -describe('API', () => { - test('click on closed', () => { - const mockToggle = jest.fn(); - const view = mount( - - Select - - ); - view - .find('button') - .first() - .simulate('click'); - expect(mockToggle.mock.calls[0][0]).toBe(true); - }); +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; - test('click on opened', () => { - const mockToggle = jest.fn(); - const view = mount( - - Select - - ); +import { SelectToggle } from '../SelectToggle'; - view - .find('button') - .first() - .simulate('click'); - expect(mockToggle.mock.calls[0][0]).toBe(false); - }); +describe('SelectToggle', () => { + describe('API', () => { + test('click on closed', () => { + const mockToggle = jest.fn(); + render( + + Select + + ); - test('click on document', () => { - const map = {} as any; - document.addEventListener = jest.fn((event, cb) => { - map[event] = cb; + userEvent.click(screen.getByRole('button')); + expect(mockToggle).toHaveBeenCalledWith(true, expect.any(Object)); }); - const mockToggle = jest.fn(); - mount( - - Select - - ); - map.click({ target: document }); - expect(mockToggle.mock.calls[0][0]).toBe(false); - }); + test('click on opened', () => { + const mockToggle = jest.fn(); + render( + + Select + + ); - test('touch on document', () => { - const map = {} as any; - document.addEventListener = jest.fn((event, cb) => { - map[event] = cb; + userEvent.click(screen.getByRole('button')); + expect(mockToggle).toHaveBeenCalledWith(false, expect.any(MouseEvent)); }); - const mockToggle = jest.fn(); - mount( - - Select - - ); - map.touchstart({ target: document }); - expect(mockToggle.mock.calls[0][0]).toBe(false); - }); + test('click on document', () => { + const mockToggle = jest.fn(); - test('on click outside has been removed', () => { - const map = {} as any; - document.addEventListener = jest.fn((event, cb) => { - map[event] = cb; - }); - document.removeEventListener = jest.fn((event, cb) => { - if (map[event] === cb) { - map[event] = () => {}; - } - }); - const mockToggle = jest.fn(); - const view = render( - - Select - - ); - view.unmount(); - map.click({ target: document }); - expect(mockToggle.mock.calls).toHaveLength(0); - expect(document.removeEventListener).toHaveBeenCalledWith('click', expect.any(Function)); - }); + render( + + Select + + ); - test('on touch outside has been removed', () => { - const map = {} as any; - document.addEventListener = jest.fn((event, cb) => { - map[event] = cb; + userEvent.click(screen.getByText('Select').parentElement); + expect(mockToggle).toHaveBeenCalledWith(false, expect.any(MouseEvent)); }); - document.removeEventListener = jest.fn((event, cb) => { - if (map[event] === cb) { - map[event] = () => {}; - } + + test('on click outside has been removed', () => { + const mockToggle = jest.fn(); + + render( + + Select + + ); + + userEvent.click(screen.getByText('Select').parentElement); + expect(mockToggle).not.toHaveBeenCalled(); }); - const mockToggle = jest.fn(); - const view = render( - - Select - - ); - view.unmount(); - map.touchstart({ target: document }); - expect(mockToggle.mock.calls).toHaveLength(0); - expect(document.removeEventListener).toHaveBeenCalledWith('touchstart', expect.any(Function)); }); -}); -describe('state', () => { - test('active', () => { - const view = render( - - Select - - ); - expect(view.container).toMatchSnapshot(); + describe('state', () => { + test('active', () => { + const { asFragment } = render( + + Select + + ); + expect(asFragment()).toMatchSnapshot(); + }); }); }); diff --git a/packages/react-core/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap b/packages/react-core/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap index 2ce7a3aa0cc..20894d69e95 100644 --- a/packages/react-core/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap +++ b/packages/react-core/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap @@ -1,19 +1,20 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`checkbox select renders checkbox select groups successfully 1`] = ` -
    +exports[`Select renders select groups successfully 1`] = ` +
    + +
    group 2
    -
    - -
    + + +
    -
    +     `; -exports[`checkbox select renders checkbox select selections properly 1`] = ` -
    +exports[`Select renders up direction successfully 1`] = ` +
    -
    + `; -exports[`checkbox select renders checkbox select selections properly when isCheckboxSelectionBadgeHidden is true 1`] = ` -
    +exports[`Select single select renders closed successfully 1`] = ` +
    -
    + `; -exports[`checkbox select renders closed successfully 1`] = ` -
    +exports[`Select single select renders disabled successfully 1`] = ` +
    -
    + `; -exports[`checkbox select renders expanded successfully 1`] = ` -
    +exports[`Select single select renders expanded successfully 1`] = ` +
    +
    -
    + `; -exports[`checkbox select renders expanded successfully with custom objects 1`] = ` -
    +exports[`Select single select renders expanded successfully with custom objects 1`] = ` +
    +
    -
    + `; -exports[`checkbox select renders expanded with filtering successfully 1`] = ` -
    +exports[`checkbox select renders checkbox select groups successfully 1`] = ` +
    -
    - -
    + +
    -
    -
    - - - + - + -
    -
    -
    -
    -`; + + + Ms + + + + +
    +
    + +
    + + + + +
    +
    +
    + +     +`; -exports[`checkbox select renders expanded with filtering successfully 2`] = ` -
    +exports[`checkbox select renders checkbox select selections properly 1`] = ` +
    - -
    -
    -
    - -
    -
    - - - - -
    -
    + +
    -
    + `; -exports[`renders select with favorites successfully 1`] = ` -
    +exports[`checkbox select renders checkbox select selections properly when isCheckboxSelectionBadgeHidden is true 1`] = ` +
    -
    + +`; + +exports[`checkbox select renders closed successfully 1`] = ` + +
    + - - - - - - -
    -
    - -
      - - - - -
    -
    -
    -
    -
    -`; - -exports[`select custom select filter filters properly 1`] = ` - - - - -
      - - - -
    - , - } - } - type="button" - variant="typeahead" - > -
    -
    - -
    - -
    - - - - - - - , - } - } - isCustomContent={false} - isExpanded={false} - isGrouped={false} - isLastOptionBeforeFooter={[Function]} - keyHandler={[Function]} - maxHeight="" - openedOnEnter={false} - position="left" - selected="" - sendRef={[Function]} - > -
      - - - - - - - - - -
    -     -     - - - -`; - -exports[`select renders select groups successfully 1`] = ` -
    -
    - -
    -
    - -
      - - - - -
    -
    -
    - -
      - - - - -
    -
    -
    -
    -
    -`; - -exports[`select renders up direction successfully 1`] = ` -
    -
    -
    -
    + `; -exports[`select single select renders closed successfully 1`] = ` -
    +exports[`checkbox select renders expanded successfully 1`] = ` +
    -
    -
    -`; - -exports[`select single select renders disabled successfully 1`] = ` -
    -
    - + Mrs + + + + +
    -
    + `; -exports[`select single select renders expanded successfully 1`] = ` -
    +exports[`checkbox select renders expanded successfully with custom objects 1`] = ` +
    - - - - + Ms: Test Three + +
    -
    + `; -exports[`select single select renders expanded successfully with custom objects 1`] = ` -
    +exports[`checkbox select renders expanded with filtering successfully 1`] = ` +
    - -
      +
    +
    -
    +
    + + + +
    - + `; -exports[`select with custom content renders closed successfully 1`] = ` -
    +exports[`renders select with favorites successfully 1`] = ` +
    -
    -
    -`; - -exports[`select with custom content renders expanded successfully 1`] = ` -
    -
    - + + + + + +
    - - - - -
    - testing custom + group 2 +
    +
      + + + + +
    +
    - -`; - -exports[`select with placeholder applies the placeholder class when not selected 1`] = ` - -`; - -exports[`toggle icon select checkbox 1`] = ` - -
    - Icon -
    -     -`; - -exports[`toggle icon select single 1`] = ` - -
    - Icon -
    -     -`; - -exports[`toggle icon typeahead multi select 1`] = ` - -
    - Icon -
    -     -`; - -exports[`toggle icon typeahead select 1`] = ` - -
    - Icon -
    -     + `; exports[`typeahead multi select renders closed successfully 1`] = ` -
    +
    @@ -2420,14 +1600,14 @@ exports[`typeahead multi select renders closed successfully 1`] = `
    - + `; exports[`typeahead multi select renders expanded successfully 1`] = ` -
    +
    @@ -2442,7 +1622,7 @@ exports[`typeahead multi select renders expanded successfully 1`] = ` aria-label="" autocomplete="off" class="pf-c-form-control pf-c-select__toggle-typeahead" - id="pf-select-toggle-id-13-select-multi-typeahead-typeahead" + id="pf-select-toggle-id-17-select-multi-typeahead-typeahead" placeholder="" type="text" value="" @@ -2452,9 +1632,9 @@ exports[`typeahead multi select renders expanded successfully 1`] = ` aria-expanded="true" aria-haspopup="listbox" aria-label="Options menu" - aria-labelledby=" pf-select-toggle-id-13" + aria-labelledby=" pf-select-toggle-id-17" class="pf-c-button pf-c-select__toggle-button pf-m-plain" - id="pf-select-toggle-id-13" + id="pf-select-toggle-id-17" tabindex="-1" type="button" > @@ -2533,14 +1713,14 @@ exports[`typeahead multi select renders expanded successfully 1`] = `
    -
    + `; exports[`typeahead multi select renders selected successfully 1`] = ` -
    +
    @@ -2560,7 +1740,6 @@ exports[`typeahead multi select renders selected successfully 1`] = `
    -
      Mr
    -
    +     `; exports[`typeahead select renders closed successfully 1`] = ` -
    +
    @@ -2839,14 +2018,14 @@ exports[`typeahead select renders closed successfully 1`] = `
    -
    + `; exports[`typeahead select renders expanded successfully 1`] = ` -
    +
    @@ -2860,7 +2039,7 @@ exports[`typeahead select renders expanded successfully 1`] = ` aria-label="" autocomplete="off" class="pf-c-form-control pf-c-select__toggle-typeahead" - id="pf-select-toggle-id-8-select-typeahead" + id="pf-select-toggle-id-7-select-typeahead" placeholder="" type="text" value="" @@ -2870,9 +2049,9 @@ exports[`typeahead select renders expanded successfully 1`] = ` aria-expanded="true" aria-haspopup="listbox" aria-label="Options menu" - aria-labelledby=" pf-select-toggle-id-8" + aria-labelledby=" pf-select-toggle-id-7" class="pf-c-button pf-c-select__toggle-button pf-m-plain" - id="pf-select-toggle-id-8" + id="pf-select-toggle-id-7" tabindex="-1" type="button" > @@ -2951,14 +2130,14 @@ exports[`typeahead select renders expanded successfully 1`] = `
    -
    + `; exports[`typeahead select renders selected successfully 1`] = ` -
    +
    @@ -2972,7 +2151,7 @@ exports[`typeahead select renders selected successfully 1`] = ` aria-label="" autocomplete="off" class="pf-c-form-control pf-c-select__toggle-typeahead" - id="pf-select-toggle-id-9-select-typeahead" + id="pf-select-toggle-id-8-select-typeahead" placeholder="" type="text" value="Mr" @@ -2982,9 +2161,9 @@ exports[`typeahead select renders selected successfully 1`] = ` aria-expanded="true" aria-haspopup="listbox" aria-label="Options menu" - aria-labelledby=" pf-select-toggle-id-9" + aria-labelledby=" pf-select-toggle-id-8" class="pf-c-button pf-c-select__toggle-button pf-m-plain" - id="pf-select-toggle-id-9" + id="pf-select-toggle-id-8" tabindex="-1" type="button" > @@ -3081,355 +2260,5 @@ exports[`typeahead select renders selected successfully 1`] = `
    -
    -`; - -exports[`typeahead select test select existing option on a non-creatable select 1`] = ` - - - - -
      - -
    - , - } - } - type="button" - variant="typeahead" - > -
    -
    - -
    - -
    - - - - - , - } - } - isCustomContent={false} - isExpanded={false} - isGrouped={false} - isLastOptionBeforeFooter={[Function]} - keyHandler={[Function]} - maxHeight="" - openedOnEnter={false} - position="left" - selected="" - sendRef={[Function]} - > -
      - - - -
    -     -     - - - + `; diff --git a/packages/react-core/src/components/Select/__tests__/__snapshots__/SelectToggle.test.tsx.snap b/packages/react-core/src/components/Select/__tests__/__snapshots__/SelectToggle.test.tsx.snap index c4d993a1545..d1194830d92 100644 --- a/packages/react-core/src/components/Select/__tests__/__snapshots__/SelectToggle.test.tsx.snap +++ b/packages/react-core/src/components/Select/__tests__/__snapshots__/SelectToggle.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`state active 1`] = ` -
    +exports[`SelectToggle state active 1`] = ` + -
    + `; diff --git a/packages/react-core/src/components/SimpleList/__tests__/Generated/SimpleList.test.tsx b/packages/react-core/src/components/SimpleList/__tests__/Generated/SimpleList.test.tsx deleted file mode 100644 index f9538b9c4da..00000000000 --- a/packages/react-core/src/components/SimpleList/__tests__/Generated/SimpleList.test.tsx +++ /dev/null @@ -1,22 +0,0 @@ -/** - * This test was generated - */ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { SimpleList } from '../../SimpleList'; -// any missing imports can usually be resolved by adding them here -import { SimpleListItemProps } from '../..'; - -it('SimpleList should match snapshot (auto-generated)', () => { - const view = render( - ReactNode} - className={"''"} - onSelect={( - ref: React.RefObject | React.RefObject, - props: SimpleListItemProps - ) => undefined as void} - /> - ); - expect(view.container).toMatchSnapshot(); -}); diff --git a/packages/react-core/src/components/SimpleList/__tests__/Generated/__snapshots__/SimpleList.test.tsx.snap b/packages/react-core/src/components/SimpleList/__tests__/Generated/__snapshots__/SimpleList.test.tsx.snap deleted file mode 100644 index 5d293606ab7..00000000000 --- a/packages/react-core/src/components/SimpleList/__tests__/Generated/__snapshots__/SimpleList.test.tsx.snap +++ /dev/null @@ -1,13 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`SimpleList should match snapshot (auto-generated) 1`] = ` -
    -
    -
      - ReactNode -
    -
    -
    -`; diff --git a/packages/react-core/src/components/SimpleList/__tests__/SimpleList.test.tsx b/packages/react-core/src/components/SimpleList/__tests__/SimpleList.test.tsx index d15b518fa27..601f5a921fb 100644 --- a/packages/react-core/src/components/SimpleList/__tests__/SimpleList.test.tsx +++ b/packages/react-core/src/components/SimpleList/__tests__/SimpleList.test.tsx @@ -1,6 +1,9 @@ import * as React from 'react'; -import { render } from '@testing-library/react'; -import { mount } from 'enzyme'; + +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import '@testing-library/jest-dom'; + import { SimpleList } from '../SimpleList'; import { SimpleListGroup } from '../SimpleListGroup'; import { SimpleListItem } from '../SimpleListItem'; @@ -25,64 +28,58 @@ const anchors = [ describe('SimpleList', () => { test('renders content', () => { - const view = render({items}); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render({items}); + expect(asFragment()).toMatchSnapshot(); }); test('renders grouped content', () => { - const view = render( + const { asFragment } = render( {items} ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('onSelect is called when item is selected', () => { - const selectSpy = jest.fn(); - const view = mount({items}); - view - .find('button') - .first() - .simulate('click', { target: { value: 'r' } }); - view.update(); - expect(selectSpy).toBeCalled(); - expect(view).toMatchSnapshot(); + const onSelect = jest.fn(); + + render({items}); + + userEvent.click(screen.getByText('Item 1')); + expect(onSelect).toBeCalled(); }); test('renders anchor content', () => { - const view = render({anchors}); - expect(view.container).toMatchSnapshot(); + render({anchors}); + expect(screen.getAllByRole('link').length).toEqual(3); }); test('onSelect is called when anchor item is selected', () => { - const selectSpy = jest.fn(); - const view = mount({anchors}); - view - .find('a') - .first() - .simulate('click', { target: { value: 'r' } }); - view.update(); - expect(selectSpy).toBeCalled(); - expect(view).toMatchSnapshot(); + const onSelect = jest.fn(); + + render({anchors}); + + userEvent.click(screen.getByText('Item 1')); + expect(onSelect).toBeCalled(); }); }); describe('SimpleListGroup', () => { test('renders content', () => { - const view = render({items}); - expect(view.container).toMatchSnapshot(); + render({items}); + expect(screen.getByText('Group 1')).toBeInTheDocument(); }); }); describe('SimpleListItem', () => { test('renders content', () => { - const view = render(Item 1); - expect(view.container).toMatchSnapshot(); + render(Item 1); + expect(screen.getByText('Item 1')).toBeInTheDocument(); }); test('renders anchor', () => { - const view = render(Item 1); - expect(view.container).toMatchSnapshot(); + render(Item 1); + expect(screen.getByText('Item 1')).toBeInTheDocument(); }); }); diff --git a/packages/react-core/src/components/SimpleList/__tests__/__snapshots__/SimpleList.test.tsx.snap b/packages/react-core/src/components/SimpleList/__tests__/__snapshots__/SimpleList.test.tsx.snap index 97ce0675fd9..f6fd48f2e33 100644 --- a/packages/react-core/src/components/SimpleList/__tests__/__snapshots__/SimpleList.test.tsx.snap +++ b/packages/react-core/src/components/SimpleList/__tests__/__snapshots__/SimpleList.test.tsx.snap @@ -1,287 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`SimpleList onSelect is called when anchor item is selected 1`] = ` - - Item 1 - , - }, - Object { - "children": "Item 1", - "className": "", - "component": "a", - "componentClassName": "", - "href": "", - "isActive": false, - "isCurrent": false, - "onClick": [Function], - "type": "button", - }, - ], - ], - "results": Array [ - Object { - "type": "return", - "value": undefined, - }, - ], - } - } -> -
    - -
    -     -`; - -exports[`SimpleList onSelect is called when item is selected 1`] = ` - - Item 1 - , - }, - Object { - "children": "Item 1", - "className": "", - "component": "button", - "componentClassName": "", - "href": "", - "isActive": false, - "isCurrent": false, - "onClick": [Function], - "type": "button", - }, - ], - ], - "results": Array [ - Object { - "type": "return", - "value": undefined, - }, - ], - } - } -> -
    -
      - -
    • - -
      • -       - -
    • - -
      • -       - -
    • - -
      • -       -
    -
    -     -`; - -exports[`SimpleList renders anchor content 1`] = ` -
    -
    - -
    -
    -`; - exports[`SimpleList renders content 1`] = ` -
    +
    @@ -318,11 +38,11 @@ exports[`SimpleList renders content 1`] = `
    -
    + `; exports[`SimpleList renders grouped content 1`] = ` -
    +
    @@ -373,87 +93,5 @@ exports[`SimpleList renders grouped content 1`] = `
    -
    -`; - -exports[`SimpleListGroup renders content 1`] = ` -
    -
    - -
      -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    -
    -
    -`; - -exports[`SimpleListItem renders anchor 1`] = ` - -`; - -exports[`SimpleListItem renders content 1`] = ` -
    -
  • - -
    • -
    + `; diff --git a/packages/react-core/src/components/Switch/__tests__/Generated/Switch.test.tsx b/packages/react-core/src/components/Switch/__tests__/Generated/Switch.test.tsx deleted file mode 100644 index 316bb76764b..00000000000 --- a/packages/react-core/src/components/Switch/__tests__/Generated/Switch.test.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/** - * This test was generated - */ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { Switch } from '../../Switch'; -// any missing imports can usually be resolved by adding them here -import {} from '../..'; - -it('Switch should match snapshot (auto-generated)', () => { - const view = render( - undefined as any} - aria-label={"''"} - /> - ); - expect(view.container).toMatchSnapshot(); -}); diff --git a/packages/react-core/src/components/Switch/__tests__/Generated/__snapshots__/Switch.test.tsx.snap b/packages/react-core/src/components/Switch/__tests__/Generated/__snapshots__/Switch.test.tsx.snap deleted file mode 100644 index afff50852bf..00000000000 --- a/packages/react-core/src/components/Switch/__tests__/Generated/__snapshots__/Switch.test.tsx.snap +++ /dev/null @@ -1,36 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Switch should match snapshot (auto-generated) 1`] = ` -
    - -
    -`; diff --git a/packages/react-core/src/components/Switch/__tests__/Switch.test.tsx b/packages/react-core/src/components/Switch/__tests__/Switch.test.tsx index 38ae4f6a62f..078927847c6 100644 --- a/packages/react-core/src/components/Switch/__tests__/Switch.test.tsx +++ b/packages/react-core/src/components/Switch/__tests__/Switch.test.tsx @@ -1,6 +1,9 @@ import * as React from 'react'; -import { render } from '@testing-library/react'; -import { mount } from 'enzyme'; + +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import '@testing-library/jest-dom'; + import { Switch } from '../Switch'; const props = { @@ -8,90 +11,97 @@ const props = { isChecked: false }; -test('switch label for attribute equals input id attribute', () => { - const view = mount(); - expect(view.find('input').prop('id')).toBe('foo'); - expect(view.find('label').prop('htmlFor')).toBe('foo'); -}); +describe('Switch', () => { + test('switch label for attribute equals input id attribute', () => { + render(); -test('switch label id is auto generated', () => { - const view = mount(); - expect(view.find('input').prop('id')).toBeDefined(); -}); + const switchElement = screen.getByLabelText('Switch label'); -test('switch is checked', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); -}); + expect(switchElement).toHaveAttribute('id', 'foo'); + expect(switchElement.parentElement).toHaveAttribute('for', 'foo'); + }); -test('switch is not checked', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); -}); + test('switch label id is auto generated', () => { + render(); + expect(screen.getByLabelText('Switch label')).toHaveAttribute('id'); + }); -test('switch with only label is checked', () => { - const check = true; - const view = render(); - expect(view.container).toMatchSnapshot(); -}); + test('switch is checked', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); -test('switch with only label is not checked', () => { - const check = false; - const view = render(); - expect(view.container).toMatchSnapshot(); -}); + test('switch is not checked', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); -test('no label switch is checked', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); -}); + test('switch with only label is checked', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); -test('no label switch is not checked', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); -}); + test('switch with only label is not checked', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); -test('switch is checked and disabled', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); -}); + test('no label switch is checked', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); -test('switch is not checked and disabled', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); -}); + test('no label switch is not checked', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); -test('switch passes value and event to onChange handler', () => { - const view = mount(); - const input = view.find('input'); - expect(input.prop('checked')).toBe(false); - input.simulate('change', { target: { checked: true } }); - expect(props.onChange.mock.calls[0][0]).toBe(true); -}); + test('switch is checked and disabled', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); -test('should throw console error when no aria-label or label is given', () => { - const myMock = jest.fn(); - global.console = { ...global.console, error: myMock }; - mount(); - expect(myMock).toBeCalled(); -}); + test('switch is not checked and disabled', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); -test('should not throw console error when label is given but no aria-label', () => { - const myMock = jest.fn(); - global.console = { ...global.console, error: myMock }; - mount(); - expect(myMock).not.toBeCalled(); -}); + test('switch passes value and event to onChange handler', () => { + render(); -test('should not throw console error when aria-label is given but no label', () => { - const myMock = jest.fn(); - global.console = { ...global.console, error: myMock }; - mount(); - expect(myMock).not.toBeCalled(); -}); + userEvent.click(screen.getByLabelText('Switch label')); + expect(props.onChange).toHaveBeenCalledWith(true, expect.any(Object)); + }); + + test('should throw console error when no aria-label or label is given', () => { + const myMock = jest.fn(); + + global.console = { ...global.console, error: myMock }; + + render(); + expect(myMock).toBeCalled(); + }); + + test('should not throw console error when label is given but no aria-label', () => { + const myMock = jest.fn(); + global.console = { ...global.console, error: myMock }; -test('should apply reversed modifier', () => { - const view = mount(); - const label = view.find('label') - expect(label.prop('className')).toContain('pf-m-reverse') -}) \ No newline at end of file + render(); + + expect(myMock).not.toBeCalled(); + }); + + test('should not throw console error when aria-label is given but no label', () => { + const myMock = jest.fn(); + global.console = { ...global.console, error: myMock }; + + render(); + + expect(myMock).not.toBeCalled(); + }); + + test('should apply reversed modifier', () => { + render(); + expect(screen.getByLabelText('Switch label').parentElement).toHaveClass('pf-m-reverse'); + }); +}); diff --git a/packages/react-core/src/components/Switch/__tests__/__snapshots__/Switch.test.tsx.snap b/packages/react-core/src/components/Switch/__tests__/__snapshots__/Switch.test.tsx.snap index cd9a2ede6bf..ffce9296079 100644 --- a/packages/react-core/src/components/Switch/__tests__/__snapshots__/Switch.test.tsx.snap +++ b/packages/react-core/src/components/Switch/__tests__/__snapshots__/Switch.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`no label switch is checked 1`] = ` -
    +exports[`Switch no label switch is checked 1`] = ` + -
    + `; -exports[`no label switch is not checked 1`] = ` -
    +exports[`Switch no label switch is not checked 1`] = ` + -
    + `; -exports[`switch is checked 1`] = ` -
    +exports[`Switch switch is checked 1`] = ` + -
    + `; -exports[`switch is checked and disabled 1`] = ` -
    +exports[`Switch switch is checked and disabled 1`] = ` + -
    + `; -exports[`switch is not checked 1`] = ` -
    +exports[`Switch switch is not checked 1`] = ` + -
    + `; -exports[`switch is not checked and disabled 1`] = ` -
    +exports[`Switch switch is not checked and disabled 1`] = ` + -
    + `; -exports[`switch with only label is checked 1`] = ` -
    +exports[`Switch switch with only label is checked 1`] = ` + -
    + `; -exports[`switch with only label is not checked 1`] = ` -
    +exports[`Switch switch with only label is not checked 1`] = ` + -
    + `; diff --git a/packages/react-core/src/components/TextArea/__tests__/Generated/TextArea.test.tsx b/packages/react-core/src/components/TextArea/__tests__/Generated/TextArea.test.tsx deleted file mode 100644 index 9b8bc7f14c9..00000000000 --- a/packages/react-core/src/components/TextArea/__tests__/Generated/TextArea.test.tsx +++ /dev/null @@ -1,23 +0,0 @@ -/** - * This test was generated - */ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { TextArea } from '../../TextArea'; -// any missing imports can usually be resolved by adding them here -import {} from '../..'; - -it('TextArea should match snapshot (auto-generated)', () => { - const view = render( - - -`; diff --git a/packages/react-core/src/components/TextArea/__tests__/TextArea.test.tsx b/packages/react-core/src/components/TextArea/__tests__/TextArea.test.tsx index feb0a52dd3e..89855ef61ba 100644 --- a/packages/react-core/src/components/TextArea/__tests__/TextArea.test.tsx +++ b/packages/react-core/src/components/TextArea/__tests__/TextArea.test.tsx @@ -1,7 +1,10 @@ import React from 'react'; -import { render } from '@testing-library/react'; -import { mount, shallow } from 'enzyme'; -import { TextArea, TextAreaBase } from '../TextArea'; + +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import '@testing-library/jest-dom'; + +import { TextArea, TextAreaBase } from '../TextArea'; import { ValidatedOptions } from '../../../helpers/constants'; const props = { @@ -9,104 +12,96 @@ const props = { value: 'test textarea' }; -test('textarea input passes value and event to onChange handler', () => { - const newValue = 'new test textarea'; - const event = { - currentTarget: { value: newValue } - }; - const view = shallow(); - view.find('textarea').simulate('change', event); - expect(props.onChange).toBeCalledWith(newValue, event); -}); - -test('simple text input', () => { - const view = render( - + `; -exports[`disabled text input using isDisabled 1`] = ` -
    +exports[`TextArea disabled text input using isDisabled 1`] = ` + -
    + `; -exports[`horizontally resizable text area 1`] = ` -
    +exports[`TextArea horizontally resizable text area 1`] = ` + -
    + `; -exports[`invalid text area 1`] = ` -
    - -
    -`; - -exports[`read only text input using isReadOnly 1`] = ` -
    +exports[`TextArea read only text input using isReadOnly 1`] = ` + -
    + `; -exports[`read only text input using readOnly 1`] = ` -
    +exports[`TextArea read only text input using readOnly 1`] = ` + -
    + `; -exports[`simple text input 1`] = ` -
    +exports[`TextArea simple text input 1`] = ` + -
    + `; -exports[`validated text area error 1`] = ` -
    +exports[`TextArea validated text area error 1`] = ` + -
    -`; - -exports[`validated text area success 1`] = ` - - -`; - -exports[`validated text area warning 1`] = ` - - + `; -exports[`vertically resizable text area 1`] = ` -
    +exports[`TextArea vertically resizable text area 1`] = ` + -
    + `; diff --git a/packages/react-core/src/components/TextInput/__tests__/TextInput.test.tsx b/packages/react-core/src/components/TextInput/__tests__/TextInput.test.tsx index 574f71f52e0..eaaf91628a9 100644 --- a/packages/react-core/src/components/TextInput/__tests__/TextInput.test.tsx +++ b/packages/react-core/src/components/TextInput/__tests__/TextInput.test.tsx @@ -1,6 +1,9 @@ import React from 'react'; -import { render } from '@testing-library/react'; -import { mount, shallow } from 'enzyme'; + +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import '@testing-library/jest-dom'; + import { TextInput, TextInputBase } from '../TextInput'; import { ValidatedOptions } from '../../../helpers/constants'; @@ -9,84 +12,82 @@ const props = { value: 'test input' }; -test('input passes value and event to onChange handler', () => { - const newValue = 'new test input'; - const event = { - currentTarget: { value: newValue } - }; - const view = shallow(); - view.find('input').simulate('change', event); - expect(props.onChange).toBeCalledWith(newValue, event); -}); +describe('TextInput', () => { + test('input passes value and event to onChange handler', () => { + render(); -test('simple text input', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); -}); + userEvent.type(screen.getByLabelText('test input'), 'a'); + expect(props.onChange).toHaveBeenCalledWith('a', expect.any(Object)); + }); -test('disabled text input', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); -}); + test('simple text input', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); -test('readonly text input', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); -}); + test('disabled text input', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); -test('invalid text input', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); -}); + test('readonly text input', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); -test('validated text input success', () => { - const view = mount( - - ); - expect(view.find('.pf-c-form-control.pf-m-success').length).toBe(1); - expect(view).toMatchSnapshot(); -}); + test('invalid text input', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); -test('validated text input success', () => { - const view = mount( - - ); - expect(view.find('.pf-c-form-control.pf-m-warning').length).toBe(1); - expect(view).toMatchSnapshot(); -}); + test('validated text input success', () => { + render(); + expect(screen.getByLabelText('validated text input')).toHaveClass('pf-m-success'); + }); + test('validated text input warning', () => { + render(); + expect(screen.getByLabelText('validated text input')).toHaveClass('pf-m-warning'); + }); -test('validated text input', () => { - const view = render( - - ); - expect(view.container).toMatchSnapshot(); -}); + test('validated text input error', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); -test('should throw console error when no aria-label, id or aria-labelledby is given', () => { - const myMock = jest.fn(); - global.console = { ...global.console, error: myMock }; - render(); - expect(myMock).toBeCalled(); -}); + test('should throw console error when no aria-label, id or aria-labelledby is given', () => { + const myMock = jest.fn(); + global.console = { ...global.console, error: myMock }; -test('should not throw console error when id is given but no aria-label or aria-labelledby', () => { - const myMock = jest.fn(); - global.console = { ...global.console, error: myMock }; - render(); - expect(myMock).not.toBeCalled(); -}); + render(); -test('should not throw console error when aria-label is given but no id or aria-labelledby', () => { - const myMock = jest.fn(); - global.console = { ...global.console, error: myMock }; - render(); - expect(myMock).not.toBeCalled(); -}); + expect(myMock).toBeCalled(); + }); + + test('should not throw console error when id is given but no aria-label or aria-labelledby', () => { + const myMock = jest.fn(); + global.console = { ...global.console, error: myMock }; + + render(); + + expect(myMock).not.toBeCalled(); + }); + + test('should not throw console error when aria-label is given but no id or aria-labelledby', () => { + const myMock = jest.fn(); + global.console = { ...global.console, error: myMock }; + + render(); + + expect(myMock).not.toBeCalled(); + }); + + test('should not throw console error when aria-labelledby is given but no id or aria-label', () => { + const myMock = jest.fn(); + global.console = { ...global.console, error: myMock }; + + render(); -test('should not throw console error when aria-labelledby is given but no id or aria-label', () => { - const myMock = jest.fn(); - global.console = { ...global.console, error: myMock }; - render(); - expect(myMock).not.toBeCalled(); + expect(myMock).not.toBeCalled(); + }); }); diff --git a/packages/react-core/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react-core/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap index dc4d043110d..41da110e327 100644 --- a/packages/react-core/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/packages/react-core/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`disabled text input 1`] = ` -
    +exports[`TextInput disabled text input 1`] = ` + -
    + `; -exports[`invalid text input 1`] = ` -
    +exports[`TextInput invalid text input 1`] = ` + -
    + `; -exports[`readonly text input 1`] = ` -
    +exports[`TextInput readonly text input 1`] = ` + -
    + `; -exports[`simple text input 1`] = ` -
    +exports[`TextInput simple text input 1`] = ` + -
    + `; -exports[`validated text input 1`] = ` -
    +exports[`TextInput validated text input error 1`] = ` + -
    -`; - -exports[`validated text input success 1`] = ` - - - - - -`; - -exports[`validated text input success 2`] = ` - - - - - + `; diff --git a/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroup.test.tsx b/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroup.test.tsx index cb7b0361909..3539a5d38c1 100644 --- a/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroup.test.tsx +++ b/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroup.test.tsx @@ -1,6 +1,8 @@ import React from 'react'; -import { render } from '@testing-library/react'; -import { mount } from 'enzyme'; + +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; + import { TextInputGroup, TextInputGroupContext } from '../TextInputGroup'; import { TextInputGroupMain } from '../TextInputGroupMain'; import { TextInputGroupUtilities } from '../TextInputGroupUtilities'; @@ -8,33 +10,33 @@ import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; describe('TextInputGroup', () => { test('renders content', () => { - const view = render( + const { asFragment } = render( Foo ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('gets custom class and id', () => { - const view = render( + const { asFragment } = render( Foo ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('renders with the proper stying when disabled', () => { - const view = render( + const { asFragment } = render( Foo ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('passes isDisabled=false to children via a context when isDisabled prop is not passed', () => { @@ -44,12 +46,13 @@ describe('TextInputGroup', () => { return
    {context.isDisabled ? 'is disabled' : 'not disabled'}
    ; }; - const view = mount( + render( ); - expect(view.text()).toBe('not disabled'); + + expect(screen.queryByText('is disabled')).toBeNull(); }); test('passes isDisabled=true to children via a context when isDisabled prop is passed', () => { @@ -59,108 +62,131 @@ describe('TextInputGroup', () => { return
    {context.isDisabled ? 'is disabled' : 'not disabled'}
    ; }; - const view = mount( + render( ); - expect(view.text()).toBe('is disabled'); + + expect(screen.queryByText('not disabled')).toBeNull(); }); }); describe('TextInputGroupMain', () => { test('renders content', () => { - const view = render(Foo); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(Foo); + expect(asFragment()).toMatchSnapshot(); }); test('renders given input icon props', () => { - const view = render(}>Foo); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(}>Foo); + expect(asFragment()).toMatchSnapshot(); }); test('renders the input with custom aria label when given', () => { - const view = render(Foo); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(Foo); + expect(asFragment()).toMatchSnapshot(); }); test('does not call onChange callback when the input does not change', () => { const onChangeMock = jest.fn(); - const view = render(Foo); + render(Foo); expect(onChangeMock).not.toHaveBeenCalled(); }); test('calls the onChange callback when the input changes', () => { const onChangeMock = jest.fn(); - const view = mount(Foo); - view.find('input').simulate('change', { target: { value: 'Foo' } }); - expect(onChangeMock).toHaveBeenCalledTimes(1); + render(Foo); + + userEvent.type(screen.getByText('Foo').querySelector('input'), 'Foo'); + expect(onChangeMock).toHaveBeenCalled(); }); test('does not call onFocus callback when the input does not get focus', () => { const onFocusMock = jest.fn(); - const view = render(Foo); + render(Foo); expect(onFocusMock).not.toHaveBeenCalled(); }); test('calls the onFocus callback when the input is focused', () => { const onFocusMock = jest.fn(); - const view = mount(Foo); - view.find('input').simulate('focus'); + render(Foo); + userEvent.click(screen.getByText('Foo').querySelector('input')); expect(onFocusMock).toHaveBeenCalledTimes(1); }); test('does not call onBlur callback when the input does not lose focus', () => { const onBlurMock = jest.fn(); - const view = render(Foo); + render(Foo); + + userEvent.type(screen.getByText('Foo').querySelector('input'), 'Foo'); expect(onBlurMock).not.toHaveBeenCalled(); }); test('calls the onFocus callback when the input loses focus', () => { const onBlurMock = jest.fn(); - const view = mount(Foo); - view.find('input').simulate('blur'); - expect(onBlurMock).toHaveBeenCalledTimes(1); + render( + <> +
    Other element
    + Foo + + ); + + userEvent.type(screen.getByText('Foo').querySelector('input'), 'Foo'); + userEvent.click(screen.getByText('Other element')); + + expect(onBlurMock).toHaveBeenCalled(); }); test('input type defaults to text', () => { - const view = mount(Foo); - expect(view.find('input').props()['type']).toBe('text'); + render(Foo); + expect( + screen + .getByText('Foo') + .querySelector('input') + .getAttribute('type') + ).toEqual('text'); }); test('input type is updated when a different type is passed', () => { - const view = mount(Foo); - expect(view.find('input').props()['type']).toBe('search'); + render(Foo); + expect( + screen + .getByText('Foo') + .querySelector('input') + .getAttribute('type') + ).toEqual('search'); }); test('input is not disabled when TextInputGroupContext isDisabled is false', () => { - const view = mount( + const { asFragment } = render( ); - expect(view.find('input').props()['disabled']).toBe(false); + + expect(asFragment()).toMatchSnapshot(); }); test('input is disabled when TextInputGroupContext isDisabled is true', () => { - const view = mount( + const { asFragment } = render( ); - expect(view.find('input').props()['disabled']).toBe(true); + expect(asFragment()).toMatchSnapshot(); }); }); describe('TextInputGroupUtilities', () => { test('renders the content', () => { - const view = render({}); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render({}); + expect(asFragment()).toMatchSnapshot(); }); }); diff --git a/packages/react-core/src/components/TextInputGroup/__tests__/__snapshots__/TextInputGroup.test.tsx.snap b/packages/react-core/src/components/TextInputGroup/__tests__/__snapshots__/TextInputGroup.test.tsx.snap index 0598a2acaa1..ce7f43afd7a 100644 --- a/packages/react-core/src/components/TextInputGroup/__tests__/__snapshots__/TextInputGroup.test.tsx.snap +++ b/packages/react-core/src/components/TextInputGroup/__tests__/__snapshots__/TextInputGroup.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`TextInputGroup gets custom class and id 1`] = ` -
    +
    -
    + `; exports[`TextInputGroup renders content 1`] = ` -
    +
    @@ -52,11 +52,11 @@ exports[`TextInputGroup renders content 1`] = ` class="pf-c-text-input-group__utilities" />
    -
    + `; exports[`TextInputGroup renders with the proper stying when disabled 1`] = ` -
    +
    @@ -80,11 +80,50 @@ exports[`TextInputGroup renders with the proper stying when disabled 1`] = ` class="pf-c-text-input-group__utilities" />
    -
    + +`; + +exports[`TextInputGroupMain input is disabled when TextInputGroupContext isDisabled is true 1`] = ` + +
    + + + +
    +     +`; + +exports[`TextInputGroupMain input is not disabled when TextInputGroupContext isDisabled is false 1`] = ` + +
    + + + +
    +     `; exports[`TextInputGroupMain renders content 1`] = ` -
    +
    @@ -100,11 +139,11 @@ exports[`TextInputGroupMain renders content 1`] = ` />
    -
    + `; exports[`TextInputGroupMain renders given input icon props 1`] = ` -
    +
    @@ -137,11 +176,11 @@ exports[`TextInputGroupMain renders given input icon props 1`] = ` />
    -
    + `; exports[`TextInputGroupMain renders the input with custom aria label when given 1`] = ` -
    +
    @@ -157,11 +196,11 @@ exports[`TextInputGroupMain renders the input with custom aria label when given />
    -
    + `; exports[`TextInputGroupUtilities renders the content 1`] = ` -
    +
    @@ -169,5 +208,5 @@ exports[`TextInputGroupUtilities renders the content 1`] = ` Foo
    -
    + `; diff --git a/packages/react-core/src/components/TimePicker/__tests__/TimePicker.test.tsx b/packages/react-core/src/components/TimePicker/__tests__/TimePicker.test.tsx index 20f83604af7..a5a67d7677a 100644 --- a/packages/react-core/src/components/TimePicker/__tests__/TimePicker.test.tsx +++ b/packages/react-core/src/components/TimePicker/__tests__/TimePicker.test.tsx @@ -1,139 +1,142 @@ import * as React from 'react'; -import { render } from '@testing-library/react'; -import { mount } from 'enzyme'; -import { act } from 'react-dom/test-utils'; -import { TimePicker } from '../TimePicker' -describe('test timepicker onChange method with valid values', () => { - const testOnChange = ({ inputProps, expects }) => { - const onChange = jest.fn(); +import { render, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import '@testing-library/jest-dom'; - const event: any = { - currentTarget: { value: inputProps.value } - }; - const view = mount(); - - act(() => { - view.find('input').prop('onChange')(event); - }) - expect(onChange).toBeCalledWith(inputProps.value, expects.hour, expects.minutes, expects.seconds, true); - } - - test('should return the correct value using the AM/PM pattern - midnight', () => { - testOnChange({ inputProps: { value: "12:00 AM", is24Hour: false }, expects: { hour: 0, minutes: 0, seconds: null }}) - }) - - test('should return the correct value using the AM/PM pattern - midday', () => { - testOnChange({ inputProps: { value: "12:35 PM", is24Hour: false }, expects: { hour: 12, minutes: 35, seconds: null }}) - }) - - test('should return the correct value using the AM/PM pattern - last minute of the day', () => { - testOnChange({ inputProps: { value: "11:59 PM", is24Hour: false }, expects: { hour: 23, minutes: 59, seconds: null }}) - }) - - test('should return the correct value using the 24h pattern - midnight', () => { - testOnChange({ inputProps: { value: "00:00:00", is24Hour: true, includeSeconds: true }, expects: { hour: 0, minutes: 0, seconds: 0 }}) - }) - - test('should return the correct value using the 24h pattern - midday', () => { - testOnChange({ inputProps: { value: "12:35", is24Hour: false }, expects: { hour: 12, minutes: 35, seconds: null }}) - }) - - test('should return the correct value using the 24h pattern - last minute of the day', () => { - testOnChange({ inputProps: { value: "23:59", is24Hour: true }, expects: { hour: 23, minutes: 59, seconds: null }}) - }) -}) +import { TimePicker } from '../TimePicker'; -describe('test isInvalid', () => { - test('should be valid by default', () => { - const validateTime = (time: string) => { - return true; - } +describe('TimePicker', () => { + describe('test timepicker onChange method with valid values', () => { + const testOnChange = ({ inputProps, expects }) => { + const onChange = jest.fn(); + render(); - const view = mount(); - - expect(view.find('.pf-m-error')).toHaveLength(0); - }) - - test('should stay valid after onChange', () => { - const validateTime = (time: string) => { - return true; - } - - const event: any = { - currentTarget: { value: "01:00" } + userEvent.type(screen.getByLabelText('time picker'), inputProps.value); + expect(onChange).toBeCalledWith(inputProps.value, expects.hour, expects.minutes, expects.seconds, true); }; - const view = mount(); - act(() => { - view.find('input').prop('onChange')(event); - }) - view.update(); + test('should return the correct value using the AM/PM pattern - midnight', () => { + testOnChange({ + inputProps: { value: '12:00 AM', is24Hour: false }, + expects: { hour: 0, minutes: 0, seconds: null } + }); + }); + + test('should return the correct value using the AM/PM pattern - midday', () => { + testOnChange({ + inputProps: { value: '12:35 PM', is24Hour: false }, + expects: { hour: 12, minutes: 35, seconds: null } + }); + }); + + test('should return the correct value using the AM/PM pattern - last minute of the day', () => { + testOnChange({ + inputProps: { value: '11:59 PM', is24Hour: false }, + expects: { hour: 23, minutes: 59, seconds: null } + }); + }); + + test('should return the correct value using the 24h pattern - midnight', () => { + testOnChange({ + inputProps: { value: '00:00:00', is24Hour: true, includeSeconds: true }, + expects: { hour: 0, minutes: 0, seconds: 0 } + }); + }); + + test('should return the correct value using the 24h pattern - midday', () => { + testOnChange({ + inputProps: { value: '12:35', is24Hour: false }, + expects: { hour: 12, minutes: 35, seconds: null } + }); + }); + + test('should return the correct value using the 24h pattern - last minute of the day', () => { + testOnChange({ + inputProps: { value: '23:59', is24Hour: true }, + expects: { hour: 23, minutes: 59, seconds: null } + }); + }); + }); - expect(view.find('.pf-m-error')).toHaveLength(0); - }) + describe('test isInvalid', () => { + test('should be valid by default', () => { + const validateTime = (_time: string) => { + return true; + }; - test('should be invalid after onBlur', () => { - const validateTime = (time: string) => { - return false; - } + render(); - const event: any = { - currentTarget: { value: "01:00" } - }; - const view = mount(); + expect(screen.getByLabelText('time picker')).not.toHaveClass('pf-m-error'); + }); - act(() => { - view.find('input').prop('onChange')(event); - }) - view.update(); + test('should stay valid after onChange', () => { + const validateTime = (_time: string) => { + return true; + }; - expect(view.find('.pf-m-error')).toHaveLength(0); + render(); - view.find('input').simulate('blur'); + const input = screen.getByLabelText('time picker'); - expect(view.find('.pf-m-error')).toHaveLength(1); - }) -}) + userEvent.type(input, '01:00'); + expect(input).not.toHaveClass('pf-m-error'); + }); -describe('test includeSeconds', () => { - const baseProps = { - "aria-label": "time picker", - value: "12:00 PM", - includeSeconds: true - }; + test('should be invalid after onBlur', async () => { + const validateTime = (_time: string) => { + return false; + }; - it('should be valid still with a max value of "11:59:59 PM" by default', () => { - const event: any = { currentTarget: { value: "11:59:59 PM" } }; - const view = mount(); + render( + <> +
    Other element
    + + + ); - act(() => view.find('input').prop('onChange')(event)); - view.update(); + userEvent.type(screen.getByLabelText('time picker'), '01:00'); + expect(screen.queryByText('Invalid time format')).toBeNull(); - expect(view.find('.pf-m-error')).toHaveLength(0); + userEvent.click(screen.getByText('Other element')); + expect(screen.getByText('Invalid time format')).toBeInTheDocument(); + }); }); - it('should be valid still with a max value of "23:59:59" by default when using 24 hour time', () => { - const event: any = { currentTarget: { value: "23:59:59" } }; - const view = mount(); + describe('test includeSeconds', () => { + const baseProps = { + 'aria-label': 'time picker', + value: '12:00 PM', + includeSeconds: true + }; - act(() => view.find('input').prop('onChange')(event)); - view.update(); + it('should be valid still with a max value of "11:59:59 PM" by default', () => { + render(); - expect(view.find('.pf-m-error')).toHaveLength(0); - }); + userEvent.type(screen.getByLabelText(baseProps['aria-label']), '11:59:59 PM'); + expect(screen.queryByText('Invalid time format')).toBeNull(); + }); - it('should be invalid with a max value of "24:00:00" by default', () => { - const event: any = { currentTarget: { value: "24:00:00" } }; - const view = mount(); + it('should be valid still with a max value of "23:59:59" by default when using 24 hour time', () => { + render(); - act(() => view.find('input').prop('onChange')(event)); - view.update(); + userEvent.type(screen.getByLabelText(baseProps['aria-label']), '23:59:59'); + expect(screen.queryByText('Invalid time format')).toBeNull(); + }); - expect(view.find('.pf-m-error')).toHaveLength(0); + it('should be invalid with a max value of "24:00:00" by default', () => { + render( + <> +
    Other element
    + + + ); - view.find('input').simulate('blur'); + userEvent.type(screen.getByLabelText(baseProps['aria-label']), '24:00:00'); + expect(screen.queryByText('Invalid time format')).toBeNull(); - expect(view.find('.pf-m-error')).toHaveLength(1); + userEvent.click(screen.getByText('Other element')); + expect(screen.getByText('Invalid time format')).toBeInTheDocument(); + }); }); }); diff --git a/packages/react-core/src/components/Title/__tests__/Generated/Title.test.tsx b/packages/react-core/src/components/Title/__tests__/Generated/Title.test.tsx deleted file mode 100644 index 77d14d51627..00000000000 --- a/packages/react-core/src/components/Title/__tests__/Generated/Title.test.tsx +++ /dev/null @@ -1,13 +0,0 @@ -/** - * This test was generated - */ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { Title } from '../../Title'; -// any missing imports can usually be resolved by adding them here -import {} from '../..'; - -it('Title should match snapshot (auto-generated)', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); -}); diff --git a/packages/react-core/src/components/Title/__tests__/Generated/__snapshots__/Title.test.tsx.snap b/packages/react-core/src/components/Title/__tests__/Generated/__snapshots__/Title.test.tsx.snap deleted file mode 100644 index a7c453a63e7..00000000000 --- a/packages/react-core/src/components/Title/__tests__/Generated/__snapshots__/Title.test.tsx.snap +++ /dev/null @@ -1,12 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Title should match snapshot (auto-generated) 1`] = ` -<div> - <h1 - class="pf-c-title pf-m-md ''" - data-ouia-component-id="OUIA-Generated-Title-1" - data-ouia-component-type="PF4/Title" - data-ouia-safe="true" - /> -</div> -`; diff --git a/packages/react-core/src/components/Title/__tests__/Title.test.tsx b/packages/react-core/src/components/Title/__tests__/Title.test.tsx index 0de1d9038ef..0b346688179 100644 --- a/packages/react-core/src/components/Title/__tests__/Title.test.tsx +++ b/packages/react-core/src/components/Title/__tests__/Title.test.tsx @@ -1,27 +1,28 @@ import * as React from 'react'; -import { render } from '@testing-library/react'; -import { shallow } from 'enzyme'; + +import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; + import { Title, TitleSizes } from '..'; -Object.values(TitleSizes).forEach(size => { - test(`${size} Title`, () => { - const view = render( - <Title size={size} headingLevel="h1"> - {size} Title +describe('Title', () => { + Object.values(TitleSizes).forEach(size => { + test(`${size} Title`, () => { + const { asFragment } = render( + <Title size={size} headingLevel="h1"> + {size} Title + + ); + expect(asFragment()).toMatchSnapshot(); + }); + }); + + test('Heading level can be set using a string value', () => { + render( + + H3 Heading ); - expect(view.container).toMatchSnapshot(); + expect(screen.getByRole('heading').parentElement.querySelector('h3')).toBeInTheDocument(); }); }); - -test('Heading level can be set using a string value', () => { - const view = shallow( - - H3 Heading - - ); - const isH3 = view.find('h3').length === 1; - const isH1 = view.find('h1').length === 1; - expect(isH1).toBe(false); - expect(isH3).toBe(true); -}); diff --git a/packages/react-core/src/components/Title/__tests__/__snapshots__/Title.test.tsx.snap b/packages/react-core/src/components/Title/__tests__/__snapshots__/Title.test.tsx.snap index 16c784ae0db..22d6b37c393 100644 --- a/packages/react-core/src/components/Title/__tests__/__snapshots__/Title.test.tsx.snap +++ b/packages/react-core/src/components/Title/__tests__/__snapshots__/Title.test.tsx.snap @@ -1,85 +1,79 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`2xl Title 1`] = ` -
    +exports[`Title 2xl Title 1`] = ` +

    - 2xl - Title + 2xl Title

    -
    + `; -exports[`3xl Title 1`] = ` -
    +exports[`Title 3xl Title 1`] = ` +

    - 3xl - Title + 3xl Title

    -
    + `; -exports[`4xl Title 1`] = ` -
    +exports[`Title 4xl Title 1`] = ` +

    - 4xl - Title + 4xl Title

    -
    + `; -exports[`lg Title 1`] = ` -
    +exports[`Title lg Title 1`] = ` +

    - lg - Title + lg Title

    -
    + `; -exports[`md Title 1`] = ` -
    +exports[`Title md Title 1`] = ` +

    - md - Title + md Title

    -
    + `; -exports[`xl Title 1`] = ` -
    +exports[`Title xl Title 1`] = ` +

    - xl - Title + xl Title

    -
    + `; diff --git a/packages/react-core/src/components/ToggleGroup/__tests__/ToggleGroup.test.tsx b/packages/react-core/src/components/ToggleGroup/__tests__/ToggleGroup.test.tsx index 098c17a8d0a..db4ff1445f9 100644 --- a/packages/react-core/src/components/ToggleGroup/__tests__/ToggleGroup.test.tsx +++ b/packages/react-core/src/components/ToggleGroup/__tests__/ToggleGroup.test.tsx @@ -1,6 +1,8 @@ import * as 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 { ToggleGroup } from '../ToggleGroup'; import { ToggleGroupItem } from '../ToggleGroupItem'; @@ -9,41 +11,43 @@ const props = { selected: false }; -test('basic selected', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); -}); - -test('basic not selected', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); +describe('ToggleGroup', () => { + test('basic selected', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); + + test('basic not selected', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); + + test('icon variant', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); + + test('isDisabled', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); + + test('item passes selection and event to onChange handler', () => { + render( + + ); + + userEvent.click(screen.getByRole('button')); + expect(props.onChange).toHaveBeenCalledWith(true, expect.any(Object)); + }); + + test('isCompact', () => { + const { asFragment } = render( + + + + + ); + expect(asFragment()).toMatchSnapshot(); + }); }); - -test('icon variant', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); -}); - -test('isDisabled', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); -}); - -test('item passes selection and event to onChange handler', () => { - const selected = true; - const event = {}; - const view = shallow(); - view.find('button').simulate('click', event, selected); - expect(props.onChange).toBeCalledWith(selected, event); -}); - -test('isCompact', () => { - const view = render( - - - - - ); - expect(view.container).toMatchSnapshot(); -}); - diff --git a/packages/react-core/src/components/ToggleGroup/__tests__/__snapshots__/ToggleGroup.test.tsx.snap b/packages/react-core/src/components/ToggleGroup/__tests__/__snapshots__/ToggleGroup.test.tsx.snap index 3dbf8268a66..37ee48516c9 100644 --- a/packages/react-core/src/components/ToggleGroup/__tests__/__snapshots__/ToggleGroup.test.tsx.snap +++ b/packages/react-core/src/components/ToggleGroup/__tests__/__snapshots__/ToggleGroup.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`basic not selected 1`] = ` -
    +exports[`ToggleGroup basic not selected 1`] = ` +
    @@ -19,18 +19,18 @@ exports[`basic not selected 1`] = `
    -
    + `; -exports[`basic selected 1`] = ` -
    +exports[`ToggleGroup basic selected 1`] = ` +
    -
    + `; -exports[`icon variant 1`] = ` -
    +exports[`ToggleGroup icon variant 1`] = ` +
    -
    + `; -exports[`isCompact 1`] = ` -
    +exports[`ToggleGroup isCompact 1`] = ` +
    @@ -103,11 +104,11 @@ exports[`isCompact 1`] = `
    - + `; -exports[`isDisabled 1`] = ` -
    +exports[`ToggleGroup isDisabled 1`] = ` +
    @@ -126,5 +127,5 @@ exports[`isDisabled 1`] = `
    -
    + `; diff --git a/packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx b/packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx index ef7fa9c33f3..4f70eba81ea 100644 --- a/packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx +++ b/packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx @@ -1,201 +1,207 @@ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { shallow, mount } from 'enzyme'; +import React from 'react'; + +import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; + import { Wizard, WizardStepFunctionType, WizardStep } from '../Wizard'; -test('Wizard should match snapshot', () => { - const steps: WizardStep[] = [ - { name: 'A', component:

    Step 1

    }, - { - name: 'B', - steps: [ - { - name: 'B-1', - component:

    Step 2

    , - enableNext: true - }, - { - name: 'B-2', - component:

    Step 3

    , - enableNext: false - } - ] - }, - { name: 'C', component:

    Step 4

    }, - { name: 'D', component:

    Step 5

    } - ]; - const onBack: WizardStepFunctionType = step => { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const name = { step }; - }; - - const view = render( - - ); - - expect(view.container).toMatchSnapshot(); -}); +describe('Wizard', () => { + test('Wizard should match snapshot', () => { + const steps: WizardStep[] = [ + { name: 'A', component:

    Step 1

    }, + { + name: 'B', + steps: [ + { + name: 'B-1', + component:

    Step 2

    , + enableNext: true + }, + { + name: 'B-2', + component:

    Step 3

    , + enableNext: false + } + ] + }, + { name: 'C', component:

    Step 4

    }, + { name: 'D', component:

    Step 5

    } + ]; + const onBack: WizardStepFunctionType = step => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const name = { step }; + }; -test('Expandable Nav Wizard should match snapshot', () => { - const steps: WizardStep[] = [ - { name: 'A', component:

    Step 1

    }, - { - name: 'B', - steps: [ - { - name: 'B-1', - component:

    Step 2

    , - enableNext: true - }, - { - name: 'B-2', - component:

    Step 3

    , - enableNext: false - } - ] - }, - { name: 'C', component:

    Step 4

    }, - { name: 'D', component:

    Step 5

    } - ]; - const onBack: WizardStepFunctionType = step => { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const name = { step }; - }; - - const view = render( - - ); - - expect(view.container).toMatchSnapshot(); -}); + const { asFragment } = render( + + ); -test('bare wiz ', () => { - const steps: WizardStep[] = [{ name: 'A', component:

    Step 1

    }]; - const wiz = ( - - ); - const view = mount(wiz); - const hasHeader = view.at(0).find('.pf-c-wizard__header').length; - const hasTitle = view.at(0).find('.pf-c-wizard__title').length; - expect(hasHeader).toBeFalsy(); - expect(hasTitle).toBeFalsy(); -}); + expect(asFragment()).toMatchSnapshot(); + }); -test('wiz with title ', () => { - const steps: WizardStep[] = [{ name: 'A', component:

    Step 1

    }]; - const wiz = ; - const view = mount(wiz).at(0); - const hasHeader = view.find('.pf-c-wizard__header').length; - const hasTitle = view.find('h2.pf-c-wizard__title').length; - const nav = view.find('nav.pf-c-wizard__nav'); - const main = view.find('div.pf-c-wizard__main'); - expect(hasHeader).toBe(1); - expect(hasTitle).toBe(1); - expect(nav.find('[aria-labelledby="pf-wizard-title-3"]').length).toBe(1); - expect(main.find('[aria-labelledby="pf-wizard-title-3"]').length).toBe(1); -}); + test('Expandable Nav Wizard should match snapshot', () => { + const steps: WizardStep[] = [ + { name: 'A', component:

    Step 1

    }, + { + name: 'B', + steps: [ + { + name: 'B-1', + component:

    Step 2

    , + enableNext: true + }, + { + name: 'B-2', + component:

    Step 3

    , + enableNext: false + } + ] + }, + { name: 'C', component:

    Step 4

    }, + { name: 'D', component:

    Step 5

    } + ]; + const onBack: WizardStepFunctionType = step => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const name = { step }; + }; -test('wiz with title and navAriaLabel combination', () => { - const steps: WizardStep[] = [{ name: 'A', component:

    Step 1

    }]; - const wiz = ; - const view = mount(wiz).at(0); - const nav = view.find('nav.pf-c-wizard__nav'); - const main = view.find('div.pf-c-wizard__main'); - expect(nav.find('[aria-labelledby="pf-wizard-title-4"]').length).toBe(1); - expect(nav.find('[aria-label="Some label"]').length).toBe(1); - expect(main.props()['aria-label']).toBe(null); -}); + const { asFragment } = render( + + ); -test('wiz with title, navAriaLabel, and mainAriaLabel combination', () => { - const steps: WizardStep[] = [{ name: 'A', component:

    Step 1

    }]; - const wiz = ( - - ); - const view = mount(wiz).at(0); - const nav = view.find('nav.pf-c-wizard__nav'); - const main = view.find('div.pf-c-wizard__main'); - expect(nav.find('[aria-labelledby="pf-wizard-title-5"]').length).toBe(1); - expect(nav.find('[aria-label="nav aria-label"]').length).toBe(1); - expect(main.props()['aria-label']).toBe('main aria-label'); -}); + expect(asFragment()).toMatchSnapshot(); + }); -test('wiz with navAriaLabel and mainAriaLabel but without title', () => { - const steps: WizardStep[] = [{ name: 'A', component:

    Step 1

    }]; - const wiz = ( - - ); - const view = mount(wiz).at(0); - const nav = view.find('nav.pf-c-wizard__nav'); - const main = view.find('div.pf-c-wizard__main'); - expect(main.props()['aria-label']).toBe('main aria-label'); - expect(main.props()['aria-labelledby']).toBe(null); - expect(nav.find('[aria-label="nav aria-label"]').length).toBe(1); - expect(nav.props()['aria-labelledby']).toBe(null); -}); + test('bare wiz', () => { + const steps: WizardStep[] = [{ name: 'A', component:

    Step 1

    }]; -test('wiz with navAriaLabel and navAriaLabelledby and without title', () => { - const steps: WizardStep[] = [{ name: 'A', component:

    Step 1

    }]; - const wiz = ( - - ); - const view = mount(wiz).at(0); - const nav = view.find('nav.pf-c-wizard__nav'); - const main = view.find('div.pf-c-wizard__main'); - expect(nav.find('[aria-label="nav aria-label"]').length).toBe(1); - expect(nav.props()['aria-labelledby']).toBe('nav-aria-labelledby'); -}); + const { asFragment } = render( + + ); -test('wiz with navAriaLabel and navAriaLabelledby and without title', () => { - const steps: WizardStep[] = [{ name: 'A', component:

    Step 1

    }]; - const wiz = ( - - ); - const view = mount(wiz).at(0); - const main = view.find('div.pf-c-wizard__main'); - expect(main.props()['aria-label']).toBe('main aria-label'); - expect(main.props()['aria-labelledby']).toBe('main-aria-labelledby'); -}); + expect(asFragment()).toMatchSnapshot(); + }); + + test('wiz with title', () => { + const steps: WizardStep[] = [{ name: 'A', component:

    Step 1

    }]; + + render(); + expect(screen.getByRole('heading', { name: 'Wizard' })).toBeInTheDocument(); + }); + + test('wiz with title and navAriaLabel combination', () => { + const steps: WizardStep[] = [{ name: 'A', component:

    Step 1

    }]; + + render(); + + const nav = screen.getByLabelText('Some label'); + + expect(screen.getByRole('heading', { name: 'Wizard' })).toBeInTheDocument(); + expect(nav).toBeInTheDocument(); + expect(nav).toHaveAttribute('aria-labelledby', 'pf-wizard-title-4'); + }); + + test('wiz with title, navAriaLabel, and mainAriaLabel combination', () => { + const steps: WizardStep[] = [{ name: 'A', component:

    Step 1

    }]; + render( + + ); + + expect(screen.getByRole('heading', { name: 'Wizard' })).toBeInTheDocument(); + expect(screen.getByLabelText('nav aria-label')).toBeInTheDocument(); + expect(screen.getByLabelText('main aria-label')).toBeInTheDocument(); + }); + + test('wiz with navAriaLabel and mainAriaLabel but without title', () => { + const steps: WizardStep[] = [{ name: 'A', component:

    Step 1

    }]; + + render( + + ); + + expect(screen.getByLabelText('nav aria-label')).toBeInTheDocument(); + expect(screen.getByLabelText('main aria-label')).toBeInTheDocument(); + }); + + test('wiz with navAriaLabel and navAriaLabelledby and without title', () => { + const steps: WizardStep[] = [{ name: 'A', component:

    Step 1

    }]; + + render( + + ); + + const nav = screen.getByLabelText('nav aria-label'); + + expect(nav).toBeInTheDocument(); + expect(nav).toHaveAttribute('aria-labelledby', 'nav-aria-labelledby'); + }); + + test('wiz with navAriaLabel and navAriaLabelledby and without title', () => { + const steps: WizardStep[] = [{ name: 'A', component:

    Step 1

    }]; + render( + + ); + + const main = screen.getByLabelText('main aria-label'); + + expect(main).toBeInTheDocument(); + expect(main).toHaveAttribute('aria-labelledby', 'main-aria-labelledby'); + }); + + test('wiz with title, navAriaLabelledBy, navAriaLabel, mainAriaLabel, and mainAriaLabelledby', () => { + const steps: WizardStep[] = [{ name: 'A', component:

    Step 1

    }]; + render( + + ); + + const nav = screen.getByLabelText('nav aria-label'); + expect(nav).toBeInTheDocument(); + expect(nav).toHaveAttribute('aria-labelledby', 'nav-aria-labelledby'); -test('wiz with title, navAriaLabelledBy, navAriaLabel, mainAriaLabel, and mainAriaLabelledby', () => { - const steps: WizardStep[] = [{ name: 'A', component:

    Step 1

    }]; - const wiz = ( - - ); - const view = mount(wiz).at(0); - const nav = view.find('nav.pf-c-wizard__nav'); - const main = view.find('div.pf-c-wizard__main'); - expect(nav.find('[aria-label="nav aria-label"]').length).toBe(1); - expect(nav.find('[aria-labelledby="nav-aria-labelledby"]').length).toBe(1); - expect(main.props()['aria-label']).toBe('main aria-label'); - expect(main.props()['aria-labelledby']).toBe('main-aria-labelledby'); + const main = screen.getByLabelText('main aria-label'); + expect(main).toBeInTheDocument(); + expect(main).toHaveAttribute('aria-labelledby', 'main-aria-labelledby'); + }); }); diff --git a/packages/react-core/src/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap b/packages/react-core/src/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap index c8a77fb5b32..2978eef8191 100644 --- a/packages/react-core/src/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap +++ b/packages/react-core/src/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Expandable Nav Wizard should match snapshot 1`] = ` -
    +exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = ` +
    @@ -64,8 +64,7 @@ exports[`Expandable Nav Wizard should match snapshot 1`] = ` > 1 - - A + A
    - + `; -exports[`Wizard should match snapshot 1`] = ` -
    +exports[`Wizard Wizard should match snapshot 1`] = ` +
    @@ -312,8 +311,7 @@ exports[`Wizard should match snapshot 1`] = ` > 1 - - A + A
    - + +`; + +exports[`Wizard bare wiz 1`] = ` + +
    + +
    +
    + +
    +
    +

    + Step 1 +

    +
    +
    +
    +
    + + +
    + +
    +
    +
    +
    +     `; diff --git a/packages/react-core/src/helpers/__tests__/util.test.js b/packages/react-core/src/helpers/__tests__/util.test.js deleted file mode 100644 index 7685bb0431a..00000000000 --- a/packages/react-core/src/helpers/__tests__/util.test.js +++ /dev/null @@ -1,235 +0,0 @@ -import React from 'react'; -import { mount } from 'enzyme'; -import { ApplicationLauncher, DropdownItem, Dropdown, DropdownToggle } from '@patternfly/react-core'; -import { - capitalize, - getUniqueId, - debounce, - isElementInView, - sideElementIsOutOfView, - fillTemplate, - pluralize, - formatBreakpointMods -} from '../util'; -import { KEY_CODES, SIDE } from '../constants'; -import styles from '@patternfly/react-styles/css/layouts/Flex/flex'; - -const createMockHtmlElement = bounds => ({ - getBoundingClientRect: () => bounds -}); - -test('capitalize', () => { - expect(capitalize('foo')).toBe('Foo'); -}); - -test('getUniqueId', () => { - expect(getUniqueId()).not.toBe(getUniqueId()); -}); - -test('getUniqueId prefixed', () => { - expect(getUniqueId().substring(0, 3)).toBe('pf-'); - expect(getUniqueId('pf-switch').substring(0, 10)).toBe('pf-switch-'); -}); - -test('debounce', () => { - jest.useFakeTimers(); - const callback = jest.fn(); - const debouncedFunction = debounce(callback, 50); - - debouncedFunction(); - // At this point in time, the callback should not have been called yet - expect(callback).toHaveBeenCalledTimes(0); - - for (let i = 0; i < 10; i++) { - jest.advanceTimersByTime(50); - debouncedFunction(); - } - - expect(callback).toBeCalledTimes(10); -}); - -test('isElementInView should be true when partial out of view and with partial true', () => { - const container = createMockHtmlElement({ left: 0, right: 200 }); - const element = createMockHtmlElement({ left: 10, right: 210 }); - expect(isElementInView(container, element, true)).toBe(true); -}); - -test('isElementInView should be false when partial out of view and with partial false ', () => { - const container = createMockHtmlElement({ left: 0, right: 200 }); - const element = createMockHtmlElement({ left: 10, right: 210 }); - expect(isElementInView(container, element, false)).toBe(false); -}); - -test('isElementInView should be false completely out of view ', () => { - const container = createMockHtmlElement({ left: 0, right: 200 }); - const element = createMockHtmlElement({ left: 200, right: 300 }); - expect(isElementInView(container, element, true)).toBe(false); -}); - -test('isElementInView should be false completely out of view when partial false ', () => { - const container = createMockHtmlElement({ left: 0, right: 200 }); - const element = createMockHtmlElement({ left: 200, right: 300 }); - expect(isElementInView(container, element, false)).toBe(false); -}); - -test('sideElementIsOutOfView Returns left when off on left side', () => { - const container = createMockHtmlElement({ left: 20, right: 220 }); - const element = createMockHtmlElement({ left: 10, right: 210 }); - expect(sideElementIsOutOfView(container, element)).toBe(SIDE.LEFT); -}); - -test('sideElementIsOutOfView Returns right when off on right side', () => { - const container = createMockHtmlElement({ left: 0, right: 200 }); - const element = createMockHtmlElement({ left: 210, right: 410 }); - expect(sideElementIsOutOfView(container, element)).toBe(SIDE.RIGHT); -}); - -test('sideElementIsOutOfView Returns NONE when in view', () => { - const container = createMockHtmlElement({ left: 0, right: 200 }); - const element = createMockHtmlElement({ left: 10, right: 110 }); - expect(sideElementIsOutOfView(container, element)).toBe(SIDE.NONE); -}); - -xdescribe('keyHandler works on ApplicationLauncher', () => { - document.body.innerHTML = ''; - const dropdownItems = [ - - Action 1 - , - - Action 2 - , - - Disabled Link - - ]; - - const view = mount(, { - attachTo: document.getElementsByName('div')[0] - }); - const firstDropdownItem = view.find('#first button').first(); - const secondDropdownItem = view.find('#second button').first(); - - test('keyHandler advances forward', () => { - firstDropdownItem.simulate('keydown', { - key: 'ArrowDown', - keyCode: KEY_CODES.ARROW_DOWN, - which: KEY_CODES.ARROW_DOWN - }); - const focusedElement = document.activeElement; - console.log(focusedElement); - expect(focusedElement.getAttribute('id')).toEqual('second-button'); - }); - - test('keyHandler regresses backward', () => { - secondDropdownItem.simulate('keydown', { - key: 'ArrowUp', - keyCode: KEY_CODES.ARROW_UP, - which: KEY_CODES.ARROW_UP - }); - const focusedElement = document.activeElement; - expect(focusedElement.getAttribute('id')).toEqual('first-button'); - }); - - test('keyHandler loops top to bottom', () => { - firstDropdownItem.simulate('keydown', { - key: 'ArrowUp', - keyCode: KEY_CODES.ARROW_UP, - which: KEY_CODES.ARROW_UP - }); - const focusedElement = document.activeElement; - expect(focusedElement.getAttribute('id')).toEqual('third-button'); - }); -}); - -xdescribe('keyHandler works on Dropdown', () => { - document.body.innerHTML = ''; - const dropdownItems = [ - - Action 1 - , - - Action 2 - , - - Disabled Link - - ]; - const view = mount( - Expanded Dropdown} />, - { - attachTo: document.getElementsByName('div')[0] - } - ); - const firstDropdownItem = view.find('#first button').first(); - const secondDropdownItem = view.find('#second button').first(); - const thirdDropdownItem = view.find('#third button').first(); - - test('keyHandler advances forward', () => { - firstDropdownItem.simulate('keydown', { - key: 'ArrowDown', - keyCode: KEY_CODES.ARROW_DOWN, - which: KEY_CODES.ARROW_DOWN - }); - const focusedElement = document.activeElement; - expect(focusedElement.getAttribute('id')).toEqual('second-button'); - }); - - test('keyHandler regresses backward', () => { - secondDropdownItem.simulate('keydown', { - key: 'ArrowUp', - keyCode: KEY_CODES.ARROW_UP, - which: KEY_CODES.ARROW_UP - }); - const focusedElement = document.activeElement; - expect(focusedElement.getAttribute('id')).toEqual('first-button'); - }); - - test('keyHandler loops top to bottom', () => { - firstDropdownItem.simulate('keydown', { - key: 'ArrowUp', - keyCode: KEY_CODES.ARROW_UP, - which: KEY_CODES.ARROW_UP - }); - const focusedElement = document.activeElement; - expect(focusedElement.getAttribute('id')).toEqual('third-button'); - }); - - test('keyHandler loops down to top', () => { - thirdDropdownItem.simulate('keydown', { - key: 'ArrowDown', - keyCode: KEY_CODES.ARROW_DOWN, - which: KEY_CODES.ARROW_DOWN - }); - const focusedElement = document.activeElement; - expect(focusedElement.getAttribute('id')).toEqual('first-button'); - }); -}); - -test('fillTemplate interpolates strings correctly', () => { - // eslint-disable-next-line no-template-curly-in-string - const templateString = 'My name is ${firstName} ${lastName}'; - const expected = 'My name is Jon Dough'; - const templatVars = { - firstName: 'Jon', - lastName: 'Dough' - }; - const actual = fillTemplate(templateString, templatVars); - expect(actual).toEqual(expected); -}); - -test('text pluralize', () => { - expect(pluralize(1, 'dog')).toEqual('1 dog'); - expect(pluralize(2, 'dog')).toEqual('2 dogs'); - expect(pluralize(2, 'finch', 'finches')).toEqual('2 finches'); -}); - -test('formatBreakpointMods', () => { - expect(formatBreakpointMods({ default: 'spacerNone' }, styles)).toEqual('pf-m-spacer-none'); - expect(formatBreakpointMods({ md: 'spacerNone' }, styles)).toEqual( - 'pf-m-spacer-none-on-md' - ); - expect(formatBreakpointMods({ default: 'column', lg: 'row' }, styles)).toEqual( - 'pf-m-column pf-m-row-on-lg' - ); -}); diff --git a/packages/react-core/src/helpers/__tests__/util.test.ts b/packages/react-core/src/helpers/__tests__/util.test.ts new file mode 100644 index 00000000000..b800ceb40bc --- /dev/null +++ b/packages/react-core/src/helpers/__tests__/util.test.ts @@ -0,0 +1,113 @@ +import { + capitalize, + getUniqueId, + debounce, + isElementInView, + sideElementIsOutOfView, + fillTemplate, + pluralize, + formatBreakpointMods +} from '../util'; +import { SIDE } from '../constants'; +import styles from '@patternfly/react-styles/css/layouts/Flex/flex'; + +const createMockHtmlElement = bounds => + ({ + getBoundingClientRect: () => bounds + } as HTMLElement); + +test('capitalize', () => { + expect(capitalize('foo')).toBe('Foo'); +}); + +test('getUniqueId', () => { + expect(getUniqueId()).not.toBe(getUniqueId()); +}); + +test('getUniqueId prefixed', () => { + expect(getUniqueId().substring(0, 3)).toBe('pf-'); + expect(getUniqueId('pf-switch').substring(0, 10)).toBe('pf-switch-'); +}); + +test('debounce', () => { + jest.useFakeTimers(); + const callback = jest.fn(); + const debouncedFunction = debounce(callback, 50); + + debouncedFunction(); + // At this point in time, the callback should not have been called yet + expect(callback).toHaveBeenCalledTimes(0); + + for (let i = 0; i < 10; i++) { + jest.advanceTimersByTime(50); + debouncedFunction(); + } + + expect(callback).toBeCalledTimes(10); +}); + +test('isElementInView should be true when partial out of view and with partial true', () => { + const container = createMockHtmlElement({ left: 0, right: 200 }); + const element = createMockHtmlElement({ left: 10, right: 210 }); + expect(isElementInView(container, element, true)).toBe(true); +}); + +test('isElementInView should be false when partial out of view and with partial false ', () => { + const container = createMockHtmlElement({ left: 0, right: 200 }); + const element = createMockHtmlElement({ left: 10, right: 210 }); + expect(isElementInView(container, element, false)).toBe(false); +}); + +test('isElementInView should be false completely out of view ', () => { + const container = createMockHtmlElement({ left: 0, right: 200 }); + const element = createMockHtmlElement({ left: 200, right: 300 }); + expect(isElementInView(container, element, true)).toBe(false); +}); + +test('isElementInView should be false completely out of view when partial false ', () => { + const container = createMockHtmlElement({ left: 0, right: 200 }); + const element = createMockHtmlElement({ left: 200, right: 300 }); + expect(isElementInView(container, element, false)).toBe(false); +}); + +test('sideElementIsOutOfView Returns left when off on left side', () => { + const container = createMockHtmlElement({ left: 20, right: 220 }); + const element = createMockHtmlElement({ left: 10, right: 210 }); + expect(sideElementIsOutOfView(container, element)).toBe(SIDE.LEFT); +}); + +test('sideElementIsOutOfView Returns right when off on right side', () => { + const container = createMockHtmlElement({ left: 0, right: 200 }); + const element = createMockHtmlElement({ left: 210, right: 410 }); + expect(sideElementIsOutOfView(container, element)).toBe(SIDE.RIGHT); +}); + +test('sideElementIsOutOfView Returns NONE when in view', () => { + const container = createMockHtmlElement({ left: 0, right: 200 }); + const element = createMockHtmlElement({ left: 10, right: 110 }); + expect(sideElementIsOutOfView(container, element)).toBe(SIDE.NONE); +}); + +test('fillTemplate interpolates strings correctly', () => { + // eslint-disable-next-line no-template-curly-in-string + const templateString = 'My name is ${firstName} ${lastName}'; + const expected = 'My name is Jon Dough'; + const templatVars = { + firstName: 'Jon', + lastName: 'Dough' + }; + const actual = fillTemplate(templateString, templatVars); + expect(actual).toEqual(expected); +}); + +test('text pluralize', () => { + expect(pluralize(1, 'dog')).toEqual('1 dog'); + expect(pluralize(2, 'dog')).toEqual('2 dogs'); + expect(pluralize(2, 'finch', 'finches')).toEqual('2 finches'); +}); + +test('formatBreakpointMods', () => { + expect(formatBreakpointMods({ default: 'spacerNone' }, styles)).toEqual('pf-m-spacer-none'); + expect(formatBreakpointMods({ md: 'spacerNone' }, styles)).toEqual('pf-m-spacer-none-on-md'); + expect(formatBreakpointMods({ default: 'column', lg: 'row' }, styles)).toEqual('pf-m-column pf-m-row-on-lg'); +}); diff --git a/packages/react-core/src/layouts/Bullseye/__tests__/Bullseye.test.tsx b/packages/react-core/src/layouts/Bullseye/__tests__/Bullseye.test.tsx index 0bae6cdb156..e57f10f10a6 100644 --- a/packages/react-core/src/layouts/Bullseye/__tests__/Bullseye.test.tsx +++ b/packages/react-core/src/layouts/Bullseye/__tests__/Bullseye.test.tsx @@ -1,32 +1,32 @@ -import * as React from 'react'; +import React from 'react'; + +import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; + import { Bullseye } from '../Bullseye'; -import { render } from '@testing-library/react'; -import { shallow } from 'enzyme'; -test('renders with PatternFly Core styles', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); -}); +describe('Bullseye', () => { + test('renders with PatternFly Core styles', () => { + const { asFragment } = render(); + expect(asFragment()).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.getByTestId('test-id')).toHaveClass('extra-class'); + }); -test('extra props are spread to the root element', () => { - const testId = 'bullseye'; - const view = shallow(); - expect(view.prop('data-testid')).toBe(testId); -}); + test('allows passing in a string as the component', () => { + const component = 'button'; -test('allows passing in a string as the component', () => { - const component = 'div'; - const view = shallow(); - expect(view.type()).toBe(component); -}); + render(); + expect(screen.getByRole('button')).toBeInTheDocument(); + }); + + test('allows passing in a React Component as the component', () => { + const Component: React.FunctionComponent = () =>
    Some text
    ; -test('allows passing in a React Component as the component', () => { - const Component: React.FunctionComponent = () => null; - const view = shallow(); - expect(view.type()).toBe(Component); + render(); + expect(screen.getByText('Some text')).toBeInTheDocument(); + }); }); diff --git a/packages/react-core/src/layouts/Bullseye/__tests__/__snapshots__/Bullseye.test.tsx.snap b/packages/react-core/src/layouts/Bullseye/__tests__/__snapshots__/Bullseye.test.tsx.snap index 1584de3bd8c..52fc751afdc 100644 --- a/packages/react-core/src/layouts/Bullseye/__tests__/__snapshots__/Bullseye.test.tsx.snap +++ b/packages/react-core/src/layouts/Bullseye/__tests__/__snapshots__/Bullseye.test.tsx.snap @@ -1,11 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`className is added to the root element 1`] = `"pf-l-bullseye extra-class"`; - -exports[`renders with PatternFly Core styles 1`] = ` -
    +exports[`Bullseye renders with PatternFly Core styles 1`] = ` +
    -
    +     `; diff --git a/packages/react-core/src/layouts/Flex/__tests__/Flex.test.tsx b/packages/react-core/src/layouts/Flex/__tests__/Flex.test.tsx index 32671336824..b82458c85ec 100644 --- a/packages/react-core/src/layouts/Flex/__tests__/Flex.test.tsx +++ b/packages/react-core/src/layouts/Flex/__tests__/Flex.test.tsx @@ -1,110 +1,173 @@ import * as React from 'react'; + +import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; + import { Flex } from '../Flex'; import { FlexItem } from '../FlexItem'; -import { render } from '@testing-library/react'; -import { mount } from 'enzyme'; - -test('Simple flex with single item', () => { - const view = render( - - Test - - ); - expect(view.container).toMatchSnapshot(); -}); -test('Nested flex', () => { - const view = render( - +describe('Flex', () => { + test('Simple flex with single item', () => { + const { asFragment } = render( Test - - ); - expect(view.container).toMatchSnapshot(); -}); + ); + expect(asFragment()).toMatchSnapshot(); + }); -test('className is added to the root element', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); -}); + test('Nested flex', () => { + const { asFragment } = render( + + + Test + + + ); + expect(asFragment()).toMatchSnapshot(); + }); -const flexModifiers = { - spacer: ['spacerNone', 'spacerXs', 'spacerSm', 'spacerMd', 'spacerLg', 'spacerXl', 'spacer2xl', 'spacer3xl', 'spacer4xl'], - spaceItems: ['spaceItemsNone', 'spaceItemsXs', 'spaceItemsSm', 'spaceItemsMd', 'spaceItemsLg', 'spaceItemsXl', 'spaceItems2xl', 'spaceItems3xl', 'spaceItems4xl'], - grow: ['grow'], - shrink: ['shrink'], - flex: ['flexDefault', 'flexNone', 'flex_1', 'flex_2', 'flex_3', 'flex_4'], - direction: ['column', 'columnReverse', 'row', 'rowReverse'], - alignItems: ['alignItemsFlexStart', 'alignItemsFlexEnd', 'alignItemsCenter', 'alignItemsStretch', 'alignItemsBaseline'], - alignContent: ['alignContentFlexStart', 'alignContentFlexEnd', 'alignContentCenter', 'alignContentStretch', 'alignContentSpaceBetween', 'alignContentSpaceAround'], - alignSelf: ['alignSelfFlexStart', 'alignSelfFlexEnd', 'alignSelfCenter', 'alignSelfStretch', 'alignSelfBaseline'], - align: ['alignLeft', 'alignRight'], - justifyContent: ['justifyContentFlexStart', 'justifyContentFlexEnd', 'justifyContentCenter', 'justifyContentSpaceBetween', 'justifyContentSpaceAround', 'justifyContentSpaceEvenly'], - display: ['inlineFlex'], - fullWidth: ['fullWidth'], - flexWrap: ['wrap', 'wrapReverse', 'nowrap'] -}; + test('className is added to the root element', () => { + render(); + expect(screen.getByTestId('test-id')).toHaveClass('extra-class'); + }); -describe('flex modifiers', () => { - Object.entries(flexModifiers) - .map(([mod, values]) => values.map(value => ({ - [mod]: { - default: value, - sm: value, - lg: value, - xl: value, - '2xl': value - } - }))) - .reduce((acc, val) => acc.concat(val), []) - .forEach(props => - test(`${JSON.stringify(props)} add valid classes to Flex`, () => { - const view = mount({JSON.stringify(props)}); - const className = view.find('div').prop('className').replace('pf-l-flex', '').trim(); - expect(className).not.toBe("''"); - expect(className).not.toBe(""); - }) - ); -}); + const flexModifiers = { + spacer: [ + 'spacerNone', + 'spacerXs', + 'spacerSm', + 'spacerMd', + 'spacerLg', + 'spacerXl', + 'spacer2xl', + 'spacer3xl', + 'spacer4xl' + ], + spaceItems: [ + 'spaceItemsNone', + 'spaceItemsXs', + 'spaceItemsSm', + 'spaceItemsMd', + 'spaceItemsLg', + 'spaceItemsXl', + 'spaceItems2xl', + 'spaceItems3xl', + 'spaceItems4xl' + ], + grow: ['grow'], + shrink: ['shrink'], + flex: ['flexDefault', 'flexNone', 'flex_1', 'flex_2', 'flex_3', 'flex_4'], + direction: ['column', 'columnReverse', 'row', 'rowReverse'], + alignItems: [ + 'alignItemsFlexStart', + 'alignItemsFlexEnd', + 'alignItemsCenter', + 'alignItemsStretch', + 'alignItemsBaseline' + ], + alignContent: [ + 'alignContentFlexStart', + 'alignContentFlexEnd', + 'alignContentCenter', + 'alignContentStretch', + 'alignContentSpaceBetween', + 'alignContentSpaceAround' + ], + alignSelf: ['alignSelfFlexStart', 'alignSelfFlexEnd', 'alignSelfCenter', 'alignSelfStretch', 'alignSelfBaseline'], + align: ['alignLeft', 'alignRight'], + justifyContent: [ + 'justifyContentFlexStart', + 'justifyContentFlexEnd', + 'justifyContentCenter', + 'justifyContentSpaceBetween', + 'justifyContentSpaceAround', + 'justifyContentSpaceEvenly' + ], + display: ['inlineFlex'], + fullWidth: ['fullWidth'], + flexWrap: ['wrap', 'wrapReverse', 'nowrap'] + }; -const flexItemModifiers = { - spacer: flexModifiers.spacer, - grow: flexModifiers.grow, - shrink: flexModifiers.shrink, - flex: flexModifiers.flex, - alignSelf: flexModifiers.alignSelf, - align: flexModifiers.align, - fullWidth: flexModifiers.fullWidth -}; + describe('flex modifiers', () => { + Object.entries(flexModifiers) + .map(([mod, values]) => + values.map(value => ({ + [mod]: { + default: value, + sm: value, + lg: value, + xl: value, + '2xl': value + } + })) + ) + .reduce((acc, val) => acc.concat(val), []) + .forEach(props => + test(`${JSON.stringify(props)} add valid classes to Flex`, () => { + render( + + {JSON.stringify(props)} + + ); -describe('flexItem modifiers', () => { - Object.entries(flexItemModifiers) - .map(([mod, values]) => values.map(value => ({ - [mod]: { - default: value, - sm: value, - lg: value, - xl: value, - '2xl': value - } - }))) - .reduce((acc, val) => acc.concat(val), []) - .forEach(props => - test(`${JSON.stringify(props)} add valid classes to FlexItem`, () => { - const view = mount({JSON.stringify(props)}); - const className = view.find('div').prop('className').trim(); - expect(className).not.toBe("''"); - expect(className).not.toBe(""); - }) - ); -}); + const className = screen + .getByTestId('test-id') + .className.replace('pf-l-flex', '') + .trim(); + + expect(className).not.toBe("''"); + expect(className).not.toBe(''); + }) + ); + }); + + const flexItemModifiers = { + spacer: flexModifiers.spacer, + grow: flexModifiers.grow, + shrink: flexModifiers.shrink, + flex: flexModifiers.flex, + alignSelf: flexModifiers.alignSelf, + align: flexModifiers.align, + fullWidth: flexModifiers.fullWidth + }; -test('alternative component', () => { - const view = render( - - Test - - ); - expect(view.container).toMatchSnapshot(); + describe('flexItem modifiers', () => { + Object.entries(flexItemModifiers) + .map(([mod, values]) => + values.map(value => ({ + [mod]: { + default: value, + sm: value, + lg: value, + xl: value, + '2xl': value + } + })) + ) + .reduce((acc, val) => acc.concat(val), []) + .forEach(props => + test(`${JSON.stringify(props)} add valid classes to FlexItem`, () => { + render( + + {JSON.stringify(props)} + + ); + + const className = screen.getByTestId('test-id').className.trim(); + + expect(className).not.toBe("''"); + expect(className).not.toBe(''); + }) + ); + }); + + test('alternative component', () => { + const { asFragment } = render( + + Test + + ); + expect(asFragment()).toMatchSnapshot(); + }); }); diff --git a/packages/react-core/src/layouts/Flex/__tests__/__snapshots__/Flex.test.tsx.snap b/packages/react-core/src/layouts/Flex/__tests__/__snapshots__/Flex.test.tsx.snap index 302dc52b509..adace68d6a3 100644 --- a/packages/react-core/src/layouts/Flex/__tests__/__snapshots__/Flex.test.tsx.snap +++ b/packages/react-core/src/layouts/Flex/__tests__/__snapshots__/Flex.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Nested flex 1`] = ` -
    +exports[`Flex Nested flex 1`] = ` +
    @@ -15,11 +15,11 @@ exports[`Nested flex 1`] = `
    - + `; -exports[`Simple flex with single item 1`] = ` -
    +exports[`Flex Simple flex with single item 1`] = ` +
    @@ -29,11 +29,11 @@ exports[`Simple flex with single item 1`] = ` Test
    - + `; -exports[`alternative component 1`] = ` -
    +exports[`Flex alternative component 1`] = ` +
      @@ -43,13 +43,5 @@ exports[`alternative component 1`] = ` Test
    -
    -`; - -exports[`className is added to the root element 1`] = ` -
    -
    -
    + `;