From 9fec2475c37fa277040bef7249d3863422376977 Mon Sep 17 00:00:00 2001 From: Diana Nanyanzi Date: Thu, 28 Nov 2024 15:23:47 +0300 Subject: [PATCH] test: fix failing tests --- .../__tests__/browse-apps-view.test.js | 36 ++++++----- .../__tests__/browse-commands-view.test.js | 11 ++-- .../__tests__/browse-shortcuts-view.test.js | 11 ++-- .../__tests__/command-palette.test.js | 42 ++++++++----- .../__tests__/home-view.test.js | 63 ++++++++++--------- .../__tests__/search-results.test.js | 22 ++++--- .../command-palette/hooks/use-navigation.js | 2 +- 7 files changed, 106 insertions(+), 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 index 42354c87a..a1b906b00 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 @@ -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', () => { ) // 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( { /> ) // 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,21 +89,21 @@ 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( @@ -105,7 +111,7 @@ describe('Command Palette - List View - Browse Apps View', () => { ) // 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,7 +124,7 @@ 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( @@ -126,7 +132,7 @@ describe('Command Palette - List View - Browse Apps View', () => { ) 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 index 57bb2cb8f..4d527010b 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 @@ -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', () => { ) // 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 index 6154eb469..9c556b645 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 @@ -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', () => { ) // 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 index 419b0f922..d4aa08de2 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,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( ) @@ -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( ) @@ -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( ) @@ -119,14 +122,15 @@ 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( ) @@ -134,10 +138,16 @@ describe('Command Palette Component', () => { 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() + ) }) }) 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 95e258e54..cdee991ff 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,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 { @@ -11,7 +11,8 @@ import { } from './command-palette.test.js' describe('Command Palette - Home View', () => { - it('shows the full default view upon opening the Command Palette', () => { + it('shows the full default view upon opening the Command Palette', async () => { + const user = userEvent.setup() const { getByTestId, queryByTestId, @@ -29,7 +30,7 @@ describe('Command Palette - Home View', () => { /> ) // headerbar icon button - userEvent.click(getByTestId(headerBarIconTest)) + await await user.click(getByTestId(headerBarIconTest)) // Search field const searchField = getByPlaceholderText( @@ -52,7 +53,7 @@ describe('Command Palette - Home View', () => { expect(queryByTestId('headerbar-logout')).toBeInTheDocument() // full search across apps, shortcuts, commands - userEvent.type(searchField, 'Test') + await await user.type(searchField, 'Test') expect(searchField).toHaveValue('Test') expect(queryByTestId('headerbar-top-apps-list')).not.toBeInTheDocument() @@ -67,7 +68,7 @@ describe('Command Palette - Home View', () => { // clear field const clearButton = getAllByRole('button')[1] - userEvent.click(clearButton) + await user.click(clearButton) expect(searchField).toHaveValue('') // back to default view @@ -75,7 +76,8 @@ describe('Command Palette - Home View', () => { expect(queryByText(/Results for "Test"/i)).not.toBeInTheDocument() }) - it('handles right arrow navigation in the grid on the home view', () => { + it('handles right arrow navigation in the grid on the home view', async () => { + const user = userEvent.setup() const { getAllByRole } = render( { ) // open modal - userEvent.keyboard('{ctrl}/') + await user.keyboard('{ctrl}/') // topApps const appLinks = getAllByRole('link') @@ -108,7 +110,7 @@ describe('Command Palette - Home View', () => { expect(appLinks[prevIndex]).toHaveClass('highlighted') // move to next item - userEvent.keyboard('{ArrowRight}') + await user.keyboard('{ArrowRight}') expect(appLinks[prevIndex]).not.toHaveClass('highlighted') expect(appLinks[activeIndex]).toHaveClass('highlighted') expect( @@ -117,11 +119,12 @@ describe('Command Palette - Home View', () => { } // loops back to the first item - userEvent.keyboard('{ArrowRight}') + await user.keyboard('{ArrowRight}') expect(firstAppLink).toHaveClass('highlighted') }) - it('handles left arrow navigation in the grid on the home view', () => { + it('handles left arrow navigation in the grid on the home view', async () => { + const user = userEvent.setup() const { getAllByRole } = render( { ) // open modal - userEvent.keyboard('{ctrl}/') + await user.keyboard('{ctrl}/') // topApps const appLinks = getAllByRole('link') @@ -146,7 +149,7 @@ describe('Command Palette - Home View', () => { ) // loops to last item in the row - userEvent.keyboard('{ArrowLeft}') + await user.keyboard('{ArrowLeft}') expect(firstAppLink).not.toHaveClass('highlighted') expect(lastAppLinkFirstRow).toHaveClass('highlighted') expect(lastAppLinkFirstRow.querySelector('span')).toHaveTextContent( @@ -163,7 +166,7 @@ describe('Command Palette - Home View', () => { expect(appLinks[prevIndex]).toHaveClass('highlighted') // move to next item - userEvent.keyboard('{ArrowLeft}') + await user.keyboard('{ArrowLeft}') expect(appLinks[prevIndex]).not.toHaveClass('highlighted') expect(appLinks[activeIndex]).toHaveClass('highlighted') expect( @@ -172,7 +175,8 @@ describe('Command Palette - Home View', () => { } }) - it('handles down arrow navigation on the home view', () => { + it('handles down arrow navigation on the home view', async () => { + const user = userEvent.setup() const { getAllByRole, queryByTestId } = render( { ) // open modal - userEvent.keyboard('{ctrl}/') + await user.keyboard('{ctrl}/') // topApps const appLinks = getAllByRole('link') @@ -195,7 +199,7 @@ describe('Command Palette - Home View', () => { 'Test App 1' ) - userEvent.keyboard('{ArrowDown}') + await user.keyboard('{ArrowDown}') expect(rowOneFirstAppLink).not.toHaveClass('highlighted') expect(rowTwoFirstAppLink).toHaveClass('highlighted') expect(rowTwoFirstAppLink.querySelector('span')).toHaveTextContent( @@ -203,30 +207,31 @@ describe('Command Palette - Home View', () => { ) // actions menu - userEvent.keyboard('{ArrowDown}') + await user.keyboard('{ArrowDown}') expect(queryByTestId('headerbar-browse-apps')).toHaveClass( 'highlighted' ) - userEvent.keyboard('{ArrowDown}') + await user.keyboard('{ArrowDown}') expect(queryByTestId('headerbar-browse-commands')).toHaveClass( 'highlighted' ) - userEvent.keyboard('{ArrowDown}') + await user.keyboard('{ArrowDown}') expect(queryByTestId('headerbar-browse-shortcuts')).toHaveClass( 'highlighted' ) - userEvent.keyboard('{ArrowDown}') + await user.keyboard('{ArrowDown}') expect(queryByTestId('headerbar-logout')).toHaveClass('highlighted') // loop back to grid - userEvent.keyboard('{ArrowDown}') + await user.keyboard('{ArrowDown}') expect(rowOneFirstAppLink).toHaveClass('highlighted') }) - it('handles up arrow navigation on the home view', () => { + it('handles up arrow navigation on the home view', async () => { + const user = userEvent.setup() const { getAllByRole, queryByTestId } = render( { ) // open modal - userEvent.keyboard('{ctrl}/') + await user.keyboard('{ctrl}/') // topApps const appLinks = getAllByRole('link') @@ -250,33 +255,33 @@ describe('Command Palette - Home View', () => { ) // goes to bottom of actions menu - userEvent.keyboard('{ArrowUp}') + await user.keyboard('{ArrowUp}') expect(rowOneFirstAppLink).not.toHaveClass('highlighted') expect(queryByTestId('headerbar-logout')).toHaveClass('highlighted') - userEvent.keyboard('{ArrowUp}') + await user.keyboard('{ArrowUp}') expect(queryByTestId('headerbar-browse-shortcuts')).toHaveClass( 'highlighted' ) - userEvent.keyboard('{ArrowUp}') + await user.keyboard('{ArrowUp}') expect(queryByTestId('headerbar-browse-commands')).toHaveClass( 'highlighted' ) - userEvent.keyboard('{ArrowUp}') + await user.keyboard('{ArrowUp}') expect(queryByTestId('headerbar-browse-apps')).toHaveClass( 'highlighted' ) // moves to grid - userEvent.keyboard('{ArrowUp}') + await user.keyboard('{ArrowUp}') expect(rowTwoFirstAppLink).toHaveClass('highlighted') expect(rowTwoFirstAppLink.querySelector('span')).toHaveTextContent( 'Test App 5' ) - userEvent.keyboard('{ArrowUp}') + await user.keyboard('{ArrowUp}') expect(rowOneFirstAppLink).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 c7cab4cf1..adf0e04e8 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,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 { @@ -10,7 +10,8 @@ import { } from './command-palette.test.js' describe('Command Palette - List View - Search Results', () => { - it('filters for one item and handles navigation of singular item list', () => { + it('filters for one item and handles navigation of singular item list', async () => { + const user = userEvent.setup() const { getByPlaceholderText, queryAllByTestId } = render( { /> ) // open modal - userEvent.keyboard('{ctrl}/') + await user.keyboard('{ctrl}/') // Search field - const searchField = getByPlaceholderText( + const searchField = await getByPlaceholderText( 'Search apps, shortcuts, commands' ) expect(searchField).toHaveValue('') // one item result - userEvent.type(searchField, 'Shortcut') + await user.type(searchField, 'Shortcut') const listItems = queryAllByTestId('headerbar-list-item') expect(listItems.length).toBe(1) expect(listItems[0]).toHaveTextContent('Test Shortcut 1') expect(listItems[0]).toHaveClass('highlighted') - userEvent.keyboard('{ArrowUp}') + await user.keyboard('{ArrowUp}') expect(listItems[0]).toHaveClass('highlighted') - userEvent.keyboard('{ArrowDown}') + await user.keyboard('{ArrowDown}') expect(listItems[0]).toHaveClass('highlighted') }) - it('shows empty search results if no match is made', () => { + it('shows empty search results if no match is made', async () => { + const user = userEvent.setup() const { getByTestId, getByPlaceholderText, @@ -52,7 +54,7 @@ describe('Command Palette - List View - Search Results', () => { ) // open command palette - userEvent.click(getByTestId(headerBarIconTest)) + await user.click(getByTestId(headerBarIconTest)) // Search field const searchField = getByPlaceholderText( @@ -60,7 +62,7 @@ describe('Command Palette - List View - Search Results', () => { ) expect(searchField).toHaveValue('') - userEvent.type(searchField, 'abc') + await user.type(searchField, 'abc') expect(searchField).toHaveValue('abc') expect(queryByTestId('headerbar-empty-search')).toBeInTheDocument() diff --git a/components/header-bar/src/command-palette/hooks/use-navigation.js b/components/header-bar/src/command-palette/hooks/use-navigation.js index f5d9e5e78..8cd1a63d8 100644 --- a/components/header-bar/src/command-palette/hooks/use-navigation.js +++ b/components/header-bar/src/command-palette/hooks/use-navigation.js @@ -220,7 +220,7 @@ export const useNavigation = ({ } if ((event.metaKey || event.ctrlKey) && event.key === '/') { - setShow(!show) + setShow((show) => !show) goToDefaultView() }