Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

test: fix failing command palette tests #1646

Open
wants to merge 3 commits into
base: feature-command-palette
Choose a base branch
from
Open

test: fix failing command palette tests #1646

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9fec247
test: fix failing tests
d-rita Nov 28, 2024
0003cf5
fix(tests): add workaround for react-18 upgrade
kabaros Nov 28, 2024
b9a6df2
fix(tests): use fireEvent to simulate open/close of the palette
d-rita Nov 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 23 additions & 18 deletions components/header-bar/src/command-palette/__tests__/browse-apps-view.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
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'
import {
Expand All @@ -10,7 +11,8 @@
} 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 @@
<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 @@
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 @@
'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 @@
)

// 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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading