From 0a870ae65efcbea05d3e0252a5515fe396a3a0f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20Pet=C5=99=C3=ADk?= Date: Tue, 13 Dec 2022 22:51:50 +0100 Subject: [PATCH 1/5] add integration tests, issue with keypress tests --- .../cypress/integration/dropdownnext.spec.ts | 46 ++++++++++++++ .../demo-app-ts/src/Demos.ts | 5 ++ .../DropdownNextDemo/DropdownNextDemo.tsx | 61 +++++++++++++++++++ .../demo-app-ts/src/components/demos/index.ts | 1 + 4 files changed, 113 insertions(+) create mode 100644 packages/react-integration/cypress/integration/dropdownnext.spec.ts create mode 100644 packages/react-integration/demo-app-ts/src/components/demos/DropdownNextDemo/DropdownNextDemo.tsx diff --git a/packages/react-integration/cypress/integration/dropdownnext.spec.ts b/packages/react-integration/cypress/integration/dropdownnext.spec.ts new file mode 100644 index 00000000000..301984b1d5e --- /dev/null +++ b/packages/react-integration/cypress/integration/dropdownnext.spec.ts @@ -0,0 +1,46 @@ +describe('Dropdown demo test', () => { + it('navigate to demo section', () => { + cy.visit('http://localhost:3000/dropdown-next-demo-nav-link'); + }); + + // mouse interactions + it('opens/closes dropdown menu when clicked', () => { + cy.get('[data-cy="toggle"]').click(); + cy.get('[data-cy="toggle"]').should('have.class', 'pf-m-expanded'); + cy.get('[data-cy="toggle"]').click(); + cy.get('[data-cy="toggle"]').should('not.have.class', 'pf-m-expanded'); + }); + + it('closes dropdown when clicked outside', () => { + cy.get('[data-cy="toggle"]').click(); + cy.get('main').click(0, 0); + cy.get('[data-cy="toggle"]').should('not.have.class', 'pf-m-expanded'); + }); + + it('closes dropdown when dropdown item clicked', () => { + cy.get('[data-cy="toggle"]').click(); + cy.get('[data-cy="dropdown-item"]').click(); + cy.get('[data-cy="toggle"]').should('not.have.class', 'pf-m-expanded'); + }); + + // keyboard interactions + it('closes dropdown on pressing esc, focus stays on the toggle', () => { + cy.get('[data-cy="toggle"]').click(); + cy.get('[data-cy="toggle"]').trigger('keydown', { key: 'Escape' }); + cy.get('[data-cy="toggle"]').should('be.focused'); + cy.get('[data-cy="toggle"]').should('not.have.class', 'pf-m-expanded'); + }); + + it('closes dropdown on pressing tab, focus stays on the toggle', () => { + cy.get('[data-cy="toggle"]').click(); + cy.get('[data-cy="toggle"]').trigger('keydown', { key: 'Tab' }); + cy.get('[data-cy="toggle"]').should('be.focused'); + cy.get('[data-cy="toggle"]').should('not.have.class', 'pf-m-expanded'); + }); + + // throws error + /* it('opens dropdown menu when enter key pressed', () => { + cy.get('[data-cy="toggle"]').trigger('keydown', { key: 'Enter' }); + cy.get('[data-cy="toggle"]').should('have.class', 'pf-m-expanded'); + }); */ +}); diff --git a/packages/react-integration/demo-app-ts/src/Demos.ts b/packages/react-integration/demo-app-ts/src/Demos.ts index 0c1528830c6..a470194890e 100644 --- a/packages/react-integration/demo-app-ts/src/Demos.ts +++ b/packages/react-integration/demo-app-ts/src/Demos.ts @@ -142,6 +142,11 @@ export const Demos: DemoInterface[] = [ name: 'Dropdown Demo', componentType: Examples.DropdownDemo }, + { + id: 'dropdown-next-demo', + name: 'Dropdown Next Demo', + componentType: Examples.DropdownNextDemo + }, { id: 'dual-list-selector-basic-demo', name: 'DualListSelector basic Demo', diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DropdownNextDemo/DropdownNextDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DropdownNextDemo/DropdownNextDemo.tsx new file mode 100644 index 00000000000..07ba7a24afc --- /dev/null +++ b/packages/react-integration/demo-app-ts/src/components/demos/DropdownNextDemo/DropdownNextDemo.tsx @@ -0,0 +1,61 @@ +import React from 'react'; +import { Dropdown, DropdownList, DropdownItem } from '@patternfly/react-core/dist/esm/next'; +import { Divider, MenuToggle } from '@patternfly/react-core'; + +const dropDownItems = ( + + + Link + + ev.preventDefault()} + > + Action + + + Disabled link + + + Disabled action + + + + Separated link + + + Separated action + + +); + +export const DropdownNextDemo: React.FunctionComponent = () => { + const [isOpen, setIsOpen] = React.useState(false); + + const onToggleClick = () => { + setIsOpen(!isOpen); + }; + + const onSelect = (_event: React.MouseEvent | undefined) => { + setIsOpen(false); + }; + + return ( + setIsOpen(isOpen)} + onSelect={onSelect} + toggle={toggleRef => ( + + Dropdown + + )} + > + {dropDownItems} + + ); +}; +DropdownNextDemo.displayName = 'DropdownNextDemo'; diff --git a/packages/react-integration/demo-app-ts/src/components/demos/index.ts b/packages/react-integration/demo-app-ts/src/components/demos/index.ts index e1a2e201e59..949a44f26f0 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/index.ts +++ b/packages/react-integration/demo-app-ts/src/components/demos/index.ts @@ -25,6 +25,7 @@ export * from './ToolbarDemo/ToolbarVisibilityDemo'; export * from './DrawerDemo/DrawerDemo'; export * from './DrawerDemo/DrawerResizeDemo'; export * from './DropdownDemo/DropdownDemo'; +export * from './DropdownNextDemo/DropdownNextDemo'; export * from './DualListSelectorDemo/DualListSelectorBasicDemo'; export * from './DualListSelectorDemo/DualListSelectorTreeDemo'; export * from './DualListSelectorDemo/DualListSelectorWithActionsDemo'; From aa79879d91412db0ab26bac560552462a260c7b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20Pet=C5=99=C3=ADk?= Date: Tue, 3 Jan 2023 13:48:40 +0100 Subject: [PATCH 2/5] use shared mocks --- .../src/components/Menu/__mocks__/Menu.tsx | 12 + .../components/Menu/__mocks__/MenuContent.tsx | 3 + .../components/Menu/__mocks__/MenuGroup.tsx | 12 + .../components/Menu/__mocks__/MenuItem.tsx | 11 + .../components/Menu/__mocks__/MenuList.tsx | 10 + .../src/components/Menu/__mocks__/index.ts | 5 + .../src/helpers/Popper/__mocks__/Popper.tsx | 11 + .../src/helpers/Popper/__mocks__/index.ts | 1 + .../Dropdown/__tests__/Dropdown.test.tsx | 261 ++++++++++++++++++ .../Dropdown/__tests__/DropdownGroup.test.tsx | 69 +++++ .../Dropdown/__tests__/DropdownItem.test.tsx | 57 ++++ .../Dropdown/__tests__/DropdownList.test.tsx | 41 +++ 12 files changed, 493 insertions(+) create mode 100644 packages/react-core/src/components/Menu/__mocks__/Menu.tsx create mode 100644 packages/react-core/src/components/Menu/__mocks__/MenuContent.tsx create mode 100644 packages/react-core/src/components/Menu/__mocks__/MenuGroup.tsx create mode 100644 packages/react-core/src/components/Menu/__mocks__/MenuItem.tsx create mode 100644 packages/react-core/src/components/Menu/__mocks__/MenuList.tsx create mode 100644 packages/react-core/src/components/Menu/__mocks__/index.ts create mode 100644 packages/react-core/src/helpers/Popper/__mocks__/Popper.tsx create mode 100644 packages/react-core/src/helpers/Popper/__mocks__/index.ts create mode 100644 packages/react-core/src/next/components/Dropdown/__tests__/Dropdown.test.tsx create mode 100644 packages/react-core/src/next/components/Dropdown/__tests__/DropdownGroup.test.tsx create mode 100644 packages/react-core/src/next/components/Dropdown/__tests__/DropdownItem.test.tsx create mode 100644 packages/react-core/src/next/components/Dropdown/__tests__/DropdownList.test.tsx diff --git a/packages/react-core/src/components/Menu/__mocks__/Menu.tsx b/packages/react-core/src/components/Menu/__mocks__/Menu.tsx new file mode 100644 index 00000000000..950e47acfd8 --- /dev/null +++ b/packages/react-core/src/components/Menu/__mocks__/Menu.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { MenuProps } from '../Menu'; + +export const Menu = ({ className, isPlain, isScrollable, style, onSelect, ...props }: MenuProps) => ( + <> +
+
{'Mock item'}
+

{`isPlain: ${isPlain}`}

+

{`isScrollable: ${isScrollable}`}

+

{`minWidth: ${style?.['--pf-c-menu--MinWidth']}`}

+ +); diff --git a/packages/react-core/src/components/Menu/__mocks__/MenuContent.tsx b/packages/react-core/src/components/Menu/__mocks__/MenuContent.tsx new file mode 100644 index 00000000000..bd4229efbae --- /dev/null +++ b/packages/react-core/src/components/Menu/__mocks__/MenuContent.tsx @@ -0,0 +1,3 @@ +import React from 'react'; + +export const MenuContent = ({ children }) =>
{children}
; diff --git a/packages/react-core/src/components/Menu/__mocks__/MenuGroup.tsx b/packages/react-core/src/components/Menu/__mocks__/MenuGroup.tsx new file mode 100644 index 00000000000..98f34af2bca --- /dev/null +++ b/packages/react-core/src/components/Menu/__mocks__/MenuGroup.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { MenuGroupProps } from '../MenuGroup'; + +export const MenuGroup = ({ className, children, label, labelHeadingLevel }: MenuGroupProps) => ( + <> +
+ {children} +
+

{`label: ${label}`}

+

{`labelHeadingLevel: ${labelHeadingLevel}`}

+ +); diff --git a/packages/react-core/src/components/Menu/__mocks__/MenuItem.tsx b/packages/react-core/src/components/Menu/__mocks__/MenuItem.tsx new file mode 100644 index 00000000000..f21b2692817 --- /dev/null +++ b/packages/react-core/src/components/Menu/__mocks__/MenuItem.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { MenuItemProps } from '../MenuItem'; + +export const MenuItem = ({ className, children, description }: MenuItemProps) => ( + <> +
+ {children} +
+

{`description: ${description}`}

+ +); diff --git a/packages/react-core/src/components/Menu/__mocks__/MenuList.tsx b/packages/react-core/src/components/Menu/__mocks__/MenuList.tsx new file mode 100644 index 00000000000..03d5d604621 --- /dev/null +++ b/packages/react-core/src/components/Menu/__mocks__/MenuList.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { MenuListProps } from '../MenuList'; + +export const MenuList = ({ className, children }: MenuListProps) => ( + <> +
+ {children} +
+ +); diff --git a/packages/react-core/src/components/Menu/__mocks__/index.ts b/packages/react-core/src/components/Menu/__mocks__/index.ts new file mode 100644 index 00000000000..911c5ab0014 --- /dev/null +++ b/packages/react-core/src/components/Menu/__mocks__/index.ts @@ -0,0 +1,5 @@ +export * from './Menu'; +export * from './MenuContent'; +export * from './MenuGroup'; +export * from './MenuItem'; +export * from './MenuList'; diff --git a/packages/react-core/src/helpers/Popper/__mocks__/Popper.tsx b/packages/react-core/src/helpers/Popper/__mocks__/Popper.tsx new file mode 100644 index 00000000000..76befc60fdf --- /dev/null +++ b/packages/react-core/src/helpers/Popper/__mocks__/Popper.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { PopperProps } from '../Popper'; + +export const Popper = ({ popper, zIndex, isVisible, trigger }: PopperProps) => ( + <> +
{popper}
+

{`zIndex: ${zIndex}`}

+

{`isOpen: ${isVisible}`}

+
{trigger}
+ +); diff --git a/packages/react-core/src/helpers/Popper/__mocks__/index.ts b/packages/react-core/src/helpers/Popper/__mocks__/index.ts new file mode 100644 index 00000000000..86443d1e3b1 --- /dev/null +++ b/packages/react-core/src/helpers/Popper/__mocks__/index.ts @@ -0,0 +1 @@ +export * from './Popper'; diff --git a/packages/react-core/src/next/components/Dropdown/__tests__/Dropdown.test.tsx b/packages/react-core/src/next/components/Dropdown/__tests__/Dropdown.test.tsx new file mode 100644 index 00000000000..e6c60499d11 --- /dev/null +++ b/packages/react-core/src/next/components/Dropdown/__tests__/Dropdown.test.tsx @@ -0,0 +1,261 @@ +import React from 'react'; +import { Dropdown } from '../../Dropdown'; +import { render, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; + +jest.mock('../../../../components/Menu'); + +jest.mock('../../../../helpers/Popper/Popper'); + +const toggle = (ref: React.RefObject) => ; + +const dropdownChildren =
Dropdown children
; + +test('renders dropdown', async () => { + render( +
+ toggle(toggleRef)}>{dropdownChildren} +
+ ); + + expect((await screen.findByTestId('dropdown')).children[0]).toBeVisible(); +}); + +test('passes children', () => { + render( toggle(toggleRef)}>{dropdownChildren}); + + expect(screen.getByText('Dropdown children')).toBeVisible(); +}); + +test('renders passed toggle element', async () => { + render( toggle(toggleRef)}>{dropdownChildren}); + + expect(await screen.findByRole('button')).toBeVisible(); +}); + +test('passes no class name by default', async () => { + render( + toggle(toggleRef)}> + {dropdownChildren} + + ); + + expect(await screen.findByTestId('menu-mock')).not.toHaveClass(); +}); + +test('passes custom class name', async () => { + render( + toggle(toggleRef)}> + {dropdownChildren} + + ); + + expect(await screen.findByTestId('menu-mock')).toHaveClass('custom-class'); +}); + +test('does not pass isPlain to Menu by default', async () => { + render( + toggle(toggleRef)}> + {dropdownChildren} + + ); + + expect(await screen.findByText('isPlain: undefined')).toBeVisible(); +}); + +test('passes isPlain to Menu', async () => { + render( + toggle(toggleRef)}> + {dropdownChildren} + + ); + + expect(await screen.findByText('isPlain: true')).toBeVisible(); +}); + +test('does not pass isScrollable to Menu by default', async () => { + render( + toggle(toggleRef)}> + {dropdownChildren} + + ); + + expect(await screen.findByText('isScrollable: undefined')).toBeVisible(); +}); + +test('passes isScrollable to Menu', async () => { + render( + toggle(toggleRef)}> + {dropdownChildren} + + ); + + expect(await screen.findByText('isScrollable: true')).toBeVisible(); +}); + +test('does not pass minWidth to Menu by default', async () => { + render( + toggle(toggleRef)}> + {dropdownChildren} + + ); + + expect(await screen.findByText('minWidth: undefined')).toBeVisible(); +}); + +test('passes minWidth to Menu', async () => { + render( + toggle(toggleRef)}> + {dropdownChildren} + + ); + + expect(await screen.findByText('minWidth: 100px')).toBeVisible(); +}); + +test('passes zIndex to popper', async () => { + render( + toggle(toggleRef)}> + {dropdownChildren} + + ); + + expect(await screen.findByText('zIndex: 100')).toBeVisible(); +}); + +test('passes isOpen to popper', async () => { + render( + toggle(toggleRef)}> + {dropdownChildren} + + ); + + expect(await screen.findByText('isOpen: true')).toBeVisible(); +}); + +test('passes onSelect callback', async () => { + const user = userEvent.setup(); + + const onSelect = jest.fn(); + render( + toggle(toggleRef)}> + {dropdownChildren} + + ); + + const trigger = await screen.findByText('Mock item'); + await user.click(trigger); + + expect(onSelect).toBeCalledTimes(1); +}); + +//throws error because of bug in dropdown +//should fail until issue gets resolved +test('onOpenChange is not called when not passed', async () => { + const user = userEvent.setup(); + const onOpenChange = jest.fn(); + + render( + toggle(toggleRef)}> + {dropdownChildren} + + ); + + const dropdown = await screen.findByRole('button'); + await user.click(dropdown); + await user.click(document.body); + + await user.click(dropdown); + await user.keyboard('{Tab}'); + + await user.click(dropdown); + await user.keyboard('{Escape}'); + + expect(onOpenChange).not.toBeCalled(); +}); + +test('onOpenChange is not called without user interaction', async () => { + const user = userEvent.setup(); + const onOpenChange = jest.fn(); + + render( + toggle(toggleRef)}> + {dropdownChildren} + + ); + + const dropdown = await screen.findByRole('button'); + await user.click(dropdown); + + expect(onOpenChange).not.toBeCalled(); +}); + +test('onOpenChange is called when passed and user clicks outside of dropdown', async () => { + const user = userEvent.setup(); + const onOpenChange = jest.fn(); + + render( + toggle(toggleRef)}> + {dropdownChildren} + + ); + + const dropdown = await screen.findByRole('button'); + await user.click(dropdown); + await user.click(document.body); + + expect(onOpenChange).toBeCalledTimes(1); +}); + +test('onOpenChange is called when passed and user presses tab key', async () => { + const user = userEvent.setup(); + const onOpenChange = jest.fn(); + + render( + toggle(toggleRef)}> + {dropdownChildren} + + ); + + //focus dropdown + const dropdown = await screen.findByRole('button'); + await user.click(dropdown); + await user.keyboard('{Tab}'); + + expect(onOpenChange).toBeCalledTimes(1); +}); + +test('onOpenChange is called when passed and user presses esc key', async () => { + const user = userEvent.setup(); + const onOpenChange = jest.fn(); + + render( + toggle(toggleRef)}> + {dropdownChildren} + + ); + + //focus dropdown + const dropdown = await screen.findByRole('button'); + await user.click(dropdown); + await user.keyboard('{Escape}'); + + expect(onOpenChange).toBeCalledTimes(1); +}); + +test('match snapshot', async () => { + const { asFragment } = render( + toggle(toggleRef)} + > + {dropdownChildren} + + ); + + await waitFor(() => expect(asFragment()).toMatchSnapshot()); +}); diff --git a/packages/react-core/src/next/components/Dropdown/__tests__/DropdownGroup.test.tsx b/packages/react-core/src/next/components/Dropdown/__tests__/DropdownGroup.test.tsx new file mode 100644 index 00000000000..4151c2a304c --- /dev/null +++ b/packages/react-core/src/next/components/Dropdown/__tests__/DropdownGroup.test.tsx @@ -0,0 +1,69 @@ +import { DropdownGroup } from '../../Dropdown'; +import { render, screen } from '@testing-library/react'; +import React from 'react'; + +jest.mock('../../../../components/Menu'); + +const dropdownGroupChildren =
Dropdown Group children
; + +test('renders dropdown group', () => { + render( +
+ {dropdownGroupChildren} +
+ ); + + expect(screen.getByTestId('dropdown-group').children[0]).toBeVisible(); +}); + +test('passes children', () => { + render({dropdownGroupChildren}); + + expect(screen.getByText('Dropdown Group children')).toBeVisible(); +}); + +test('passes no class name by default', () => { + render({dropdownGroupChildren}); + + expect(screen.getByTestId('menu-group-mock')).not.toHaveClass(); +}); + +test('passes custom class name to MenuGroup', () => { + render({dropdownGroupChildren}); + + expect(screen.getByTestId('menu-group-mock')).toHaveClass('custom-class'); +}); + +test('passes no label by default', () => { + render({dropdownGroupChildren}); + + expect(screen.getByText('label: undefined')).toBeVisible(); +}); + +test('passes custom label to MenuGroup', () => { + render({dropdownGroupChildren}); + + expect(screen.getByText('label: Test label')).toBeVisible(); +}); + +test('passes h1 as labelHeadingLevel to MenuGroup by default', () => { + render({dropdownGroupChildren}); + + expect(screen.getByText('labelHeadingLevel: h1')).toBeVisible(); +}); + +test('passes custom labelHeadingLevel to MenuGroup', () => { + render({dropdownGroupChildren}); + + expect(screen.getByText('labelHeadingLevel: h2')).toBeVisible(); +}); + +test('matches snapshot', () => { + const { asFragment } = render( + + {dropdownGroupChildren} + + ); + + expect(asFragment()).toMatchSnapshot(); +}); diff --git a/packages/react-core/src/next/components/Dropdown/__tests__/DropdownItem.test.tsx b/packages/react-core/src/next/components/Dropdown/__tests__/DropdownItem.test.tsx new file mode 100644 index 00000000000..f134a185c5b --- /dev/null +++ b/packages/react-core/src/next/components/Dropdown/__tests__/DropdownItem.test.tsx @@ -0,0 +1,57 @@ +import { DropdownItem } from '../../Dropdown'; +import { render, screen } from '@testing-library/react'; +import React from 'react'; + +jest.mock('../../../../components/Menu'); + +const dropdownItemChildren =
Dropdown Item children
; + +test('renders dropdown item', () => { + render( +
+ {dropdownItemChildren} +
+ ); + + expect(screen.getByTestId('dropdown-item').children[0]).toBeVisible(); +}); + +test('passes children', () => { + render({dropdownItemChildren}); + + expect(screen.getByText('Dropdown Item children')).toBeVisible(); +}); + +test('passes no class name by default', () => { + render({dropdownItemChildren}); + + expect(screen.getByTestId('menu-item-mock')).not.toHaveClass(); +}); + +test('passes custom class name to MenuItem', () => { + render({dropdownItemChildren}); + + expect(screen.getByTestId('menu-item-mock')).toHaveClass('custom-class'); +}); + +test('passes no description by default', () => { + render({dropdownItemChildren}); + + expect(screen.getByText('description: undefined')).toBeVisible(); +}); + +test('passes custom description to MenuItem', () => { + render({dropdownItemChildren}); + + expect(screen.getByText('description: Test description')).toBeVisible(); +}); + +test('matches snapshot', () => { + const { asFragment } = render( + + {dropdownItemChildren} + + ); + + expect(asFragment()).toMatchSnapshot(); +}); diff --git a/packages/react-core/src/next/components/Dropdown/__tests__/DropdownList.test.tsx b/packages/react-core/src/next/components/Dropdown/__tests__/DropdownList.test.tsx new file mode 100644 index 00000000000..9599158b8a4 --- /dev/null +++ b/packages/react-core/src/next/components/Dropdown/__tests__/DropdownList.test.tsx @@ -0,0 +1,41 @@ +import { DropdownList } from '../../Dropdown'; +import { render, screen } from '@testing-library/react'; +import React from 'react'; + +jest.mock('../../../../components/Menu'); + +const dropdownListChildren =
Dropdown List children
; + +test('renders dropdown list', () => { + render( +
+ {dropdownListChildren} +
+ ); + + expect(screen.getByTestId('dropdown-list').children[0]).toBeVisible(); +}); + +test('passes children', () => { + render({dropdownListChildren}); + + expect(screen.getByText('Dropdown List children')).toBeVisible(); +}); + +test('passes no class name by default', () => { + render({dropdownListChildren}); + + expect(screen.getByTestId('menu-list-mock')).not.toHaveClass(); +}); + +test('passes custom class name to MenuList', () => { + render({dropdownListChildren}); + + expect(screen.getByTestId('menu-list-mock')).toHaveClass('custom-class'); +}); + +test('matches snapshot', () => { + const { asFragment } = render({dropdownListChildren}); + + expect(asFragment()).toMatchSnapshot(); +}); From cc0e48acbc4d6cb58c26802a6c9c78723ebeb3fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20Pet=C5=99=C3=ADk?= Date: Tue, 3 Jan 2023 13:57:35 +0100 Subject: [PATCH 3/5] fix integration tests --- .../cypress/integration/dropdownnext.spec.ts | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/react-integration/cypress/integration/dropdownnext.spec.ts b/packages/react-integration/cypress/integration/dropdownnext.spec.ts index 301984b1d5e..9b910432a5a 100644 --- a/packages/react-integration/cypress/integration/dropdownnext.spec.ts +++ b/packages/react-integration/cypress/integration/dropdownnext.spec.ts @@ -38,9 +38,8 @@ describe('Dropdown demo test', () => { cy.get('[data-cy="toggle"]').should('not.have.class', 'pf-m-expanded'); }); - // throws error - /* it('opens dropdown menu when enter key pressed', () => { - cy.get('[data-cy="toggle"]').trigger('keydown', { key: 'Enter' }); - cy.get('[data-cy="toggle"]').should('have.class', 'pf-m-expanded'); - }); */ + /* + pressing enter key on a button calls a click event internally + so testing for a button click should be suficitient + */ }); From 6362078cba36ad3bf1a5f09f01aca0de9765058d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20Pet=C5=99=C3=ADk?= Date: Tue, 3 Jan 2023 14:17:29 +0100 Subject: [PATCH 4/5] temporarily remove onOpenChange test --- .../src/next/components/Dropdown/__tests__/Dropdown.test.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/react-core/src/next/components/Dropdown/__tests__/Dropdown.test.tsx b/packages/react-core/src/next/components/Dropdown/__tests__/Dropdown.test.tsx index e6c60499d11..5c2fdbe6113 100644 --- a/packages/react-core/src/next/components/Dropdown/__tests__/Dropdown.test.tsx +++ b/packages/react-core/src/next/components/Dropdown/__tests__/Dropdown.test.tsx @@ -150,8 +150,9 @@ test('passes onSelect callback', async () => { }); //throws error because of bug in dropdown +//tries to call onOpenChange even when it is not passed //should fail until issue gets resolved -test('onOpenChange is not called when not passed', async () => { +/* test('onOpenChange is not called when not passed', async () => { const user = userEvent.setup(); const onOpenChange = jest.fn(); @@ -172,7 +173,7 @@ test('onOpenChange is not called when not passed', async () => { await user.keyboard('{Escape}'); expect(onOpenChange).not.toBeCalled(); -}); +}); */ test('onOpenChange is not called without user interaction', async () => { const user = userEvent.setup(); From 967f491605a363885148e33eab7c719172299217 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20Pet=C5=99=C3=ADk?= Date: Tue, 31 Jan 2023 12:54:46 +0100 Subject: [PATCH 5/5] default behavior tests, small changes --- .../components/Menu/__mocks__/MenuItem.tsx | 3 +- .../Dropdown/__tests__/Dropdown.test.tsx | 116 +++++++----------- .../Dropdown/__tests__/DropdownItem.test.tsx | 18 ++- .../__snapshots__/Dropdown.test.tsx.snap | 47 +++++++ .../__snapshots__/DropdownGroup.test.tsx.snap | 20 +++ .../__snapshots__/DropdownItem.test.tsx.snap | 20 +++ .../__snapshots__/DropdownList.test.tsx.snap | 14 +++ .../cypress/integration/dropdownnext.spec.ts | 6 +- 8 files changed, 168 insertions(+), 76 deletions(-) create mode 100644 packages/react-core/src/next/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap create mode 100644 packages/react-core/src/next/components/Dropdown/__tests__/__snapshots__/DropdownGroup.test.tsx.snap create mode 100644 packages/react-core/src/next/components/Dropdown/__tests__/__snapshots__/DropdownItem.test.tsx.snap create mode 100644 packages/react-core/src/next/components/Dropdown/__tests__/__snapshots__/DropdownList.test.tsx.snap diff --git a/packages/react-core/src/components/Menu/__mocks__/MenuItem.tsx b/packages/react-core/src/components/Menu/__mocks__/MenuItem.tsx index f21b2692817..bb9c74c8b2d 100644 --- a/packages/react-core/src/components/Menu/__mocks__/MenuItem.tsx +++ b/packages/react-core/src/components/Menu/__mocks__/MenuItem.tsx @@ -1,11 +1,12 @@ import React from 'react'; import { MenuItemProps } from '../MenuItem'; -export const MenuItem = ({ className, children, description }: MenuItemProps) => ( +export const MenuItem = ({ className, children, description, itemId }: MenuItemProps) => ( <>
{children}

