VIA-630 Run snapshot tests on age based hub pages

Author: donna-belsey-nhs

e2e/constants.ts

@@ -1,3 +1,5 @@
+import { AgeGroup } from "@src/models/ageBasedHub";
+
 type PoliciesPageName = "cookies-policy" | "accessibility-statement";
 type VaccinePageName =
   | "rsv-older-adults"
@@ -229,6 +231,20 @@ export const AppPageDetails: Record<PageName, PageDetails> = {
   },
 };
 
+type AgeBasedTestUser = {
+  ageGroup: AgeGroup;
+  userSession: string;
+};
+
+export const AgeBasedHubTestUsers: AgeBasedTestUser[] = [
+  // { ageGroup: AgeGroup.AGE_12_to_16, userSession: "12-16-age-range"}, // user 34
+  // { ageGroup: AgeGroup.AGE_17_to_24, userSession: "eligibility-error-400"}, // user 16
+  // { ageGroup: AgeGroup.AGE_25_to_64, userSession: "actionable-with-other-setting-suitability-rule"}, // user 12
+  { ageGroup: AgeGroup.AGE_65_to_74, userSession: "actionable-with-booking-link" }, // user 19
+  // { ageGroup: AgeGroup.AGE_75_to_80, userSession: "actionable-with-booking-button"}, // user 21
+  // { ageGroup: AgeGroup.AGE_81_PLUS, userSession: "actionable-with-infotext-action"}, //user 01
+];
+
 export const BOOKING_PAGE_URL_REGEX =
   /^https:\/\/.+nhs\.uk\/book-an-rsv-vaccination\/app-start-page\?wt\.mc_id=vita-RSV-booking$/;
 export const BOOKING_PAGE_TITLE_REGEX = /Book an RSV vaccination - NHS$/;

e2e/general/agedBasedHub.spec.ts

@@ -1,38 +1,26 @@
 import { TestInfo, expect, test } from "@playwright/test";
-import { AppPageDetails, MAX_AVG_LCP_DURATION_MS } from "@project/e2e/constants";
+import { AgeBasedHubTestUsers, AppPageDetails, MAX_AVG_LCP_DURATION_MS } from "@project/e2e/constants";
 import { accessibilityCheck, benchmarkIfChromium } from "@project/e2e/helpers";
-import { AgeBasedHubInfo, AgeGroup } from "@src/models/ageBasedHub";
+import { AgeBasedHubInfo } from "@src/models/ageBasedHub";
 
 test.describe.configure({ mode: "parallel", retries: 1 });
 
-type AgeBasedTestUser = {
-  ageGroup: AgeGroup;
-  userSession: string;
-};
-
-const AgeBasedHubTestUsers: AgeBasedTestUser[] = [
-  // { ageGroup: AgeGroup.AGE_12_to_16, userSession: "12-16-age-range"}, // user 34
-  // { ageGroup: AgeGroup.AGE_17_to_24, userSession: "eligibility-error-400"}, // user 16
-  // { ageGroup: AgeGroup.AGE_25_to_64, userSession: "actionable-with-other-setting-suitability-rule"}, // user 12
-  { ageGroup: AgeGroup.AGE_65_to_74, userSession: "actionable-with-booking-link" }, // user 19
-  // { ageGroup: AgeGroup.AGE_75_to_80, userSession: "actionable-with-booking-button"}, // user 21
-  // { ageGroup: AgeGroup.AGE_81_PLUS, userSession: "actionable-with-infotext-action"}, //user 01
-];
-
 test.describe("Age-Based Hub", () => {
   AgeBasedHubTestUsers.forEach(({ ageGroup, userSession }) => {
-    test.use({ storageState: `./e2e/.auth/${userSession}.json` });
+    test.describe(`for ${ageGroup}`, () => {
+      test.use({ storageState: `./e2e/.auth/${userSession}.json` });
 
-    test(`should render hub page for ${ageGroup}`, async ({ page }, testInfo: TestInfo) => {
-      const hubPageDetails = AppPageDetails["vaccine-hub"];
+      test(`should render hub page for ${ageGroup}`, async ({ page }, testInfo: TestInfo) => {
+        const hubPageDetails = AppPageDetails["vaccine-hub"];
 
-      await page.goto(hubPageDetails.url);
-      await expect(page).toHaveTitle(hubPageDetails.title);
-      await expect(page.getByRole("heading", { level: 1, name: hubPageDetails.heading })).toBeVisible();
-      await expect(page.getByRole("heading", { level: 2, name: AgeBasedHubInfo[ageGroup]?.heading })).toBeVisible();
+        await page.goto(hubPageDetails.url);
+        await expect(page).toHaveTitle(hubPageDetails.title);
+        await expect(page.getByRole("heading", { level: 1, name: hubPageDetails.heading })).toBeVisible();
+        await expect(page.getByRole("heading", { level: 2, name: AgeBasedHubInfo[ageGroup]?.heading })).toBeVisible();
 
-      await accessibilityCheck(page);
-      await benchmarkIfChromium(page, hubPageDetails.url, MAX_AVG_LCP_DURATION_MS, testInfo);
+        await accessibilityCheck(page);
+        await benchmarkIfChromium(page, hubPageDetails.url, MAX_AVG_LCP_DURATION_MS, testInfo);
+      });
     });
   });
 });

e2e/snapshot/app.snapshot.spec.ts

@@ -1,5 +1,5 @@
 import { Page, TestInfo, expect, test } from "@playwright/test";
-import { AppPageDetails, type PageDetails } from "@project/e2e/constants";
+import { AgeBasedHubTestUsers, AppPageDetails, type PageDetails } from "@project/e2e/constants";
 import { getEnv, openExpandersIfPresent, pathForCustomScreenshots } from "@project/e2e/helpers";
 
 const currentDatetime = getEnv("CURRENT_DATETIME");
@@ -39,3 +39,21 @@ test.describe(`Snapshot Testing - ${currentDatetime}-${checkoutRef}`, () => {
     });
   });
 });
+
+test.describe(`Snapshot Testing - Age-Based Hub - ${currentDatetime}-${checkoutRef}`, () => {
+  AgeBasedHubTestUsers.forEach(({ ageGroup, userSession }) => {
+    test.describe(`for ${ageGroup}`, () => {
+      test.use({ storageState: `./e2e/.auth/${userSession}.json` });
+
+      test(`Testing snapshot for ${ageGroup} hub page`, async ({ page }, testInfo: TestInfo) => {
+        const hubPageDetails = AppPageDetails["vaccine-hub"];
+        hubPageDetails.snapshotFilename = hubPageDetails.snapshotFilename.replace("default", ageGroup);
+
+        const projectName = testInfo.project.name;
+        const testFileName = testInfo.file.split("/").pop()!;
+
+        await testPageSnapshot(page, hubPageDetails, testFileName, projectName);
+      });
+    });
+  });
+});