test: add cda-gui browser testing

.github/workflows/web-gui-checks.yml

@@ -1,4 +1,4 @@
-name: CDA Web GUI NPM Audit (CVE)
+name: CDA Web GUI Checks
 
 on:
   push:
@@ -7,7 +7,7 @@ on:
     pull_request:
       branches:
         - develop
-    # Only run when relevant files change (i.e. packages are bumped into new NPM versions)
+    # Run the audit and browser tests when the GUI or this workflow changes.
     paths:
       - "cda-gui/**"
       - ".github/workflows/web-gui-*.yml"
@@ -25,8 +25,8 @@ jobs:
       - name: install node for cda-gui audit
         uses: actions/setup-node@v4
         with:
-          node-version: '22'
-          cache: 'npm'
+          node-version: "22"
+          cache: "npm"
           cache-dependency-path: cda-gui/package-lock.json
 
       - name: run cda-gui audit for critical CVE
@@ -35,3 +35,11 @@ jobs:
         run: |
           HUSKY=0 npm ci
           npm audit --audit-level=critical
+
+      - name: install Chromium for UI tests
+        working-directory: ./cda-gui
+        run: npx --no-install playwright install --with-deps chromium
+
+      - name: run Storybook UI tests
+        working-directory: ./cda-gui
+        run: npm run test-storybook -- --run

cda-gui/.eslintrc.cjs

@@ -7,7 +7,7 @@ module.exports = {
     "plugin:react/jsx-runtime",
     "plugin:react-hooks/recommended",
   ],
-  ignorePatterns: ["build", "dist", ".eslintrc.cjs"],
+  ignorePatterns: ["build", "dist", "storybook-static", ".eslintrc.cjs"],
   parserOptions: { ecmaVersion: "latest", sourceType: "module" },
   settings: { react: { version: "18.2" } },
   plugins: ["react-refresh"],

cda-gui/.gitignore

@@ -10,6 +10,7 @@ lerna-debug.log*
 node_modules
 dist
 dist-ssr
+storybook-static
 *.local
 
 # Editor directories and files

cda-gui/.prettierignore

@@ -0,0 +1,2 @@
+dist
+storybook-static

cda-gui/.storybook/main.js

@@ -0,0 +1,14 @@
+/** @type {import('@storybook/react-vite').StorybookConfig} */
+const config = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  staticDirs: ["../public"],
+  addons: [
+    "@chromatic-com/storybook",
+    "@storybook/addon-vitest",
+    "@storybook/addon-a11y",
+    "@storybook/addon-docs",
+  ],
+  framework: "@storybook/react-vite",
+};
+
+export default config;

cda-gui/.storybook/preview.jsx

@@ -0,0 +1,27 @@
+import { MemoryRouter } from "react-router-dom";
+
+import "@usace/groundwork/dist/groundwork.css";
+import "../src/css/index.css";
+
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    a11y: {
+      test: "todo",
+    },
+  },
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+};
+
+export default preview;

cda-gui/README.md

@@ -21,6 +21,38 @@ To build the project:
 
 To see the available scripts for this project, including how to run and deploy, look at the `package.json` file.
 
+## UI Tests and Development
+
+The UI tests use Storybook, Vitest, and Playwright. Stories provide an isolated place to
+render components, and their `play` functions run as browser tests without requiring a
+live CDA API.
+
+Install the Chromium browser used by the test runner once after installing dependencies:
+
+```sh
+npx playwright install chromium
+```
+
+To open Storybook and see the stories and their interaction results:
+
+```sh
+npm run storybook
+```
+
+Then open http://localhost:6006 and select **Pages > Home > Landing Page**.
+
+To run the same stories as headless browser tests:
+
+```sh
+npm run test-storybook -- --run
+```
+
+To verify that the static Storybook site can be built:
+
+```shell
+npm run build-storybook
+```
+
 ## Formatting
 
 Formatting is done with [husky](https://typicode.github.io/husky/) and styled using [prettier](https://prettier.io/docs/). Husky requires a minimum Git version of 2.9