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 e0dec701c..aae336bd6 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 @@ -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,16 +52,14 @@ 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( { 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,21 +88,21 @@ 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( @@ -116,7 +110,7 @@ describe('Command Palette - List View - Browse Apps View', () => { ) // 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,7 +123,7 @@ 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( @@ -137,7 +131,7 @@ describe('Command Palette - List View - Browse Apps View', () => { ) 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 index 4d527010b..918e0406b 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 @@ -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 index 9c556b645..5b6c5c543 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 @@ -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 index d1eb022b5..d6ac84e42 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 @@ -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( ) // 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( ) // 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( ) // 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() }) }) 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 cdee991ff..a8854ffdd 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 @@ -1,3 +1,4 @@ +import { fireEvent } from '@testing-library/dom' import { userEvent } from '@testing-library/user-event' import React from 'react' import CommandPalette from '../command-palette.js' @@ -78,7 +79,7 @@ describe('Command Palette - Home View', () => { it('handles right arrow navigation in the grid on the home view', async () => { const user = userEvent.setup() - const { getAllByRole } = render( + const { container, queryByTestId } = render( { /> ) - // open modal - await user.keyboard('{ctrl}/') + // open modal with (Ctrl + /) keys + fireEvent.keyDown(container, { key: '/', ctrlKey: true }) // topApps - const appLinks = getAllByRole('link') - const firstAppLink = appLinks[0] - expect(appLinks.length).toBe(minAppsNum) + const appsGrid = queryByTestId('headerbar-top-apps-list') + expect(appsGrid).toBeInTheDocument() + + const topApps = appsGrid.querySelectorAll('a') + expect(topApps.length).toBe(minAppsNum) + const firstApp = topApps[0] // first highlighted item - expect(firstAppLink).toHaveClass('highlighted') - expect(firstAppLink.querySelector('span')).toHaveTextContent( - 'Test App 1' - ) + expect(firstApp).toHaveClass('highlighted') + expect(firstApp.querySelector('span')).toHaveTextContent('Test App 1') // move right through the first row of items (0 - 3) for ( let prevIndex = 0; - prevIndex < appLinks.length / 2 - 1; + prevIndex < topApps.length / 2 - 1; prevIndex++ ) { const activeIndex = prevIndex + 1 - expect(appLinks[prevIndex]).toHaveClass('highlighted') + expect(topApps[prevIndex]).toHaveClass('highlighted') // move to next item await user.keyboard('{ArrowRight}') - expect(appLinks[prevIndex]).not.toHaveClass('highlighted') - expect(appLinks[activeIndex]).toHaveClass('highlighted') + expect(topApps[prevIndex]).not.toHaveClass('highlighted') + expect(topApps[activeIndex]).toHaveClass('highlighted') expect( - appLinks[activeIndex].querySelector('span') + topApps[activeIndex].querySelector('span') ).toHaveTextContent(`Test App ${activeIndex + 1}`) } // loops back to the first item await user.keyboard('{ArrowRight}') - expect(firstAppLink).toHaveClass('highlighted') + expect(firstApp).toHaveClass('highlighted') }) it('handles left arrow navigation in the grid on the home view', async () => { const user = userEvent.setup() - const { getAllByRole } = render( + const { container, getByTestId } = render( { /> ) - // open modal - await user.keyboard('{ctrl}/') + // open modal with (Ctrl + /) keys + fireEvent.keyDown(container, { key: '/', ctrlKey: true }) // topApps - const appLinks = getAllByRole('link') - const firstAppLink = appLinks[0] - const lastAppLinkFirstRow = appLinks[3] - expect(appLinks.length).toBe(minAppsNum) + const appsGrid = getByTestId('headerbar-top-apps-list') + + const topApps = appsGrid.querySelectorAll('a') + expect(topApps.length).toBe(minAppsNum) + const firstApp = topApps[0] + const lastAppInFirstRow = topApps[3] // first highlighted item - expect(firstAppLink).toHaveClass('highlighted') - expect(firstAppLink.querySelector('span')).toHaveTextContent( - 'Test App 1' - ) + expect(firstApp).toHaveClass('highlighted') + expect(firstApp.querySelector('span')).toHaveTextContent('Test App 1') // loops to last item in the row await user.keyboard('{ArrowLeft}') - expect(firstAppLink).not.toHaveClass('highlighted') - expect(lastAppLinkFirstRow).toHaveClass('highlighted') - expect(lastAppLinkFirstRow.querySelector('span')).toHaveTextContent( + expect(firstApp).not.toHaveClass('highlighted') + expect(lastAppInFirstRow).toHaveClass('highlighted') + expect(lastAppInFirstRow.querySelector('span')).toHaveTextContent( 'Test App 4' ) // move left through the first row of items (3 - 0) for ( - let prevIndex = appLinks.length / 2 - 1; + let prevIndex = topApps.length / 2 - 1; prevIndex > 0; prevIndex-- ) { const activeIndex = prevIndex - 1 - expect(appLinks[prevIndex]).toHaveClass('highlighted') + expect(topApps[prevIndex]).toHaveClass('highlighted') // move to next item await user.keyboard('{ArrowLeft}') - expect(appLinks[prevIndex]).not.toHaveClass('highlighted') - expect(appLinks[activeIndex]).toHaveClass('highlighted') + expect(topApps[prevIndex]).not.toHaveClass('highlighted') + expect(topApps[activeIndex]).toHaveClass('highlighted') expect( - appLinks[activeIndex].querySelector('span') + topApps[activeIndex].querySelector('span') ).toHaveTextContent(`Test App ${activeIndex + 1}`) } }) it('handles down arrow navigation on the home view', async () => { const user = userEvent.setup() - const { getAllByRole, queryByTestId } = render( + const { queryByTestId, container } = render( { /> ) - // open modal - await user.keyboard('{ctrl}/') + // open modal with (Ctrl + /) keys + fireEvent.keyDown(container, { key: '/', ctrlKey: true }) // topApps - const appLinks = getAllByRole('link') - const rowOneFirstAppLink = appLinks[0] - const rowTwoFirstAppLink = appLinks[4] + const appsGrid = queryByTestId('headerbar-top-apps-list') + expect(appsGrid).toBeInTheDocument() + + const topApps = appsGrid.querySelectorAll('a') + expect(topApps.length).toBe(minAppsNum) + const rowOneFirstApp = topApps[0] + const rowTwoFirstApp = topApps[4] // first highlighted item - expect(rowOneFirstAppLink).toHaveClass('highlighted') - expect(rowOneFirstAppLink.querySelector('span')).toHaveTextContent( + expect(rowOneFirstApp).toHaveClass('highlighted') + expect(rowOneFirstApp.querySelector('span')).toHaveTextContent( 'Test App 1' ) await user.keyboard('{ArrowDown}') - expect(rowOneFirstAppLink).not.toHaveClass('highlighted') - expect(rowTwoFirstAppLink).toHaveClass('highlighted') - expect(rowTwoFirstAppLink.querySelector('span')).toHaveTextContent( + expect(rowOneFirstApp).not.toHaveClass('highlighted') + expect(rowTwoFirstApp).toHaveClass('highlighted') + expect(rowTwoFirstApp.querySelector('span')).toHaveTextContent( 'Test App ' ) @@ -227,12 +233,12 @@ describe('Command Palette - Home View', () => { // loop back to grid await user.keyboard('{ArrowDown}') - expect(rowOneFirstAppLink).toHaveClass('highlighted') + expect(rowOneFirstApp).toHaveClass('highlighted') }) it('handles up arrow navigation on the home view', async () => { const user = userEvent.setup() - const { getAllByRole, queryByTestId } = render( + const { container, getByTestId, queryByTestId } = render( { /> ) - // open modal - await user.keyboard('{ctrl}/') + // open modal with (Ctrl + /) keys + fireEvent.keyDown(container, { key: '/', ctrlKey: true }) // topApps - const appLinks = getAllByRole('link') - const rowOneFirstAppLink = appLinks[0] - const rowTwoFirstAppLink = appLinks[4] + const appsGrid = getByTestId('headerbar-top-apps-list') + const topApps = appsGrid.querySelectorAll('a') + + const rowOneFirstApp = topApps[0] + const rowTwoFirstApp = topApps[4] // first highlighted item - expect(rowOneFirstAppLink).toHaveClass('highlighted') - expect(rowOneFirstAppLink.querySelector('span')).toHaveTextContent( + expect(rowOneFirstApp).toHaveClass('highlighted') + expect(rowOneFirstApp.querySelector('span')).toHaveTextContent( 'Test App 1' ) // goes to bottom of actions menu await user.keyboard('{ArrowUp}') - expect(rowOneFirstAppLink).not.toHaveClass('highlighted') + expect(rowOneFirstApp).not.toHaveClass('highlighted') expect(queryByTestId('headerbar-logout')).toHaveClass('highlighted') await user.keyboard('{ArrowUp}') @@ -276,12 +284,12 @@ describe('Command Palette - Home View', () => { // moves to grid await user.keyboard('{ArrowUp}') - expect(rowTwoFirstAppLink).toHaveClass('highlighted') - expect(rowTwoFirstAppLink.querySelector('span')).toHaveTextContent( + expect(rowTwoFirstApp).toHaveClass('highlighted') + expect(rowTwoFirstApp.querySelector('span')).toHaveTextContent( 'Test App 5' ) await user.keyboard('{ArrowUp}') - expect(rowOneFirstAppLink).toHaveClass('highlighted') + expect(rowOneFirstApp).toHaveClass('highlighted') }) }) diff --git a/components/header-bar/src/command-palette/__tests__/search-results.test.js b/components/header-bar/src/command-palette/__tests__/search-results.test.js index adf0e04e8..164dea918 100644 --- a/components/header-bar/src/command-palette/__tests__/search-results.test.js +++ b/components/header-bar/src/command-palette/__tests__/search-results.test.js @@ -1,3 +1,4 @@ +import { fireEvent } from '@testing-library/dom' import { userEvent } from '@testing-library/user-event' import React from 'react' import CommandPalette from '../command-palette.js' @@ -12,7 +13,7 @@ import { describe('Command Palette - List View - Search Results', () => { it('filters for one item and handles navigation of singular item list', async () => { const user = userEvent.setup() - const { getByPlaceholderText, queryAllByTestId } = render( + const { getByPlaceholderText, queryAllByTestId, container } = render( { /> ) // open modal - await user.keyboard('{ctrl}/') + fireEvent.keyDown(container, { key: '/', metaKey: true }) // Search field const searchField = await getByPlaceholderText(