chore: test happo and playwright compatibility

.github/workflows/test.yaml

@@ -13,6 +13,11 @@ env:
   KEYCLOAK_CLIENT_ID: ${{ secrets.KEYCLOAK_CLIENT_ID }}
   KEYCLOAK_CLIENT_SECRET: ${{ secrets.KEYCLOAK_CLIENT_SECRET }}
   NEXTAUTH_SECRET: ${{ secrets.NEXTAUTH_SECRET }}
+  HAPPO_API_KEY: ${{ secrets.HAPPO_API_KEY }}
+  HAPPO_API_SECRET: ${{ secrets.HAPPO_API_SECRET }}
+  PREVIOUS_SHA: ${{ github.event.pull_request.base.sha }}
+  CURRENT_SHA: ${{ github.event.pull_request.head.sha }}
+  CHANGE_URL: ${{ github.event.pull_request.html_url }}
 
 jobs:
   install-dev-tools:
@@ -216,12 +221,14 @@ jobs:
           keycloak_client_id: ${{ env.KEYCLOAK_CLIENT_ID }}
           keycloak_client_secret: ${{ env.KEYCLOAK_CLIENT_SECRET }}
           nextauth_secret: ${{ env.NEXTAUTH_SECRET }}
+          happo_api_key: ${{ env.HAPPO_API_KEY }}
+          happo_api_secret: ${{ env.HAPPO_API_SECRET }}
       - name: Install Playwright Browsers
         run: yarn playwright install --with-deps
         working-directory: ./client
       - name: Run Playwright Tests
         run: |
-          DEBUG=pw:browser npx playwright test --trace=on --workers=1 client/e2e/*
+          DEBUG=pw:browser npx happo-e2e -- npx playwright test --trace=on --workers=1 client/e2e/*
         env:
           API_URL: http://127.0.0.1:8000/api/
           DB_USER: postgres
@@ -247,6 +254,12 @@ jobs:
           E2E_NEW_USER_GUID: ${{ secrets.E2E_NEW_USER_GUID }}
           E2E_NEW_USER_PASSWORD: ${{ secrets.E2E_NEW_USER_PASSWORD }}
           E2E_NEW_USER_STORAGE: playwright/.auth/new_user.json
+          HAPPO_ENABLED: true
+          HAPPO_API_KEY: ${{ env.HAPPO_API_KEY }}
+          HAPPO_API_SECRET: ${{ env.HAPPO_API_SECRET }}
+          PREVIOUS_SHA: ${{ env.PREVIOUS_SHA }}
+          CURRENT_SHA: ${{ env.CURRENT_SHA }}
+          CHANGE_URL: ${{ env.CHANGE_URL }}
         working-directory: ./client
       - uses: actions/upload-artifact@v3
         if: always()

client/.happo.js

@@ -0,0 +1,29 @@
+const { RemoteBrowserTarget } = require("happo.io");
+require("dotenv").config();
+
+const VIEWPORT = "1366x768";
+const MAXHEIGHT = 20000;
+
+module.exports = {
+  apiKey: process.env.HAPPO_API_KEY,
+  apiSecret: process.env.HAPPO_API_SECRET,
+  project: "cas-registration",
+  targets: {
+    chrome: new RemoteBrowserTarget("chrome", {
+      viewport: VIEWPORT,
+      maxHeight: MAXHEIGHT,
+    }),
+    firefox: new RemoteBrowserTarget("firefox", {
+      viewport: VIEWPORT,
+      maxHeight: MAXHEIGHT,
+    }),
+    safari: new RemoteBrowserTarget("safari", {
+      viewport: VIEWPORT,
+      maxHeight: MAXHEIGHT,
+    }),
+    edge: new RemoteBrowserTarget("edge", {
+      viewport: VIEWPORT,
+      maxHeight: MAXHEIGHT,
+    }),
+  },
+};

client/app/data/home/events.json

@@ -2,7 +2,7 @@
   { "date": "March 5,\n2024", "event": "BCIERS opens" },
 
   {
-    "date": "April 1,\n2024",
+    "date": "April 1,\n2024 TESTING DIFFS",
     "event": "BORO IDs issued and can be used to exempt fuel purchases"
   }
 ]

client/e2e/pages/authenticated/dashboard/page.spec.ts

@@ -1,6 +1,6 @@
 // 🧪 Suite to test `client/app/(authenticated)/dashboard/page.tsx`
 
-import { test, expect } from "@playwright/test";
+import { test } from "@playwright/test";
 // 🪄 Page Object Models
 import { DashboardPOM } from "@/e2e/poms/dashboard";
 import { ProfilePOM } from "@/e2e/poms/profile";
@@ -16,6 +16,7 @@ import {
 // ℹ️ Environment variables
 import * as dotenv from "dotenv";
 dotenv.config({ path: "./e2e/.env.local" });
+const happoPlaywright = require("happo-playwright");
 
 // 📚 Declare a beforeAll hook that is executed once per worker process before all tests.
 // 🥞 Set DB for dashboard tiles
@@ -28,6 +29,7 @@ For industry_user_admin:
 - create operator
 - create user operator
 */
