diff --git a/test/browser/dragFill.test.tsx b/test/browser/dragFill.test.tsx index e6fd478501..b5a62d44af 100644 --- a/test/browser/dragFill.test.tsx +++ b/test/browser/dragFill.test.tsx @@ -1,10 +1,9 @@ import { useState } from 'react'; -import { render } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { commands, page, userEvent } from '@vitest/browser/context'; import DataGrid from '../../src'; import type { Column, FillEvent } from '../../src'; -import { getCellsAtRowIndexOld, getRowsOld } from './utils'; +import { getCellsAtRowIndex } from './utils'; interface Row { col: string; @@ -24,7 +23,7 @@ const columns: readonly Column[] = [ const initialRows: readonly Row[] = [{ col: 'a1' }, { col: 'a2' }, { col: 'a3' }, { col: 'a4' }]; function setup(allowDragFill = true) { - render(); + page.render(); } function DragFillTest({ allowDragFill = true }: { allowDragFill?: boolean }) { @@ -50,68 +49,53 @@ function getDragHandle() { test('should not allow dragFill if onFill is undefined', async () => { setup(false); - await userEvent.click(getCellsAtRowIndexOld(0)[0]); + await userEvent.click(getCellsAtRowIndex(0)[0]); expect(getDragHandle()).not.toBeInTheDocument(); }); test('should allow dragFill if onFill is specified', async () => { setup(); - const cell = getCellsAtRowIndexOld(0)[0]; - await userEvent.click(cell); - expect(cell).toHaveFocus(); + await userEvent.click(getCellsAtRowIndex(0)[0]); + await expect.element(getCellsAtRowIndex(0)[0]).toHaveFocus(); await userEvent.dblClick(getDragHandle()!); - expect(cell).toHaveFocus(); - expect(getCellsAtRowIndexOld(1)[0]).toHaveTextContent('a1'); - expect(getCellsAtRowIndexOld(2)[0]).toHaveTextContent('a1'); - expect(getCellsAtRowIndexOld(3)[0]).toHaveTextContent('a4'); // readonly cell + await expect.element(getCellsAtRowIndex(0)[0]).toHaveFocus(); + await expect.element(getCellsAtRowIndex(1)[0]).toHaveTextContent('a1'); + await expect.element(getCellsAtRowIndex(2)[0]).toHaveTextContent('a1'); + await expect.element(getCellsAtRowIndex(3)[0]).toHaveTextContent('a4'); // readonly cell }); test('should update single row using mouse', async () => { setup(); - const cell = getCellsAtRowIndexOld(0)[0]; - await userEvent.click(cell); - await userEvent.pointer([ - { keys: '[MouseLeft>]', target: getDragHandle()! }, - { target: getRowsOld()[1] }, - { keys: '[/MouseLeft]' } - ]); - expect(getCellsAtRowIndexOld(1)[0]).toHaveTextContent('a1'); - expect(getCellsAtRowIndexOld(2)[0]).toHaveTextContent('a3'); - expect(cell).toHaveFocus(); + // @ts-expect-error + await commands.dragFill('a1', 'a2'); + await expect.element(getCellsAtRowIndex(1)[0]).toHaveTextContent('a1'); + await expect.element(getCellsAtRowIndex(2)[0]).toHaveTextContent('a3'); + await expect.element(getCellsAtRowIndex(0)[0]).toHaveFocus(); }); test('should update multiple rows using mouse', async () => { setup(); - await userEvent.click(getCellsAtRowIndexOld(0)[0]); - await userEvent.pointer([ - { keys: '[MouseLeft>]', target: getDragHandle()! }, - { target: getRowsOld()[3] }, - { keys: '[/MouseLeft]' } - ]); - expect(getCellsAtRowIndexOld(1)[0]).toHaveTextContent('a1'); - expect(getCellsAtRowIndexOld(2)[0]).toHaveTextContent('a1'); - expect(getCellsAtRowIndexOld(3)[0]).toHaveTextContent('a4'); // readonly cell + // @ts-expect-error + await commands.dragFill('a1', 'a4'); + await expect.element(getCellsAtRowIndex(1)[0]).toHaveTextContent('a1'); + await expect.element(getCellsAtRowIndex(2)[0]).toHaveTextContent('a1'); + await expect.element(getCellsAtRowIndex(3)[0]).toHaveTextContent('a4'); // readonly cell }); test('should allow drag up using mouse', async () => { setup(); - await userEvent.click(getCellsAtRowIndexOld(3)[0]); - await userEvent.pointer([ - { keys: '[MouseLeft>]', target: getDragHandle()! }, - { target: getRowsOld()[0] }, - { keys: '[/MouseLeft]' } - ]); - expect(getCellsAtRowIndexOld(0)[0]).toHaveTextContent('a4'); - expect(getCellsAtRowIndexOld(1)[0]).toHaveTextContent('a4'); - expect(getCellsAtRowIndexOld(2)[0]).toHaveTextContent('a4'); + // @ts-expect-error + await commands.dragFill('a4', 'a1'); + await expect.element(getCellsAtRowIndex(0)[0]).toHaveTextContent('a4'); + await expect.element(getCellsAtRowIndex(1)[0]).toHaveTextContent('a4'); + await expect.element(getCellsAtRowIndex(2)[0]).toHaveTextContent('a4'); }); test('should focus the cell when drag handle is clicked', async () => { setup(); - const cell = getCellsAtRowIndexOld(0)[0]; - await userEvent.click(cell); + await userEvent.click(getCellsAtRowIndex(0)[0]); await userEvent.click(document.body); expect(document.body).toHaveFocus(); await userEvent.click(getDragHandle()!); - expect(cell).toHaveFocus(); + await expect.element(getCellsAtRowIndex(0)[0]).toHaveFocus(); }); diff --git a/vitest.workspace.ts b/vitest.workspace.ts index 711e2c9ecb..cd59bca5b5 100644 --- a/vitest.workspace.ts +++ b/vitest.workspace.ts @@ -15,6 +15,18 @@ const resizeColumn: BrowserCommand<[resizeBy: number]> = async (context, resizeB await page.mouse.up(); }; +// TODO: remove when `userEvent.pointer` is supported +const dragFill: BrowserCommand<[from: string, to: string]> = async (context, from, to) => { + const page = context.page; + const frame = await context.frame(); + await frame.getByRole('gridcell', { name: from }).click(); + await frame.locator('.rdg-cell-drag-handle').hover(); + await page.mouse.down(); + const toCell = frame.getByRole('gridcell', { name: to }); + await toCell.hover(); + await page.mouse.up(); +}; + export default defineWorkspace([ { extends: './vite.config.ts', @@ -25,7 +37,7 @@ export default defineWorkspace([ enabled: true, name: 'chromium', provider: 'playwright', - commands: { resizeColumn }, + commands: { resizeColumn, dragFill }, viewport: { width: 1920, height: 1080 }, headless: true, screenshotFailures: process.env.CI !== 'true'