feat: cypress on new UI

.github/workflows/yarn_test.yaml

@@ -7,6 +7,10 @@ jobs:
 
     runs-on: ubuntu-latest
 
+    permissions:
+      contents: read
+      pull-requests: write
+
     strategy:
       fail-fast: false
       matrix:
@@ -46,6 +50,7 @@ jobs:
         yarn test --clear-cache --coverage --coverageDirectory=coverage
     - name: Run cypress tests
       # Uses the official Cypress GitHub action https://github.com/cypress-io/github-action
+      id: cypress
       uses: cypress-io/github-action@v6
       # Skip e2e for PRs from forks: secrets (Auth0 credentials, CYPRESS_RECORD_KEY) are not
       # exposed to fork PRs, so the app cannot log in and `record: true` would fail the job.
@@ -65,7 +70,29 @@ jobs:
         record: true
 #        parallel: true # Runs test in parallel using settings above
         config: chromeWebSecurity=false
-        browser: chrome
+        browser: electron
+
+    - name: Upload snapshot diffs
+      id: upload-diffs
+      if: always() && steps.cypress.outcome == 'failure'
+      uses: actions/upload-artifact@v4
+      with:
+        name: cypress-snapshot-diffs
+        path: apps/nowcasting-app/cypress/snapshots/**/__diff_output__/*.png
+        if-no-files-found: ignore
+
+    - name: Comment diff link on PR
+      if: always() && steps.cypress.outcome == 'failure' && steps.upload-diffs.outputs.artifact-url != ''
+      uses: actions/github-script@v7
+      with:
+        github-token: ${{ github.token }}
+        script: |
+          await github.rest.issues.createComment({
+            issue_number: context.issue.number,
+            owner: context.repo.owner,
+            repo: context.repo.repo,
+            body: `### ❌ Snapshot diff\nDownload [**cypress-snapshot-diffs**](${{ steps.upload-diffs.outputs.artifact-url }}) to view the diff images.`
+          });
 env:
   AUTH0_AUDIENCE: ${{ secrets.AUTH0_AUDIENCE }}
   AUTH0_BASE_URL: ${{ secrets.AUTH0_BASE_URL }}
@@ -79,6 +106,7 @@ env:
   CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
   GITHUB_TOKEN: ${{ secrets.CYPRESS_GITHUB_TOKEN }}
   NEXT_PUBLIC_API_PREFIX: ${{ secrets.NEXT_PUBLIC_API_PREFIX }}
+  NEXT_PUBLIC_MAPBOX_TOKEN: ${{ secrets.NEXT_PUBLIC_MAPBOX_TOKEN }}
   NEXT_PUBLIC_SITES_API_PREFIX: ${{ secrets.NEXT_PUBLIC_SITES_API_PREFIX }}
   NEXT_PUBLIC_AUTH0_AUDIENCE: ${{ secrets.NEXT_PUBLIC_AUTH0_AUDIENCE }}
   NEXT_PUBLIC_AUTH0_API_AUDIENCE: ${{ secrets.NEXT_PUBLIC_AUTH0_API_AUDIENCE }}
@@ -88,5 +116,5 @@ env:
   NEXT_PUBLIC_AUTH0_SCOPE: ${{ secrets.NEXT_PUBLIC_AUTH0_SCOPE }}
   NEXT_PUBLIC_AUTH0_USERNAME: ${{ secrets.NEXT_PUBLIC_AUTH0_USERNAME }}
   NEXT_PUBLIC_4H_VIEW: 'true'
-  NEXT_PUBLIC_CI: 'true'
+  TZ: Europe/London
   SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}

apps/nowcasting-app/.gitignore

@@ -37,5 +37,9 @@ yarn-error.log*
 .sentryclirc
 
 
+# cypress
+cypress/snapshots/**/__diff_output__/
+cypress/screenshots/
+
 # eslint --cache (lint-staged)
 .eslintcache

apps/nowcasting-app/components/layout/header/country-toggle.tsx

@@ -235,6 +235,7 @@ const CountryOption = React.forwardRef<
         ref={ref}
         type="button"
         role="radio"
+        data-cy={`country-toggle-${country.code}`}
         disabled={!selectable}
         aria-checked={focused}
         tabIndex={focused ? 0 : -1}

apps/nowcasting-app/components/map/map.tsx