{`description: ${description}`}

+

{`itemId: ${itemId}`}

); diff --git a/packages/react-core/src/next/components/Dropdown/__tests__/Dropdown.test.tsx b/packages/react-core/src/next/components/Dropdown/__tests__/Dropdown.test.tsx index 5c2fdbe6113..e1ff2ffe2bc 100644 --- a/packages/react-core/src/next/components/Dropdown/__tests__/Dropdown.test.tsx +++ b/packages/react-core/src/next/components/Dropdown/__tests__/Dropdown.test.tsx @@ -11,14 +11,14 @@ const toggle = (ref: React.RefObject) => Dropdown children; -test('renders dropdown', async () => { +test('renders dropdown', () => { render(
toggle(toggleRef)}>{dropdownChildren}
); - expect((await screen.findByTestId('dropdown')).children[0]).toBeVisible(); + expect(screen.getByTestId('dropdown').children[0]).toBeVisible(); }); test('passes children', () => { @@ -27,112 +27,128 @@ test('passes children', () => { expect(screen.getByText('Dropdown children')).toBeVisible(); }); -test('renders passed toggle element', async () => { +test('renders passed toggle element', () => { render( toggle(toggleRef)}>{dropdownChildren}); - expect(await screen.findByRole('button')).toBeVisible(); + expect(screen.getByRole('button', { name: 'Dropdown' })).toBeVisible(); }); -test('passes no class name by default', async () => { +test('passes no class name by default', () => { render( toggle(toggleRef)}> {dropdownChildren} ); - expect(await screen.findByTestId('menu-mock')).not.toHaveClass(); + expect(screen.getByTestId('menu-mock')).not.toHaveClass(); }); -test('passes custom class name', async () => { +test('passes custom class name', () => { render( toggle(toggleRef)}> {dropdownChildren} ); - expect(await screen.findByTestId('menu-mock')).toHaveClass('custom-class'); + expect(screen.getByTestId('menu-mock')).toHaveClass('custom-class'); }); -test('does not pass isPlain to Menu by default', async () => { +test('does not pass isPlain to Menu by default', () => { render( toggle(toggleRef)}> {dropdownChildren} ); - expect(await screen.findByText('isPlain: undefined')).toBeVisible(); + expect(screen.getByText('isPlain: undefined')).toBeVisible(); }); -test('passes isPlain to Menu', async () => { +test('passes isPlain to Menu', () => { render( toggle(toggleRef)}> {dropdownChildren} ); - expect(await screen.findByText('isPlain: true')).toBeVisible(); + expect(screen.getByText('isPlain: true')).toBeVisible(); }); -test('does not pass isScrollable to Menu by default', async () => { +test('does not pass isScrollable to Menu by default', () => { render( toggle(toggleRef)}> {dropdownChildren} ); - expect(await screen.findByText('isScrollable: undefined')).toBeVisible(); + expect(screen.getByText('isScrollable: undefined')).toBeVisible(); }); -test('passes isScrollable to Menu', async () => { +test('passes isScrollable to Menu', () => { render( toggle(toggleRef)}> {dropdownChildren} ); - expect(await screen.findByText('isScrollable: true')).toBeVisible(); + expect(screen.getByText('isScrollable: true')).toBeVisible(); }); -test('does not pass minWidth to Menu by default', async () => { +test('does not pass minWidth to Menu by default', () => { render( toggle(toggleRef)}> {dropdownChildren} ); - expect(await screen.findByText('minWidth: undefined')).toBeVisible(); + expect(screen.getByText('minWidth: undefined')).toBeVisible(); }); -test('passes minWidth to Menu', async () => { +test('passes minWidth to Menu', () => { render( toggle(toggleRef)}> {dropdownChildren} ); - expect(await screen.findByText('minWidth: 100px')).toBeVisible(); + expect(screen.getByText('minWidth: 100px')).toBeVisible(); }); -test('passes zIndex to popper', async () => { +test('passes default zIndex to popper', () => { + render( toggle(toggleRef)}>{dropdownChildren}); + + expect(screen.getByText('zIndex: 9999')).toBeVisible(); +}); + +test('passes zIndex to popper', () => { render( toggle(toggleRef)}> {dropdownChildren} ); - expect(await screen.findByText('zIndex: 100')).toBeVisible(); + expect(screen.getByText('zIndex: 100')).toBeVisible(); }); -test('passes isOpen to popper', async () => { +test('does not pass isOpen to popper by default', () => { + render( toggle(toggleRef)}>{dropdownChildren}); + + expect(screen.getByText('isOpen: undefined')).toBeVisible(); +}); + +test('passes isOpen to popper', () => { render( toggle(toggleRef)}> {dropdownChildren} ); - expect(await screen.findByText('isOpen: true')).toBeVisible(); + expect(screen.getByText('isOpen: true')).toBeVisible(); }); +/* no default tests for callback props +since there is no way to test that the +function doesn`t get passed */ + test('passes onSelect callback', async () => { const user = userEvent.setup(); @@ -149,48 +165,6 @@ test('passes onSelect callback', async () => { expect(onSelect).toBeCalledTimes(1); }); -//throws error because of bug in dropdown -//tries to call onOpenChange even when it is not passed -//should fail until issue gets resolved -/* test('onOpenChange is not called when not passed', async () => { - const user = userEvent.setup(); - const onOpenChange = jest.fn(); - - render( - toggle(toggleRef)}> - {dropdownChildren} - - ); - - const dropdown = await screen.findByRole('button'); - await user.click(dropdown); - await user.click(document.body); - - await user.click(dropdown); - await user.keyboard('{Tab}'); - - await user.click(dropdown); - await user.keyboard('{Escape}'); - - expect(onOpenChange).not.toBeCalled(); -}); */ - -test('onOpenChange is not called without user interaction', async () => { - const user = userEvent.setup(); - const onOpenChange = jest.fn(); - - render( - toggle(toggleRef)}> - {dropdownChildren} - - ); - - const dropdown = await screen.findByRole('button'); - await user.click(dropdown); - - expect(onOpenChange).not.toBeCalled(); -}); - test('onOpenChange is called when passed and user clicks outside of dropdown', async () => { const user = userEvent.setup(); const onOpenChange = jest.fn(); @@ -201,7 +175,7 @@ test('onOpenChange is called when passed and user clicks outside of dropdown', a ); - const dropdown = await screen.findByRole('button'); + const dropdown = screen.getByRole('button', { name: 'Dropdown' }); await user.click(dropdown); await user.click(document.body); @@ -219,7 +193,7 @@ test('onOpenChange is called when passed and user presses tab key', async () => ); //focus dropdown - const dropdown = await screen.findByRole('button'); + const dropdown = screen.getByRole('button', { name: 'Dropdown' }); await user.click(dropdown); await user.keyboard('{Tab}'); @@ -237,14 +211,14 @@ test('onOpenChange is called when passed and user presses esc key', async () => ); //focus dropdown - const dropdown = await screen.findByRole('button'); + const dropdown = screen.getByRole('button', { name: 'Dropdown' }); await user.click(dropdown); await user.keyboard('{Escape}'); expect(onOpenChange).toBeCalledTimes(1); }); -test('match snapshot', async () => { +test('match snapshot', () => { const { asFragment } = render( { ); - await waitFor(() => expect(asFragment()).toMatchSnapshot()); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-core/src/next/components/Dropdown/__tests__/DropdownItem.test.tsx b/packages/react-core/src/next/components/Dropdown/__tests__/DropdownItem.test.tsx index f134a185c5b..8e626ec5be5 100644 --- a/packages/react-core/src/next/components/Dropdown/__tests__/DropdownItem.test.tsx +++ b/packages/react-core/src/next/components/Dropdown/__tests__/DropdownItem.test.tsx @@ -46,9 +46,25 @@ test('passes custom description to MenuItem', () => { expect(screen.getByText('description: Test description')).toBeVisible(); }); +test('passes no itemId by default', () => { + render({dropdownItemChildren}); + + expect(screen.getByText('itemId: undefined')); +}); + +test('passes itemId to MenuItem', () => { + render( + + {dropdownItemChildren} + + ); + + expect(screen.getByText('itemId: dropdown item')); +}); + test('matches snapshot', () => { const { asFragment } = render( - + {dropdownItemChildren} ); diff --git a/packages/react-core/src/next/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap b/packages/react-core/src/next/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap new file mode 100644 index 00000000000..b6e17bbdd28 --- /dev/null +++ b/packages/react-core/src/next/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap @@ -0,0 +1,47 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`match snapshot 1`] = ` + +
+
+
+
+
+ Dropdown children +
+
+
+
+ Mock item +
+

+ isPlain: true +

+

+ isScrollable: true +

+

+ minWidth: undefined +

+
+

+ zIndex: 9999 +

+

+ isOpen: true +

+
+ +
+
+ +`; diff --git a/packages/react-core/src/next/components/Dropdown/__tests__/__snapshots__/DropdownGroup.test.tsx.snap b/packages/react-core/src/next/components/Dropdown/__tests__/__snapshots__/DropdownGroup.test.tsx.snap new file mode 100644 index 00000000000..12277b3b888 --- /dev/null +++ b/packages/react-core/src/next/components/Dropdown/__tests__/__snapshots__/DropdownGroup.test.tsx.snap @@ -0,0 +1,20 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`matches snapshot 1`] = ` + +
+
+ Dropdown Group children +
+
+

+ label: Test label +

+

+ labelHeadingLevel: h2 +

+ +`; diff --git a/packages/react-core/src/next/components/Dropdown/__tests__/__snapshots__/DropdownItem.test.tsx.snap b/packages/react-core/src/next/components/Dropdown/__tests__/__snapshots__/DropdownItem.test.tsx.snap new file mode 100644 index 00000000000..b814290d162 --- /dev/null +++ b/packages/react-core/src/next/components/Dropdown/__tests__/__snapshots__/DropdownItem.test.tsx.snap @@ -0,0 +1,20 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`matches snapshot 1`] = ` + +
+
+ Dropdown Item children +
+
+

+ description: Test description +

+

+ itemId: undefined +

+ +`; diff --git a/packages/react-core/src/next/components/Dropdown/__tests__/__snapshots__/DropdownList.test.tsx.snap b/packages/react-core/src/next/components/Dropdown/__tests__/__snapshots__/DropdownList.test.tsx.snap new file mode 100644 index 00000000000..1e25ffb9bf4 --- /dev/null +++ b/packages/react-core/src/next/components/Dropdown/__tests__/__snapshots__/DropdownList.test.tsx.snap @@ -0,0 +1,14 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`matches snapshot 1`] = ` + +
+
+ Dropdown List children +
+
+ +`; diff --git a/packages/react-integration/cypress/integration/dropdownnext.spec.ts b/packages/react-integration/cypress/integration/dropdownnext.spec.ts index 9b910432a5a..b34861418cd 100644 --- a/packages/react-integration/cypress/integration/dropdownnext.spec.ts +++ b/packages/react-integration/cypress/integration/dropdownnext.spec.ts @@ -1,4 +1,4 @@ -describe('Dropdown demo test', () => { +describe('Dropdown next demo test', () => { it('navigate to demo section', () => { cy.visit('http://localhost:3000/dropdown-next-demo-nav-link'); }); @@ -39,7 +39,7 @@ describe('Dropdown demo test', () => { }); /* - pressing enter key on a button calls a click event internally - so testing for a button click should be suficitient + pressing enter or space key on a button calls a click event internally + so testing for a button click should be sufficient */ });