feat: yarn screenshot

img/visual-regression.test.ts → img/visual-regression/visual-regression.test.ts

@@ -1,5 +1,5 @@
 import puppeteer, { Page, Browser } from 'puppeteer';
-import { examples } from '../editor/example';
+import { examples } from '../../editor/example';
 import * as fs from 'fs';
 
 import { beforeAll } from 'vitest';
@@ -66,7 +66,7 @@ beforeAll(async () => {
  * Loop over all examples and take a screenshot
  */
 Object.entries(examples)
-    // .filter(([name]) => name === 'ALIGNMENT') // we only want to see the broken example now
+    // .filter(([name]) => name === 'doc_text') // we only want to see the broken example now
     .forEach(([name, example]) => {
         test(
             name,
@@ -78,7 +78,7 @@ Object.entries(examples)
                 const component = await page.waitForSelector('.gosling-component');
                 await page.waitForNetworkIdle({ idleTime: 2000 });
                 await delay(2000); // wait 2 seconds for rendering to complete. TODO: see if we can implement javascript API subscription which fires when rendering is done
-                await component!.screenshot({ path: `img/visual-regression/${name}.png` });
+                await component!.screenshot({ path: `img/visual-regression/screenshots/${name}.png` });
             },
             20000
         );

package.json

@@ -29,6 +29,7 @@
         "preview": "vite preview",
         "check": "tsc --noEmit",
         "test": "vitest",
+        "image": "vitest --mode image",
         "coverage": "vitest run --coverage",
         "format": "eslint src/ editor/ --fix && prettier 'editor/**/*.css' --write",
         "schema": "node scripts/generate-schemas.mjs",

tsconfig.json

@@ -42,7 +42,7 @@
     "editor/index.tsx",
     "embed/index.ts"
   ],
-  "include": ["src", "src/**/*.d.ts", "editor", "img/visual-regression.test.ts"],
+  "include": ["src", "src/**/*.d.ts", "editor", "img/visual-regression/visual-regression.test.ts"],
   "exclude": [
     "node_modules",
     "public",

vite.config.js

@@ -73,6 +73,9 @@ const external = [...Object.keys(pkg.dependencies), ...Object.keys(pkg.peerDepen
     dep => !skipExt.has(dep)
 );
 
+/**
+ * Used when yarn build-lib is run
+ */
 const esm = defineConfig({
     build: {
         emptyOutDir: false,
@@ -101,9 +104,13 @@ const dev = defineConfig({
     plugins: [bundleWebWorker, manualInlineWorker]
 });
 
+/**
+ * This config is used when vitest is run
+ */
 const testing = defineConfig({
     resolve: { alias },
     test: {
+        exclude: ['./img/visual-regression/*'],
         globals: true,
         setupFiles: [path.resolve(__dirname, './scripts/setup-vitest.js')],
         environment: 'jsdom',
@@ -121,9 +128,27 @@ const testing = defineConfig({
     }
 });
 
+/**
+ * This config is used to take screenshots of every example Gosling spec using a headless browser (puppeteer)
+ */
+const image = defineConfig({
+    test: {
+        include: ['./img/visual-regression/*'],
+        globals: true,
+        environment: 'jsdom',
+        threads: false,
+        environmentOptions: {
+            jsdom: {
+                resources: 'usable'
+            }
+        }
+    }
+});
+
 export default ({ command, mode }) => {
     if (command === 'build' && mode === 'lib') return esm;
     if (mode == 'test') return testing;
+    if (mode == 'image') return image;
     if (mode === 'editor') {
         dev.plugins.push(reactRefresh());
     }