Merge pull request #671 from thepolicylab-projectportals/test/add-sto…

…rybook-tests-rebased

test: add automated tests using storybook

.github/workflows/test.yml

@@ -13,5 +13,28 @@ jobs:
         with:
           node-version-file: '.nvmrc'
           cache: 'yarn'
-      - run: yarn install --immutable
-      - run: yarn test
+      - name: Install dependencies
+        run: yarn install --immutable
+      - name: Run tests
+        run: yarn test
+  interaction-and-accessibility:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
+      - name: Install dependencies
+        run: yarn install --immutable
+      - name: Install Playwright Browsers
+        run: yarn workspace storybook playwright install
+      - name: Build Storybook
+        run: yarn workspace storybook build --quiet
+      - name: Serve Storybook and run tests
+        run: |
+          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+            "npx http-server packages/storybook/storybook-static --port 6006 --silent" \
+            "npx wait-on tcp:127.0.0.1:6006 && yarn workspace storybook test-storybook"

.gitignore

@@ -19,3 +19,8 @@ artifacts
 .env
 
 pa11y-results.json
+/test-results/
+/playwright-report/
+/playwright/.cache/
+
+storybook-static/

package.json

@@ -14,6 +14,7 @@
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.6",
+    "@types/node": "^20.8.4",
     "babel-jest": "^29.7.0",
     "babel-preset-gatsby": "^3.12.1",
     "identity-obj-proxy": "^3.0.0",

packages/gatsby-theme-project-portal/src/components/Accordion.stories.tsx

@@ -31,3 +31,11 @@ export const NoTitle: Story = {
 export const NoText: Story = {
   args: { title: "A title", text: "" },
 }
+
+export const EmptyString: Story = {
+  args: { title: "", text: "" },
+}
+
+export const Nulls: Story = {
+  args: { title: null, text: null },
+}

packages/storybook/package.json

@@ -6,9 +6,11 @@
     "build": "storybook build"
   },
   "devDependencies": {
+    "@babel/core": "^7.23.0",
     "@babel/preset-env": "^7.23.2",
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.23.2",
+    "@playwright/test": "^1.38.1",
     "@storybook/addon-a11y": "^7.5.1",
     "@storybook/addon-essentials": "^7.5.1",
     "@storybook/addon-interactions": "^7.5.1",
@@ -17,8 +19,10 @@
     "@storybook/blocks": "^7.5.1",
     "@storybook/react": "^7.5.1",
     "@storybook/react-webpack5": "^7.5.1",
+    "@storybook/test-runner": "^0.13.0",
     "@storybook/testing-library": "^0.2.2",
     "autoprefixer": "^10.4.16",
+    "playwright": "^1.38.1",
     "postcss": "^8.4.31",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",