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 index 9bdf3621e..5612dadb0 100644 --- 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( @@ -40,11 +39,6 @@ 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') @@ -52,15 +46,20 @@ describe('Command Palette - List View - Browse Apps View', () => { // 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( { // 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() @@ -115,14 +115,22 @@ describe('Command Palette - List View - Browse Apps View', () => { 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() @@ -130,8 +138,6 @@ describe('Command Palette - List View - Browse Apps View', () => { // 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 index 25cf89d67..3c0ae3a54 100644 --- 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( ) // 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 index 94b1e0f73..b0f011892 100644 --- 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( ) @@ -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 index 0c56f85ff..f938d9003 100644 --- 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,15 +206,14 @@ 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( - - ) + const { container, getByPlaceholderText, getByTestId, queryByTestId } = + render( + + ) // open modal fireEvent.keyDown(container, { key: 'k', ctrlKey: true }) @@ -223,7 +221,6 @@ describe('Command Palette Component', () => { 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') @@ -231,7 +228,6 @@ describe('Command Palette Component', () => { // 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 index 8fea4755e..2d86e922e 100644 --- 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 index 262b5a4c4..a3254ca9f 100644 --- 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 index 674987273..317081a40 100644 --- 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 (
+ {showBackAction ? ( + + ) : 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 ( 0 ? ( - <> - {!filter ? : null} - - - ) : ( - filter && - ) + + ) : filter ? ( + + ) : null } ListView.propTypes = {