test: update command palette tests

dhis2 · Feb 24, 2025 · de53c30 · de53c30
1 parent 0e3da8e
commit de53c30
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 92 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
@@ -25,7 +25,6 @@ describe('Command Palette - List View - Browse Apps View', () => {
             queryByTestId,
             getByPlaceholderText,
             queryByText,
-            getByLabelText,
             queryAllByTestId,
         } = render(
             <CommandPalette apps={testApps} shortcuts={[]} commands={[]} />
@@ -40,27 +39,27 @@ describe('Command Palette - List View - Browse Apps View', () => {
         const searchField = getByPlaceholderText('Search apps')
         expect(searchField).toHaveValue('')
 
-        const backButton = getByLabelText('Back Button')
-        expect(backButton).toBeInTheDocument()
-
-        expect(queryByText(/All Apps/i)).toBeInTheDocument()
-
         // check for navigation keys legend
         expect(
             queryByTestId('headerbar-navigation-keys-legend')
         ).toBeInTheDocument()
         // list view vertical navigation icon
         expect(queryByTestId('vertical-navigation-icon')).toBeInTheDocument()
 
-        const listItems = queryAllByTestId('headerbar-list-item')
+        // back action
+        const backActionListItem = getByTestId('headerbar-back-action')
+        expect(backActionListItem).not.toHaveClass('highlighted')
+
+        const appsListItems = queryAllByTestId('headerbar-list-item')
+
         // first item highlighted
-        expect(listItems[0].querySelector('span')).toHaveTextContent(
+        expect(appsListItems[0].querySelector('span')).toHaveTextContent(
             'Test App 1'
         )
-        expect(listItems[0]).toHaveClass('highlighted')
+        expect(appsListItems[0]).toHaveClass('highlighted')
 
         // go back to default view
-        await user.click(getByLabelText('Back Button'))
+        await user.click(getByTestId('headerbar-back-action'))
         expect(queryByText(/Top Apps/i)).toBeInTheDocument()
         expect(queryByText(/Actions/i)).toBeInTheDocument()
     })
@@ -70,10 +69,10 @@ describe('Command Palette - List View - Browse Apps View', () => {
         const {
             getAllByRole,
             queryAllByTestId,
-            queryByText,
             findByPlaceholderText,
             container,
             findByTestId,
+            getByTestId,
         } = render(
             <CommandPalette
                 apps={testApps}
@@ -90,48 +89,55 @@ describe('Command Palette - List View - Browse Apps View', () => {
 
         // no filter view
         const searchField = await findByPlaceholderText('Search apps')
-        expect(queryByText(/All Apps/i)).toBeInTheDocument()
 
-        const listItems = queryAllByTestId('headerbar-list-item')
-        // 9 apps
-        expect(listItems.length).toBe(9)
+        // back action
+        const list = queryAllByTestId('headerbar-list')
+        const backActionListItem = getByTestId('headerbar-back-action')
+        const appsListItems = queryAllByTestId('headerbar-list-item')
 
-        // first item highlighted
-        expect(listItems[0]).toHaveClass('highlighted')
-        expect(listItems[0].querySelector('span')).toHaveTextContent(
-            'Test App 1'
-        )
-        listItems[0].focus()
+        const listItems = list[0].children
+        // 9 apps + back action
+        expect(listItems.length).toBe(10)
+        expect(appsListItems.length).toBe(9)
 
-        await user.keyboard('{ArrowDown}')
-        expect(listItems[0]).not.toHaveClass('highlighted')
+        // first list item not to be highlighted
+        expect(listItems[0]).toBe(backActionListItem)
+        expect(backActionListItem).not.toHaveClass('highlighted')
+
+        // first app item highlighted
         expect(listItems[1]).toHaveClass('highlighted')
         expect(listItems[1].querySelector('span')).toHaveTextContent(
-            'Test App 2'
+            'Test App 1'
         )
         listItems[1].focus()
 
         await user.keyboard('{ArrowDown}')
         expect(listItems[1]).not.toHaveClass('highlighted')
         expect(listItems[2]).toHaveClass('highlighted')
         expect(listItems[2].querySelector('span')).toHaveTextContent(
+            'Test App 2'
+        )
+        listItems[1].focus()
+
+        await user.keyboard('{ArrowDown}')
+        expect(listItems[2]).not.toHaveClass('highlighted')
+        expect(listItems[3]).toHaveClass('highlighted')
+        expect(listItems[3].querySelector('span')).toHaveTextContent(
             'Test App 3'
         )
         listItems[2].focus()
 
         await user.keyboard('{ArrowUp}')
-        expect(listItems[2]).not.toHaveClass('highlighted')
-        expect(listItems[1]).toHaveClass('highlighted')
-        expect(listItems[1].querySelector('span')).toHaveTextContent(
+        expect(listItems[3]).not.toHaveClass('highlighted')
+        expect(listItems[2]).toHaveClass('highlighted')
+        expect(listItems[2].querySelector('span')).toHaveTextContent(
             'Test App 2'
         )
         listItems[1].focus()
 
         // filter items view
         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()
 
         // first item highlighted
         expect(listItems[1]).not.toHaveClass('highlighted')
@@ -151,15 +157,7 @@ describe('Command Palette - List View - Browse Apps View', () => {
         const clearButton = getAllByRole('button')[1]
         await user.click(clearButton)
 
-        // back to normal list view/no filter view
-        expect(queryByText(/All Apps/i)).toBeInTheDocument()
-        expect(queryByText(/Results for "Test App"/i)).not.toBeInTheDocument()
-
-        // first item highlighted
-        expect(listItems[8]).not.toHaveClass('highlighted')
+        // first item - back Action highlighted
         expect(listItems[0]).toHaveClass('highlighted')
-        expect(listItems[0].querySelector('span')).toHaveTextContent(
-            'Test App 1'
-        )
     })
 })
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
@@ -16,13 +16,7 @@ describe('Command Palette - List View - Browse Commands', () => {
     })
     it('renders Browse Commands View', async () => {
         const user = userEvent.setup()
-        const {
-            getByTestId,
-            queryByTestId,
-            getByPlaceholderText,
-            queryByText,
-            getByLabelText,
-        } = render(
+        const { getByTestId, queryByTestId, getByPlaceholderText } = render(
             <CommandPalette apps={[]} shortcuts={[]} commands={testCommands} />
         )
         // open command palette
@@ -37,22 +31,19 @@ describe('Command Palette - List View - Browse Commands', () => {
         const searchField = getByPlaceholderText('Search commands')
         expect(searchField).toHaveValue('')
 
-        const backButton = getByLabelText('Back Button')
-        expect(backButton).toBeInTheDocument()
+        const backActionListItem = getByTestId('headerbar-back-action')
+        expect(backActionListItem).not.toHaveClass('highlighted')
 
-        expect(queryByText(/All Commands/i)).toBeInTheDocument()
-
-        const listItem = queryByTestId('headerbar-list-item')
+        const commandsListItem = queryByTestId('headerbar-list-item')
         // first item highlighted
-        expect(listItem.querySelector('span')).toHaveTextContent(
+        expect(commandsListItem.querySelector('span')).toHaveTextContent(
             'Test Command 1'
         )
-        expect(listItem).toHaveClass('highlighted')
-        listItem.focus()
+        expect(commandsListItem).toHaveClass('highlighted')
+        commandsListItem.focus()
 
         // Backspace key goes back to default view
         await user.keyboard('{Backspace}')
-        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
@@ -21,7 +21,6 @@ describe('Command Palette - List View - Browse Shortcuts', () => {
             queryByTestId,
             getByPlaceholderText,
             queryByText,
-            getByLabelText,
         } = render(
             <CommandPalette apps={[]} shortcuts={testShortcuts} commands={[]} />
         )
@@ -37,21 +36,19 @@ describe('Command Palette - List View - Browse Shortcuts', () => {
         const searchField = getByPlaceholderText('Search shortcuts')
         expect(searchField).toHaveValue('')
 
-        const backButton = getByLabelText('Back Button')
-        expect(backButton).toBeInTheDocument()
+        // back action
+        const backActionListItem = getByTestId('headerbar-back-action')
+        expect(backActionListItem).not.toHaveClass('highlighted')
 
-        expect(queryByText(/All Shortcuts/i)).toBeInTheDocument()
-
-        const listItem = queryByTestId('headerbar-list-item')
+        const shortcutsListItem = queryByTestId('headerbar-list-item')
         // first item highlighted
-        expect(listItem.querySelector('span')).toHaveTextContent(
+        expect(shortcutsListItem.querySelector('span')).toHaveTextContent(
             'Test Shortcut 1'
         )
-        expect(listItem).toHaveClass('highlighted')
+        expect(shortcutsListItem).toHaveClass('highlighted')
 
         // go back to default view
-        await user.click(getByLabelText('Back Button'))
-        expect(queryByText(/All Shortcuts/i)).not.toBeInTheDocument()
+        await user.click(getByTestId('headerbar-back-action'))
         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
@@ -165,7 +165,6 @@ describe('Command Palette Component', () => {
         // go to All Shortcuts (list) view
         await user.click(getByTestId('headerbar-browse-shortcuts'))
         expect(queryByText(/Top Apps/i)).not.toBeInTheDocument()
-        expect(queryByText(/All Shortcuts/i)).toBeInTheDocument()
 
         // Esc key closes the modal
         await user.keyboard('{Escape}')
@@ -207,31 +206,28 @@ describe('Command Palette Component', () => {
 
     it('moves to the default view with backspace key if there is no search filter', async () => {
         const user = userEvent.setup()
-        const {
-            container,
-            getByPlaceholderText,
-            getByTestId,
-            queryByTestId,
-            queryByText,
-        } = render(
-            <CommandPalette apps={[]} shortcuts={testShortcuts} commands={[]} />
-        )
+        const { container, getByPlaceholderText, getByTestId, queryByTestId } =
+            render(
+                <CommandPalette
+                    apps={[]}
+                    shortcuts={testShortcuts}
+                    commands={[]}
+                />
+            )
         // open modal
         fireEvent.keyDown(container, { key: 'k', ctrlKey: true })
 
         // go to All Shortcuts (list) view
         await user.click(getByTestId('headerbar-browse-shortcuts'))
 
         expect(queryByTestId('headerbar-actions-menu')).not.toBeInTheDocument()
-        expect(queryByText(/All Shortcuts/i)).toBeInTheDocument()
 
         // Search field
         const searchField = await getByPlaceholderText('Search shortcuts')
         expect(searchField).toHaveValue('')
 
         // Backspace key goes back to default view
         await user.keyboard('{Backspace}')
-        expect(queryByText(/All Shortcuts/i)).not.toBeInTheDocument()
         expect(queryByTestId('headerbar-actions-menu')).toBeInTheDocument()
     })
 })
diff --git a/components/header-bar/src/command-palette/__tests__/home-view.test.js b/components/header-bar/src/command-palette/__tests__/home-view.test.js
@@ -73,7 +73,6 @@ describe('Command Palette - Home View', () => {
         expect(searchField).toHaveValue('Test')
 
         expect(queryByTestId('headerbar-top-apps-list')).not.toBeInTheDocument()
-        expect(queryByText(/Results for "Test"/i)).toBeInTheDocument()
 
         const listItems = queryAllByTestId('headerbar-list-item')
         // 9 apps + 1 command + 1 shortcut
@@ -89,7 +88,6 @@ describe('Command Palette - Home View', () => {
 
         // back to default view
         expect(queryByTestId('headerbar-top-apps-list')).toBeInTheDocument()
-        expect(queryByText(/Results for "Test"/i)).not.toBeInTheDocument()
     })
 
     it('handles right arrow navigation in the grid on the home view', async () => {

diff --git a/components/header-bar/src/command-palette/sections/back-action.js b/components/header-bar/src/command-palette/sections/back-action.js
@@ -3,9 +3,9 @@ import React from 'react'
 import { useCommandPaletteContext } from '../context/command-palette-context.js'
 import ListItem from './list-item.js'
 
-function BackActionItem({ actions }) {
+function BackActionItem({ actionProps }) {
     const { highlightedIndex } = useCommandPaletteContext()
-    const { name, icon, dataTest, action } = actions?.[0]
+    const { name, icon, dataTest, action } = actionProps
     const backActionIndexInListView = 0
 
     return (
@@ -21,7 +21,12 @@ function BackActionItem({ actions }) {
 }
 
 BackActionItem.propTypes = {
-    actions: PropTypes.array,
+    actionProps: PropTypes.shape({
+        action: PropTypes.func,
+        dataTest: PropTypes.string,
+        icon: PropTypes.element,
+        name: PropTypes.string,
+    }),
 }
 
 export default BackActionItem
diff --git a/components/header-bar/src/command-palette/sections/list.js b/components/header-bar/src/command-palette/sections/list.js
@@ -2,14 +2,18 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { useCommandPaletteContext } from '../context/command-palette-context.js'
 import { HOME_VIEW } from '../utils/constants.js'
+import BackActionItem from './back-action.js'
 import ListItem from './list-item.js'
 
-function List({ filteredItems }) {
+function List({ filteredItems, backAction }) {
     const { currentView, highlightedIndex, filter } = useCommandPaletteContext()
-    const isBackActionActive = currentView !== HOME_VIEW && !filter
+    const showBackAction = currentView !== HOME_VIEW && !filter
 
     return (
         <div data-test="headerbar-list">
+            {showBackAction ? (
+                <BackActionItem actionProps={backAction} />
+            ) : null}
             {filteredItems.map(
                 (
                     {
@@ -25,7 +29,7 @@ function List({ filteredItems }) {
                 ) => {
                     const isImage = typeof icon === 'string'
                     const isIcon = React.isValidElement(icon)
-                    const index = isBackActionActive ? idx + 1 : idx
+                    const index = showBackAction ? idx + 1 : idx
 
                     return (
                         <ListItem
@@ -45,6 +49,7 @@ function List({ filteredItems }) {
     )
 }
 List.propTypes = {
+    backAction: PropTypes.object,
     filteredItems: PropTypes.array,
 }
 

diff --git a/components/header-bar/src/command-palette/views/list-view.js b/components/header-bar/src/command-palette/views/list-view.js
@@ -1,21 +1,18 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { useCommandPaletteContext } from '../context/command-palette-context.js'
-import BackActionItem from '../sections/back-action.js'
 import List from '../sections/list.js'
 import EmptySearchResults from '../sections/search-results.js'
 
 function ListView({ filteredItems, actions }) {
     const { filter } = useCommandPaletteContext()
+    const backAction = actions?.[0]
 
     return filteredItems.length > 0 ? (
-        <>
-            {!filter ? <BackActionItem actions={actions} /> : null}
-            <List filteredItems={filteredItems} />
-        </>
-    ) : (
-        filter && <EmptySearchResults />
-    )
+        <List filteredItems={filteredItems} backAction={backAction} />
+    ) : filter ? (
+        <EmptySearchResults />
+    ) : null
 }
 
 ListView.propTypes = {