test: replace story screenshots with DOM snapshots

typescript/.dockerignore

@@ -0,0 +1,16 @@
+node_modules
+npm-debug.log*
+.git
+.gitignore
+README.md
+.env
+.nyc_output
+coverage
+.nyc_output
+.cache
+dist
+.DS_Store
+*.log
+.vscode
+.idea
+storybook-static

typescript/.storybook/test-runner.ts

@@ -1,13 +1,16 @@
-// @ts-expect-error TS7016
 import { toMatchImageSnapshot } from "jest-image-snapshot";
 
-import { getStoryContext, type TestRunnerConfig } from "@storybook/test-runner";
+import type { Page } from "@playwright/test";
+import {
+    getStoryContext,
+    type TestContext,
+    type TestRunnerConfig,
+} from "@storybook/test-runner";
 
 // https://github.com/mapbox/pixelmatch#pixelmatchimg1-img2-output-width-height-options
 const customDiffConfig = {};
 
-// @ts-expect-error TS7006
-const screenshotTest = async (page, context) => {
+const screenshotTest = async (page: Page, context: TestContext) => {
     let previousScreenshot: Buffer = Buffer.from("");
 
     let stable = false;
@@ -27,7 +30,6 @@ const screenshotTest = async (page, context) => {
         }
     }
 
-    // @ts-expect-error TS2551
     expect(previousScreenshot).toMatchImageSnapshot({
         customSnapshotIdentifier: context.id,
         // https://www.npmjs.com/package/jest-image-snapshot/v/4.0.2#-api
@@ -38,6 +40,12 @@ const screenshotTest = async (page, context) => {
     });
 };
 
+const domSnapshotTest = async (page: Page) => {
+    const elementHandler = await page.$("#storybook-root");
+    const innerHTML = elementHandler ? await elementHandler.innerHTML() : "";
+    expect(innerHTML).toMatchSnapshot();
+};
+
 const config: TestRunnerConfig = {
     setup() {
         jest.retryTimes(2);
@@ -55,6 +63,11 @@ const config: TestRunnerConfig = {
         if (!storyContext.tags.includes("no-screenshot-test")) {
             await screenshotTest(page, context);
         }
+
+        // Run DOM snapshot test unless no-dom-test is specified
+        if (!storyContext.tags.includes("no-dom-test")) {
+            await domSnapshotTest(page);
+        }
     },
 };
 

typescript/README.md

@@ -76,6 +76,6 @@ Test snapshots can be updated using `npx nx run-many --target test_correctness -
 
 Storybook test-runner is used to smoke test all stories in each package.
 
-Tests can be run, given a running (`npm run storybook`) or static storybook, using `npm run docker:build && npm run docker:storybook:test`.
+Tests can be run using `npm run compose:storybook:test`
 
-Test snapshots can be updated using `npm run docker:build && npm run docker:storybook:test:update`.
+Test snapshots can be updated using `npm run compose:storybook:test:update`

typescript/compose.yml

@@ -0,0 +1,22 @@
+services:
+  storybook:
+    build:
+      context: ..
+      dockerfile: typescript/config/docker/storybook/Dockerfile
+    ports:
+      - "6006:6006"
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:6006"]
+
+  test-storybook:
+    build:
+      context: .
+      dockerfile: config/docker/test_runner/Dockerfile
+    depends_on:
+      storybook:
+        condition: service_healthy
+    volumes:
+      - ./.storybook:/home/pwuser/test/.storybook:ro
+      - ./packages:/home/pwuser/test/packages
+    environment:
+      TARGET_URL: "http://storybook:6006/"

typescript/config/docker/storybook/Dockerfile

@@ -0,0 +1,34 @@
+FROM node:22-alpine
+
+# Install curl for health checks and http-server globally in one layer
+RUN apk add --no-cache curl && \
+    npm install -g http-server
+
+WORKDIR /app/typescript
+
+# Copy package files first for better caching
+COPY typescript/package.json typescript/package-lock.json ./
+
+# Install dependencies early to cache this expensive step
+RUN npm ci CYPRESS_INSTALL_BINARY=0 --ignore-scripts --workspace-root
+
+# Copy configuration files
+COPY typescript/tsconfig.json typescript/nx.json ./
+
+COPY typescript/.storybook ./.storybook
+COPY example-data ../example-data
+
+# Copy source code (these change more frequently)
+COPY typescript/packages ./packages
+
+# Install remaining workspace dependencies
+RUN npm ci CYPRESS_INSTALL_BINARY=0 --ignore-scripts
+
+# Build storybook statically
+RUN npm run build-storybook
+
+# Expose port 6006
+EXPOSE 6006
+
+# Serve the built storybook with http-server
+CMD ["http-server", "storybook-static", "--port", "6006", "-a", "0.0.0.0"]

typescript/config/docker/test_runner/Dockerfile

@@ -0,0 +1,14 @@
+FROM mcr.microsoft.com/playwright:v1.39.0-jammy
+
+RUN mkdir -p /home/pwuser/test && chown -R pwuser:pwuser /home/pwuser/test
+WORKDIR /home/pwuser/test
+
+COPY package.json ./
+COPY package-lock.json ./
+
+RUN npm ci
+
+COPY .storybook ./.storybook
+
+# Create entrypoint that accepts additional arguments
+ENTRYPOINT ["npm", "run", "storybook:test"]

typescript/package.json

@@ -23,10 +23,12 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "storybook:test": "test-storybook --no-index-json",
-    "docker:build": "docker build --tag wsc_story_test --file Dockerfile.test .",
+    "docker:build": "docker build --tag wsc_story_test --file config/docker/test_runner/Dockerfile .",
     "docker:storybook:test": "cross-env-shell PWD=$PWD npm run docker:storybook:test:docker:core -- -it --rm --mount type=bind,source=${PWD}/packages,target=/test/packages --network=host wsc_story_test",
     "docker:storybook:test:update": "npm run docker:storybook:test -- npm run storybook:test -- --url http://host.docker.internal:6006/ --no-index-json --updateSnapshot",
     "docker:storybook:test:docker:core": "docker run",
+    "compose:storybook:test": "docker-compose run --build test-storybook",
+    "compose:storybook:test:update": "docker-compose run --build test-storybook -- --updateSnapshot",
     "cy:run": "npx cypress run -b chrome --component --headed",
     "postpack": "npm run tidy-up",
     "git:hooks:enable": "cd .. && husky install",
@@ -50,6 +52,7 @@
     "@mui/material": "^5.15.15",
     "@mui/system": "^5.15.14",
     "@nx/jest": "^21.5.3",
+    "@playwright/test": "1.39",
     "@storybook/addon-essentials": "^8.6.14",
     "@storybook/addon-interactions": "^8.6.14",
     "@storybook/addon-links": "^8.6.14",
@@ -69,6 +72,7 @@
     "@types/d3-interpolate": "^3.0.4",
     "@types/geojson": "^7946.0.14",
     "@types/jest": "^29.5.12",
+    "@types/jest-image-snapshot": "^6.4.0",
     "@types/lodash": "^4.17.5",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",

typescript/packages/group-tree-plot/src/storybook/GroupTreePlot.stories.tsx

@@ -1,6 +1,6 @@
-import React from "react";
-import _ from "lodash";
 import type { Meta, StoryObj } from "@storybook/react";
+import _ from "lodash";
+import React from "react";
 
 import { GroupTreePlot, type GroupTreePlotProps } from "../GroupTreePlot";
 
@@ -34,6 +34,7 @@ const stories: Meta<GroupTreePlotProps> = {
                 "When initially rendering the tree, automatically collapse all nodes at or below this depth",
         },
     },
+    tags: ["no-dom-test"],
 };
 export default stories;
 

typescript/packages/subsurface-viewer/src/storybook/components/DistanceScale.stories.tsx

@@ -5,6 +5,7 @@ import { DistanceScale } from "../../components/DistanceScale";
 const stories: Meta = {
     component: DistanceScale,
     title: "SubsurfaceViewer / Components / DistanceScale",
+    tags: ["no-screenshot-test"],
 };
 export default stories;
 

typescript/packages/subsurface-viewer/src/storybook/components/InfoCard.stories.tsx

@@ -7,6 +7,7 @@ import { type LayerPickInfo } from "../../layers/utils/layerTools";
 const stories: Meta = {
     component: InfoCard,
     title: "SubsurfaceViewer/Components/InfoCard",
+    tags: ["no-screenshot-test"],
 };
 export default stories;
 

typescript/packages/subsurface-viewer/src/storybook/components/__snapshots__/DistanceScale.stories.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SubsurfaceViewer / Components / DistanceScale DarkMode smoke-test 1`] = `
+<div style="position: absolute; color: white;">
+  <label style="color: white;">
+    800m
+  </label>
+  <div style="width: 100px; height: 4px; border-top: none; border-right: 2px solid; border-bottom: 2px solid; border-left: 2px solid; border-image: initial; display: inline-block; margin-left: 3px;">
+  </div>
+</div>
+`;
+
+exports[`SubsurfaceViewer / Components / DistanceScale LightMode smoke-test 1`] = `
+<div style="position: absolute;">
+  <label>
+    800m
+  </label>
+  <div style="width: 100px; height: 4px; border-top: none; border-right: 2px solid; border-bottom: 2px solid; border-left: 2px solid; border-image: initial; display: inline-block; margin-left: 3px;">
+  </div>
+</div>
+`;