Test suite

.env.local.template

@@ -4,6 +4,12 @@ AUTH_KEYCLOAK_SECRET=""
 # NB: an auth secret can be generated and injected automatically with `npx auth`, see https://cli.authjs.dev
 AUTH_SECRET=""
 
-# NB: mocked user HIDRA ID from locally seeded database.
-# TODO: remove once keycloak / hidra are synced with database and mock data is no longer needed (https://linear.app/omnidev/issue/OMNI-147/replace-mock-user-id-flow-with-hidra-integration)
-NEXT_PUBLIC_MOCK_USER_HIDRA_ID=""
+# testing
+# username and password must be valid credentials for a user within the `test` realm
+TEST_USERNAME=""
+TEST_PASSWORD=""
+# whether to enable MSW for mocked network requests/responses
+ENABLE_MSW=""
+# mocked user ID from local, seeded database
+# TODO: remove once HIDRA is synced with database and mock data is no longer needed (https://linear.app/omnidev/issue/OMNI-147/replace-mock-user-id-flow-with-hidra-integration)
+NEXT_PUBLIC_MOCK_USER_ID=""

.env.test

@@ -0,0 +1,4 @@
+# https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#test-environment-variables
+AUTH_KEYCLOAK_ISSUER="https://hidra.omni.dev/realms/test"
+NEXT_PUBLIC_API_BASE_URL="http://127.0.0.1:4000/graphql"
+APP_ENV="test"

.github/workflows/test.yml

@@ -0,0 +1,60 @@
+name: Test 🧪
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  test_unit:
+    name: Run unit tests 🃏
+    timeout-minutes: 1
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v2
+      # - uses: ArtiomTr/jest-coverage-report-action@v2
+      #   with:
+      #     package-manager: bun
+      #     test-script: bun test:coverage
+      #     annotations: failed-tests
+      # TODO replace below with commented job above, blocked by Bun not yet supporting a JSON coverage reporter for the action to consume nor generate (similar: https://github.com/oven-sh/bun/issues/4099)
+      - name: Install dependencies
+        run: bun install
+      - name: Run unit tests
+        run: bun run test
+        env:
+          WALLETCONNECT_PROJECT_ID: ${{ vars.WALLETCONNECT_PROJECT_ID }}
+
+  test_e2e:
+    name: Run E2E tests 🗺️
+    timeout-minutes: 3
+    runs-on: ubuntu-latest
+    # TODO enable, disabled for now while E2E tests are simple. No need to shard early
+    # strategy:
+    # fail-fast: false
+    # shard tests across 4 nodes (https://playwright.dev/docs/test-sharding)
+    # matrix:
+    # shard: [1/4, 2/4, 3/4, 4/4]
+    steps:
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v2
+      - name: Install dependencies
+        run: bun install
+      - name: Install Playwright
+        run: bunx playwright install --with-deps
+      - name: Load test environment variables
+        uses: falti/[email protected]
+        with:
+          path: .env.test
+      - name: Run E2E tests
+        # TODO enable, disabled for now while E2E tests are simple. No need to shard early
+        # run: bun test:e2e --shard ${{ matrix.shard }}
+        run: bun test:e2e
+        env:
+          TEST_USERNAME: ${{ secrets.TEST_USERNAME }}
+          TEST_PASSWORD: ${{ secrets.TEST_PASSWORD }}
+          WALLETCONNECT_PROJECT_ID: ${{ vars.WALLETCONNECT_PROJECT_ID }}
+          AUTH_SECRET: ${{ secrets.AUTH_SECRET }}
+          AUTH_KEYCLOAK_SECRET: ${{ secrets.AUTH_KEYCLOAK_SECRET }}

.gitignore

@@ -13,10 +13,11 @@ coverage
 !.env
 !.env.development
 !.env.production
+!.env.test
 !.env.local.template
 
 # misc
 next-env.d.ts
 
 **/generated/*
-!**/generated/.gitignore
+!**/generated/.gitignore

Dockerfile

@@ -10,7 +10,7 @@ FROM base AS deps
 WORKDIR /app
 
 # install dependencies
-COPY package.json bun.lockb panda.config.ts ./
+COPY package.json bun.lock panda.config.ts ./
 # `apt` commands below are a workaround for blocked builds on some systems: https://github.com/oven-sh/bun/issues/9807#issuecomment-2218837172
 RUN apt update && apt install python3 python3-pip make g++ -y
 RUN bun install --frozen-lockfile
@@ -24,8 +24,6 @@ COPY . .
 # disable telemetry during build (https://nextjs.org/telemetry)
 ENV NEXT_TELEMETRY_DISABLED=1
 
-ARG WALLETCONNECT_PROJECT_ID
-
 RUN bun prepare
 RUN bun run build
 

README.md

