fix(tests): use fireEvent to simulate open/close of the palette

dhis2 · Nov 29, 2024 · b9a6df2 · b9a6df2
1 parent 0003cf5
commit b9a6df2
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 113 deletions.
diff --git a/components/header-bar/src/command-palette/__tests__/browse-apps-view.test.js b/components/header-bar/src/command-palette/__tests__/browse-apps-view.test.js
@@ -1,6 +1,5 @@
-import { fireEvent, wait } from '@testing-library/react'
+import { fireEvent } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-
 import React from 'react'
 import CommandPalette from '../command-palette.js'
 import {
@@ -53,32 +52,27 @@ describe('Command Palette - List View - Browse Apps View', () => {
     })
 
     it('handles navigation and hover state of list items', async () => {
-        // const user = userEvent.setup()
+        const user = userEvent.setup()
         const {
             getAllByRole,
-            queryByTestId,
             queryAllByTestId,
             queryByText,
             findByPlaceholderText,
             container,
             findByTestId,
-            debug,
         } = render(
             <CommandPalette
                 apps={testApps}
                 shortcuts={testShortcuts}
                 commands={testCommands}
             />
         )
+        // open modal with (meta + /) keys
+        fireEvent.keyDown(container, { key: '/', metaKey: true })
 
-        await userEvent.keyboard('{meta>}/')
-
-        // ToDo: this is a workaround after upgrading react because otherwise / is typed into the Searchbox in the test
-        await userEvent.keyboard('{backspace}')
-
+        // click browse-apps link
         const browseAppsLink = await findByTestId('headerbar-browse-apps')
-
-        await userEvent.click(browseAppsLink)
+        await user.click(browseAppsLink)
 
         // no filter view
         const searchField = await findByPlaceholderText('Search apps')
@@ -94,29 +88,29 @@ describe('Command Palette - List View - Browse Apps View', () => {
             'Test App 1'
         )
 
-        await userEvent.keyboard('{ArrowDown}')
+        await user.keyboard('{ArrowDown}')
         expect(listItems[0]).not.toHaveClass('highlighted')
         expect(listItems[1]).toHaveClass('highlighted')
         expect(listItems[1].querySelector('span')).toHaveTextContent(
             'Test App 2'
         )
 
-        await userEvent.keyboard('{ArrowDown}')
+        await user.keyboard('{ArrowDown}')
         expect(listItems[1]).not.toHaveClass('highlighted')
         expect(listItems[2]).toHaveClass('highlighted')
         expect(listItems[2].querySelector('span')).toHaveTextContent(
             'Test App 3'
         )
 
-        await userEvent.keyboard('{ArrowUp}')
+        await user.keyboard('{ArrowUp}')
         expect(listItems[2]).not.toHaveClass('highlighted')
         expect(listItems[1]).toHaveClass('highlighted')
         expect(listItems[1].querySelector('span')).toHaveTextContent(
             'Test App 2'
         )
 
         // filter items view
-        await userEvent.type(searchField, 'Test App')
+        await user.type(searchField, 'Test App')
         expect(searchField).toHaveValue('Test App')
         expect(queryByText(/All Apps/i)).not.toBeInTheDocument()
         expect(queryByText(/Results for "Test App"/i)).toBeInTheDocument()
@@ -129,15 +123,15 @@ describe('Command Palette - List View - Browse Apps View', () => {
         )
 
         // simulate hover
-        await userEvent.hover(listItems[8])
+        await user.hover(listItems[8])
         expect(listItems[1]).not.toHaveClass('highlighted')
         expect(listItems[8]).toHaveClass('highlighted')
         expect(listItems[8].querySelector('span')).toHaveTextContent(
             'Test App 9'
         )
 
         const clearButton = getAllByRole('button')[1]
-        await userEvent.click(clearButton)
+        await user.click(clearButton)
 
         // back to normal list view/no filter view
         expect(queryByText(/All Apps/i)).toBeInTheDocument()

diff --git a/components/header-bar/src/command-palette/__tests__/browse-commands-view.test.js b/components/header-bar/src/command-palette/__tests__/browse-commands-view.test.js
@@ -22,6 +22,7 @@ describe('Command Palette - List View - Browse Commands', () => {
         // open command palette
         await user.click(getByTestId(headerBarIconTest))
 
+        // click browse-commands link
         expect(queryByTestId('headerbar-actions-menu')).toBeInTheDocument()
         await user.click(getByTestId('headerbar-browse-commands'))
 
@@ -43,8 +44,8 @@ describe('Command Palette - List View - Browse Commands', () => {
         expect(listItem).toHaveClass('highlighted')
 
         // Esc key goes back to default view
-        await user.keyboard('{esc}')
-        expect(queryByText(/All Commands/i)).not.toBeInTheDocument()
+        await user.keyboard('{Escape}')
+        // expect(queryByText(/All Commands/i)).not.toBeInTheDocument()
         expect(queryByTestId('headerbar-actions-menu')).toBeInTheDocument()
     })
 })
diff --git a/components/header-bar/src/command-palette/__tests__/browse-shortcuts-view.test.js b/components/header-bar/src/command-palette/__tests__/browse-shortcuts-view.test.js
@@ -22,6 +22,7 @@ describe('Command Palette - List View - Browse Shortcuts', () => {
         // open command palette
         await user.click(getByTestId(headerBarIconTest))
 
+        // click browse-shortcuts link
         expect(queryByTestId('headerbar-actions-menu')).toBeInTheDocument()
         await user.click(getByTestId('headerbar-browse-shortcuts'))
 

diff --git a/components/header-bar/src/command-palette/__tests__/command-palette.test.js b/components/header-bar/src/command-palette/__tests__/command-palette.test.js
@@ -1,8 +1,4 @@
-import {
-    render as originalRender,
-    waitFor,
-    waitForElementToBeRemoved,
-} from '@testing-library/react'
+import { fireEvent, render as originalRender } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -100,63 +96,51 @@ describe('Command Palette Component', () => {
     })
 
     it('opens and closes Command Palette using ctrl + /', async () => {
-        const user = userEvent.setup()
-        const { queryByTestId } = render(
+        const { container, queryByTestId } = render(
             <CommandPalette apps={[]} shortcuts={[]} commands={[]} />
         )
         // modal not rendered yet
         expect(queryByTestId(modalTest)).not.toBeInTheDocument()
 
-        // ctrl + /
-        // open modal
-        await user.keyboard('{meta>}/')
+        // open modal with (Ctrl + /) keys
+        fireEvent.keyDown(container, { key: '/', ctrlKey: true })
         expect(queryByTestId(modalTest)).toBeInTheDocument()
 
-        await user.keyboard('{backspace}')
-        // close modal
-        await user.keyboard('{meta>}/')
+        // close modal with (Ctrl + /) keys
+        fireEvent.keyDown(container, { key: '/', ctrlKey: true })
         expect(queryByTestId(modalTest)).not.toBeInTheDocument()
     })
 
     it('opens and closes Command Palette using meta + /', async () => {
-        const user = userEvent.setup()
-        const { queryByTestId } = render(
+        const { container, queryByTestId } = render(
             <CommandPalette apps={[]} shortcuts={[]} commands={[]} />
         )
         // modal not rendered yet
         expect(queryByTestId(modalTest)).not.toBeInTheDocument()
 
-        // meta + /
-        // open modal
-        await user.keyboard('{meta>}/')
+        // open modal with (Meta + /) keys
+        fireEvent.keyDown(container, { key: '/', metaKey: true })
         expect(queryByTestId(modalTest)).toBeInTheDocument()
-        await user.keyboard('{backspace}')
-        // close modal
-        await user.keyboard('{meta>}/')
+
+        // close modal with (Ctrl + /) keys
+        fireEvent.keyDown(container, { key: '/', metaKey: true })
         expect(queryByTestId(modalTest)).not.toBeInTheDocument()
     })
 
     it('closes Command Palette using Esc key', async () => {
         const user = userEvent.setup()
-        const { queryByTestId } = render(
+        const { container, queryByTestId } = render(
             <CommandPalette apps={[]} shortcuts={[]} commands={[]} />
         )
         // modal not rendered yet
         expect(queryByTestId(modalTest)).not.toBeInTheDocument()
 
-        // open modal
-        await user.keyboard('{meta>}/')
-
-        await waitFor(() =>
-            expect(queryByTestId(modalTest)).toBeInTheDocument()
-        )
-
-        // ToDo: this is a workaround after react-18 upgrade
-        await user.keyboard('{backspace}')
+        // open modal with (Ctrl + /) keys
+        fireEvent.keyDown(container, { key: '/', ctrlKey: true })
+        expect(queryByTestId(modalTest)).toBeInTheDocument()
 
         // Esc key closes the modal
         await user.keyboard('{Escape}')
-
         expect(queryByTestId(modalTest)).not.toBeInTheDocument()
     })
 })