first test

Author: amanmahajan7

.gitignore

@@ -9,3 +9,4 @@ test/**/__screenshots__
 npm-debug.log
 **.orig
 .idea
+.vitest-attachments

package.json

@@ -35,9 +35,9 @@
     "preview": "vite preview",
     "build:website": "vite build",
     "build": "rolldown -c",
-    "test": "vitest run test",
+    "test": "vitest run --project browser --project node",
     "test:watch": "vitest watch test",
-    "visual": "vitest run visual",
+    "visual": "vitest run --project visual",
     "format": "biome format --write",
     "check": "biome check --error-on-warnings",
     "biome:ci": "biome ci --error-on-warnings",

tsconfig.test.json

@@ -5,6 +5,6 @@
     "lib": ["ESNext", "DOM", "DOM.Iterable", "DOM.AsyncIterable"],
     "types": ["vitest/globals"]
   },
-  "include": ["test/**/*"],
+  "include": ["test/**/*", "visual/**/*"],
   "references": [{ "path": "tsconfig.src.json" }]
 }

visual/basicGrid.test.tsx

@@ -0,0 +1,33 @@
+import { page } from '@vitest/browser/context';
+
+import { DataGrid, SelectColumn, type Column } from '../src';
+import { getGrid } from '../test/browser/utils';
+
+interface Row {
+  id: number;
+  name: string;
+}
+
+const columns: readonly Column<Row>[] = [
+  SelectColumn,
+  {
+    key: 'name',
+    name: 'Name'
+  }
+];
+
+const rows: readonly Row[] = [
+  { id: 1, name: 'Row 1' },
+  { id: 2, name: 'Row 2' },
+  { id: 3, name: 'Row 3' }
+];
+
+function rowKeyGetter(row: Row) {
+  return row.id;
+}
+
+test('toggle selection when checkbox is clicked', async () => {
+  page.render(<DataGrid rowKeyGetter={rowKeyGetter} columns={columns} rows={rows} />);
+
+  await expect(getGrid()).toMatchScreenshot();
+});

vite.config.ts

@@ -109,19 +109,40 @@ export default defineConfig(({ command, isPreview }) => ({
             headless: true,
             screenshotFailures: process.env.CI !== 'true'
           },
-          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: {
+          name: 'visual',
+          include: ['visual/*.test.*'],
+          browser: {
+            enabled: true,
+            provider: playwright(),
+            instances: [
+              {
+                browser: 'chromium',
+                context: { viewport }
+              }
+            ],
+            viewport,
+            headless: true
+          },
+          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: {