Update tests for renderers (#3628)

* Update `renderCell` tests

* Test `renderRow`

* Use `flushSync` to close editor

* Revert "Use `flushSync` to close editor"

This reverts commit 8ffe507.

* Set `screenshotFailures` to false in CI

* Rename

Author: amanmahajan7

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,39 +41,39 @@ 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 renderGlobalCell(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 renderLocalCell(key: React.Key, props: CellRendererProps<Row, unknown>) {
+  return <Cell key={key} {...props} className="local" style={{ fontStyle: 'normal' }} />;
+}
+
+function renderGlobalRow(key: React.Key, props: RenderRowProps<Row>) {
+  return <DefaultRow key={key} {...props} className="global" />;
+}
+
+function renderLocalRow(key: React.Key, props: RenderRowProps<Row>) {
+  return <DefaultRow key={key} {...props} className="local" />;
 }
 
 function NoRowsFallback() {
   return <div>Local no rows fallback</div>;
 }
 
-function GlobalNoRowsFallback() {
+function NoRowsGlobalFallback() {
   return <div>Global no rows fallback</div>;
 }
 
-function localRenderCheckbox() {
+function renderLocalCheckbox() {
   return <div>Local checkbox</div>;
 }
 
-function globalRenderCheckbox() {
+function renderGlobalCheckbox() {
   return <div>Global checkbox</div>;
 }
 
-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<R, SR, K extends React.Key>(props: DataGridProps<R, SR, K
   return render(
     <DataGridDefaultRenderersProvider
       value={{
-        noRowsFallback: <GlobalNoRowsFallback />,
-        renderCheckbox: globalRenderCheckbox,
-        renderSortStatus: globalSortStatus,
-        renderCell: globalCellRenderer
+        noRowsFallback: <NoRowsGlobalFallback />,
+        renderCheckbox: renderGlobalCheckbox,
+        renderSortStatus: renderGlobalSortStatus,
+        renderCell: renderGlobalCell,
+        renderRow: renderGlobalRow
       }}
     >
       <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 /> }
   });
 
@@ -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');
 });

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