From 10276834d05acbad49bc2641844efa327a49a5bb Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Thu, 21 Nov 2024 08:43:23 -0600 Subject: [PATCH] -1 --- test/browser/column/renderEditCell.test.tsx | 8 +- test/browser/keyboardNavigation.test.tsx | 148 ++++++++++---------- test/browser/renderers.test.tsx | 24 ++-- 3 files changed, 90 insertions(+), 90 deletions(-) diff --git a/test/browser/column/renderEditCell.test.tsx b/test/browser/column/renderEditCell.test.tsx index 8345d3d8c7..d5b2d0c970 100644 --- a/test/browser/column/renderEditCell.test.tsx +++ b/test/browser/column/renderEditCell.test.tsx @@ -5,7 +5,7 @@ import { page, userEvent } from '@vitest/browser/context'; import DataGrid from '../../../src'; import type { Column, DataGridProps } from '../../../src'; -import { getCellsAtRowIndexOld, getGridOld, getSelectedCellOld, scrollGrid } from '../utils'; +import { getCellsAtRowIndexOld, getGrid, getSelectedCell, scrollGrid } from '../utils'; interface Row { col1: number; @@ -100,13 +100,13 @@ describe('Editor', () => { expect(getCellsAtRowIndexOld(0)).toHaveLength(1); const editor = page.getByRole('spinbutton', { name: 'col1-editor' }); await expect.element(editor).not.toBeInTheDocument(); - expect(getGridOld().scrollTop).toBe(2000); + expect(getGrid().element().scrollTop).toBe(2000); await userEvent.keyboard('123'); await waitFor(() => { expect(getCellsAtRowIndexOld(0)).toHaveLength(2); }); await expect.element(editor).toHaveValue(123); - expect(getGridOld().scrollTop).toBe(0); + expect(getGrid().element().scrollTop).toBe(0); }); describe('editable', () => { @@ -238,7 +238,7 @@ describe('Editor', () => { await scrollGrid({ scrollTop: 1500 }); expect(getCellsAtRowIndexOld(40)[1]).toHaveTextContent(/^40$/); await userEvent.click(getCellsAtRowIndexOld(40)[1]); - expect(getSelectedCellOld()).toHaveTextContent(/^40$/); + await expect.element(getSelectedCell()).toHaveTextContent(/^40$/); await scrollGrid({ scrollTop: 0 }); expect(getCellsAtRowIndexOld(0)[1]).toHaveTextContent(/^0abc$/); }); diff --git a/test/browser/keyboardNavigation.test.tsx b/test/browser/keyboardNavigation.test.tsx index e1c44be25d..b4956d092e 100644 --- a/test/browser/keyboardNavigation.test.tsx +++ b/test/browser/keyboardNavigation.test.tsx @@ -5,10 +5,10 @@ import type { Column } from '../../src'; import DataGrid, { SelectColumn } from '../../src'; import { getCellsAtRowIndexOld, - getSelectedCellOld, + getSelectedCell, scrollGrid, - setupOld, - validateCellPositionOld + setup, + validateCellPosition } from './utils'; type Row = undefined; @@ -28,138 +28,138 @@ const columns = [ ] as const satisfies Column[]; test('keyboard navigation', async () => { - setupOld({ columns, rows, topSummaryRows, bottomSummaryRows }); + setup({ columns, rows, topSummaryRows, bottomSummaryRows }); // no initial selection - expect(getSelectedCellOld()).not.toBeInTheDocument(); + await expect.element(getSelectedCell()).not.toBeInTheDocument(); // tab into the grid await userEvent.tab(); - validateCellPositionOld(0, 0); + validateCellPosition(0, 0); // tab to the next cell await userEvent.tab(); - validateCellPositionOld(1, 0); + validateCellPosition(1, 0); // tab back to the previous cell await userEvent.tab({ shift: true }); - validateCellPositionOld(0, 0); + validateCellPosition(0, 0); // arrow navigation await userEvent.keyboard('{arrowdown}'); - validateCellPositionOld(0, 1); + validateCellPosition(0, 1); await userEvent.keyboard('{arrowright}'); - validateCellPositionOld(1, 1); + validateCellPosition(1, 1); await userEvent.keyboard('{arrowdown}'); - validateCellPositionOld(1, 2); + validateCellPosition(1, 2); await userEvent.keyboard('{arrowleft}'); - validateCellPositionOld(0, 2); + validateCellPosition(0, 2); await userEvent.keyboard('{arrowup}'); - validateCellPositionOld(0, 1); + validateCellPosition(0, 1); await userEvent.keyboard('{arrowup}'); - validateCellPositionOld(0, 0); + validateCellPosition(0, 0); // page {up,down} await userEvent.keyboard('{PageDown}'); - validateCellPositionOld(0, 26); + validateCellPosition(0, 26); await userEvent.keyboard('{PageDown}'); - validateCellPositionOld(0, 52); + validateCellPosition(0, 52); await userEvent.keyboard('{PageUp}'); - validateCellPositionOld(0, 26); + validateCellPosition(0, 26); // home/end navigation await userEvent.keyboard('{end}'); - validateCellPositionOld(6, 26); + validateCellPosition(6, 26); await userEvent.keyboard('{home}'); - validateCellPositionOld(0, 26); + validateCellPosition(0, 26); await userEvent.keyboard('{Control>}{end}'); - validateCellPositionOld(6, 103); + validateCellPosition(6, 103); await userEvent.keyboard('{arrowdown}'); - validateCellPositionOld(6, 103); + validateCellPosition(6, 103); await userEvent.keyboard('{arrowright}'); - validateCellPositionOld(6, 103); + validateCellPosition(6, 103); await userEvent.keyboard('{end}'); - validateCellPositionOld(6, 103); + validateCellPosition(6, 103); await userEvent.keyboard('{Control>}{end}'); - validateCellPositionOld(6, 103); + validateCellPosition(6, 103); await userEvent.keyboard('{PageDown}'); - validateCellPositionOld(6, 103); + validateCellPosition(6, 103); await userEvent.keyboard('{Control>}{home}'); - validateCellPositionOld(0, 0); + validateCellPosition(0, 0); await userEvent.keyboard('{home}'); - validateCellPositionOld(0, 0); + validateCellPosition(0, 0); await userEvent.keyboard('{Control>}{home}'); - validateCellPositionOld(0, 0); + validateCellPosition(0, 0); await userEvent.keyboard('{PageUp}'); - validateCellPositionOld(0, 0); + validateCellPosition(0, 0); // tab at the end of a row selects the first cell on the next row await userEvent.keyboard('{end}'); await userEvent.tab(); - validateCellPositionOld(0, 1); + validateCellPosition(0, 1); // shift tab should select the last cell of the previous row await userEvent.tab({ shift: true }); - validateCellPositionOld(6, 0); + validateCellPosition(6, 0); }); test('arrow and tab navigation', async () => { - setupOld({ columns, rows, bottomSummaryRows }); + setup({ columns, rows, bottomSummaryRows }); // pressing arrowleft on the leftmost cell does nothing await userEvent.tab(); await userEvent.keyboard('{arrowdown}'); - validateCellPositionOld(0, 1); + validateCellPosition(0, 1); await userEvent.keyboard('{arrowleft}'); - validateCellPositionOld(0, 1); + validateCellPosition(0, 1); // pressing arrowright on the rightmost cell does nothing await userEvent.keyboard('{end}'); - validateCellPositionOld(6, 1); + validateCellPosition(6, 1); await userEvent.keyboard('{arrowright}'); - validateCellPositionOld(6, 1); + validateCellPosition(6, 1); // pressing tab on the rightmost cell navigates to the leftmost cell on the next row await userEvent.tab(); - validateCellPositionOld(0, 2); + validateCellPosition(0, 2); // pressing shift+tab on the leftmost cell navigates to the rightmost cell on the previous row await userEvent.tab({ shift: true }); - validateCellPositionOld(6, 1); + validateCellPosition(6, 1); }); test('grid enter/exit', async () => { - setupOld({ columns, rows: new Array(5), bottomSummaryRows }); + setup({ columns, rows: new Array(5), bottomSummaryRows }); // no initial selection - expect(getSelectedCellOld()).not.toBeInTheDocument(); + await expect.element(getSelectedCell()).not.toBeInTheDocument(); // tab into the grid await userEvent.tab(); - validateCellPositionOld(0, 0); + validateCellPosition(0, 0); // shift+tab tabs out of the grid if we are at the first cell await userEvent.tab({ shift: true }); expect(document.body).toHaveFocus(); await userEvent.tab(); - validateCellPositionOld(0, 0); + validateCellPosition(0, 0); await userEvent.keyboard('{arrowdown}{arrowdown}'); - validateCellPositionOld(0, 2); + validateCellPosition(0, 2); // tab should select the last selected cell // click outside the grid await userEvent.click(document.body); await userEvent.tab(); await userEvent.keyboard('{arrowdown}'); - validateCellPositionOld(0, 3); + validateCellPosition(0, 3); // shift+tab should select the last selected cell await userEvent.click(document.body); await userEvent.tab({ shift: true }); await userEvent.keyboard('{arrowup}'); - validateCellPositionOld(0, 2); + validateCellPosition(0, 2); // tab tabs out of the grid if we are at the last cell await userEvent.keyboard('{Control>}{end}'); @@ -168,21 +168,21 @@ test('grid enter/exit', async () => { }); test('navigation with focusable cell renderer', async () => { - setupOld({ columns, rows: new Array(1), bottomSummaryRows }); + setup({ columns, rows: new Array(1), bottomSummaryRows }); await userEvent.tab(); await userEvent.keyboard('{arrowdown}'); - validateCellPositionOld(0, 1); + validateCellPosition(0, 1); // cell should not set tabIndex to 0 if it contains a focusable cell renderer - expect(getSelectedCellOld()).toHaveAttribute('tabIndex', '-1'); - const checkbox = getSelectedCellOld()!.querySelector('input'); + await expect.element(getSelectedCell()).toHaveAttribute('tabIndex', '-1'); + const checkbox = getSelectedCell().getByRole('checkbox').element(); expect(checkbox).toHaveFocus(); expect(checkbox).toHaveAttribute('tabIndex', '0'); await userEvent.tab(); - validateCellPositionOld(1, 1); + validateCellPosition(1, 1); // cell should set tabIndex to 0 if it does not have focusable cell renderer - expect(getSelectedCellOld()).toHaveAttribute('tabIndex', '0'); + await expect.element(getSelectedCell()).toHaveAttribute('tabIndex', '0'); }); test('navigation when header and summary rows have focusable elements', async () => { @@ -209,7 +209,7 @@ test('navigation when header and summary rows have focusable elements', async () } ]; - setupOld({ columns, rows: new Array(2), bottomSummaryRows }); + setup({ columns, rows: new Array(2), bottomSummaryRows }); await userEvent.tab(); // should set focus on the header filter @@ -219,7 +219,7 @@ test('navigation when header and summary rows have focusable elements', async () expect(document.getElementById('header-filter2')).toHaveFocus(); await userEvent.tab(); - validateCellPositionOld(0, 1); + validateCellPosition(0, 1); await userEvent.tab({ shift: true }); expect(document.getElementById('header-filter2')).toHaveFocus(); @@ -230,7 +230,7 @@ test('navigation when header and summary rows have focusable elements', async () await userEvent.tab(); await userEvent.tab(); await userEvent.keyboard('{Control>}{end}{arrowup}{arrowup}'); - validateCellPositionOld(1, 2); + validateCellPosition(1, 2); await userEvent.tab(); expect(document.getElementById('summary-1')).toHaveFocus(); @@ -240,8 +240,8 @@ test('navigation when header and summary rows have focusable elements', async () await userEvent.tab({ shift: true }); await userEvent.tab({ shift: true }); - validateCellPositionOld(1, 2); - expect(getSelectedCellOld()).toHaveFocus(); + validateCellPosition(1, 2); + await expect.element(getSelectedCell()).toHaveFocus(); }); test('navigation when selected cell not in the viewport', async () => { @@ -249,31 +249,31 @@ test('navigation when selected cell not in the viewport', async () => { for (let i = 0; i < 99; i++) { columns.push({ key: `col${i}`, name: `col${i}`, frozen: i < 5 }); } - setupOld({ columns, rows, bottomSummaryRows }); + setup({ columns, rows, bottomSummaryRows }); await userEvent.tab(); - validateCellPositionOld(0, 0); + validateCellPosition(0, 0); await userEvent.keyboard('{Control>}{end}{arrowup}{arrowup}'); - validateCellPositionOld(99, 100); + validateCellPosition(99, 100); expect(getCellsAtRowIndexOld(100)).not.toHaveLength(1); await scrollGrid({ scrollTop: 0 }); expect(getCellsAtRowIndexOld(99)).toHaveLength(1); await userEvent.keyboard('{arrowup}'); - validateCellPositionOld(99, 99); + validateCellPosition(99, 99); expect(getCellsAtRowIndexOld(99)).not.toHaveLength(1); await scrollGrid({ scrollLeft: 0 }); await userEvent.keyboard('{arrowdown}'); - validateCellPositionOld(99, 100); + validateCellPosition(99, 100); await userEvent.keyboard( '{home}{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}' ); - validateCellPositionOld(7, 100); + validateCellPosition(7, 100); await scrollGrid({ scrollLeft: 2000 }); await userEvent.keyboard('{arrowleft}'); - validateCellPositionOld(6, 100); + validateCellPosition(6, 100); }); test('reset selected cell when column is removed', async () => { @@ -291,11 +291,11 @@ test('reset selected cell when column is removed', async () => { await userEvent.tab(); await userEvent.keyboard('{arrowdown}{arrowright}'); - validateCellPositionOld(1, 1); + validateCellPosition(1, 1); rerender(); - expect(getSelectedCellOld()).not.toBeInTheDocument(); + await expect.element(getSelectedCell()).not.toBeInTheDocument(); }); test('reset selected cell when row is removed', async () => { @@ -313,25 +313,25 @@ test('reset selected cell when row is removed', async () => { await userEvent.tab(); await userEvent.keyboard('{arrowdown}{arrowdown}{arrowright}'); - validateCellPositionOld(1, 2); + validateCellPosition(1, 2); rerender(); - expect(getSelectedCellOld()).not.toBeInTheDocument(); + await expect.element(getSelectedCell()).not.toBeInTheDocument(); }); test('should not change the left and right arrow behavior for right to left languages', async () => { - setupOld({ rows, columns, direction: 'rtl' }); + setup({ rows, columns, direction: 'rtl' }); await userEvent.tab(); - validateCellPositionOld(0, 0); + validateCellPosition(0, 0); await userEvent.tab(); - validateCellPositionOld(1, 0); + validateCellPosition(1, 0); await userEvent.keyboard('{arrowright}'); - validateCellPositionOld(0, 0); + validateCellPosition(0, 0); await userEvent.keyboard('{arrowright}'); - validateCellPositionOld(0, 0); + validateCellPosition(0, 0); await userEvent.keyboard('{arrowleft}'); - validateCellPositionOld(1, 0); + validateCellPosition(1, 0); await userEvent.keyboard('{arrowleft}'); - validateCellPositionOld(2, 0); + validateCellPosition(2, 0); }); diff --git a/test/browser/renderers.test.tsx b/test/browser/renderers.test.tsx index 687cbe3d07..70ca9197e1 100644 --- a/test/browser/renderers.test.tsx +++ b/test/browser/renderers.test.tsx @@ -16,7 +16,7 @@ import type { RenderSortStatusProps, SortColumn } from '../../src'; -import { getCells, getHeaderCells, getRowsOld, setup } from './utils'; +import { getCells, getHeaderCells, getRows, setup } from './utils'; interface Row { id: number; @@ -115,21 +115,21 @@ function setupProvider(props: DataGridProps { setup({ columns, rows: noRows, renderers: { noRowsFallback: } }); - expect(getRowsOld()).toHaveLength(0); + expect(getRows()).toHaveLength(0); await expect.element(page.getByText('Local no rows fallback')).toBeInTheDocument(); }); test('fallback defined using provider with no rows', async () => { setupProvider({ columns, rows: noRows }); - expect(getRowsOld()).toHaveLength(0); + expect(getRows()).toHaveLength(0); await expect.element(page.getByText('Global no rows fallback')).toBeInTheDocument(); }); test('fallback defined using both provider and renderers with no rows', async () => { setupProvider({ columns, rows: noRows, renderers: { noRowsFallback: } }); - expect(getRowsOld()).toHaveLength(0); + expect(getRows()).toHaveLength(0); await expect.element(page.getByText('Local no rows fallback')).toBeInTheDocument(); }); @@ -140,14 +140,14 @@ test('fallback defined using renderers prop with a row', async () => { renderers: { noRowsFallback: } }); - expect(getRowsOld()).toHaveLength(1); + expect(getRows()).toHaveLength(1); await expect.element(page.getByText('Local no rows fallback')).not.toBeInTheDocument(); }); test('fallback defined using provider with a row', async () => { setupProvider({ columns, rows: [{ id: 1, col1: 'value 1', col2: 'value 2' }] }); - expect(getRowsOld()).toHaveLength(1); + expect(getRows()).toHaveLength(1); await expect.element(page.getByText('Global no rows fallback')).not.toBeInTheDocument(); }); @@ -158,7 +158,7 @@ test('fallback defined using both provider and renderers with a row', async () = renderers: { noRowsFallback: } }); - expect(getRowsOld()).toHaveLength(1); + expect(getRows()).toHaveLength(1); await expect.element(page.getByText('Global no rows fallback')).not.toBeInTheDocument(); await expect.element(page.getByText('Local no rows fallback')).not.toBeInTheDocument(); }); @@ -166,21 +166,21 @@ test('fallback defined using both provider and renderers with a row', async () = test('checkbox defined using renderers prop', async () => { setup({ columns, rows: noRows, renderers: { renderCheckbox: renderLocalCheckbox } }); - expect(getRowsOld()).toHaveLength(0); + expect(getRows()).toHaveLength(0); await expect.element(page.getByText('Local checkbox')).toBeInTheDocument(); }); test('checkbox defined using provider', async () => { setupProvider({ columns, rows: noRows }); - expect(getRowsOld()).toHaveLength(0); + expect(getRows()).toHaveLength(0); await expect.element(page.getByText('Global checkbox')).toBeInTheDocument(); }); test('checkbox defined using both provider and renderers', async () => { setupProvider({ columns, rows: noRows, renderers: { renderCheckbox: renderLocalCheckbox } }); - expect(getRowsOld()).toHaveLength(0); + expect(getRows()).toHaveLength(0); await expect.element(page.getByText('Local checkbox')).toBeInTheDocument(); await expect.element(page.getByText('Global checkbox')).not.toBeInTheDocument(); }); @@ -252,7 +252,7 @@ test('renderCell defined using both providers and renderers', async () => { test('renderRow defined using provider', () => { setupProvider({ columns, rows: [{ id: 1, col1: 'value 1', col2: 'value 2' }] }); - const [row] = getRowsOld(); + const row = getRows()[0].element(); expect(row).toHaveClass('global'); expect(row).not.toHaveClass('local'); }); @@ -264,7 +264,7 @@ test('renderRow defined using both providers and renderers', () => { renderers: { renderRow: renderLocalRow } }); - const [row] = getRowsOld(); + const row = getRows()[0].element(); expect(row).toHaveClass('local'); expect(row).not.toHaveClass('global'); });