test: fix failing tests

dhis2 · Nov 28, 2024 · 9fec247 · 9fec247
1 parent 07931b9
commit 9fec247
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 81 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
@@ -10,7 +10,8 @@ import {
 } from './command-palette.test.js'
 
 describe('Command Palette - List View - Browse Apps View', () => {
-    it('renders Browse Apps View', () => {
+    it('renders Browse Apps View', async () => {
+        const user = userEvent.setup()
         const {
             getByTestId,
             queryByTestId,
@@ -22,10 +23,10 @@ describe('Command Palette - List View - Browse Apps View', () => {
             <CommandPalette apps={testApps} shortcuts={[]} commands={[]} />
         )
         // open command palette
-        userEvent.click(getByTestId(headerBarIconTest))
+        await user.click(getByTestId(headerBarIconTest))
 
         expect(queryByTestId('headerbar-actions-menu')).toBeInTheDocument()
-        userEvent.click(getByTestId('headerbar-browse-apps'))
+        await user.click(getByTestId('headerbar-browse-apps'))
 
         // Browse Apps View
         const searchField = getByPlaceholderText('Search apps')
@@ -44,18 +45,20 @@ describe('Command Palette - List View - Browse Apps View', () => {
         expect(listItems[0]).toHaveClass('highlighted')
 
         // go back to default view
-        userEvent.click(getByLabelText('Back Button'))
+        user.click(getByLabelText('Back Button'))
         expect(queryByText(/Top Apps/i)).toBeInTheDocument()
         expect(queryByText(/Actions/i)).toBeInTheDocument()
     })
 
-    it('handles navigation and hover state of list items', () => {
+    it.only('handles navigation and hover state of list items', async () => {
+        const user = userEvent.setup()
         const {
             getAllByRole,
             queryByTestId,
-            getByPlaceholderText,
             queryAllByTestId,
             queryByText,
+            findByPlaceholderText,
+            container,
         } = render(
             <CommandPalette
                 apps={testApps}
@@ -64,13 +67,16 @@ describe('Command Palette - List View - Browse Apps View', () => {
             />
         )
         // open modal
-        userEvent.keyboard('{ctrl}/')
+        await container.focus()
+        await user.keyboard('{ctrl}/')
+        // fireEvent.keyDown(container, '{ctrl}/')
 
         //open browse apps view
-        userEvent.click(queryByTestId('headerbar-browse-apps'))
+        await user.click(queryByTestId('headerbar-browse-apps'))
 
         // no filter view
-        const searchField = getByPlaceholderText('Search apps')
+        const searchField = await findByPlaceholderText('Search apps')
+        console.log(searchField)
         expect(queryByText(/All Apps/i)).toBeInTheDocument()
 
         const listItems = queryAllByTestId('headerbar-list-item')
@@ -83,29 +89,29 @@ describe('Command Palette - List View - Browse Apps View', () => {
             'Test App 1'
         )
 
-        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'
         )
 
-        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'
         )
 
-        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
-        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()
@@ -118,15 +124,15 @@ describe('Command Palette - List View - Browse Apps View', () => {
         )
 
         // simulate hover
-        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]
-        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
@@ -1,4 +1,4 @@
-import userEvent from '@testing-library/user-event'
+import { userEvent } from '@testing-library/user-event'
 import React from 'react'
 import CommandPalette from '../command-palette.js'
 import {
@@ -8,7 +8,8 @@ import {
 } from './command-palette.test.js'
 
 describe('Command Palette - List View - Browse Commands', () => {
-    it('renders Browse Commands View', () => {
+    it('renders Browse Commands View', async () => {
+        const user = userEvent.setup()
         const {
             getByTestId,
             queryByTestId,
@@ -19,10 +20,10 @@ describe('Command Palette - List View - Browse Commands', () => {
             <CommandPalette apps={[]} shortcuts={[]} commands={testCommands} />
         )
         // open command palette
-        userEvent.click(getByTestId(headerBarIconTest))
+        await user.click(getByTestId(headerBarIconTest))
 
         expect(queryByTestId('headerbar-actions-menu')).toBeInTheDocument()
-        userEvent.click(getByTestId('headerbar-browse-commands'))
+        await user.click(getByTestId('headerbar-browse-commands'))
 
         // Browse Commands View
         // Search field
@@ -42,7 +43,7 @@ describe('Command Palette - List View - Browse Commands', () => {
         expect(listItem).toHaveClass('highlighted')
 
         // Esc key goes back to default view
-        userEvent.keyboard('{esc}')
+        await user.keyboard('{esc}')
         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
@@ -1,4 +1,4 @@
-import userEvent from '@testing-library/user-event'
+import { userEvent } from '@testing-library/user-event'
 import React from 'react'
 import CommandPalette from '../command-palette.js'
 import {
@@ -8,7 +8,8 @@ import {
 } from './command-palette.test.js'
 
 describe('Command Palette - List View - Browse Shortcuts', () => {
-    it('renders Browse Shortcuts View', () => {
+    it('renders Browse Shortcuts View', async () => {
+        const user = userEvent.setup()
         const {
             getByTestId,
             queryByTestId,
@@ -19,10 +20,10 @@ describe('Command Palette - List View - Browse Shortcuts', () => {
             <CommandPalette apps={[]} shortcuts={testShortcuts} commands={[]} />
         )
         // open command palette
-        userEvent.click(getByTestId(headerBarIconTest))
+        await user.click(getByTestId(headerBarIconTest))
 
         expect(queryByTestId('headerbar-actions-menu')).toBeInTheDocument()
-        userEvent.click(getByTestId('headerbar-browse-shortcuts'))
+        await user.click(getByTestId('headerbar-browse-shortcuts'))
 
         // Browse Shortcuts View
         // Search field
@@ -42,7 +43,7 @@ describe('Command Palette - List View - Browse Shortcuts', () => {
         expect(listItem).toHaveClass('highlighted')
 
         // go back to default view
-        userEvent.click(getByLabelText('Back Button'))
+        await user.click(getByLabelText('Back Button'))
         expect(queryByText(/All Shortcuts/i)).not.toBeInTheDocument()
         expect(queryByText(/Actions/i)).toBeInTheDocument()
     })

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,5 +1,5 @@
-import { render as originalRender } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
+import { render as originalRender, waitFor } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
 import PropTypes from 'prop-types'
 import React from 'react'
 import CommandPalette from '../command-palette.js'
@@ -53,7 +53,8 @@ export const testShortcuts = [
 ]
 
 describe('Command Palette Component', () => {
-    it('renders bare default view when Command Palette is opened', () => {
+    it('renders bare default view when Command Palette is opened', async () => {
+        const user = userEvent.setup()
         const { getByTestId, queryByTestId, getByPlaceholderText } = render(
             <CommandPalette apps={[]} shortcuts={[]} commands={[]} />
         )
@@ -62,7 +63,7 @@ describe('Command Palette Component', () => {
         expect(queryByTestId(modalTest)).not.toBeInTheDocument()
 
         const headerBarIcon = getByTestId(headerBarIconTest)
-        userEvent.click(headerBarIcon)
+        await user.click(headerBarIcon)
         expect(queryByTestId(modalTest)).toBeInTheDocument()
 
         // Search field
@@ -90,11 +91,12 @@ describe('Command Palette Component', () => {
         expect(queryByTestId('headerbar-logout')).toBeInTheDocument()
 
         // click outside modal
-        userEvent.click(headerBarIcon)
+        await user.click(headerBarIcon)
         expect(queryByTestId(modalTest)).not.toBeInTheDocument()
     })
 
-    it('opens and closes Command Palette using ctrl + /', () => {
+    it('opens and closes Command Palette using ctrl + /', async () => {
+        const user = userEvent.setup()
         const { queryByTestId } = render(
             <CommandPalette apps={[]} shortcuts={[]} commands={[]} />
         )
@@ -103,14 +105,15 @@ describe('Command Palette Component', () => {
 
         // ctrl + /
         // open modal
-        userEvent.keyboard('{ctrl}/')
+        await user.keyboard('{ctrl}/')
         expect(queryByTestId(modalTest)).toBeInTheDocument()
         // close modal
-        userEvent.keyboard('{ctrl}/')
+        await user.keyboard('{ctrl}/')
         expect(queryByTestId(modalTest)).not.toBeInTheDocument()
     })
 
-    it('opens and closes Command Palette using meta + /', () => {
+    it('opens and closes Command Palette using meta + /', async () => {
+        const user = userEvent.setup()
         const { queryByTestId } = render(
             <CommandPalette apps={[]} shortcuts={[]} commands={[]} />
         )
@@ -119,25 +122,32 @@ describe('Command Palette Component', () => {
 
         // meta + /
         // open modal
-        userEvent.keyboard('{meta}/')
+        await user.keyboard('{meta}/')
         expect(queryByTestId(modalTest)).toBeInTheDocument()
         // close modal
-        userEvent.keyboard('{meta}/')
+        await user.keyboard('{meta}/')
         expect(queryByTestId(modalTest)).not.toBeInTheDocument()
     })
 
-    it('closes Command Palette using Esc key', () => {
+    it('closes Command Palette using Esc key', async () => {
+        const user = userEvent.setup()
         const { queryByTestId } = render(
             <CommandPalette apps={[]} shortcuts={[]} commands={[]} />
         )
         // modal not rendered yet
         expect(queryByTestId(modalTest)).not.toBeInTheDocument()
 
         // open modal
-        userEvent.keyboard('{ctrl}/')
-        expect(queryByTestId(modalTest)).toBeInTheDocument()
+        await user.keyboard('{ctrl}/')
+
+        await waitFor(() =>
+            expect(queryByTestId(modalTest)).toBeInTheDocument()
+        )
+
         // Esc key closes the modal
-        userEvent.keyboard('{esc}')
-        expect(queryByTestId(modalTest)).not.toBeInTheDocument()
+        await user.keyboard('{esc}')
+        await waitFor(() =>
+            expect(queryByTestId(modalTest)).not.toBeInTheDocument()
+        )
     })
 })