diff --git a/test/TreeDataGrid.test.tsx b/test/TreeDataGrid.test.tsx index 5ea7a44727..1fa9be75b5 100644 --- a/test/TreeDataGrid.test.tsx +++ b/test/TreeDataGrid.test.tsx @@ -237,7 +237,7 @@ test('should set aria-attributes', async () => { test('should select rows in a group', async () => { setup(['year', 'country']); - const headerCheckbox = screen.getByLabelText('Select All'); + const headerCheckbox = screen.getByRole('checkbox', { name: 'Select All' }); expect(headerCheckbox).not.toBeChecked(); // expand group @@ -249,7 +249,9 @@ test('should select rows in a group', async () => { expect(screen.queryAllByRole('row', { selected: true })).toHaveLength(0); // select parent row - await userEvent.click(within(groupCell1.parentElement!).getByLabelText('Select Group')); + await userEvent.click( + within(groupCell1.parentElement!).getByRole('checkbox', { name: 'Select Group' }) + ); let selectedRows = screen.getAllByRole('row', { selected: true }); expect(selectedRows).toHaveLength(4); expect(selectedRows[0]).toHaveAttribute('aria-rowindex', '6'); @@ -258,13 +260,15 @@ test('should select rows in a group', async () => { expect(selectedRows[3]).toHaveAttribute('aria-rowindex', '10'); // unselecting child should unselect the parent row - await userEvent.click(within(selectedRows[3]).getByLabelText('Select')); + await userEvent.click(within(selectedRows[3]).getByRole('checkbox', { name: 'Select' })); selectedRows = screen.getAllByRole('row', { selected: true }); expect(selectedRows).toHaveLength(1); expect(selectedRows[0]).toHaveAttribute('aria-rowindex', '7'); // select child group - const checkbox = within(groupCell2.parentElement!).getByLabelText('Select Group'); + const checkbox = within(groupCell2.parentElement!).getByRole('checkbox', { + name: 'Select Group' + }); await userEvent.click(checkbox); selectedRows = screen.getAllByRole('row', { selected: true }); expect(selectedRows).toHaveLength(4); diff --git a/test/column/renderEditCell.test.tsx b/test/column/renderEditCell.test.tsx index f1894084c6..82535ba96f 100644 --- a/test/column/renderEditCell.test.tsx +++ b/test/column/renderEditCell.test.tsx @@ -16,25 +16,25 @@ describe('Editor', () => { it('should open editor on double click', async () => { render(); await userEvent.click(getCellsAtRowIndex(0)[0]); - expect(screen.queryByLabelText('col1-editor')).not.toBeInTheDocument(); + expect(screen.queryByRole('spinbutton', { name: 'col1-editor' })).not.toBeInTheDocument(); await userEvent.dblClick(getCellsAtRowIndex(0)[0]); - expect(screen.getByLabelText('col1-editor')).toHaveValue(1); + expect(screen.getByRole('spinbutton', { name: 'col1-editor' })).toHaveValue(1); await userEvent.keyboard('2'); await userEvent.tab(); - expect(screen.queryByLabelText('col1-editor')).not.toBeInTheDocument(); + expect(screen.queryByRole('spinbutton', { name: 'col1-editor' })).not.toBeInTheDocument(); expect(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^21$/); }); it('should open and commit changes on enter', async () => { render(); await userEvent.click(getCellsAtRowIndex(0)[0]); - expect(screen.queryByLabelText('col1-editor')).not.toBeInTheDocument(); + expect(screen.queryByRole('spinbutton', { name: 'col1-editor' })).not.toBeInTheDocument(); await userEvent.keyboard('{enter}'); - expect(screen.getByLabelText('col1-editor')).toHaveValue(1); + expect(screen.getByRole('spinbutton', { name: 'col1-editor' })).toHaveValue(1); await userEvent.keyboard('3{enter}'); expect(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^31$/); expect(getCellsAtRowIndex(0)[0]).toHaveFocus(); - expect(screen.queryByLabelText('col1-editor')).not.toBeInTheDocument(); + expect(screen.queryByRole('spinbutton', { name: 'col1-editor' })).not.toBeInTheDocument(); }); it('should open editor when user types', async () => { @@ -47,9 +47,9 @@ describe('Editor', () => { it('should close editor and discard changes on escape', async () => { render(); await userEvent.dblClick(getCellsAtRowIndex(0)[0]); - expect(screen.getByLabelText('col1-editor')).toHaveValue(1); + expect(screen.getByRole('spinbutton', { name: 'col1-editor' })).toHaveValue(1); await userEvent.keyboard('2222{escape}'); - expect(screen.queryByLabelText('col1-editor')).not.toBeInTheDocument(); + expect(screen.queryByRole('spinbutton', { name: 'col1-editor' })).not.toBeInTheDocument(); expect(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^1$/); expect(getCellsAtRowIndex(0)[0]).toHaveFocus(); }); @@ -57,7 +57,7 @@ describe('Editor', () => { it('should commit changes and close editor when clicked outside', async () => { render(); await userEvent.dblClick(getCellsAtRowIndex(0)[0]); - const editor = screen.getByLabelText('col1-editor'); + const editor = screen.getByRole('spinbutton', { name: 'col1-editor' }); expect(editor).toHaveValue(1); await userEvent.keyboard('2222'); await userEvent.click(screen.getByText('outside')); @@ -103,9 +103,9 @@ describe('Editor', () => { await scrollGrid({ scrollTop: 2000 }); expect(getCellsAtRowIndex(0)).toHaveLength(1); - expect(screen.queryByLabelText('col1-editor')).not.toBeInTheDocument(); + expect(screen.queryByRole('spinbutton', { name: 'col1-editor' })).not.toBeInTheDocument(); await userEvent.keyboard('123'); - expect(screen.getByLabelText('col1-editor')).toHaveValue(1230); + expect(screen.getByRole('spinbutton', { name: 'col1-editor' })).toHaveValue(1230); const spy = vi.spyOn(window.HTMLElement.prototype, 'scrollIntoView'); await userEvent.keyboard('{enter}'); expect(spy).toHaveBeenCalled(); @@ -117,13 +117,13 @@ describe('Editor', () => { const cell = getCellsAtRowIndex(0)[1]; expect(cell).not.toHaveAttribute('aria-readonly'); await userEvent.dblClick(cell); - expect(screen.getByLabelText('col2-editor')).toBeInTheDocument(); + expect(screen.getByRole('textbox', { name: 'col2-editor' })).toBeInTheDocument(); }); it('should be editable if an editor is specified and editable is set to true', async () => { render(); await userEvent.dblClick(getCellsAtRowIndex(0)[1]); - expect(screen.getByLabelText('col2-editor')).toBeInTheDocument(); + expect(screen.getByRole('textbox', { name: 'col2-editor' })).toBeInTheDocument(); }); it('should not be editable if editable is false', async () => { @@ -131,16 +131,16 @@ describe('Editor', () => { const cell = getCellsAtRowIndex(0)[1]; expect(cell).toHaveAttribute('aria-readonly', 'true'); await userEvent.dblClick(cell); - expect(screen.queryByLabelText('col2-editor')).not.toBeInTheDocument(); + expect(screen.queryByRole('textbox', { name: 'col2-editor' })).not.toBeInTheDocument(); }); it('should not be editable if editable function returns false', async () => { render( row.col1 === 2} />); await userEvent.dblClick(getCellsAtRowIndex(0)[1]); - expect(screen.queryByLabelText('col2-editor')).not.toBeInTheDocument(); + expect(screen.queryByRole('textbox', { name: 'col2-editor' })).not.toBeInTheDocument(); await userEvent.dblClick(getCellsAtRowIndex(1)[1]); - expect(screen.getByLabelText('col2-editor')).toBeInTheDocument(); + expect(screen.getByRole('textbox', { name: 'col2-editor' })).toBeInTheDocument(); }); }); @@ -148,7 +148,7 @@ describe('Editor', () => { it('should detect outside click if editor is rendered in a portal', async () => { render(); await userEvent.dblClick(getCellsAtRowIndex(0)[1]); - const editor1 = screen.getByLabelText('col2-editor'); + const editor1 = screen.getByRole('textbox', { name: 'col2-editor' }); expect(editor1).toHaveValue('a1'); await userEvent.keyboard('23'); // The cell value should update as the editor value is changed @@ -164,7 +164,7 @@ describe('Editor', () => { expect(getCellsAtRowIndex(0)[1]).not.toHaveFocus(); await userEvent.dblClick(getCellsAtRowIndex(0)[1]); - const editor2 = screen.getByLabelText('col2-editor'); + const editor2 = screen.getByRole('textbox', { name: 'col2-editor' }); await userEvent.click(editor2); await userEvent.keyboard('{enter}'); expect(getCellsAtRowIndex(0)[1]).toHaveFocus(); @@ -179,7 +179,7 @@ describe('Editor', () => { /> ); await userEvent.dblClick(getCellsAtRowIndex(0)[1]); - const editor = screen.getByLabelText('col2-editor'); + const editor = screen.getByRole('textbox', { name: 'col2-editor' }); expect(editor).toBeInTheDocument(); await userEvent.click(screen.getByText('outside')); await act(async () => { @@ -205,7 +205,7 @@ describe('Editor', () => { await userEvent.keyboard('yz{enter}'); expect(getCellsAtRowIndex(0)[1]).toHaveTextContent(/^a1yz$/); await userEvent.keyboard('x'); - expect(screen.queryByLabelText('col2-editor')).not.toBeInTheDocument(); + expect(screen.queryByRole('textbox', { name: 'col2-editor' })).not.toBeInTheDocument(); }); it('should prevent navigation if onCellKeyDown prevents the default event', async () => { @@ -283,9 +283,9 @@ describe('Editor', () => { ); - const outerInput = screen.getByLabelText('outer-input'); + const outerInput = screen.getByRole('textbox', { name: 'outer-input' }); await userEvent.dblClick(getCellsAtRowIndex(0)[0]); - const col1Input = screen.getByLabelText('col1-input'); + const col1Input = screen.getByRole('textbox', { name: 'col1-input' }); expect(col1Input).toHaveFocus(); await userEvent.click(outerInput); expect(outerInput).toHaveFocus(); @@ -295,7 +295,7 @@ describe('Editor', () => { expect(outerInput).toHaveFocus(); await userEvent.dblClick(getCellsAtRowIndex(0)[1]); - const col2Input = screen.getByLabelText('col2-input'); + const col2Input = screen.getByRole('textbox', { name: 'col2-input' }); expect(col2Input).toHaveFocus(); await userEvent.click(outerInput); expect(outerInput).toHaveFocus(); diff --git a/test/events.test.tsx b/test/events.test.tsx index 33359b44a6..df45dfe4de 100644 --- a/test/events.test.tsx +++ b/test/events.test.tsx @@ -84,7 +84,7 @@ describe('Events', () => { await userEvent.click(getCellsAtRowIndex(0)[0]); expect(screen.queryByLabelText('col1-editor')).not.toBeInTheDocument(); await userEvent.click(getCellsAtRowIndex(0)[1]); - expect(screen.getByLabelText('col2-editor')).toBeInTheDocument(); + expect(screen.getByRole('textbox', { name: 'col2-editor' })).toBeInTheDocument(); }); it('should not open editor editor on double click if onCellDoubleClick prevents default', async () => { @@ -100,7 +100,7 @@ describe('Events', () => { await userEvent.dblClick(getCellsAtRowIndex(0)[0]); expect(screen.queryByLabelText('col1-editor')).not.toBeInTheDocument(); await userEvent.dblClick(getCellsAtRowIndex(0)[1]); - expect(screen.getByLabelText('col2-editor')).toBeInTheDocument(); + expect(screen.getByRole('textbox', { name: 'col2-editor' })).toBeInTheDocument(); }); it('should call onCellContextMenu when cell is right clicked', async () => { diff --git a/test/rowSelection.test.tsx b/test/rowSelection.test.tsx index 25d57d8aaa..6a736c7121 100644 --- a/test/rowSelection.test.tsx +++ b/test/rowSelection.test.tsx @@ -47,7 +47,7 @@ function testSelection(rowIdx: number, isSelected: boolean) { } async function toggleSelection(rowIdx: number, shift = false) { - const element = within(getCellsAtRowIndex(rowIdx)[0]).getByLabelText('Select'); + const element = within(getCellsAtRowIndex(rowIdx)[0]).getByRole('checkbox', { name: 'Select' }); const user = userEvent.setup(); if (shift) await user.keyboard('{Shift>}'); await user.click(element); @@ -81,7 +81,7 @@ test('toggle selection using keyboard', async () => { test('select/deselect all rows when header checkbox is clicked', async () => { setup(); - const headerCheckbox = screen.getByLabelText('Select All'); + const headerCheckbox = screen.getByRole('checkbox', { name: 'Select All' }); expect(headerCheckbox).not.toBeChecked(); await userEvent.click(headerCheckbox); testSelection(0, true); @@ -102,7 +102,7 @@ test('select/deselect all rows when header checkbox is clicked', async () => { test('header checkbox is not checked when there are no rows', () => { setup([]); - expect(screen.getByLabelText('Select All')).not.toBeChecked(); + expect(screen.getByRole('checkbox', { name: 'Select All' })).not.toBeChecked(); }); test('header checkbox is not necessarily checked when selectedRows.size === rows.length', () => { @@ -115,7 +115,7 @@ test('header checkbox is not necessarily checked when selectedRows.size === rows /> ); - expect(screen.getByLabelText('Select All')).not.toBeChecked(); + expect(screen.getByRole('checkbox', { name: 'Select All' })).not.toBeChecked(); }); test('header checkbox is not necessarily checked when selectedRows.size > rows.length', () => { @@ -128,7 +128,7 @@ test('header checkbox is not necessarily checked when selectedRows.size > rows.l /> ); - expect(screen.getByLabelText('Select All')).not.toBeChecked(); + expect(screen.getByRole('checkbox', { name: 'Select All' })).not.toBeChecked(); }); test('extra keys are preserved when updating the selectedRows Set', async () => { @@ -156,7 +156,7 @@ test('extra keys are preserved when updating the selectedRows Set', async () => render(); - const headerCheckbox = screen.getByLabelText('Select All'); + const headerCheckbox = screen.getByRole('checkbox', { name: 'Select All' }); await toggleSelection(1); expect(set).toStrictEqual(new Set([...initialSet, 2])); diff --git a/test/setup.ts b/test/setup.ts index 3fabed7cef..16d7524ffa 100644 --- a/test/setup.ts +++ b/test/setup.ts @@ -1,4 +1,7 @@ import { act } from 'react-dom/test-utils'; +import { configure } from '@testing-library/react'; + +configure({ throwSuggestions: true }); // Allow node-environment tests to properly fail when accessing DOM APIs, // as @testing-library/jest-dom may polyfill some DOM APIs like `window.CSS` diff --git a/test/sorting.test.tsx b/test/sorting.test.tsx index e725ada35c..727484e984 100644 --- a/test/sorting.test.tsx +++ b/test/sorting.test.tsx @@ -35,8 +35,8 @@ function setup() { } function testSortColumns(expectedValue: readonly SortColumn[]) { - expect(JSON.parse(screen.getByTestId('sortColumnsValue').textContent!)).toStrictEqual( - expectedValue + expect(screen.getByTestId('sortColumnsValue', { suggest: false })).toHaveTextContent( + JSON.stringify(expectedValue) ); }