diff --git a/packages/react/src/Autocomplete/Autocomplete.test.tsx b/packages/react/src/Autocomplete/Autocomplete.test.tsx index da069dbb231..42db69f5217 100644 --- a/packages/react/src/Autocomplete/Autocomplete.test.tsx +++ b/packages/react/src/Autocomplete/Autocomplete.test.tsx @@ -1,5 +1,5 @@ -import {render, fireEvent, screen, waitFor} from '@testing-library/react' -import userEvent from '@testing-library/user-event' +import {act, render} from '@testing-library/react' +import {page, userEvent} from 'vitest/browser' import {createRef} from 'react' import {describe, expect, it, vi} from 'vitest' import type {AutocompleteInputProps} from '../Autocomplete' @@ -57,184 +57,183 @@ describe('Autocomplete', () => { )) it('renders data-component attributes for Autocomplete parts when menu is shown', async () => { - const user = userEvent.setup() const {container} = render( , ) - const input = container.querySelector('#autocompleteInput') as HTMLInputElement - expect(input).toHaveAttribute('data-component', 'Autocomplete.Input') + const input = page.getByRole('combobox', {name: AUTOCOMPLETE_LABEL}) + await expect.element(input).toHaveAttribute('data-component', 'Autocomplete.Input') - await user.type(input, 'z') + await userEvent.type(input, 'z') - expect(container.querySelector('[data-component="Autocomplete.Overlay"]')).toBeInTheDocument() - expect(container.querySelector('[data-component="Autocomplete.Menu"]')).toBeInTheDocument() + await expect + .element(container.querySelector('[data-component="Autocomplete.Overlay"]')) + .toBeInTheDocument() + await expect + .element(container.querySelector('[data-component="Autocomplete.Menu"]')) + .toBeInTheDocument() }) it('calls onChange', async () => { - const user = userEvent.setup() const onChangeMock = vi.fn() - const {container} = render( + render( , ) - const inputNode = container.querySelector('#autocompleteInput') + const inputNode = page.getByRole('combobox', {name: AUTOCOMPLETE_LABEL}) expect(onChangeMock).not.toHaveBeenCalled() - inputNode && (await user.type(inputNode, 'z')) + await userEvent.type(inputNode, 'z') expect(onChangeMock).toHaveBeenCalled() }) it('calls onFocus', () => { const onFocusMock = vi.fn() - const {container} = render( + render( , ) - const inputNode = container.querySelector('#autocompleteInput') + const inputNode = page.getByRole('combobox', {name: AUTOCOMPLETE_LABEL}) expect(onFocusMock).not.toHaveBeenCalled() - inputNode && fireEvent.focus(inputNode) + act(() => inputNode.element().focus()) expect(onFocusMock).toHaveBeenCalled() }) - it('calls onKeyDown', () => { + it('calls onKeyDown', async () => { const onKeyDownMock = vi.fn() - const {getByLabelText} = render( + render( , ) - const inputNode = getByLabelText(AUTOCOMPLETE_LABEL) + const inputNode = page.getByRole('combobox', {name: AUTOCOMPLETE_LABEL}) expect(onKeyDownMock).not.toHaveBeenCalled() - fireEvent.keyDown(inputNode, {key: 'Shift'}) + await userEvent.click(inputNode) + await userEvent.keyboard('{Shift}') expect(onKeyDownMock).toHaveBeenCalled() }) - it('calls onKeyUp', () => { + it('calls onKeyUp', async () => { const onKeyUpMock = vi.fn() - const {getByLabelText} = render( + render( , ) - const inputNode = getByLabelText(AUTOCOMPLETE_LABEL) + const inputNode = page.getByRole('combobox', {name: AUTOCOMPLETE_LABEL}) expect(onKeyUpMock).not.toHaveBeenCalled() - fireEvent.keyUp(inputNode, {key: 'Shift'}) + await userEvent.click(inputNode) + await userEvent.keyboard('{Shift}') expect(onKeyUpMock).toHaveBeenCalled() }) it('calls onKeyPress', async () => { - const user = userEvent.setup() const onKeyPressMock = vi.fn() - const {getByLabelText} = render( + render( , ) - const inputNode = getByLabelText(AUTOCOMPLETE_LABEL) + const inputNode = page.getByRole('combobox', {name: AUTOCOMPLETE_LABEL}) expect(onKeyPressMock).not.toHaveBeenCalled() - await user.type(inputNode, '{enter}') + await userEvent.click(inputNode) + await userEvent.keyboard('{Enter}') expect(onKeyPressMock).toHaveBeenCalled() }) - it('opens the menu when the input is focused and arrow key is pressed', () => { - const {getByLabelText} = render( + it('opens the menu when the input is focused and arrow key is pressed', async () => { + render( , ) - const inputNode = getByLabelText(AUTOCOMPLETE_LABEL) + const inputNode = page.getByRole('combobox', {name: AUTOCOMPLETE_LABEL}) - expect(inputNode.getAttribute('aria-expanded')).not.toBe('true') - fireEvent.click(inputNode) - fireEvent.keyDown(inputNode, {key: 'ArrowDown'}) - expect(inputNode.getAttribute('aria-expanded')).toBe('true') + await expect.element(inputNode).not.toHaveAttribute('aria-expanded', 'true') + await userEvent.click(inputNode) + await userEvent.keyboard('{ArrowDown}') + await expect.element(inputNode).toHaveAttribute('aria-expanded', 'true') }) it('closes the menu when the input is blurred', async () => { - const {getByLabelText} = render( + render( , ) - const inputNode = getByLabelText(AUTOCOMPLETE_LABEL) + const inputNode = page.getByRole('combobox', {name: AUTOCOMPLETE_LABEL}) - expect(inputNode.getAttribute('aria-expanded')).not.toBe('true') - fireEvent.click(inputNode) - fireEvent.keyDown(inputNode, {key: 'ArrowDown'}) + await expect.element(inputNode).not.toHaveAttribute('aria-expanded', 'true') + await userEvent.click(inputNode) + await userEvent.keyboard('{ArrowDown}') - expect(inputNode.getAttribute('aria-expanded')).toBe('true') + await expect.element(inputNode).toHaveAttribute('aria-expanded', 'true') - // `userEvent.tab()` is unreliable in browser-mode Vitest for this case; blur is deterministic. // eslint-disable-next-line github/no-blur - fireEvent.blur(inputNode) + act(() => inputNode.element().blur()) - await waitFor(() => expect(inputNode.getAttribute('aria-expanded')).not.toBe('true')) + await expect.element(inputNode).not.toHaveAttribute('aria-expanded', 'true') }) it('sets the input value to the suggested item text and highlights the untyped part of the word', async () => { - const user = userEvent.setup() - const {container, getByDisplayValue} = render( + render( , ) - const inputNode = container.querySelector('#autocompleteInput') + const inputNode = page.getByRole('combobox', {name: AUTOCOMPLETE_LABEL}) - inputNode && (await user.type(inputNode, 'ze')) - expect(getByDisplayValue('zero')).toBeDefined() + await userEvent.type(inputNode, 'ze') + await expect.element(inputNode).toHaveValue('zero') }) it('does not show or highlight suggestion text after the user hits Backspace until they hit another key', async () => { - const user = userEvent.setup() - const {container, getByDisplayValue} = render( + render( , ) - const inputNode = container.querySelector('#autocompleteInput') - - expect((inputNode as HTMLInputElement).selectionStart).toBe(0) - inputNode && (await user.type(inputNode, 'ze')) - expect(getByDisplayValue('zero')).toBeDefined() - expect((inputNode as HTMLInputElement).selectionStart).toBe(2) - expect((inputNode as HTMLInputElement).selectionEnd).toBe(4) - inputNode && (await user.keyboard('{backspace}')) - expect((inputNode as HTMLInputElement).selectionStart).toBe(2) - expect(getByDisplayValue('ze')).toBeDefined() - inputNode && (await user.keyboard('r')) - expect((inputNode as HTMLInputElement).selectionStart).toBe(3) - expect((inputNode as HTMLInputElement).selectionEnd).toBe(4) - expect(getByDisplayValue('zero')).toBeDefined() + const inputNode = page.getByRole('combobox', {name: AUTOCOMPLETE_LABEL}) + + expect((inputNode.element() as HTMLInputElement).selectionStart).toBe(0) + await userEvent.type(inputNode, 'ze') + await expect.element(inputNode).toHaveValue('zero') + expect((inputNode.element() as HTMLInputElement).selectionStart).toBe(2) + expect((inputNode.element() as HTMLInputElement).selectionEnd).toBe(4) + await userEvent.keyboard('{backspace}') + expect((inputNode.element() as HTMLInputElement).selectionStart).toBe(2) + await expect.element(inputNode).toHaveValue('ze') + await userEvent.keyboard('r') + expect((inputNode.element() as HTMLInputElement).selectionStart).toBe(3) + expect((inputNode.element() as HTMLInputElement).selectionEnd).toBe(4) + await expect.element(inputNode).toHaveValue('zero') }) it('clears the input value when the user hits Escape', async () => { - const user = userEvent.setup() - const {container} = render( + render( , ) - const inputNode = container.querySelector('#autocompleteInput') + const inputNode = page.getByRole('combobox', {name: AUTOCOMPLETE_LABEL}) - expect(inputNode?.getAttribute('aria-expanded')).not.toBe('true') - inputNode && (await user.type(inputNode, 'ze')) - expect(inputNode?.getAttribute('aria-expanded')).toBe('true') - inputNode && (await user.keyboard('{escape}')) - expect(inputNode?.getAttribute('aria-expanded')).not.toBe('true') + await expect.element(inputNode).not.toHaveAttribute('aria-expanded', 'true') + await userEvent.type(inputNode, 'ze') + await expect.element(inputNode).toHaveAttribute('aria-expanded', 'true') + await userEvent.keyboard('{escape}') + await expect.element(inputNode).not.toHaveAttribute('aria-expanded', 'true') }) it('does not restore the autocomplete suggestion when the input is blurred', async () => { - const user = userEvent.setup() - const {container} = render( + render( <> { , ) - const inputNode = container.querySelector('#autocompleteInput') as HTMLInputElement - const outsideButton = screen.getByRole('button', {name: 'outside'}) + const inputNode = page.getByRole('combobox', {name: AUTOCOMPLETE_LABEL}) + const outsideButton = page.getByRole('button', {name: 'outside'}) // Type 'ze' which gets the inline autocomplete suggestion 'zero' - await user.type(inputNode, 'ze') - expect(inputNode.value).toBe('zero') + await userEvent.type(inputNode, 'ze') + await expect.element(inputNode).toHaveValue('zero') // Move focus elsewhere on the page, like clicking outside the Autocomplete - await user.click(outsideButton) + await userEvent.click(outsideButton) // The input should retain the text the user typed rather than the full suggestion - await waitFor(() => expect(inputNode.value).toBe('ze')) + await expect.element(inputNode).toHaveValue('ze') }) - it('allows the value to be 0', () => { - const {getByDisplayValue} = render( + it('allows the value to be 0', async () => { + render( , ) - expect(getByDisplayValue('0')).toBeDefined() + await expect.element(page.getByRole('combobox', {name: AUTOCOMPLETE_LABEL})).toHaveValue('0') }) }) describe('Autocomplete.Menu', () => { it('only sets an active descendant while a menu rendered without an overlay is open', async () => { - const user = userEvent.setup() const ancestorRef = createRef() const handleAncestorKeyDown = (event: KeyboardEvent) => { if (!event.defaultPrevented && event.key === 'ArrowDown') { @@ -291,31 +289,30 @@ describe('Autocomplete', () => { , ) - const inputNode = screen.getByRole('combobox', {name: AUTOCOMPLETE_LABEL}) + const inputNode = page.getByRole('combobox', {name: AUTOCOMPLETE_LABEL}) ancestorRef.current?.addEventListener('keydown', handleAncestorKeyDown) - expect(inputNode).toHaveAttribute('aria-expanded', 'false') - expect(screen.getByRole('listbox', {hidden: true}).closest('[hidden]')).toBeInTheDocument() + await expect.element(inputNode).toHaveAttribute('aria-expanded', 'false') + await expect + .element(page.getByRole('listbox', {includeHidden: true}).element().closest('[hidden]')) + .toBeInTheDocument() - await user.click(inputNode) - expect(inputNode).not.toHaveAttribute('aria-activedescendant') + await userEvent.click(inputNode) + await expect.element(inputNode).not.toHaveAttribute('aria-activedescendant') - await user.keyboard('{ArrowDown}') - await waitFor(() => { - expect(inputNode).toHaveFocus() - expect(inputNode).toHaveAttribute('aria-activedescendant', mockItems[0].id) - expect(screen.getByRole('option', {name: mockItems[0].text})).not.toHaveFocus() - }) + await userEvent.keyboard('{ArrowDown}') + await expect.element(inputNode).toHaveFocus() + await expect.element(inputNode).toHaveAttribute('aria-activedescendant', mockItems[0].id) + await expect.element(page.getByRole('option', {name: mockItems[0].text})).not.toHaveFocus() // eslint-disable-next-line github/no-blur - fireEvent.blur(inputNode) - await waitFor(() => expect(inputNode).not.toHaveAttribute('aria-activedescendant')) + act(() => inputNode.element().blur()) + await expect.element(inputNode).not.toHaveAttribute('aria-activedescendant') }) it('calls a custom filter function', async () => { - const user = userEvent.setup() const filterFnMock = vi.fn() - const {container} = render( + render( { }} />, ) - const inputNode = container.querySelector('#autocompleteInput') + const inputNode = page.getByRole('combobox', {name: AUTOCOMPLETE_LABEL}) - inputNode && (await user.type(inputNode, 'ze')) + await userEvent.type(inputNode, 'ze') expect(filterFnMock).toHaveBeenCalled() }) it('calls a custom sort function when the menu closes', async () => { - const user = userEvent.setup() const sortOnCloseFnMock = vi.fn() - const {container} = render( + render( { }} />, ) - const inputNode = container.querySelector('#autocompleteInput') + const inputNode = page.getByRole('combobox', {name: AUTOCOMPLETE_LABEL}) // `sortOnCloseFnMock` will be called in a `.sort()` on render to check if the // current sort order matches the result of `sortOnCloseFnMock` expect(sortOnCloseFnMock).toHaveBeenCalledTimes(mockItems.length - 1) - if (inputNode) { - await user.type(inputNode, 'ze') - // eslint-disable-next-line github/no-blur - fireEvent.blur(inputNode) - } + await userEvent.type(inputNode, 'ze') + // eslint-disable-next-line github/no-blur + act(() => inputNode.element().blur()) // wait a tick for blur to finish - await waitFor(() => expect(sortOnCloseFnMock).toHaveBeenCalled()) + await expect.poll(() => sortOnCloseFnMock).toHaveBeenCalled() }) it("calls onOpenChange with the menu's open state", async () => { - const user = userEvent.setup() const onOpenChangeMock = vi.fn() - const {container} = render( + render( { }} />, ) - const inputNode = container.querySelector('#autocompleteInput') + const inputNode = page.getByRole('combobox', {name: AUTOCOMPLETE_LABEL}) - inputNode && (await user.type(inputNode, 'ze')) + await userEvent.type(inputNode, 'ze') expect(onOpenChangeMock).toHaveBeenCalled() }) it('calls onSelectedChange with the data for the selected items', async () => { - const user = userEvent.setup() const onSelectedChangeMock = vi.fn() - const {container} = render( + render( { }} />, ) - const inputNode = container.querySelector('#autocompleteInput') + const inputNode = page.getByRole('combobox', {name: AUTOCOMPLETE_LABEL}) expect(onSelectedChangeMock).not.toHaveBeenCalled() - if (inputNode) { - fireEvent.focus(inputNode) - await user.type(inputNode, '{arrowdown}{enter}') - } + await userEvent.click(inputNode) + await userEvent.keyboard('{ArrowDown}{Enter}') expect(onSelectedChangeMock).toHaveBeenCalledWith([mockItems[0]]) }) it('does not close the menu when clicking an item in the menu if selectionVariant=multiple', async () => { - const user = userEvent.setup() - const {getByText, container} = render( + render( { }} />, ) - const inputNode = container.querySelector('#autocompleteInput') + const inputNode = page.getByRole('combobox', {name: AUTOCOMPLETE_LABEL}) - if (inputNode) { - expect(inputNode.getAttribute('aria-expanded')).not.toBe('true') - await user.click(inputNode) + await expect.element(inputNode).not.toHaveAttribute('aria-expanded', 'true') + await userEvent.click(inputNode) - fireEvent.keyDown(inputNode, {key: 'ArrowDown'}) - expect(inputNode.getAttribute('aria-expanded')).toBe('true') - await user.click(getByText(mockItems[1].text)) - expect(inputNode.getAttribute('aria-expanded')).toBe('true') - } + await userEvent.keyboard('{ArrowDown}') + await expect.element(inputNode).toHaveAttribute('aria-expanded', 'true') + await userEvent.click(page.getByRole('option', {name: mockItems[1].text, exact: true})) + await expect.element(inputNode).toHaveAttribute('aria-expanded', 'true') }) it('closes the menu when clicking an item in the menu if selectionVariant=single', async () => { - const user = userEvent.setup() - const {getByText, container} = render( + render( { }} />, ) - const inputNode = container.querySelector('#autocompleteInput') - - if (inputNode) { - expect(inputNode.getAttribute('aria-expanded')).not.toBe('true') - await user.click(inputNode) - fireEvent.keyDown(inputNode, {key: 'ArrowDown'}) - expect(inputNode.getAttribute('aria-expanded')).toBe('true') - await user.click(getByText(mockItems[1].text)) - expect(inputNode.getAttribute('aria-expanded')).not.toBe('true') - } + const inputNode = page.getByRole('combobox', {name: AUTOCOMPLETE_LABEL}) + + await expect.element(inputNode).not.toHaveAttribute('aria-expanded', 'true') + await userEvent.click(inputNode) + await userEvent.keyboard('{ArrowDown}') + await expect.element(inputNode).toHaveAttribute('aria-expanded', 'true') + await userEvent.click(page.getByRole('option', {name: mockItems[1].text, exact: true})) + await expect.element(inputNode).not.toHaveAttribute('aria-expanded', 'true') }) - it('calls handleAddItem with new item data when passing addNewItem', () => { + it('calls handleAddItem with new item data when passing addNewItem', async () => { const handleAddItemMock = vi.fn() - const {getByText} = render( + render( { />, ) - const addNewItemNode = getByText('Add new item') + const addNewItemNode = page.getByText('Add new item', {exact: true}) expect(handleAddItemMock).not.toHaveBeenCalled() - fireEvent.click(addNewItemNode) + await userEvent.click(page.getByRole('combobox', {name: AUTOCOMPLETE_LABEL})) + await userEvent.keyboard('{ArrowDown}') + await userEvent.click(addNewItemNode) expect(handleAddItemMock).toHaveBeenCalled() }) @@ -495,7 +481,7 @@ describe('Autocomplete', () => { spy.mockRestore() }) - it('renders items with the `children` field', () => { + it('renders items with the `children` field', async () => { render( <> test-label @@ -524,9 +510,9 @@ describe('Autocomplete', () => { , ) - expect(screen.getByText('One')).toBeInTheDocument() - expect(screen.getByText('Two')).toBeInTheDocument() - expect(screen.getByText('Three')).toBeInTheDocument() + await expect.element(page.getByText('One')).toBeInTheDocument() + await expect.element(page.getByText('Two')).toBeInTheDocument() + await expect.element(page.getByText('Three')).toBeInTheDocument() }) }) describe('Autocomplete.Overlay', () => { diff --git a/packages/react/src/Avatar/Avatar.test.tsx b/packages/react/src/Avatar/Avatar.test.tsx index ba816856822..c7d7ff4f0f9 100644 --- a/packages/react/src/Avatar/Avatar.test.tsx +++ b/packages/react/src/Avatar/Avatar.test.tsx @@ -1,5 +1,6 @@ import {describe, expect, it} from 'vitest' -import {render, screen} from '@testing-library/react' +import {render} from '@testing-library/react' +import {page} from 'vitest/browser' import Avatar from '../Avatar' import {implementsClassName} from '../utils/testing' import classes from './Avatar.module.css' @@ -8,35 +9,35 @@ describe('Avatar', () => { implementsClassName(Avatar, classes.Avatar) describe('Avatar data-component attribute', () => { - it('renders Avatar with data-component attribute', () => { + it('renders Avatar with data-component attribute', async () => { render() - const avatar = screen.getByTestId('avatar') - expect(avatar).toHaveAttribute('data-component', 'Avatar') + const avatar = page.getByTestId('avatar') + await expect.element(avatar).toHaveAttribute('data-component', 'Avatar') }) }) - it('renders small by default', () => { + it('renders small by default', async () => { const size = 20 render() - const avatar = screen.getByTestId('avatar') - expect(avatar).toHaveAttribute('width', size.toString()) - expect(avatar).toHaveAttribute('height', size.toString()) + const avatar = page.getByTestId('avatar') + await expect.element(avatar).toHaveAttribute('width', size.toString()) + await expect.element(avatar).toHaveAttribute('height', size.toString()) }) - it('respects the size prop', () => { + it('respects the size prop', async () => { render() - const avatar = screen.getByTestId('avatar') - expect(avatar).toHaveAttribute('width', '40') - expect(avatar).toHaveAttribute('height', '40') + const avatar = page.getByTestId('avatar') + await expect.element(avatar).toHaveAttribute('width', '40') + await expect.element(avatar).toHaveAttribute('height', '40') }) - it('passes through the src prop', () => { + it('passes through the src prop', async () => { render() - const avatar = screen.getByTestId('avatar') - expect(avatar).toHaveAttribute('src', 'primer.png') + const avatar = page.getByTestId('avatar') + await expect.element(avatar).toHaveAttribute('src', 'primer.png') }) - it('should support the `style` prop without overriding internal styles', () => { + it('should support the `style` prop without overriding internal styles', async () => { render( { />, ) - const avatar = screen.getByTestId('avatar') + const avatar = page.getByTestId('avatar') // Test that both the custom CSS property and the style prop are applied - expect(avatar).toHaveStyle('--avatarSize-regular: 20px') + await expect.element(avatar).toHaveStyle('--avatarSize-regular: 20px') // Check that style attribute contains both the custom property and the background - const styleAttr = avatar.getAttribute('style') || '' + const styleAttr = avatar.element().getAttribute('style') || '' expect(styleAttr).toContain('--avatarSize-regular: 20px') expect(styleAttr).toContain('background: black') }) diff --git a/packages/react/src/AvatarStack/AvatarStack.test.tsx b/packages/react/src/AvatarStack/AvatarStack.test.tsx index dd40d4d3eb7..e52f5a9e62d 100644 --- a/packages/react/src/AvatarStack/AvatarStack.test.tsx +++ b/packages/react/src/AvatarStack/AvatarStack.test.tsx @@ -26,50 +26,50 @@ describe('AvatarStack', () => { implementsClassName(AvatarStack, classes.AvatarStack) describe('AvatarStack data-component attributes', () => { - it('renders AvatarStack with data-component attribute', () => { + it('renders AvatarStack with data-component attribute', async () => { const {container} = render(avatarComp) - const root = container.querySelector('[data-component="AvatarStack"]') - expect(root).toBeInTheDocument() + const root = container.querySelector('[data-component="AvatarStack"]') + await expect.element(root).toBeInTheDocument() }) - it('renders AvatarStack.Body with data-component attribute', () => { + it('renders AvatarStack.Body with data-component attribute', async () => { const {container} = render(avatarComp) - const body = container.querySelector('[data-component="AvatarStack.Body"]') - expect(body).toBeInTheDocument() + const body = container.querySelector('[data-component="AvatarStack.Body"]') + await expect.element(body).toBeInTheDocument() }) }) - it('respects alignRight props', () => { + it('respects alignRight props', async () => { const {container} = render(rightAvatarComp) - const root = container.querySelector('[data-component="AvatarStack"]') - expect(root).toHaveAttribute('data-align-right', '') + const root = container.querySelector('[data-component="AvatarStack"]') + await expect.element(root).toHaveAttribute('data-align-right', '') }) - it('should have a tabindex of 0 if there are no interactive children', () => { + it('should have a tabindex of 0 if there are no interactive children', async () => { const {container} = render(avatarComp) - expect(container.querySelector('[tabindex="0"]')).toBeInTheDocument() + await expect.element(container.querySelector('[tabindex="0"]')).toBeInTheDocument() }) - it('should not have a tabindex if there are interactive children', () => { + it('should not have a tabindex if there are interactive children', async () => { const {container} = render( , ) - expect(container.querySelector('[tabindex="0"]')).not.toBeInTheDocument() + await expect.element(container.querySelector('[tabindex="0"]')).not.toBeInTheDocument() }) - it('should not have a tabindex if disableExpand is true', () => { + it('should not have a tabindex if disableExpand is true', async () => { const {container} = render( , ) - expect(container.querySelector('[tabindex="0"]')).not.toBeInTheDocument() + await expect.element(container.querySelector('[tabindex="0"]')).not.toBeInTheDocument() }) - it('should support `style` prop on the outermost element', () => { + it('should support `style` prop on the outermost element', async () => { const style = {backgroundColor: 'red'} const {container} = render( @@ -77,6 +77,8 @@ describe('AvatarStack', () => { , ) - expect(container.firstChild).toHaveStyle('background-color: rgb(255, 0, 0)') + await expect + .element(container.querySelector('[data-component="AvatarStack"]')) + .toHaveStyle('background-color: rgb(255, 0, 0)') }) }) diff --git a/packages/react/src/Banner/Banner.test.tsx b/packages/react/src/Banner/Banner.test.tsx index 73d771ad36a..43620332f2c 100644 --- a/packages/react/src/Banner/Banner.test.tsx +++ b/packages/react/src/Banner/Banner.test.tsx @@ -1,6 +1,6 @@ import {describe, expect, it, vi} from 'vitest' -import {render, screen} from '@testing-library/react' -import userEvent from '@testing-library/user-event' +import {render} from '@testing-library/react' +import {page, userEvent} from 'vitest/browser' import {Banner} from '../Banner' import {implementsClassName} from '../utils/testing' import classes from './Banner.module.css' @@ -8,13 +8,13 @@ import classes from './Banner.module.css' describe('Banner', () => { implementsClassName(props => , classes.Banner) - it('should render as a region element', () => { + it('should render as a region element', async () => { render() - expect(screen.getByRole('region', {name: 'test'})).toBeInTheDocument() - expect(screen.getByRole('heading', {name: 'test'})).toBeInTheDocument() + await expect.element(page.getByRole('region', {name: 'test'})).toBeInTheDocument() + await expect.element(page.getByRole('heading', {name: 'test'})).toBeInTheDocument() }) - it('renders data-component attributes', () => { + it('renders data-component attributes', async () => { const {container} = render( { />, ) - expect(container.querySelector('[data-component="Banner"]')).toBeInTheDocument() - expect(container.querySelector('[data-component="Banner.Icon"]')).toBeInTheDocument() - expect(container.querySelector('[data-component="Banner.Content"]')).toBeInTheDocument() - expect(container.querySelector('[data-component="Banner.Actions"]')).toBeInTheDocument() + await expect.element(container.querySelector('[data-component="Banner"]')).toBeInTheDocument() + await expect.element(container.querySelector('[data-component="Banner.Icon"]')).toBeInTheDocument() + await expect.element(container.querySelector('[data-component="Banner.Content"]')).toBeInTheDocument() + await expect.element(container.querySelector('[data-component="Banner.Actions"]')).toBeInTheDocument() - expect(container.querySelector('[data-component="Banner.PrimaryAction"]')).toBeInTheDocument() - expect(container.querySelector('[data-component="Banner.SecondaryAction"]')).toBeInTheDocument() + await expect + .element(container.querySelector('[data-component="Banner.PrimaryAction"]')) + .toBeInTheDocument() + await expect + .element(container.querySelector('[data-component="Banner.SecondaryAction"]')) + .toBeInTheDocument() - expect(container.querySelector('[data-component="Banner.Title"]')).toBeInTheDocument() - expect(container.querySelector('[data-component="Banner.Description"]')).toBeInTheDocument() + await expect.element(container.querySelector('[data-component="Banner.Title"]')).toBeInTheDocument() + await expect + .element(container.querySelector('[data-component="Banner.Description"]')) + .toBeInTheDocument() }) - it('renders Banner dismiss IconButton with data-component attribute', () => { + it('renders Banner dismiss IconButton with data-component attribute', async () => { const {container} = render( {}} />) - const dismissButton = container.querySelector('[data-component="Banner"] [data-component="IconButton"]') - expect(dismissButton).toBeInTheDocument() + const dismissButton = container.querySelector( + '[data-component="Banner"] [data-component="IconButton"]', + ) + await expect.element(dismissButton).toBeInTheDocument() }) - it('should label the landmark element with the title by default', () => { + it('should label the landmark element with the title by default', async () => { render() - const region = screen.getByRole('region', {name: 'My Banner Title'}) - expect(region).toHaveAttribute('aria-labelledby') - expect(region).not.toHaveAttribute('aria-label') + const region = page.getByRole('region', {name: 'My Banner Title'}) + await expect.element(region).toHaveAttribute('aria-labelledby') + await expect.element(region).not.toHaveAttribute('aria-label') }) - it('should use aria-labelledby to reference the title for the critical variant', () => { + it('should use aria-labelledby to reference the title for the critical variant', async () => { render() - const region = screen.getByRole('region', {name: 'Critical Issue'}) - expect(region).toHaveAttribute('aria-labelledby') + const region = page.getByRole('region', {name: 'Critical Issue'}) + await expect.element(region).toHaveAttribute('aria-labelledby') }) - it('should use aria-labelledby to reference the title for the info variant', () => { + it('should use aria-labelledby to reference the title for the info variant', async () => { render() - const region = screen.getByRole('region', {name: 'Information'}) - expect(region).toHaveAttribute('aria-labelledby') + const region = page.getByRole('region', {name: 'Information'}) + await expect.element(region).toHaveAttribute('aria-labelledby') }) - it('should use aria-labelledby to reference the title for the success variant', () => { + it('should use aria-labelledby to reference the title for the success variant', async () => { render() - const region = screen.getByRole('region', {name: 'Success Message'}) - expect(region).toHaveAttribute('aria-labelledby') + const region = page.getByRole('region', {name: 'Success Message'}) + await expect.element(region).toHaveAttribute('aria-labelledby') }) - it('should use aria-labelledby to reference the title for the upsell variant', () => { + it('should use aria-labelledby to reference the title for the upsell variant', async () => { render() - const region = screen.getByRole('region', {name: 'Recommendation'}) - expect(region).toHaveAttribute('aria-labelledby') + const region = page.getByRole('region', {name: 'Recommendation'}) + await expect.element(region).toHaveAttribute('aria-labelledby') }) - it('should use aria-labelledby to reference the title for the warning variant', () => { + it('should use aria-labelledby to reference the title for the warning variant', async () => { render() - const region = screen.getByRole('region', {name: 'Warning'}) - expect(region).toHaveAttribute('aria-labelledby') + const region = page.getByRole('region', {name: 'Warning'}) + await expect.element(region).toHaveAttribute('aria-labelledby') }) - it('should support the `aria-label` prop to override the default label for the landmark', () => { + it('should support the `aria-label` prop to override the default label for the landmark', async () => { render() - expect(screen.getByRole('region')).toHaveAttribute('aria-label', 'Test') + await expect.element(page.getByRole('region')).toHaveAttribute('aria-label', 'Test') }) - it('should prefer aria-labelledby over aria-label and not set both', () => { + it('should prefer aria-labelledby over aria-label and not set both', async () => { render( Explicit Banner Title , ) - const region = screen.getByRole('region', {name: 'Explicit Banner Title'}) - expect(region).toHaveAttribute('aria-labelledby', 'my-banner-title') - expect(region).not.toHaveAttribute('aria-label') + const region = page.getByRole('region', {name: 'Explicit Banner Title'}) + await expect.element(region).toHaveAttribute('aria-labelledby', 'my-banner-title') + await expect.element(region).not.toHaveAttribute('aria-label') }) - it('should only set aria-label when aria-labelledby is not provided', () => { + it('should only set aria-label when aria-labelledby is not provided', async () => { render() - const region = screen.getByRole('region') - expect(region).toHaveAttribute('aria-label', 'Custom Label') - expect(region).not.toHaveAttribute('aria-labelledby') + const region = page.getByRole('region') + await expect.element(region).toHaveAttribute('aria-label', 'Custom Label') + await expect.element(region).not.toHaveAttribute('aria-labelledby') }) - it('should use aria-labelledby to reference Banner.Title when provided as a child', () => { + it('should use aria-labelledby to reference Banner.Title when provided as a child', async () => { render( Custom Title Component , ) - const region = screen.getByRole('region', {name: 'Custom Title Component'}) - const heading = screen.getByRole('heading', {name: 'Custom Title Component'}) - expect(region).toHaveAttribute('aria-labelledby', heading.id) - expect(heading).toHaveAttribute('id') - expect(region).not.toHaveAttribute('aria-label') + const region = page.getByRole('region', {name: 'Custom Title Component'}) + const heading = page.getByRole('heading', {name: 'Custom Title Component'}) + await expect.element(region).toHaveAttribute('aria-labelledby', heading.element().id) + await expect.element(heading).toHaveAttribute('id') + await expect.element(region).not.toHaveAttribute('aria-label') }) - it('should use aria-labelledby to reference Banner.Title with custom id', () => { + it('should use aria-labelledby to reference Banner.Title with custom id', async () => { render( Title with Custom ID , ) - const region = screen.getByRole('region', {name: 'Title with Custom ID'}) - expect(region).toHaveAttribute('aria-labelledby', 'custom-title-id') - expect(screen.getByRole('heading')).toHaveAttribute('id', 'custom-title-id') + const region = page.getByRole('region', {name: 'Title with Custom ID'}) + await expect.element(region).toHaveAttribute('aria-labelledby', 'custom-title-id') + await expect.element(page.getByRole('heading')).toHaveAttribute('id', 'custom-title-id') }) - it('should default the title to a h2', () => { + it('should default the title to a h2', async () => { render() - expect(screen.getByRole('heading', {level: 2})).toBeInTheDocument() - expect(screen.getByRole('heading', {level: 2})).toEqual(screen.getByText('test')) + await expect.element(page.getByRole('heading', {level: 2})).toBeInTheDocument() + expect(page.getByRole('heading', {level: 2}).element()).toEqual(page.getByText('test', {exact: true}).element()) }) it('should throw an error if no title is provided', () => { @@ -143,14 +151,15 @@ describe('Banner', () => { spy.mockRestore() }) - it('should rendering a description with the `description` prop', () => { + it('should rendering a description with the `description` prop', async () => { render() - expect(screen.getByText('test-description')).toBeInTheDocument() - expect(screen.getByRole('region', {name: 'test'})).toContainElement(screen.getByText('test-description')) + await expect.element(page.getByText('test-description')).toBeInTheDocument() + await expect + .element(page.getByRole('region', {name: 'test'})) + .toContainElement(page.getByText('test-description').element()) }) it('should support a primary action', async () => { - const user = userEvent.setup() const onClick = vi.fn() render( { />, ) - expect(screen.queryAllByRole('button', {name: 'test primary action', hidden: true}).length).toBe(2) + expect(page.getByRole('button', {name: 'test primary action', includeHidden: true}).elements()).toHaveLength(2) - await user.click(screen.queryAllByText('test primary action')[0]) + await userEvent.click(page.getByRole('button', {name: 'test primary action'})) expect(onClick).toHaveBeenCalledTimes(1) }) it('should support a secondary action', async () => { - const user = userEvent.setup() const onClick = vi.fn() render( { />, ) - expect(screen.queryAllByRole('button', {name: 'test secondary action', hidden: true}).length).toBe(2) + expect(page.getByRole('button', {name: 'test secondary action', includeHidden: true}).elements()).toHaveLength(2) - await user.click(screen.queryAllByText('test secondary action')[0]) + await userEvent.click(page.getByRole('button', {name: 'test secondary action'})) expect(onClick).toHaveBeenCalledTimes(1) }) - it('should support primary action and secondary action', () => { + it('should support primary action and secondary action', async () => { render( { />, ) - expect(screen.queryAllByRole('button', {name: 'test primary action', hidden: true}).length).toBe(2) - expect(screen.queryAllByRole('button', {name: 'test secondary action', hidden: true}).length).toBe(2) + expect(page.getByRole('button', {name: 'test primary action', includeHidden: true}).elements()).toHaveLength(2) + expect(page.getByRole('button', {name: 'test secondary action', includeHidden: true}).elements()).toHaveLength(2) }) it('should call `onDismiss` when the dismiss button is activated', async () => { - const user = userEvent.setup() const onDismiss = vi.fn() render() - await user.click(screen.getByRole('button', {name: 'Dismiss banner'})) + await userEvent.click(page.getByRole('button', {name: 'Dismiss banner'})) expect(onDismiss).toHaveBeenCalledTimes(1) - expect(screen.getByRole('button', {name: 'Dismiss banner'})).toHaveFocus() + await expect.element(page.getByRole('button', {name: 'Dismiss banner'})).toHaveFocus() - await user.keyboard('{Enter}') + await userEvent.keyboard('{Enter}') expect(onDismiss).toHaveBeenCalledTimes(2) - await user.type(screen.getByRole('button', {name: 'Dismiss banner'}), '{Space}') + await userEvent.keyboard(' ') expect(onDismiss).toHaveBeenCalledTimes(3) }) it.each(['critical', 'info', 'success', 'upsell', 'warning'] as const)( 'should support onDismiss for the %s variant', - variant => { + async variant => { const onDismiss = vi.fn() render() - expect(screen.queryByRole('button', {name: 'Dismiss banner'})).toBeInTheDocument() + await expect.element(page.getByRole('button', {name: 'Dismiss banner'})).toBeInTheDocument() }, ) - it('should pass extra props onto the container element', () => { + it('should pass extra props onto the container element', async () => { const {container} = render() - expect(container.firstChild).toHaveAttribute('data-testid', 'test') + await expect + .element(container.querySelector('[data-component="Banner"]')) + .toHaveAttribute('data-testid', 'test') }) - it('should support a custom icon for info and upsell variants', () => { + it('should support a custom icon for info and upsell variants', async () => { const CustomIcon = vi.fn(() => ) const {rerender} = render( } />, ) - expect(screen.getByTestId('icon')).toBeInTheDocument() + await expect.element(page.getByTestId('icon')).toBeInTheDocument() rerender(} />) - expect(screen.getByTestId('icon')).toBeInTheDocument() + await expect.element(page.getByTestId('icon')).toBeInTheDocument() rerender(} />) - expect(screen.queryByTestId('icon')).toBe(null) + await expect.element(page.getByTestId('icon')).not.toBeInTheDocument() rerender(} />) - expect(screen.queryByTestId('icon')).toBe(null) + await expect.element(page.getByTestId('icon')).not.toBeInTheDocument() rerender(} />) - expect(screen.queryByTestId('icon')).toBe(null) + await expect.element(page.getByTestId('icon')).not.toBeInTheDocument() }) - it('should support a custom leadingVisual for info and upsell variants', () => { + it('should support a custom leadingVisual for info and upsell variants', async () => { const CustomIcon = vi.fn(() => ) const {rerender} = render( } />, ) - expect(screen.getByTestId('leading-visual')).toBeInTheDocument() + await expect.element(page.getByTestId('leading-visual')).toBeInTheDocument() rerender(} />) - expect(screen.getByTestId('leading-visual')).toBeInTheDocument() + await expect.element(page.getByTestId('leading-visual')).toBeInTheDocument() rerender(} />) - expect(screen.queryByTestId('leading-visual')).toBe(null) + await expect.element(page.getByTestId('leading-visual')).not.toBeInTheDocument() rerender(} />) - expect(screen.queryByTestId('leading-visual')).toBe(null) + await expect.element(page.getByTestId('leading-visual')).not.toBeInTheDocument() rerender(} />) - expect(screen.queryByTestId('leading-visual')).toBe(null) + await expect.element(page.getByTestId('leading-visual')).not.toBeInTheDocument() }) - it('should prefer leadingVisual over icon when both are provided', () => { + it('should prefer leadingVisual over icon when both are provided', async () => { const LeadingVisualIcon = () => const DeprecatedIcon = () => render( @@ -280,46 +289,56 @@ describe('Banner', () => { icon={} />, ) - expect(screen.getByTestId('leading-visual')).toBeInTheDocument() - expect(screen.queryByTestId('deprecated-icon')).toBe(null) + await expect.element(page.getByTestId('leading-visual')).toBeInTheDocument() + await expect.element(page.getByTestId('deprecated-icon')).not.toBeInTheDocument() }) - it('should render data-actions-layout attribute with inline value', () => { + it('should render data-actions-layout attribute with inline value', async () => { const {container} = render() - expect(container.firstChild).toHaveAttribute('data-actions-layout', 'inline') + await expect + .element(container.querySelector('[data-component="Banner"]')) + .toHaveAttribute('data-actions-layout', 'inline') }) - it('should render data-actions-layout attribute with stacked value', () => { + it('should render data-actions-layout attribute with stacked value', async () => { const {container} = render() - expect(container.firstChild).toHaveAttribute('data-actions-layout', 'stacked') + await expect + .element(container.querySelector('[data-component="Banner"]')) + .toHaveAttribute('data-actions-layout', 'stacked') }) - it('should render data-actions-layout attribute with default value when not specified', () => { + it('should render data-actions-layout attribute with default value when not specified', async () => { const {container} = render() - expect(container.firstChild).toHaveAttribute('data-actions-layout', 'default') + await expect + .element(container.querySelector('[data-component="Banner"]')) + .toHaveAttribute('data-actions-layout', 'default') }) - it('should render data-flush attribute when flush is true', () => { + it('should render data-flush attribute when flush is true', async () => { const {container} = render() - expect(container.firstChild).toHaveAttribute('data-flush') + await expect + .element(container.querySelector('[data-component="Banner"]')) + .toHaveAttribute('data-flush') }) - it('should not render data-flush attribute when flush is false', () => { + it('should not render data-flush attribute when flush is false', async () => { const {container} = render() - expect(container.firstChild).not.toHaveAttribute('data-flush') + await expect + .element(container.querySelector('[data-component="Banner"]')) + .not.toHaveAttribute('data-flush') }) describe('Banner.Title', () => { - it('should render as a h2 element by default', () => { + it('should render as a h2 element by default', async () => { render( test , ) - expect(screen.getByRole('heading', {level: 2, name: 'test'})).toBeInTheDocument() + await expect.element(page.getByRole('heading', {level: 2, name: 'test'})).toBeInTheDocument() }) - it('should support rendering as any heading element above level 2', () => { + it('should support rendering as any heading element above level 2', async () => { const levels = [2, 3, 4, 5, 6] as const render( @@ -343,48 +362,48 @@ describe('Banner', () => { ) for (const level of levels) { - expect(screen.getByRole('heading', {level, name: `test level ${level}`})).toBeInTheDocument() + await expect.element(page.getByRole('heading', {level, name: `test level ${level}`})).toBeInTheDocument() } }) - it('should support a custom `className` on the container element', () => { + it('should support a custom `className` on the container element', async () => { render( test , ) - expect(screen.getByRole('heading', {name: 'test'})).toHaveClass('custom-class') + await expect.element(page.getByRole('heading', {name: 'test'})).toHaveClass('custom-class') }) - it('should pass extra props onto the container element', () => { + it('should pass extra props onto the container element', async () => { render( test , ) - expect(screen.getByRole('heading', {name: 'test'})).toHaveAttribute('data-testid', 'test') + await expect.element(page.getByRole('heading', {name: 'test'})).toHaveAttribute('data-testid', 'test') }) }) describe('Banner.Description', () => { - it('should support a custom `className` on the container element', () => { + it('should support a custom `className` on the container element', async () => { render( test title test description , ) - expect(screen.getByText('test description')).toHaveClass('custom-class') + await expect.element(page.getByText('test description')).toHaveClass('custom-class') }) - it('should pass extra props onto the container element', () => { + it('should pass extra props onto the container element', async () => { render( test title test description , ) - expect(screen.getByText('test description')).toHaveAttribute('data-testid', 'test') + await expect.element(page.getByText('test description')).toHaveAttribute('data-testid', 'test') }) }) }) diff --git a/packages/react/src/Blankslate/Blankslate.test.tsx b/packages/react/src/Blankslate/Blankslate.test.tsx index 912d0e02daa..b6a3097f69b 100644 --- a/packages/react/src/Blankslate/Blankslate.test.tsx +++ b/packages/react/src/Blankslate/Blankslate.test.tsx @@ -1,6 +1,6 @@ import {describe, expect, it, vi} from 'vitest' -import {render, screen} from '@testing-library/react' -import userEvent from '@testing-library/user-event' +import {render} from '@testing-library/react' +import {page, userEvent} from 'vitest/browser' import {Blankslate} from '../Blankslate' import {implementsClassName} from '../utils/testing' import classes from './Blankslate.module.css' @@ -38,19 +38,25 @@ function getSizePadding(size: 'small' | 'medium' | 'large') { describe('Blankslate', () => { implementsClassName(Blankslate, classes.Blankslate) - it('should render with border when border is true', () => { + it('should render with border when border is true', async () => { const {container} = render(Test content) - expect(container.firstChild!.firstChild).toHaveAttribute('data-border', '') + await expect + .element(container.querySelector('[data-component="Blankslate"]')) + .toHaveAttribute('data-border', '') }) - it('should render with narrow style when narrow is true', () => { + it('should render with narrow style when narrow is true', async () => { const {container} = render(Test content) - expect(container.firstChild!.firstChild).toHaveAttribute('data-narrow', '') + await expect + .element(container.querySelector('[data-component="Blankslate"]')) + .toHaveAttribute('data-narrow', '') }) - it('should render with spacious style when spacious is true', () => { + it('should render with spacious style when spacious is true', async () => { const {container} = render(Test content) - expect(container.firstChild!.firstChild).toHaveAttribute('data-spacious', '') + await expect + .element(container.querySelector('[data-component="Blankslate"]')) + .toHaveAttribute('data-spacious', '') }) it('sets reduced padding for small size variant', () => { @@ -59,7 +65,7 @@ describe('Blankslate', () => { expect(getSizePadding('small')).toMatch(/^var\(--base-size-16/) }) - it('renders data-component attributes', () => { + it('renders data-component attributes', async () => { const {container} = render( @@ -72,27 +78,41 @@ describe('Blankslate', () => { , ) - expect(container.querySelector('[data-component="Blankslate"]')).toBeInTheDocument() - - expect( - container.querySelector('[data-component="Blankslate"] [data-component="Blankslate.Visual"]'), - ).toBeInTheDocument() - expect( - container.querySelector('[data-component="Blankslate"] [data-component="Blankslate.Heading"]'), - ).toBeInTheDocument() - expect( - container.querySelector('[data-component="Blankslate"] [data-component="Blankslate.Description"]'), - ).toBeInTheDocument() - expect( - container.querySelector('[data-component="Blankslate"] [data-component="Blankslate.PrimaryAction"]'), - ).toBeInTheDocument() - expect( - container.querySelector('[data-component="Blankslate"] [data-component="Blankslate.SecondaryAction"]'), - ).toBeInTheDocument() + await expect.element(container.querySelector('[data-component="Blankslate"]')).toBeInTheDocument() + + await expect + .element( + container.querySelector('[data-component="Blankslate"] [data-component="Blankslate.Visual"]'), + ) + .toBeInTheDocument() + await expect + .element( + container.querySelector('[data-component="Blankslate"] [data-component="Blankslate.Heading"]'), + ) + .toBeInTheDocument() + await expect + .element( + container.querySelector('[data-component="Blankslate"] [data-component="Blankslate.Description"]'), + ) + .toBeInTheDocument() + await expect + .element( + container.querySelector( + '[data-component="Blankslate"] [data-component="Blankslate.PrimaryAction"]', + ), + ) + .toBeInTheDocument() + await expect + .element( + container.querySelector( + '[data-component="Blankslate"] [data-component="Blankslate.SecondaryAction"]', + ), + ) + .toBeInTheDocument() }) describe('Blankslate.Visual', () => { - it('should render a visual element', () => { + it('should render a visual element', async () => { render( @@ -100,54 +120,53 @@ describe('Blankslate', () => { , ) - expect(screen.getByTestId('test-icon')).toBeInTheDocument() + await expect.element(page.getByTestId('test-icon')).toBeInTheDocument() }) }) describe('Blankslate.Heading', () => { - it('should render a heading with h2 by default', () => { + it('should render a heading with h2 by default', async () => { render( Test Heading , ) - expect(screen.getByRole('heading', {level: 2, name: 'Test Heading'})).toBeInTheDocument() - expect(screen.getByRole('heading', {level: 2})).toHaveClass('Blankslate-Heading') + await expect.element(page.getByRole('heading', {level: 2, name: 'Test Heading'})).toBeInTheDocument() + await expect.element(page.getByRole('heading', {level: 2})).toHaveClass('Blankslate-Heading') }) - it('should render with a custom heading level', () => { + it('should render with a custom heading level', async () => { render( Test Heading , ) - expect(screen.getByRole('heading', {level: 3, name: 'Test Heading'})).toBeInTheDocument() + await expect.element(page.getByRole('heading', {level: 3, name: 'Test Heading'})).toBeInTheDocument() }) }) describe('Blankslate.Description', () => { - it('should render a description', () => { + it('should render a description', async () => { render( Test description , ) - expect(screen.getByText('Test description')).toBeInTheDocument() + await expect.element(page.getByText('Test description')).toBeInTheDocument() }) }) describe('Blankslate.PrimaryAction', () => { - it('should render a primary action button', () => { + it('should render a primary action button', async () => { render( Primary action , ) - expect(screen.getByRole('button', {name: 'Primary action'})).toBeInTheDocument() + await expect.element(page.getByRole('button', {name: 'Primary action'})).toBeInTheDocument() }) it('should handle click events on the button', async () => { - const user = userEvent.setup() const onClick = vi.fn() render( @@ -155,32 +174,32 @@ describe('Blankslate', () => { , ) - await user.click(screen.getByRole('button', {name: 'Primary action'})) + await userEvent.click(page.getByRole('button', {name: 'Primary action'})) expect(onClick).toHaveBeenCalledTimes(1) }) - it('should render as an anchor when href is provided', () => { + it('should render as an anchor when href is provided', async () => { render( Primary action , ) - const link = screen.getByRole('link', {name: 'Primary action'}) - expect(link).toBeInTheDocument() - expect(link).toHaveAttribute('href', 'https://example.com') + const link = page.getByRole('link', {name: 'Primary action'}) + await expect.element(link).toBeInTheDocument() + await expect.element(link).toHaveAttribute('href', 'https://example.com') }) }) describe('Blankslate.SecondaryAction', () => { - it('should render a secondary action link', () => { + it('should render a secondary action link', async () => { render( Secondary action , ) - const link = screen.getByRole('link', {name: 'Secondary action'}) - expect(link).toBeInTheDocument() - expect(link).toHaveAttribute('href', 'https://example.com') + const link = page.getByRole('link', {name: 'Secondary action'}) + await expect.element(link).toBeInTheDocument() + await expect.element(link).toHaveAttribute('href', 'https://example.com') }) }) }) diff --git a/packages/react/src/BranchName/__tests__/BranchName.test.tsx b/packages/react/src/BranchName/__tests__/BranchName.test.tsx index 77fad41a94a..1d988b2af52 100644 --- a/packages/react/src/BranchName/__tests__/BranchName.test.tsx +++ b/packages/react/src/BranchName/__tests__/BranchName.test.tsx @@ -12,8 +12,8 @@ describe('BranchName', () => { expect(container.firstChild?.nodeName).toEqual('A') }) - it('renders data-component attribute', () => { + it('renders data-component attribute', async () => { const {container} = HTMLRender() - expect(container.querySelector('[data-component="BranchName"]')).toBeInTheDocument() + await expect.element(container.querySelector('[data-component="BranchName"]')).toBeInTheDocument() }) }) diff --git a/packages/react/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx b/packages/react/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx index 3737e7278ec..37d47fa37e3 100644 --- a/packages/react/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx +++ b/packages/react/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx @@ -1,7 +1,7 @@ import Breadcrumbs from '..' -import {act, fireEvent, render as HTMLRender, screen, waitFor, within} from '@testing-library/react' +import {act, render as HTMLRender} from '@testing-library/react' import {describe, expect, it, vi} from 'vitest' -import userEvent from '@testing-library/user-event' +import {page, userEvent} from 'vitest/browser' import {FeatureFlags} from '../../FeatureFlags' import {implementsClassName} from '../../utils/testing' import classes from '../Breadcrumbs.module.css' @@ -31,11 +31,11 @@ describe('Breadcrumbs', () => { implementsClassName(Breadcrumbs, classes.BreadcrumbsBase) it('renders a