added snapshot testing

.github/workflows/storybook-tests.yml

@@ -0,0 +1,22 @@
+# .github/workflows/storybook-tests.yml
+
+name: Storybook Tests
+on: deployment_status
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    if: github.event.deployment_status.state == 'success'
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+      - name: Install dependencies
+        run: yarn
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+      - name: Run Storybook tests
+        run: yarn test-storybook
+        env:
+          TARGET_URL: '${{ github.event.deployment_status.target_url }}'

.nvmrc

@@ -0,0 +1 @@
+v18.12.1

.storybook/test-runner.ts

@@ -0,0 +1,16 @@
+// .storybook/test-runner.ts
+
+// pk: https://storybook.js.org/docs/web-components/writing-tests/snapshot-testing
+
+import type { TestRunnerConfig } from '@storybook/test-runner';
+
+const config: TestRunnerConfig = {
+  async postRender(page, context) {
+    // the #storybook-root element wraps each story
+    const elementHandler = await page.$('#storybook-root');
+    const innerHTML = await elementHandler?.innerHTML();
+    expect(innerHTML).toMatchSnapshot();
+  }
+};
+
+export default config;

.test-runner-jest.config.js

@@ -0,0 +1,14 @@
+// ./test-runner-jest.config.js
+
+
+// PK: https://storybook.js.org/docs/web-components/writing-tests/snapshot-testing
+
+const path = require('path');
+
+module.exports = {
+    resolveSnapshotPath: (testPath, snapshotExtension) =>
+        path.join(process.cwd(), '__snapshots__', path.basename(testPath) + snapshotExtension),
+    resolveTestPath: (snapshotFilePath, snapshotExtension) =>
+        path.join(process.env.TEST_ROOT, path.basename(snapshotFilePath, snapshotExtension)),
+    testPathForConsistencyCheck: path.join(process.env.TEST_ROOT, 'example.test.js'),
+};