+
 test.beforeAll(async () => {
   try {
     // Scenario FrontEndRoles.INDUSTRY_USER_ADMIN where UserOperatorStatus.APPROVED && OperatorStatus.APPROVED;
@@ -56,6 +58,14 @@ test.beforeAll(async () => {
   }
 });
 
+test.beforeEach(async ({ context }) => {
+  await happoPlaywright.init(context);
+});
+
+test.afterEach(async () => {
+  await happoPlaywright.finish();
+});
+
 // 🏷 Annotate test suite as serial
 test.describe.configure({ mode: "serial" });
 // ➰ Loop through the entries of UserRole enum
@@ -65,9 +75,10 @@ for (let [role, value] of Object.entries(UserRole)) {
   test.describe(`Test Dashboard for ${value}`, () => {
     // 👤 run test as this role
     test.use({ storageState: storageState });
-    test("Test Selfie", async ({ page }, testInfo) => {
+    test("Test Selfie", async ({ page }) => {
       // 🛸 Navigate to dashboard page
       const dashboardPage = new DashboardPOM(page);
+
       await dashboardPage.route();
       switch (value) {
         case UserRole.NEW_USER:
@@ -78,17 +89,11 @@ for (let [role, value] of Object.entries(UserRole)) {
         default:
           // 🔍 Assert that the current URL ends with "/dashboard"
           await dashboardPage.urlIsCorrect();
-          // 🔍 Assert that the content is correct
-          // Note: When you run snapshot for the first time the test runner will Error: A snapshot doesn't exist...
-          // that's because there was no golden file...
-          // but, this method took a bunch of screenshots until two consecutive screenshots matched, and saved the last screenshot to file system...
-          // it is now ready to be added to the repository and expected to pass test
-          await expect(page).toHaveScreenshot();
-          // 👀 Attach the screenshot to the report
-          const screenshot = await page.screenshot();
-          await testInfo.attach("screenshot", {
-            body: screenshot,
-            contentType: "image/png",
+
+          const pageContent = page.locator("html");
+          await happoPlaywright.screenshot(dashboardPage.page, pageContent, {
+            component: "Dashboard page",
+            variant: "default",
           });
           break;
       }

client/e2e/pages/onboarding/home/page.spec.ts

@@ -17,6 +17,7 @@ import {
 // ℹ️ Environment variables
 import * as dotenv from "dotenv";
 dotenv.config({ path: "./e2e/.env.local" });
+import happoPlaywright from "happo-playwright";
 
 // 🏷 Annotate test suite as serial
 test.describe.configure({ mode: "serial" });
@@ -60,6 +61,14 @@ test.beforeAll(async () => {
   }
 });
 
+test.beforeEach(async ({ context }) => {
+  await happoPlaywright.init(context);
+});
+
+test.afterEach(async () => {
+  await happoPlaywright.finish();
+});
+
 test.describe("Test Page - Home", () => {
   test("Test Route", async ({ page }) => {
     const homePage = new HomePOM(page);
@@ -68,20 +77,15 @@ test.describe("Test Page - Home", () => {
     homePage.urlIsCorrect();
   });
 
-  test("Test Selfie", async ({ page }, testInfo) => {
+  test("Test Selfie", async ({ page }) => {
     const homePage = new HomePOM(page);
     await homePage.route();
-    // 🔍 Assert that the content is correct
-    // Note: When you run snapshot for the first time the test runner will Error: A snapshot doesn't exist...
-    // that's because there was no golden file...
-    // but, this method took a bunch of screenshots until two consecutive screenshots matched, and saved the last screenshot to file system...
-    // it is now ready to be added to the repository and expected to pass test
-    await expect(page).toHaveScreenshot();
-    // 👀 Attach the screenshot to the report
-    const screenshot = await page.screenshot();
-    await testInfo.attach("screenshot", {
-      body: screenshot,
-      contentType: "image/png",
+
+    const pageContent = page.locator("html");
+
+    await happoPlaywright.screenshot(homePage.page, pageContent, {
+      component: "Dashboard page",
+      variant: "default",
     });
   });
 

client/package.json

@@ -9,8 +9,8 @@
     "test": "jest",
     "format": "prettier --write .",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx . && next lint",
-    "e2e": "yarn playwright test",
-    "e2e:ui": "yarn playwright test --ui",
+    "e2e": "yarn happo-e2e -- -- yarn playwright test",
+    "e2e:ui": "yarn happo-e2e -- -- yarn playwright test --ui",
     "e2e:sequential": "playwright test --workers=1 client/e2e/*",
     "audit-deps": "improved-yarn-audit"
   },
@@ -68,6 +68,9 @@
     "@typescript-eslint/parser": "^6.5.0",
     "babel-jest": "^29.6.4",
     "eslint-config-prettier": "^9.0.0",
+    "happo-e2e": "^2.4.1",
+    "happo-playwright": "^2.1.0",
+    "happo.io": "^9.1.2",
     "improved-yarn-audit": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",