@@ -476,6 +476,9 @@ const Map: FC<IMap> = ({
     };
   }, [selectedISOTime, activeChannel, isMapReady, showCloudLayer, timeNow, title]);
 
+  const loadDataOverlayRef = useRef(loadDataOverlay);
+  loadDataOverlayRef.current = loadDataOverlay;
+
   // Keep the latest autoZoom value available inside Mapbox event handlers (avoid stale closures)
   const autozoomRef = useRef(autoZoom);
   useEffect(() => {
@@ -493,8 +496,6 @@ const Map: FC<IMap> = ({
   }, [updateData]);
 
   useEffect(() => {
-    if (process.env.NEXT_PUBLIC_CI === "true") return;
-
     // check if webgl is supported
     if (!mapboxgl.supported()) {
       setWebGlSupported(false);
@@ -547,7 +548,7 @@ const Map: FC<IMap> = ({
       map.current.on("load", (event) => {
         setIsMapReady(true);
         if (map.current) applyBrandLabelFont(map.current);
-        loadDataOverlay(map);
+        loadDataOverlayRef.current(map);
       });
 
       map.current.on("moveend", onMoveEnd);

apps/nowcasting-app/components/shell/map-encoding-controls.tsx

@@ -89,6 +89,7 @@ const ComparisonOption: FC<{
   <button
     type="button"
     aria-pressed={active}
+    data-cy={`map-mode-${label.toLowerCase()}`}
     title={hint}
     onClick={() => setComparison(id)}
     className={`${CONTROL_BUTTON_BASE} ${CONTROL_BUTTON_GROW} ${

apps/nowcasting-app/cypress.config.ts

@@ -1,28 +1,57 @@
 import { defineConfig } from "cypress";
+import fs from "node:fs";
+import path from "node:path";
+
 // Populate process.env with values from .env file
 const dotenv = require("dotenv");
 
 dotenv.config({ path: ".env.local" });
 dotenv.config();
 
+const { addMatchImageSnapshotPlugin } = require("@simonsmith/cypress-image-snapshot/plugin");
+const { generateSessionCookie } = require("@auth0/nextjs-auth0/testing");
+const { API_V1_PREFIX, API_PREFIX, SITES_API_PREFIX } = require("./constant");
+
 export default defineConfig({
+  viewportWidth: 1280,
+  viewportHeight: 720,
+  video: false,
+  defaultCommandTimeout: 10_000,
+  pageLoadTimeout: 30_000,
+  screenshotOnRunFailure: false,
+  blockHosts: ["*.sentry.io", "*.googletagmanager.com", "*.licdn.com", "events.mapbox.com"],
   env: {
-    auth0_username: process.env.NEXT_PUBLIC_AUTH0_USERNAME,
-    auth0_password: process.env.NEXT_PUBLIC_AUTH0_PASSWORD,
-    auth0_domain: process.env.NEXT_PUBLIC_AUTH0_DOMAIN,
-    auth0_audience: process.env.NEXT_PUBLIC_AUTH0_AUDIENCE,
-    auth0_scope: process.env.NEXT_PUBLIC_AUTH0_SCOPE,
-    auth0_client_id: process.env.NEXT_PUBLIC_AUTH0_CLIENTID,
-    auth0_client_secret: process.env.AUTH0_CLIENT_SECRET,
-    baseUrl: process.env.AUTH0_BASE_URL
+    apis: [
+      { label: "v1", base: API_V1_PREFIX },
+      { label: "v0", base: API_PREFIX },
+      { label: "sites", base: SITES_API_PREFIX }
+    ]
   },
-  chromeWebSecurity: false,
-  // ...rest of the Cypress project config
-  projectId: process.env.CYPRESS_PROJECT_ID,
-
   e2e: {
-    setupNodeEvents(on, config) {
-      // implement node event listeners here
+    baseUrl: "http://localhost:3002",
+    specPattern: "cypress/e2e/**/*.cy.ts",
+    supportFile: "cypress/support/e2e.ts",
+    setupNodeEvents(on) {
+      addMatchImageSnapshotPlugin(on);
+
+      on("task", {
+        // The fixture files on disk, so the mock can tell which requests have one.
+        listFixtures() {
+          const dir = path.join(__dirname, "cypress/fixtures");
+          return fs.existsSync(dir) ? fs.readdirSync(dir) : [];
+        },
+
+        mintSessionCookie(user: object) {
+          return generateSessionCookie(
+            {
+              user,
+              accessToken: "e2e-token",
+              accessTokenExpiresAt: Math.floor(Date.now() / 1000) + 24 * 60 * 60
+            },
+            { secret: process.env.AUTH0_SECRET }
+          );
+        }
+      });
     }
   }
 });

apps/nowcasting-app/cypress/e2e/de/de_delta.cy.ts

@@ -0,0 +1,21 @@
+describe("DE delta", () => {
+  it("matches the snapshot", () => {
+    cy.mockApi();
+    cy.login();
+    cy.visit("/");
+
+    // The page opens on GB: switch to DE, then the map (and the chart with it) to the delta view.
+    cy.get('[data-cy="country-toggle-DE"]').click().should("have.attr", "aria-checked", "true");
+    cy.get('[data-cy="map-mode-delta"]').click().should("have.attr", "aria-pressed", "true");
+
+    cy.get("body").type("{leftArrow}".repeat(96));
+
+    // Loaded: the delta header is up, nothing is still loading.
+    cy.get('[data-test="delta-header-figure"]').should("be.visible");
+    cy.get('[aria-busy="true"], [title^="Loading"]').should("not.exist");
+    cy.document().its("fonts.status").should("equal", "loaded");
+    cy.waitForMap();
+
+    cy.matchImageSnapshot("de_delta");
+  });
+});

apps/nowcasting-app/cypress/e2e/de/de_forecast.cy.ts

@@ -0,0 +1,12 @@
+describe("DE forecast", () => {
+  it("matches the snapshot", () => {
+    cy.mockApi();
+    cy.login();
+    cy.visit("/");
+
+    // toogle to DE
+    cy.get('[data-cy="country-toggle-DE"]').click().should("have.attr", "aria-checked", "true");
+    cy.waitForMap();
+    cy.matchImageSnapshot("de_forecast");
+  });
+});

apps/nowcasting-app/cypress/e2e/nl/nl_delta.cy.ts

@@ -0,0 +1,21 @@
+describe("NL delta", () => {
+  it("matches the snapshot", () => {
+    cy.mockApi();
+    cy.login();
+    cy.visit("/");
+
+    // The page opens on GB: switch to NL, then the map (and the chart with it) to the delta view.
+    cy.get('[data-cy="country-toggle-NL"]').click().should("have.attr", "aria-checked", "true");
+    cy.get('[data-cy="map-mode-delta"]').click().should("have.attr", "aria-pressed", "true");
+
+    cy.get("body").type("{leftArrow}".repeat(96));
+
+    // Loaded: the delta header is up, nothing is still loading.
+    cy.get('[data-test="delta-header-figure"]').should("be.visible");
+    cy.get('[aria-busy="true"], [title^="Loading"]').should("not.exist");
+    cy.document().its("fonts.status").should("equal", "loaded");
+    cy.waitForMap();
+
+    cy.matchImageSnapshot("nl_delta");
+  });
+});

apps/nowcasting-app/cypress/e2e/nl/nl_forecast.cy.ts

@@ -0,0 +1,12 @@
+describe("NL forecast", () => {
+  it("matches the snapshot", () => {
+    cy.mockApi();
+    cy.login();
+    cy.visit("/");
+
+    // toogle to NL
+    cy.get('[data-cy="country-toggle-NL"]').click().should("have.attr", "aria-checked", "true");
+    cy.waitForMap();
+    cy.matchImageSnapshot("nl_forecast");
+  });
+});

apps/nowcasting-app/cypress/e2e/uk/uk_delta.cy.ts

@@ -0,0 +1,20 @@
+describe("UK delta", () => {
+  it("matches the snapshot", () => {
+    cy.mockApi();
+    cy.login();
+    cy.visit("/");
+
+    // Switch the map (and the chart with it) to the delta view.
+    cy.get('[data-cy="map-mode-delta"]').click().should("have.attr", "aria-pressed", "true");
+
+    cy.get("body").type("{leftArrow}".repeat(48));
+
+    // Loaded: the delta header is up, nothing is still loading.
+    cy.get('[data-test="delta-header-figure"]').should("be.visible");
+    cy.get('[aria-busy="true"], [title^="Loading"]').should("not.exist");
+    cy.document().its("fonts.status").should("equal", "loaded");
+    cy.waitForMap();
+
+    cy.matchImageSnapshot("uk_delta");
+  });
+});