test: replace story screenshots with DOM snapshots (#2819)

Fixes #2817. Part 2 of 2 — follows #2818, and is now rebased onto
master.

Stories that are not rendered in a webgl canvas are now verified with
DOM snapshots instead of, or in addition to, image snapshots:

- The storybook test-runner snapshots the `#storybook-root` inner HTML
unless a story is tagged `no-dom-test`.
- Webgl based stories are tagged `no-dom-test`, since their canvas
content is not represented in the DOM.
- Pure DOM stories are tagged `no-screenshot-test`, and their image
snapshots are removed (12 PNGs).
- `.storybook/test-runner.ts` is now fully typed, so its
`@ts-expect-error` directives and its `tsconfig.typecheck.json`
exclusion are removed.

This is a port of #2619 onto current master. Stories added since that PR
was written (`WellsLayerSubs`, `PolylineGroupLayer`,
`GroupTreePlot.interactive`) are tagged consistently with their
siblings.

### Verification

Snapshots were generated with `npm run compose:storybook:test:update`. A
full `npm run compose:storybook:test` run passes all 187 DOM snapshots,
and a targeted re-run of the 12 DOM-snapshot suites passes 23/23
snapshots, confirming the DOM output is deterministic against the static
storybook build.

Note: the `WellLogViewer` / `SyncLogViewer` image snapshots differ in my
local environment, and Chromium intermittently fails with
`page.screenshot: Protocol error (Unable to capture screenshot)`. Both
reproduce on the base branch without these changes.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: hkfb

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/package-lock.json

@@ -60,6 +60,7 @@
     "@mui/material": "^7.3.8",
     "@mui/system": "^7.3.8",
     "@nx/jest": "^22.7.5",
+    "@playwright/test": "^1.60.0",
     "@storybook/addon-docs": "^9.1.20",
     "@storybook/addon-links": "^9.1.20",
     "@storybook/addon-webpack5-compiler-babel": "^4.0.1",
@@ -75,6 +76,7 @@
     "@types/d3-interpolate": "^3.0.4",
     "@types/geojson": "^7946.0.14",
     "@types/jest": "^29.5.12",
+    "@types/jest-image-snapshot": "^6.4.1",
     "@types/lodash": "^4.17.5",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",

typescript/package.json

@@ -13,7 +13,7 @@ import {
 const stories: Meta = {
     component: GroupTreePlot,
     title: "GroupTreePlot/Interactive Demo",
-    tags: ["autodocs"],
+    tags: ["autodocs", "no-dom-test"],
 };
 export default stories;
 

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

@@ -14,6 +14,7 @@ import {
 const stories: Meta<GroupTreePlotProps> = {
     component: GroupTreePlot,
     title: "GroupTreePlot/Demo",
+    tags: ["no-dom-test"],
     argTypes: {
         selectedDateTime: {
             description:

typescript/packages/group-tree-plot/src/storybook/GroupTreePlot.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/DistanceScale.stories.tsx

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