Initial commit

Author: amanmahajan7

.github/workflows/ci.yml

@@ -14,7 +14,7 @@ jobs:
         with:
           node-version: 25
           check-latest: true
-      - name: npm install
+      - name: Install dependencies
         run: npm i
       - name: Biome
         run: node --run biome:ci
@@ -32,7 +32,9 @@ jobs:
         run: npx playwright install chromium firefox
       - name: Test
         run: node --run test
-        timeout-minutes: 4
+        timeout-minutes: 4timeout-minutes: 4
+      - name: Visual regression test
+        run: node --run visual
       - name: Upload coverage
         uses: codecov/codecov-action@v5
         with:

.github/workflows/update-screenshots.yml

@@ -0,0 +1,54 @@
+name: Update Screenshots
+
+on:
+  pull_request:
+    types: [labeled]
+
+env:
+  AUTHOR_NAME: 'github-actions[bot]'
+  AUTHOR_EMAIL: '41898282+github-actions[bot]@users.noreply.github.com'
+  COMMIT_MESSAGE: |
+    Update screenshots
+
+    Co-authored-by: ${{ github.actor }}
+
+jobs:
+  update-screenshots:
+    if: ${{ github.event.label.name == 'Update Screenshots' }}
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: write
+      pull-requests: write
+
+    # one at a time per branch
+    concurrency:
+      group: update-screenshots@${{ github.head_ref  }}
+      cancel-in-progress: true
+
+    steps:
+      - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8
+        with:
+          ref: ${{ github.head_ref }}
+      - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444
+        with:
+          node-version: 24
+          check-latest: true
+      - name: Remove label
+        uses: actions-ecosystem/action-remove-labels@2ce5d41b4b6aa8503e285553f75ed56e0a40bae0
+        with:
+          labels: 'Update Screenshots'
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+      - name: Install dependencies
+        run: npm i
+      - name: Install Playwright Browsers
+        run: npx playwright install chromium firefox
+      - name: Update screenshots
+        run: node --run visual:update
+      - name: Push new screenshots
+        run: |
+          git config --global user.name "${{ env.AUTHOR_NAME }}"
+          git config --global user.email "${{ env.AUTHOR_EMAIL }}"
+          git add visual/__screenshots__/.
+          git diff-index --quiet HEAD || git commit -m "${{ env.COMMIT_MESSAGE }}"
+          git push --set-upstream origin ${{ github.head_ref }}

.gitignore

@@ -4,8 +4,9 @@
 /lib
 /node_modules
 /package-lock.json
-__screenshots__
+test/**/__screenshots__
 
 npm-debug.log
 **.orig
 .idea
+.vitest-attachments

package.json

@@ -35,8 +35,10 @@
     "preview": "vite preview",
     "build:website": "vite build",
     "build": "rolldown -c",
-    "test": "vitest run",
-    "test:watch": "vitest watch",
+    "test": "vitest run --project browser --project node --coverage.reportsDirectory='./coverage/test'",
+    "test:watch": "vitest watch --project browser --project node",
+    "visual": "vitest run --project visual --coverage.reportsDirectory='./coverage/visual'",
+    "visual:update": "vitest run --project visual --update",
     "format": "biome format --write",
     "check": "biome check --error-on-warnings",
     "biome:ci": "biome ci --error-on-warnings",

visual/basicGrid.test.tsx

@@ -0,0 +1,54 @@
+import { page } from 'vitest/browser';
+
+import { DataGrid, SelectColumn, type Column } from '../src';
+import { getGrid } from '../test/browser/utils';
+
+interface Row {
+  id: number;
+  name: string;
+}
+
+const columns: readonly Column<Row, Row>[] = [
+  SelectColumn,
+  {
+    key: 'name',
+    name: 'Name',
+    renderSummaryCell(props) {
+      return props.row.name;
+    }
+  }
+];
+
+const rows: readonly Row[] = [
+  { id: 1, name: 'Row 1' },
+  { id: 2, name: 'Row 2' },
+  { id: 3, name: 'Row 3' }
+];
+
+const topSummaryRows: readonly Row[] = [
+  { id: 4, name: 'Top Summary Row 1' },
+  { id: 5, name: 'Top Summary Row 2' }
+];
+
+const bottomSummaryRows: readonly Row[] = [
+  { id: 4, name: 'Top Summary Row 1' },
+  { id: 5, name: 'Top Summary Row 2' }
+];
+
+function rowKeyGetter(row: Row) {
+  return row.id;
+}
+
+test('basic grid', async () => {
+  page.render(
+    <DataGrid
+      rowKeyGetter={rowKeyGetter}
+      columns={columns}
+      rows={rows}
+      topSummaryRows={topSummaryRows}
+      bottomSummaryRows={bottomSummaryRows}
+    />
+  );
+
+  await expect(getGrid()).toMatchScreenshot('basic-grid');
+});

vite.config.ts

@@ -138,6 +138,42 @@ export default defineConfig(({ command, isPreview }) => ({
           setupFiles: ['test/setupBrowser.ts']
         }
       },
+      {
+        extends: true,
+        test: {
+          name: 'visual',
+          include: ['visual/*.test.*'],
+          browser: {
+            enabled: true,
+            provider: playwright(),
+            instances: [
+              {
+                browser: 'chromium',
+                context: { viewport }
+              },
+              {
+                browser: 'firefox',
+                context: { viewport }
+              }
+            ],
+            viewport,
+            headless: true,
+            screenshotFailures: false
+          },
+          setupFiles: ['test/setupBrowser.ts']
+        },
+        toMatchScreenshot: {
+          comparatorName: 'pixelmatch',
+          comparatorOptions: {
+            // TODO: finalize these values
+            // 0-1, how different can colors be?
+            threshold: 0.2,
+            // 1% of pixels can differ
+            allowedMismatchedPixelRatio: 0.01
+          }
+        },
+        setupFiles: ['test/setupBrowser.ts']
+      },
       {
         extends: true,
         test: {