@@ -4,7 +4,7 @@ Backfeed is an open-source feedback reporting platform.
 
 ## Local Development
 
-First, `cp .env.local.template` to `.env.local` and fill in the values.
+First, `cp .env.local.template .env.local` and fill in the values.
 
 ### Building and Running (Native)
 

bunfig.toml

@@ -0,0 +1,5 @@
+telemetry = false
+
+# https://bun.sh/docs/runtime/bunfig#test-runner
+[test]
+preload = "test/test.setup.ts"

knip.config.ts

@@ -14,17 +14,20 @@ const knipConfig: KnipConfig = {
     "src/app/{manifest,sitemap,robots}.ts",
     "src/app/**/{icon,apple-icon}.{ts,tsx}",
     "src/app/**/{opengraph,twitter}-image.{ts,tsx}",
+    "src/test/**/*.{ts,tsx}",
   ],
   // NB: files are reported as unused if they are in the set of project files, but not in the set of files resolved from the entry files. See: https://knip.dev/guides/configuring-project-files
   project: ["src/**/*.{ts,tsx}"],
   // NB: Modified from the default GraphQL Codegen configuration, see: https://knip.dev/reference/plugins/graphql-codegen
   "graphql-codegen": {
     config: ["package.json", "src/lib/graphql/codegen.config.ts"],
   },
-  ignore: ["panda.config.ts", "src/generated/**"],
+  ignore: ["panda.config.ts", "src/__mocks__/**", "src/generated/**"],
   ignoreDependencies: [
     // @omnidev/sigil peer dependency
     "@ark-ui/react",
+    // included by Next.js metapackage, used in Playwright config
+    "@next/env",
     // used by GraphQL Code Generator scripts
     "dotenv",
   ],

package.json

@@ -2,35 +2,52 @@
   "name": "backfeed",
   "private": true,
   "scripts": {
-    "dev": "rm -rf .next && concurrently --kill-others --names \"GRAPHQL-CODEGEN,PANDA,CLIENT\" -c \"bgBlue.bold,bgYellow.bold,bgMagenta.bold\" \"bun graphql:generate:watch\" \"bun panda --watch\" \"next dev\"",
+    "dev": "rm -rf .next && concurrently --kill-others --names \"GRAPHQL-CODEGEN,PANDA,CLIENT\" -c \"bgBlue.bold,bgYellow.bold,bgMagenta.bold\" \"bun graphql:generate:watch\" \"bun panda --watch\" \"bun dev:next\"",
+    "dev:next": "next dev",
     "build": "next build",
     "start": "next start",
     "format": "biome format --write src",
     "lint": "biome lint src",
+    "test": "bun test --env-file .env.local --env-file .env.test .test",
+    "test:e2e": "NODE_ENV=test bun run --env-file .env.local --env-file .env.test playwright test",
     "graphql:generate": "NODE_PATH=src/ dotenv -e .env.development -- graphql-codegen --config src/lib/graphql/codegen.config.ts",
     "graphql:generate:watch": "bun graphql:generate -w",
     "knip": "knip-bun --cache --tags=-knipignore",
     "prepare": "panda codegen && husky"
   },
+  "msw": {
+    "workerDirectory": ["public"]
+  },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
     "@graphql-codegen/add": "^5.0.3",
     "@graphql-codegen/cli": "^5.0.3",
+    "@graphql-codegen/import-types-preset": "^3.0.0",
     "@graphql-codegen/plugin-helpers": "^5.1.0",
     "@graphql-codegen/typescript": "^4.1.2",
     "@graphql-codegen/typescript-graphql-request": "^6.2.0",
+    "@graphql-codegen/typescript-msw": "^3.0.0",
     "@graphql-codegen/typescript-operations": "^4.4.0",
     "@graphql-codegen/typescript-react-query": "^6.1.0",
+    "@happy-dom/global-registrator": "^16.5.3",
     "@pandacss/dev": "^0.48.0",
-    "@types/node": "^20.11.19",
-    "@types/react": "^19.0.2",
+    "@playwright/test": "^1.49.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/bun": "^1.1.16",
+    "@types/ms": "^0.7.34",
+    "@types/node": "^22.10.5",
+    "@types/react": "^19.0.4",
     "@types/react-dom": "^19.0.2",
     "concurrently": "^8.2.2",
-    "dotenv": "^16.4.4",
+    "dotenv": "^16.4.7",
     "dotenv-cli": "^7.3.0",
     "husky": "^9.1.6",
