diff --git a/test/browser/renderers.test.tsx b/test/browser/renderers.test.tsx index 071cd5aac4..faec77f48e 100644 --- a/test/browser/renderers.test.tsx +++ b/test/browser/renderers.test.tsx @@ -3,7 +3,9 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import DataGrid, { + Cell, DataGridDefaultRenderersProvider, + Row as DefaultRow, renderSortIcon, SelectColumn } from '../../src'; @@ -11,6 +13,7 @@ import type { CellRendererProps, Column, DataGridProps, + RenderRowProps, RenderSortStatusProps, SortColumn } from '../../src'; @@ -38,39 +41,39 @@ const columns: readonly Column[] = [ } ]; -function globalCellRenderer(key: React.Key, props: CellRendererProps) { - return ( -
- {props.row[props.column.key as keyof Row]} -
- ); +function renderGlobalCell(key: React.Key, props: CellRendererProps) { + return ; } -function localCellRenderer(key: React.Key) { - return ( -
- local -
- ); +function renderLocalCell(key: React.Key, props: CellRendererProps) { + return ; +} + +function renderGlobalRow(key: React.Key, props: RenderRowProps) { + return ; +} + +function renderLocalRow(key: React.Key, props: RenderRowProps) { + return ; } function NoRowsFallback() { return
Local no rows fallback
; } -function GlobalNoRowsFallback() { +function NoRowsGlobalFallback() { return
Global no rows fallback
; } -function localRenderCheckbox() { +function renderLocalCheckbox() { return
Local checkbox
; } -function globalRenderCheckbox() { +function renderGlobalCheckbox() { return
Global checkbox
; } -function globalSortStatus({ sortDirection, priority }: RenderSortStatusProps) { +function renderGlobalSortStatus({ sortDirection, priority }: RenderSortStatusProps) { return ( <> {renderSortIcon({ sortDirection })} @@ -79,7 +82,7 @@ function globalSortStatus({ sortDirection, priority }: RenderSortStatusProps) { ); } -function renderSortStatus({ sortDirection, priority }: RenderSortStatusProps) { +function renderLocalSortStatus({ sortDirection, priority }: RenderSortStatusProps) { return ( <> {renderSortIcon({ sortDirection })} @@ -98,10 +101,11 @@ function setupProvider(props: DataGridProps, - renderCheckbox: globalRenderCheckbox, - renderSortStatus: globalSortStatus, - renderCell: globalCellRenderer + noRowsFallback: , + renderCheckbox: renderGlobalCheckbox, + renderSortStatus: renderGlobalSortStatus, + renderCell: renderGlobalCell, + renderRow: renderGlobalRow }} > @@ -133,7 +137,7 @@ test('fallback defined using both provider and renderers with no rows', () => { test('fallback defined using renderers prop with a row', () => { setup({ columns, - rows: [{ id: 1, col1: 'col 1 value', col2: 'col 2 value' }], + rows: [{ id: 1, col1: 'value 1', col2: 'value 2' }], renderers: { noRowsFallback: } }); @@ -142,7 +146,7 @@ test('fallback defined using renderers prop with a row', () => { }); test('fallback defined using provider with a row', () => { - setupProvider({ columns, rows: [{ id: 1, col1: 'col 1 value', col2: 'col 2 value' }] }); + setupProvider({ columns, rows: [{ id: 1, col1: 'value 1', col2: 'value 2' }] }); expect(getRows()).toHaveLength(1); expect(screen.queryByText('Global no rows fallback')).not.toBeInTheDocument(); @@ -151,7 +155,7 @@ test('fallback defined using provider with a row', () => { test('fallback defined using both provider and renderers with a row', () => { setupProvider({ columns, - rows: [{ id: 1, col1: 'col 1 value', col2: 'col 2 value' }], + rows: [{ id: 1, col1: 'value 1', col2: 'value 2' }], renderers: { noRowsFallback: } }); @@ -161,7 +165,7 @@ test('fallback defined using both provider and renderers with a row', () => { }); test('checkbox defined using renderers prop', () => { - setup({ columns, rows: noRows, renderers: { renderCheckbox: localRenderCheckbox } }); + setup({ columns, rows: noRows, renderers: { renderCheckbox: renderLocalCheckbox } }); expect(getRows()).toHaveLength(0); expect(screen.getByText('Local checkbox')).toBeInTheDocument(); @@ -175,7 +179,7 @@ test('checkbox defined using provider', () => { }); test('checkbox defined using both provider and renderers', () => { - setupProvider({ columns, rows: noRows, renderers: { renderCheckbox: localRenderCheckbox } }); + setupProvider({ columns, rows: noRows, renderers: { renderCheckbox: renderLocalCheckbox } }); expect(getRows()).toHaveLength(0); expect(screen.getByText('Local checkbox')).toBeInTheDocument(); @@ -199,7 +203,7 @@ test('sortPriority defined using both providers', async () => { }); test('sortPriority defined using both providers and renderers', async () => { - setupProvider({ columns, rows: noRows, renderers: { renderSortStatus } }); + setupProvider({ columns, rows: noRows, renderers: { renderSortStatus: renderLocalSortStatus } }); const [, headerCell2, headerCell3] = getHeaderCells(); const user = userEvent.setup(); @@ -215,22 +219,55 @@ test('sortPriority defined using both providers and renderers', async () => { }); test('renderCell defined using provider', () => { - setupProvider({ columns, rows: [{ id: 1, col1: 'col 1 value', col2: 'col 2 value' }] }); + setupProvider({ columns, rows: [{ id: 1, col1: 'value 1', col2: 'value 2' }] }); const [, cell1, cell2] = getCells(); - expect(cell1).toHaveTextContent('col 1 value'); - expect(cell2).toHaveTextContent('col 2 value'); + expect(cell1).toHaveTextContent('value 1'); + expect(cell1).toHaveClass('global'); + expect(cell1).not.toHaveClass('local'); + expect(cell1).toHaveStyle({ fontStyle: 'italic' }); + + expect(cell2).toHaveTextContent('value 2'); + expect(cell2).toHaveClass('global'); + expect(cell2).not.toHaveClass('local'); + expect(cell2).toHaveStyle({ fontStyle: 'italic' }); }); test('renderCell defined using both providers and renderers', () => { setupProvider({ columns, - rows: [{ id: 1, col1: 'col 1 value', col2: 'col 2 value' }], - renderers: { renderCell: localCellRenderer } + rows: [{ id: 1, col1: 'value 1', col2: 'value 2' }], + renderers: { renderCell: renderLocalCell } + }); + + const [, cell1, cell2] = getCells(); + expect(cell1).toHaveTextContent('value 1'); + expect(cell1).toHaveClass('local'); + expect(cell1).not.toHaveClass('global'); + expect(cell1).toHaveStyle({ fontStyle: 'normal' }); + + expect(cell2).toHaveTextContent('value 2'); + expect(cell2).toHaveClass('local'); + expect(cell2).not.toHaveClass('global'); + expect(cell2).toHaveStyle({ fontStyle: 'normal' }); +}); + +test('renderRow defined using provider', () => { + setupProvider({ columns, rows: [{ id: 1, col1: 'value 1', col2: 'value 2' }] }); + + const [row] = getRows(); + expect(row).toHaveClass('global'); + expect(row).not.toHaveClass('local'); +}); + +test('renderRow defined using both providers and renderers', () => { + setupProvider({ + columns, + rows: [{ id: 1, col1: 'value 1', col2: 'value 2' }], + renderers: { renderRow: renderLocalRow } }); - const [selectCell, cell1, cell2] = getCells(); - expect(selectCell).toHaveTextContent('local'); - expect(cell1).toHaveTextContent('local'); - expect(cell2).toHaveTextContent('local'); + const [row] = getRows(); + expect(row).toHaveClass('local'); + expect(row).not.toHaveClass('global'); }); diff --git a/vitest.workspace.ts b/vitest.workspace.ts index bf43e7a3cd..7c3a30f323 100644 --- a/vitest.workspace.ts +++ b/vitest.workspace.ts @@ -27,7 +27,8 @@ export default defineWorkspace([ provider: 'playwright', commands: { resizeColumn }, viewport: { width: 1920, height: 1080 }, - headless: true + headless: true, + screenshotFailures: process.env.CI !== 'true' } } },