Skip to content

Commit

Permalink
test: fix failing command palette tests (#1646)
Browse files Browse the repository at this point in the history
  • Loading branch information
@d-rita
d-rita authored Dec 17, 2024
1 parent 07931b9 commit 1970312
Show file tree
Hide file tree
Showing 7 changed files with 177 additions and 149 deletions.
41 changes: 23 additions & 18 deletions components/header-bar/src/command-palette/__tests__/browse-apps-view.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { fireEvent } from '@testing-library/react'
import userEvent from '@testing-library/user-event'

Check warning on line 2 in components/header-bar/src/command-palette/__tests__/browse-apps-view.test.js

View workflow job for this annotation

GitHub Actions / lint 

Using exported name 'userEvent' as identifier for default export
import React from 'react'
import CommandPalette from '../command-palette.js'
Expand All @@ -10,7 +11,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,
Expand All @@ -22,10 +24,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')
Expand All @@ -44,33 +46,36 @@ describe('Command Palette - List View - Browse Apps View', () => {
expect(listItems[0]).toHaveClass('highlighted')

// go back to default view
userEvent.click(getByLabelText('Back Button'))
await 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('handles navigation and hover state of list items', async () => {
const user = userEvent.setup()
const {
getAllByRole,
queryByTestId,
getByPlaceholderText,
queryAllByTestId,
queryByText,
findByPlaceholderText,
container,
findByTestId,
} = render(
<CommandPalette
apps={testApps}
shortcuts={testShortcuts}
commands={testCommands}
/>
)
// open modal
userEvent.keyboard('{ctrl}/')
// open modal with (meta + /) keys
fireEvent.keyDown(container, { key: '/', metaKey: true })

//open browse apps view
userEvent.click(queryByTestId('headerbar-browse-apps'))
// click browse-apps link
const browseAppsLink = await findByTestId('headerbar-browse-apps')
await user.click(browseAppsLink)

// no filter view
const searchField = getByPlaceholderText('Search apps')
const searchField = await findByPlaceholderText('Search apps')
expect(queryByText(/All Apps/i)).toBeInTheDocument()

const listItems = queryAllByTestId('headerbar-list-item')
Expand All @@ -83,29 +88,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()
Expand All @@ -118,15 +123,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()
Expand Down
14 changes: 8 additions & 6 deletions components/header-bar/src/command-palette/__tests__/browse-commands-view.test.js
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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,
Expand All @@ -19,10 +20,11 @@ describe('Command Palette - List View - Browse Commands', () => {
<CommandPalette apps={[]} shortcuts={[]} commands={testCommands} />
)
// open command palette
userEvent.click(getByTestId(headerBarIconTest))
await user.click(getByTestId(headerBarIconTest))

// click browse-commands link
expect(queryByTestId('headerbar-actions-menu')).toBeInTheDocument()
userEvent.click(getByTestId('headerbar-browse-commands'))
await user.click(getByTestId('headerbar-browse-commands'))

// Browse Commands View
// Search field
Expand All @@ -42,8 +44,8 @@ describe('Command Palette - List View - Browse Commands', () => {
expect(listItem).toHaveClass('highlighted')

// Esc key goes back to default view
userEvent.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()
})
})
12 changes: 7 additions & 5 deletions components/header-bar/src/command-palette/__tests__/browse-shortcuts-view.test.js
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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,
Expand All @@ -19,10 +20,11 @@ describe('Command Palette - List View - Browse Shortcuts', () => {
<CommandPalette apps={[]} shortcuts={testShortcuts} commands={[]} />
)
// open command palette
userEvent.click(getByTestId(headerBarIconTest))
await user.click(getByTestId(headerBarIconTest))

// click browse-shortcuts link
expect(queryByTestId('headerbar-actions-menu')).toBeInTheDocument()
userEvent.click(getByTestId('headerbar-browse-shortcuts'))
await user.click(getByTestId('headerbar-browse-shortcuts'))

// Browse Shortcuts View
// Search field
Expand All @@ -42,7 +44,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()
})
Expand Down
51 changes: 27 additions & 24 deletions components/header-bar/src/command-palette/__tests__/command-palette.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { render as originalRender } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
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'
import CommandPalette from '../command-palette.js'
Expand Down Expand Up @@ -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={[]} />
)
Expand All @@ -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
Expand Down Expand Up @@ -90,54 +91,56 @@ 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 + /', () => {
const { queryByTestId } = render(
it('opens and closes Command Palette using ctrl + /', async () => {
const { container, queryByTestId } = render(
<CommandPalette apps={[]} shortcuts={[]} commands={[]} />
)
// modal not rendered yet
expect(queryByTestId(modalTest)).not.toBeInTheDocument()

// ctrl + /
// open modal
userEvent.keyboard('{ctrl}/')
// open modal with (Ctrl + /) keys
fireEvent.keyDown(container, { key: '/', ctrlKey: true })
expect(queryByTestId(modalTest)).toBeInTheDocument()
// close modal
userEvent.keyboard('{ctrl}/')

// close modal with (Ctrl + /) keys
fireEvent.keyDown(container, { key: '/', ctrlKey: true })
expect(queryByTestId(modalTest)).not.toBeInTheDocument()
})

it('opens and closes Command Palette using meta + /', () => {
const { queryByTestId } = render(
it('opens and closes Command Palette using meta + /', async () => {
const { container, queryByTestId } = render(
<CommandPalette apps={[]} shortcuts={[]} commands={[]} />
)
// modal not rendered yet
expect(queryByTestId(modalTest)).not.toBeInTheDocument()

// meta + /
// open modal
userEvent.keyboard('{meta}/')
// open modal with (Meta + /) keys
fireEvent.keyDown(container, { key: '/', metaKey: true })
expect(queryByTestId(modalTest)).toBeInTheDocument()
// close modal
userEvent.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', () => {
const { queryByTestId } = render(
it('closes Command Palette using Esc key', async () => {
const user = userEvent.setup()
const { container, queryByTestId } = render(
<CommandPalette apps={[]} shortcuts={[]} commands={[]} />
)
// modal not rendered yet
expect(queryByTestId(modalTest)).not.toBeInTheDocument()

// open modal
userEvent.keyboard('{ctrl}/')
// open modal with (Ctrl + /) keys
fireEvent.keyDown(container, { key: '/', ctrlKey: true })
expect(queryByTestId(modalTest)).toBeInTheDocument()

// Esc key closes the modal
userEvent.keyboard('{esc}')
await user.keyboard('{Escape}')
expect(queryByTestId(modalTest)).not.toBeInTheDocument()
})
})
Loading

0 comments on commit 1970312

Please sign in to comment.