Add e2e test

.github/workflows/ci-frontend-a11y.yml

@@ -36,12 +36,6 @@ jobs:
       - name: Create screenshots directory
         run: mkdir -p screenshots-output
 
-      - name: Build project
-        run: npm run build
-
-      - name: Start server and log output
-        run: npm run start &
-
       - name: Start API Server for search results
         run: |
           cd ../api
@@ -52,18 +46,20 @@ jobs:
           ../api/bin/wait-for-api.sh
         shell: bash
 
+      - name: Build Site
+        run: |
+          cat .env.development >> .env.local
+          npm run build
+
+      - name: Run Server
+        run:  npm run start &
+
       - name: Wait for frontend to be ready
         run: |
           # Ensure the server wait script is executable
           chmod +x ./bin/wait-for-frontend.sh
           ./bin/wait-for-frontend.sh
 
-      - name: Run curl
-        run: |
-          curl -I http://localhost:3000/opportunity/1
-          curl -I http://localhost:3000/opportunity/1231212
-          curl http://localhost:3000/search | grep "/opportunity/*"
-
       - name: Run pa11y-ci
         run: |
           set -e # Ensure the script fails if any command fails

frontend/at-test.yml

@@ -0,0 +1,38 @@
+config:
+  target: http://localhost:3000
+  phases:
+    - arrivalCount: 10
+      duration: 30
+  payload:
+    - path: "tests/artillery/{{ $environment}}-opportunities.csv"
+      fields:
+        - opp_id
+      skipHeader: true
+      name: opps
+    - path: "tests/artillery/{{ $environment}}-search.csv"
+      fields:
+        - query
+        - page
+        - status
+        - agency
+      skipHeader: true
+      name: opps
+scenarios:
+  - name: opportunities
+    flow:
+      - loop:
+          - get:
+              url: "/opportunity/{{ opp_id }}"
+          - think: 1
+        count: 10
+        over: opps
+        log: "/opportunity/{{ opp_id }}"
+  - name: search
+    flow:
+      - loop:
+          - get:
+              url: "/search?query={{ query }}&page={{ page }}&status={{ status }}"
+          - think: 1
+        count: 10
+        over: opps
+        log: "/opportunity/{{ opp_id }}"

frontend/src/app/[locale]/opportunity/[id]/page.tsx

@@ -19,7 +19,7 @@ import OpportunityIntro from "src/components/opportunity/OpportunityIntro";
 import OpportunityLink from "src/components/opportunity/OpportunityLink";
 import OpportunityStatusWidget from "src/components/opportunity/OpportunityStatusWidget";
 
-export const revalidate = 600 // invalidate ten minutes
+export const revalidate = 600; // invalidate ten minutes
 
 export async function generateMetadata({ params }: { params: { id: string } }) {
   const t = await getTranslations({ locale: "en" });

frontend/tests/e2e/opportunity.spec.ts

@@ -0,0 +1,18 @@
+/* eslint-disable testing-library/prefer-screen-queries */
+import { expect, test } from "@playwright/test";
+
+test.beforeEach(async ({ page }) => {
+  await page.goto("/opportunity/1");
+});
+
+test.afterEach(async ({ context }) => {
+  await context.close();
+});
+
+test("has title", async ({ page }) => {
+  await expect(page).toHaveTitle(/^Opportunity Listing -  */);
+});
+
+test("has page attributes", async ({ page }) => {
+  await expect(page.getByText("Forecasted")).toBeVisible();
+});