Setup Playwright tests, misc fixes (#4)

Note that the diff here is a pain because I had to do a bulk `chmod` due
to a playwright setup command messing with a bunch of file permissions,
and couldn't find a way to reset the permissions to their defaults
(pre-playwright-command) without going through one file at a time.

- pull in various improvements from
krishnanlab/geneplexus-app-v2#37 and
krishnanlab/geneplexus-app-v2#38
- update test workflow: fix trigger, update action versions, update
debugging steps, add e2e playwright testing with caching
- setup playwright for e2e and accessibility testing
- add status indicator to analysis card component
- enable msw network request mocking
- don't allow empty "lookup analysis"
- install and setup axe-core (library that powers chrome dev tools'
lighthouse accessibility check)
- check all major pages of app (so far) for accessibility issues
- add basic e2e test for demonstration

.github/workflows/test-frontend.yaml

@@ -3,28 +3,28 @@ name: Test Frontend
 on:
   pull_request:
     paths:
-      - "frontend/**"
-      - "package.json"
+      - "app/**"
 
 defaults:
   run:
-    working-directory: ./frontend
+    working-directory: ./app
 
 jobs:
   # test that app can build without issues
   test-build:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Set up Bun
         uses: oven-sh/setup-bun@v1
 
       - name: Install packages
         run: bunx msw init && bun install
 
-      - if: runner.debug == '1'
+      - name: SSH debug
+        if: runner.debug == '1'
         uses: mxschmitt/action-tmate@v3
 
       - name: Run test
@@ -35,15 +35,16 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Set up Bun
         uses: oven-sh/setup-bun@v1
 
       - name: Install packages
         run: bunx msw init && bun install
 
-      - if: runner.debug == '1'
+      - name: SSH debug
+        if: runner.debug == '1'
         uses: mxschmitt/action-tmate@v3
 
       - name: Run test
@@ -54,16 +55,67 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Set up Bun
         uses: oven-sh/setup-bun@v1
 
       - name: Install packages
         run: bunx msw init && bun install
 
-      - if: runner.debug == '1'
+      - name: SSH debug
+        if: runner.debug == '1'
         uses: mxschmitt/action-tmate@v3
 
       - name: Run test
         run: bun run test:lint
+
+  # run end to end integration tests
+  test-e2e:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@v1
+
+      - name: Install packages
+        run: bun install
+
+      - name: SSH debug
+        if: runner.debug == '1'
+        uses: mxschmitt/action-tmate@v3
+
+      # https://github.com/microsoft/playwright/issues/7249
+
+      - name: Get Playwright version
+        run: |
+          PLAYWRIGHT_VERSION=$(npm ls @playwright/test | grep @playwright | sed 's/.*@//')
+          echo "Playwright Version: $PLAYWRIGHT_VERSION"
+          echo "PLAYWRIGHT_VERSION=$PLAYWRIGHT_VERSION" >> $GITHUB_ENV
+
+      - name: Cache Playwright
+        id: cache-playwright
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-${{ env.PLAYWRIGHT_VERSION }}
+
+      - name: Install Playwright with dependencies
+        if: steps.cache-playwright.outputs.cache-hit != 'true'
+        run: npx playwright install --with-deps
+
+      - name: Install Playwright's dependencies
+        if: steps.cache-playwright.outputs.cache-hit == 'true'
+        run: npx playwright install-deps
+
+      - name: Run test
+        run: bun run test:e2e
+
+      - name: Upload test report
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: ./app/playwright-report
+          retention-days: 30

.gitignore

@@ -0,0 +1 @@
+.DS_Store

app/.gitignore

@@ -25,3 +25,8 @@ dist-ssr
 *.sw?
 
 mockServiceWorker.js
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+tsconfig.tsbuildinfo

app/.prettierignore

@@ -1,3 +1,2 @@
-node_modules
 dist
 mockServiceWorker.js

app/.prettierrc

@@ -13,6 +13,7 @@
     "^./",
     "^../"
   ],
+  "importOrderParserPlugins": ["typescript", "jsx", "importAssertions"],
   "cssDeclarationSorterOrder": "smacss",
   "jsdocCapitalizeDescription": false,
   "htmlWhitespaceSensitivity": "strict"

app/.vscode/extensions.json