-    "knip": "^5.37.1",
-    "typescript": "^5.6.3"
+    "knip": "^5.42.0",
+    "msw": "^2.7.0",
+    "next-router-mock": "^0.9.13",
+    "typescript": "^5.7.3"
   },
   "dependencies": {
     "@ark-ui/react": "^4.4.3",
@@ -42,6 +59,7 @@
     "dayjs": "^1.11.10",
     "graphql": "^16.10.0",
     "graphql-request": "^7.1.2",
+    "ms": "^2.1.3",
     "next": "^15.0.3",
     "next-auth": "^5.0.0-beta.25",
     "next-themes": "^0.4.3",
@@ -61,6 +79,7 @@
     "bufferutil",
     "esbuild",
     "keccak",
+    "msw",
     "sharp",
     "utf-8-validate"
   ]

playwright.config.ts

@@ -0,0 +1,115 @@
+import { loadEnvConfig } from "@next/env";
+import { defineConfig, devices } from "@playwright/test";
+import ms from "ms";
+
+// import type {
+// PlaywrightTestOptions,
+// PlaywrightWorkerOptions,
+// Project,
+// } from "@playwright/test";
+
+// TODO use Bun runtime instead of Node.js (pending https://github.com/oven-sh/bun/issues/8222). After this is resolved, consider using Playwright for running all tests including unit tests (see https://pkerschbaum.com/blog/using-playwright-to-run-unit-tests)
+
+// type PlaywrightDevices = Project<
+//   PlaywrightTestOptions,
+//   PlaywrightWorkerOptions
+// >;
+
+// load environment variables (see https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#loading-environment-variables-with-nextenv)
+loadEnvConfig(process.cwd());
+
+/**
+ * Desktop devices/viewports.
+ */
+// TODO enable desktop viewports (https://linear.app/omnidev/issue/OMNI-156/enable-more-playwright-devices)
+// const desktopDevices: PlaywrightDevices[] = [
+//   {
+//     name: "🖥️  Chromium",
+//     use: {
+//       ...devices["Desktop Chrome"],
+//     },
+//   },
+//   {
+//     name: "🖥️  Firefox",
+//     use: {
+//       ...devices["Desktop Firefox"],
+//     },
+//   },
+
+//   {
+//     name: "🖥️  Safari (Webkit)",
+//     use: {
+//       ...devices["Desktop Safari"],
+//     },
+//   },
+//   {
+//     name: "🖥️  Microsoft Edge",
+//     use: {
+//       channel: "msedge",
+//     },
+//   },
+// ];
+
+/**
+ * Mobile devices/viewports.
+ */
+// TODO enable mobile viewports (https://linear.app/omnidev/issue/OMNI-156/enable-more-playwright-devices)
+// const mobileDevices: PlaywrightDevices[] = [
+//   {
+//     name: "📱  Chrome",
+//     use: {
+//       ...devices["Pixel 5"],
+//     },
+//   },
+//   {
+//     name: "📱  Safari",
+//     use: devices["iPhone 12"],
+//   },
+// ];
+
+/**
+ * Playwright configuration.
+ * @see https://playwright.dev/docs/test-configuration
+ */
+const playwrightConfig = defineConfig({
+  testDir: "src/__tests__",
+  // maximum single-test timeout
+  timeout: ms("3m"),
+  expect: {
+    timeout: ms("5s"),
+  },
+  // run tests within the same file in parallel
+  fullyParallel: true,
+  // TODO enable more devices than default (https://linear.app/omnidev/issue/OMNI-156/enable-more-playwright-devices)
+  // projects: [...desktopDevices, ...mobileDevices],
+  // test output reporter
+  reporter: process.env.CI
+    ? // blob is used in CI to merge sharded test results (https://playwright.dev/docs/test-reporters#blob-reporter)
+      "blob"
+    : [["html", { outputFolder: "src/test/generated/report" }]],
+  // fail build in CI if `test.only` is left in source code
+  forbidOnly: !!process.env.CI,
+  // number of retry attempts on test failure
+  retries: process.env.CI ? 2 : undefined,
+  // use single worker to mitigate flakiness from parallel tests. Note that this effectively disables parallelization across test files. See https://playwright.dev/docs/test-parallel#worker-processes
+  workers: 1,
+  // artifact output location (screenshots, videos, traces)
+  outputDir: "src/generated/test-artifacts",
+  // run dev server before starting the tests
+  webServer: {
+    // NB: no need to run GraphQL code generation, so just the Next.js server is started here
+    command: "bun dev:next",
+    port: (process.env.PORT as unknown as number) || 3000,
+    timeout: ms("2m"),
+    // do not use an existing server on CI
+    reuseExistingServer: !process.env.CI,
+  },
+  use: {
+    headless: true,
+    baseURL: process.env.PLAYWRIGHT_TEST_BASE_URL || "http://localhost:3000",
+    // retry a test with tracing if it is failing (allows analysis of DOM, console logs, network traffic, etc.)
+    trace: "retry-with-trace",
+  },
+});
+
+export default playwrightConfig;