Update tests for renderers

test/browser/renderers.test.tsx

@@ -3,14 +3,17 @@ 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';
 import type {
   CellRendererProps,
   Column,
   DataGridProps,
+  RenderRowProps,
   RenderSortStatusProps,
   SortColumn
 } from '../../src';
@@ -38,20 +41,20 @@ const columns: readonly Column<Row>[] = [
   }
 ];
 
-function globalCellRenderer(key: React.Key, props: CellRendererProps<Row, unknown>) {
-  return (
-    <div key={key} role="gridcell">
-      {props.row[props.column.key as keyof Row]}
-    </div>
-  );
+function globalRenderCell(key: React.Key, props: CellRendererProps<Row, unknown>) {
+  return <Cell key={key} {...props} className="global" style={{ fontStyle: 'italic' }} />;
 }
 
-function localCellRenderer(key: React.Key) {
-  return (
-    <div key={key} role="gridcell">
-      local
-    </div>
-  );
+function localRenderCell(key: React.Key, props: CellRendererProps<Row, unknown>) {
+  return <Cell key={key} {...props} className="local" style={{ fontStyle: 'normal' }} />;
+}
+
+function globalRenderRow(key: React.Key, props: RenderRowProps<Row>) {
+  return <DefaultRow key={key} {...props} className="global" />;
+}
+
+function localRenderRow(key: React.Key, props: RenderRowProps<Row>) {
+  return <DefaultRow key={key} {...props} className="local" />;
 }
 
 function NoRowsFallback() {
@@ -101,7 +104,8 @@ function setupProvider<R, SR, K extends React.Key>(props: DataGridProps<R, SR, K
         noRowsFallback: <GlobalNoRowsFallback />,
         renderCheckbox: globalRenderCheckbox,
         renderSortStatus: globalSortStatus,
-        renderCell: globalCellRenderer
+        renderCell: globalRenderCell,
+        renderRow: globalRenderRow
       }}
     >
       <TestGrid {...props} />
@@ -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: <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: <NoRowsFallback /> }
   });
 
@@ -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: localRenderCell }
+  });
+
+  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: localRenderRow }
   });
 
-  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');
 });

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'
       }
     }
   },