Merge branch 'canary' into ts42

Author: nstepien

jest.config.js

@@ -10,6 +10,9 @@ export default {
     'text'
   ],
   restoreMocks: true,
+  setupFiles: [
+    './test/setup.ts'
+  ],
   setupFilesAfterEnv: [
     '@testing-library/jest-dom'
   ],

test/column/cellClass.test.ts

@@ -10,8 +10,7 @@ const rows: readonly Row[] = [{ id: 0 }, { id: 1 }];
 test('cellClass is undefined', () => {
   const columns: readonly Column<Row>[] = [{
     key: 'id',
-    name: 'ID',
-    cellClass: undefined
+    name: 'ID'
   }];
   setup({ columns, rows });
   const [cell1, cell2] = getCells();

test/column/frozen.test.ts

@@ -0,0 +1,41 @@
+import type { Column } from '../../src';
+import { setup, getHeaderCells } from '../utils';
+
+interface Row {
+  col1: number;
+  col2: string;
+  col3: string;
+  col4: string;
+}
+
+test('frozen column have a specific class, and are stable-sorted before non-frozen columns', () => {
+  const columns: readonly Column<Row>[] = [{
+    key: 'col1',
+    name: 'col1',
+    frozen: true
+  }, {
+    key: 'col2',
+    name: 'col2'
+  }, {
+    key: 'col3',
+    name: 'col3',
+    frozen: true
+  }, {
+    key: 'col4',
+    name: 'col4',
+    frozen: false
+  }];
+
+  setup({ columns, rows: [] });
+  const [cell1, cell2, cell3, cell4] = getHeaderCells();
+
+  expect(cell1).toHaveClass('rdg-cell rdg-cell-frozen', { exact: true });
+  expect(cell2).toHaveClass('rdg-cell rdg-cell-frozen rdg-cell-frozen', { exact: true });
+  expect(cell3).toHaveClass('rdg-cell', { exact: true });
+  expect(cell4).toHaveClass('rdg-cell', { exact: true });
+
+  expect(cell1).toHaveTextContent('col1');
+  expect(cell2).toHaveTextContent('col3');
+  expect(cell3).toHaveTextContent('col2');
+  expect(cell4).toHaveTextContent('col4');
+});

test/column/headerCellClass.test.ts

@@ -0,0 +1,23 @@
+import type { Column } from '../../src';
+import { setup, getHeaderCells } from '../utils';
+
+interface Row {
+  id: number;
+  name: string;
+}
+
+test('headerCellClass is either undefined or a string', () => {
+  const columns: readonly Column<Row>[] = [{
+    key: 'id',
+    name: 'ID'
+  }, {
+    key: 'name',
+    name: 'Name',
+    headerCellClass: 'my-header'
+  }];
+
+  setup({ columns, rows: [] });
+  const [cell1, cell2] = getHeaderCells();
+  expect(cell1).toHaveClass('rdg-cell', { exact: true });
+  expect(cell2).toHaveClass('rdg-cell my-header', { exact: true });
+});

test/column/headerRenderer.test.tsx

@@ -0,0 +1,27 @@
+import type { Column, HeaderRendererProps } from '../../src';
+import { setup, getHeaderCells } from '../utils';
+
+interface Row {
+  id: number;
+  name: string;
+}
+
+test('headerRenderer is either undefined or a component', () => {
+  function Header({ column }: HeaderRendererProps<Row>) {
+    return <>Fancy! {column.name}</>;
+  }
+
+  const columns: readonly Column<Row>[] = [{
+    key: 'id',
+    name: 'ID'
+  }, {
+    key: 'name',
+    name: 'Name',
+    headerRenderer: Header
+  }];
+
+  setup({ columns, rows: [] });
+  const [cell1, cell2] = getHeaderCells();
+  expect(cell1).toHaveTextContent('ID');
+  expect(cell2).toHaveTextContent('Fancy! Name');
+});

test/column/name.test.tsx

@@ -0,0 +1,26 @@
+import type { Column } from '../../src';
+import { setup, getHeaderCells } from '../utils';
+
+interface Row {
+  id: number;
+  name: string;
+}
+
+test('name is either a string or an element', () => {
+  function Header() {
+    return <>Fancy</>;
+  }
+
+  const columns: readonly Column<Row>[] = [{
+    key: 'id',
+    name: 'ID'
+  }, {
+    key: 'name',
+    name: <Header />
+  }];
+
+  setup({ columns, rows: [] });
+  const [cell1, cell2] = getHeaderCells();
+  expect(cell1).toHaveTextContent('ID');
+  expect(cell2).toHaveTextContent('Fancy');
+});

test/setup.ts

@@ -0,0 +1,23 @@
+// @ts-expect-error
+window.ResizeObserver ??= function ResizeObserver(callback: () => void) {
+  callback();
+
+  return {
+    observe() {},
+    disconnect() {}
+  };
+};
+
+// patch clientWidth/clientHeight to pretend we're rendering DataGrid at 1080p
+Object.defineProperties(HTMLDivElement.prototype, {
+  clientWidth: {
+    get(this: HTMLDivElement) {
+      return this.classList.contains('rdg') ? 1920 : 0;
+    }
+  },
+  clientHeight: {
+    get(this: HTMLDivElement) {
+      return this.classList.contains('rdg') ? 1080 : 0;
+    }
+  }
+});

test/utils.tsx

@@ -18,3 +18,7 @@ export function getRows() {
 export function getCells() {
   return screen.getAllByRole('gridcell');
 }
+
+export function getHeaderCells() {
+  return screen.getAllByRole('columnheader');
+}