@@ -1,17 +1,10 @@
 {
   "recommendations": [
     "steoates.autoimport",
+    "christian-kohler.path-intellisense",
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
-    "pflannery.vscode-versionlens",
     "yoavbls.pretty-ts-errors",
     "streetsidesoftware.code-spell-checker"
-    // "eamodio.gitlens",
-    // "bennycode.sort-everything",
-    // "ms-vscode.live-server",
-    // "christian-kohler.path-intellisense",
-    // "Tyriar.sort-lines",
-    // "nmsmith89.incrementor",
-    // "janisdd.vscode-edit-csv",
   ]
 }

app/README.md

@@ -9,7 +9,8 @@ This project was scaffolded using Vite, and has the following key features:
 
 ## Requirements
 
-- [Bun](https://bun.sh/)
+- [Node](https://nodejs.org/) v22+
+- [Bun](https://bun.sh/) v1.1+
 
 ## Commands
 
@@ -60,14 +61,14 @@ Anything else 👇 is abstraction or convenience built on top of them, and must
 
 - **[Node](https://nodejs.org/en/)**.
   An environment for running JavaScript locally instead of in a browser.
-  Has APIs that browsers cannot have, such as filesystem access, and lacks some of the APIs browsers do have, such as functions to manipulate the DOM (there is no DOM or browser).
+  Has APIs that browsers cannot have, such as filesystem access, and lacks some of the APIs browsers do have, such as functions to manipulate the DOM (because there is no browser).
   That is, not all Node code can run in the browser, and vice-versa.
   Vite and other packages that do things locally are ultimately intended to run on top of this.
 
 - **[Bun](https://bun.sh/)**.
-  A very new tool that aims to be an all-in-one replacement for Node, Yarn, Vite, and many other tools.
+  A new tool that aims to be an all-in-one replacement for Node, Yarn, Vite, and many other tools.
   Since it is so new, in this project will only use it as a runtime (replacement for Node) and package manager (replacement for Yarn).
-  If you encounter issues, install [Node](https://nodejs.org/en) (`v18` or later) and try running the above commands with `npm` instead of `bun`.
+  [Node is still used under-the-hood by some packages](https://bun.sh/docs/cli/run#bun), so installing Node is still required.
   Do not use functionality that is Bun-only (not "backwards-compatible" with Node).
 
 - **[ESLint](https://eslint.org/)**.

app/eslint.config.mjs

@@ -0,0 +1,49 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import prettier from "eslint-plugin-prettier";
+import reactRefresh from "eslint-plugin-react-refresh";
+import globals from "globals";
+import { fixupConfigRules } from "@eslint/compat";
+import { FlatCompat } from "@eslint/eslintrc";
+import js from "@eslint/js";
+import tsParser from "@typescript-eslint/parser";
+
+const compat = new FlatCompat({
+  baseDirectory: path.dirname(fileURLToPath(import.meta.url)),
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default [
+  {
+    ignores: ["dist", "**/mockServiceWorker.js"],
+  },
+  ...fixupConfigRules(
+    compat.extends(
+      "eslint:recommended",
+      "plugin:@typescript-eslint/recommended",
+      "plugin:@typescript-eslint/stylistic",
+      "plugin:react-hooks/recommended",
+      "plugin:jsx-a11y/recommended",
+    ),
+  ),
+  {
+    plugins: {
+      "react-refresh": reactRefresh,
+      prettier,
+    },
+    languageOptions: {
+      globals: globals.browser,
+      parser: tsParser,
+    },
+    rules: {
+      "prettier/prettier": "warn",
+      "prefer-const": ["error", { destructuring: "all" }],
+      "@typescript-eslint/no-unused-vars": ["warn", { caughtErrors: "none" }],
+      "@typescript-eslint/consistent-type-definitions": ["error", "type"],
+      "@typescript-eslint/consistent-type-imports": "error",
+      "react-refresh/only-export-components": ["off"],
+      "jsx-a11y/no-noninteractive-tabindex": ["error", { tags: ["pre"] }],
+    },
+  },
+];

app/fixtures/analyses.json

@@ -13,7 +13,7 @@
     "type": "blast",
     "info": "Dolor amet",
     "started": "2022-11-28T23:19:34.390Z",
-    "status": { "type": "complete", "info": "Took 3:14:15" }
+    "status": { "type": "complete", "info": "Took 3 hr 14 min" }
   },
   {
     "id": "g7h8i9",