add test:storybook

.github/workflows/deploy-storybook.yml

@@ -29,7 +29,7 @@ jobs:
 
       - run: pnpm install --frozen-lockfile
 
-      - run: pnpm build-storybook
+      - run: pnpm build:storybook
 
       - name: Configure AWS credentials
         uses: aws-actions/configure-aws-credentials@master

README.md

@@ -1,8 +1,12 @@
-# [stackline.isaac.works](https://stackline.isaac.works)
+# Stackline Takehome
+
+## Public URL: [stackline.isaac.works](https://stackline.isaac.works)
+
+## Storybook URL: [stackline-storybook.isaac.works](https://stackline-storybook.isaac.works)
 
 ## Deployment
 
-- This site is deployed to an s3 bucket using AWS CDK (./bin/cdk.ts)
+- This site is deployed to an s3 bucket using AWS CDK (./cdk/app.ts)
 - A CloudFront distribution is configured to serve the s3 bucket
 - A CNAME record is configured to point to the CloudFront distribution
 

bin/test-storybook.ts

@@ -0,0 +1,25 @@
+import { $ } from "zx";
+
+let exitCode = 0;
+
+// required dependency of test-storybook - only chromium is needed
+await $`pnpm dlx playwright install chromium --with-deps`;
+// build a fresh copy of storybook
+await $`pnpm build:storybook --quiet`;
+// serve the newly build storybook for testing
+const server = $`pnpm exec http-server storybook-static --port 6006 --silent`;
+// catch any errors to ensure server is closed properly
+try {
+  // wait for static server to be ready
+  await $`pnpm exec wait-on tcp:6006`;
+  // run the tests
+  await $`pnpm test-storybook`;
+} catch (e) {
+  console.error(e);
+  // exit with error code
+  exitCode = 1;
+}
+// kill the static server
+await server.kill();
+// exit process
+process.exit(exitCode);

cdk.json

@@ -1,5 +1,5 @@
 {
-  "app": "pnpm exec tsx bin/cdk.ts",
+  "app": "pnpm exec tsx cdk/app.ts",
   "context": {
     "@aws-cdk/aws-lambda:recognizeLayerVersion": true,
     "@aws-cdk/core:checkSecretUsage": true,

package.json

@@ -5,13 +5,14 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "storybook": "storybook dev -p 6006",
     "build": "vite build",
+    "build:storybook": "storybook build",
     "test": "pnpm run \"/^test:.*/\"",
     "test:tsc": "tsc",
     "test:lint": "eslint . --ext js,cjs,ts,tsx --report-unused-disable-directives --max-warnings 0",
     "test:unit": "vitest run",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
+    "test:storybook": "tsx bin/test-storybook.ts",
     "cdk": "cdk"
   },
   "dependencies": {
@@ -29,6 +30,7 @@
     "@storybook/react": "7.6.6",
     "@storybook/react-vite": "7.6.6",
     "@storybook/test": "7.6.6",
+    "@storybook/test-runner": "0.16.0",
     "@types/node": "20.10.5",
     "@types/react": "18.2.45",
     "@types/react-dom": "18.2.18",
@@ -43,6 +45,7 @@
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-react-refresh": "0.4.5",
     "eslint-plugin-storybook": "0.6.15",
+    "http-server": "14.1.1",
     "msw": "1",
     "msw-storybook-addon": "1.10.0",
     "postcss": "8.4.32",
@@ -53,7 +56,9 @@
     "tsx": "4.7.0",
     "typescript": "5.2",
     "vite": "4",
-    "vitest": "1.1.0"
+    "vitest": "1.1.0",
+    "wait-on": "7.2.0",
+    "zx": "7.2.3"
   },
   "msw": {
     "workerDirectory": ".storybook/public"