feat: dep upgrades and run ci against ventura (#11)

cmorten · web-flow · commit 8e27d2375afc · 2023-12-10T01:25:36.000Z
* ci: run against ventura
* chore: upgrade dependencies
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -11,7 +11,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
           registry-url: https://registry.npmjs.org/
           always-auth: true
       - run: yarn install --frozen-lockfile
diff --git a/.github/workflows/test-voiceover.yml b/.github/workflows/test-voiceover.yml
@@ -11,15 +11,15 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        os: [macos-11, macos-12]
+        os: [macos-11, macos-12, macos-13]
         browser: [chromium, firefox, webkit]
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
       - name: Guidepup Setup
-        uses: guidepup/setup-action@0.8.1
+        uses: guidepup/setup-action@0.13.0
         with:
           record: true
       - run: yarn install --frozen-lockfile
@@ -32,4 +32,4 @@ jobs:
           name: artifacts
           path: |
             **/test-results/**/*
-            **/recordings/**/*
+            **/recordings/**/*
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -13,6 +13,6 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
       - run: yarn install --frozen-lockfile
       - run: yarn ci
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-18
+20
diff --git a/README.md b/README.md
@@ -82,7 +82,7 @@ import { voConfig } from "@guidepup/playwright";
 
 const config: PlaywrightTestConfig = {
   ...voConfig,
-  
+
   // Your custom config ...
 };
 
@@ -103,7 +103,7 @@ If you are using GitHub Actions, check out the dedicated [`guidepup/setup-action
 
 ```yaml
 - name: Setup Environment
-  uses: guidepup/setup-action@0.8.1
+  uses: guidepup/setup-action@0.13.0
 ```
 
 ## Documentation
diff --git a/example/chromium.config.ts b/example/chromium.config.ts
@@ -2,15 +2,17 @@ import { devices, PlaywrightTestConfig } from "@playwright/test";
 
 const config: PlaywrightTestConfig = {
   reportSlowTests: null,
+  fullyParallel: false,
   workers: 1,
-  timeout: 3 * 60 * 1000,
-  retries: 2,
+  timeout: 5 * 60 * 1000,
+  retries: 5,
   projects: [
     {
       name: "chromium",
       use: { ...devices["Desktop Chrome"], headless: false, video: "on" },
     },
   ],
+  reporter: process.env.CI ? [["github"], ["html", { open: "never" }]] : "list",
 };
 
 export default config;
diff --git a/example/firefox.config.ts b/example/firefox.config.ts
@@ -2,15 +2,17 @@ import { devices, PlaywrightTestConfig } from "@playwright/test";
 
 const config: PlaywrightTestConfig = {
   reportSlowTests: null,
+  fullyParallel: false,
   workers: 1,
-  timeout: 3 * 60 * 1000,
-  retries: 2,
+  timeout: 5 * 60 * 1000,
+  retries: 5,
   projects: [
     {
       name: "firefox",
       use: { ...devices["Desktop Firefox"], headless: false, video: "on" },
     },
   ],
+  reporter: process.env.CI ? [["github"], ["html", { open: "never" }]] : "list",
 };
 
 export default config;
diff --git a/example/tests/chromium/chromium.spec.ts b/example/tests/chromium/chromium.spec.ts
@@ -1,42 +1,57 @@
-import { expect } from "@playwright/test";
+import { platform, release } from "os";
 import { headerNavigation } from "../headerNavigation";
 import itemTextSnapshot from "./chromium.itemText.snapshot.json";
+import { logIncludesExpectedPhrases } from "../logIncludesExpectedPhrases";
 import { macOSRecord } from "@guidepup/guidepup";
 import spokenPhraseSnapshot from "./chromium.spokenPhrase.snapshot.json";
 import { voTest as test } from "../../../src";
 
 test.describe("Chromium Playwright VoiceOver", () => {
   test("I can navigate the Guidepup Github page", async ({
+    browser,
+    browserName,
     page,
     voiceOver,
   }) => {
-    const stopRecording = macOSRecord(
-      `./recordings/playwright-voiceover-chromium-${+new Date()}.mov`
-    );
+    const osName = platform();
+    const osVersion = release();
+    const browserVersion = browser.version();
+    const { retry } = test.info();
+    const recordingFilePath = `./recordings/playwright-voiceover-${osName}-${osVersion}-${browserName}-${browserVersion}-attempt-${retry}-${+new Date()}.mov`;
 
-    await headerNavigation({ page, voiceOver });
+    console.table({
+      osName,
+      osVersion,
+      browserName,
+      browserVersion,
+      retry,
+    });
 
-    // Assert that we've ended up where we expected and what we were told on
-    // the way there is as expected.
+    let stopRecording: (() => void) | undefined;
 
-    const itemTextLog = await voiceOver.itemTextLog();
-    const spokenPhraseLog = await voiceOver.spokenPhraseLog();
+    try {
+      const isMacOSVentura =
+        osName === "darwin" && osVersion.split(".")[0] === "22";
 
-    console.log(JSON.stringify(itemTextLog, undefined, 2));
-    console.log(JSON.stringify(spokenPhraseLog, undefined, 2));
+      if (!isMacOSVentura) {
+        stopRecording = macOSRecord(recordingFilePath);
+      }
 
-    for (const expectedItem of itemTextSnapshot) {
-      expect(!!itemTextLog.find((log) => log.includes(expectedItem))).toBe(
-        true
-      );
-    }
+      await headerNavigation({ page, voiceOver });
 
-    for (const expectedPhrase of spokenPhraseSnapshot) {
-      expect(
-        !!spokenPhraseLog.find((log) => log.includes(expectedPhrase))
-      ).toBe(true);
-    }
+      // Assert that we've ended up where we expected and what we were told on
+      // the way there is as expected.
+
+      const itemTextLog = await voiceOver.itemTextLog();
+      const spokenPhraseLog = await voiceOver.spokenPhraseLog();
 
-    stopRecording();
+      console.log(JSON.stringify(itemTextLog, undefined, 2));
+      console.log(JSON.stringify(spokenPhraseLog, undefined, 2));
+
+      logIncludesExpectedPhrases(itemTextLog, itemTextSnapshot);
+      logIncludesExpectedPhrases(spokenPhraseLog, spokenPhraseSnapshot);
+    } finally {
+      stopRecording?.();
+    }
   });
 });
diff --git a/example/tests/chromium/chromium.spokenPhrase.snapshot.json b/example/tests/chromium/chromium.spokenPhrase.snapshot.json
@@ -1,8 +1,8 @@
 [
-  "heading level 1 guidepup/guidepup. You are currently on a heading level 1.",
-  "heading level 2 Latest commit. You are currently on a heading level 2.",
-  "heading level 2 Git stats. You are currently on a heading level 2.",
-  "heading level 2 Files. You are currently on a heading level 2.",
-  "heading level 2 link README.md. You are currently on a heading level 2.",
-  "heading level 1 Guidepup. You are currently on a heading level 1."
+  "heading level 1 guidepup/guidepup",
+  "heading level 2 Latest commit",
+  "heading level 2 Git stats",
+  "heading level 2 Files",
+  "heading level 2 link README.md",
+  "heading level 1 Guidepup"
 ]
diff --git a/example/tests/firefox/firefox.spec.ts b/example/tests/firefox/firefox.spec.ts
@@ -1,42 +1,57 @@
-import { expect } from "@playwright/test";
+import { platform, release } from "os";
 import { headerNavigation } from "../headerNavigation";
 import itemTextSnapshot from "./firefox.itemText.snapshot.json";
+import { logIncludesExpectedPhrases } from "../logIncludesExpectedPhrases";
 import { macOSRecord } from "@guidepup/guidepup";
 import spokenPhraseSnapshot from "./firefox.spokenPhrase.snapshot.json";
 import { voTest as test } from "../../../src";
 
 test.describe("Firefox Playwright VoiceOver", () => {
   test("I can navigate the Guidepup Github page", async ({
+    browser,
+    browserName,
     page,
     voiceOver,
   }) => {
-    const stopRecording = macOSRecord(
-      `./recordings/playwright-voiceover-firefox-${+new Date()}.mov`
-    );
+    const osName = platform();
+    const osVersion = release();
+    const browserVersion = browser.version();
+    const { retry } = test.info();
+    const recordingFilePath = `./recordings/playwright-voiceover-${osName}-${osVersion}-${browserName}-${browserVersion}-attempt-${retry}-${+new Date()}.mov`;
 
-    await headerNavigation({ page, voiceOver });
+    console.table({
+      osName,
+      osVersion,
+      browserName,
+      browserVersion,
+      retry,
+    });
 
-    // Assert that we've ended up where we expected and what we were told on
-    // the way there is as expected.
+    let stopRecording: (() => void) | undefined;
 
-    const itemTextLog = await voiceOver.itemTextLog();
-    const spokenPhraseLog = await voiceOver.spokenPhraseLog();
+    try {
+      const isMacOSVentura =
+        osName === "darwin" && osVersion.split(".")[0] === "22";
 
-    console.log(JSON.stringify(itemTextLog, undefined, 2));
-    console.log(JSON.stringify(spokenPhraseLog, undefined, 2));
+      if (!isMacOSVentura) {
+        stopRecording = macOSRecord(recordingFilePath);
+      }
 
-    for (const expectedItem of itemTextSnapshot) {
-      expect(!!itemTextLog.find((log) => log.includes(expectedItem))).toBe(
-        true
-      );
-    }
+      await headerNavigation({ page, voiceOver });
 
-    for (const expectedPhrase of spokenPhraseSnapshot) {
-      expect(
-        !!spokenPhraseLog.find((log) => log.includes(expectedPhrase))
-      ).toBe(true);
-    }
+      // Assert that we've ended up where we expected and what we were told on
+      // the way there is as expected.
+
+      const itemTextLog = await voiceOver.itemTextLog();
+      const spokenPhraseLog = await voiceOver.spokenPhraseLog();
 
-    stopRecording();
+      console.log(JSON.stringify(itemTextLog, undefined, 2));
+      console.log(JSON.stringify(spokenPhraseLog, undefined, 2));
+
+      logIncludesExpectedPhrases(itemTextLog, itemTextSnapshot);
+      logIncludesExpectedPhrases(spokenPhraseLog, spokenPhraseSnapshot);
+    } finally {
+      stopRecording?.();
+    }
   });
 });
diff --git a/example/tests/firefox/firefox.spokenPhrase.snapshot.json b/example/tests/firefox/firefox.spokenPhrase.snapshot.json
@@ -1,8 +1,8 @@
 [
-  "heading level 1 guidepup/guidepup. You are currently on a heading level 1.",
-  "heading level 2 Latest commit. You are currently on a heading level 2.",
-  "heading level 2 Git stats. You are currently on a heading level 2.",
-  "heading level 2 Files. You are currently on a heading level 2.",
-  "heading level 2 link README.md. You are currently on a heading level 2.",
-  "heading level 1 Guidepup. You are currently on a heading level 1."
+  "heading level 1 guidepup/guidepup",
+  "heading level 2 Latest commit",
+  "heading level 2 Git stats",
+  "heading level 2 Files",
+  "heading level 2 link README.md",
+  "heading level 1 Guidepup"
 ]
diff --git a/example/tests/headerNavigation.ts b/example/tests/headerNavigation.ts
@@ -1,24 +1,43 @@
 import type { VoiceOver } from "@guidepup/guidepup";
-import { expect, Page } from "@playwright/test";
+import { Page } from "@playwright/test";
 
 async function delay(ms: number) {
-  return new Promise(resolve => setTimeout(resolve, ms));
+  return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
-export async function headerNavigation({ page, voiceOver }: { page: Page, voiceOver: VoiceOver}) {
+const MAX_NAVIGATION_LOOP = 10;
+
+export async function headerNavigation({
+  page,
+  voiceOver,
+}: {
+  page: Page;
+  voiceOver: VoiceOver;
+}) {
   // Navigate to Guidepup GitHub page 🎉
   await page.goto("https://github.com/guidepup/guidepup", {
     waitUntil: "domcontentloaded",
   });
 
   // Wait for page to be ready and interact 🙌
-  await expect(page.locator('header[role="banner"]')).toBeVisible();
+  const header = page.locator('header[role="banner"]');
+  await header.waitFor();
   await delay(500);
 
+  // Make sure interacting with the web content
   await voiceOver.interact();
 
+  // Prevent auto-navigation of group
+  await voiceOver.perform(voiceOver.keyboardCommands.jumpToLeftEdge);
+
+  let headingCount = 0;
+
   // Move across the page menu to the Guidepup heading using VoiceOver 🔎
-  while ((await voiceOver.itemText()) !== "Guidepup heading level 1") {
+  while (
+    (await voiceOver.itemText()) !== "Guidepup heading level 1" &&
+    headingCount <= MAX_NAVIGATION_LOOP
+  ) {
+    headingCount++;
     await voiceOver.perform(voiceOver.keyboardCommands.findNextHeading);
   }
 }
diff --git a/example/tests/logIncludesExpectedPhrases.ts b/example/tests/logIncludesExpectedPhrases.ts
@@ -0,0 +1,22 @@
+export const logIncludesExpectedPhrases = (
+  log: string[],
+  expectedPhrases: string[]
+) => {
+  const failures: string[] = [];
+
+  for (const expectedPhrase of expectedPhrases) {
+    const foundExpectedPhrase = !!log.find((logItem) =>
+      logItem.includes(expectedPhrase)
+    );
+
+    if (!foundExpectedPhrase) {
+      failures.push(expectedPhrase);
+    }
+  }
+
+  if (failures.length) {
+    throw new Error(
+      `Did not find the following expected text:\n- ${failures.join("\n- ")}`
+    );
+  }
+};
diff --git a/example/tests/webkit/webkit.spec.ts b/example/tests/webkit/webkit.spec.ts
diff --git a/example/tests/webkit/webkit.spokenPhrase.snapshot.json b/example/tests/webkit/webkit.spokenPhrase.snapshot.json
diff --git a/example/webkit.config.ts b/example/webkit.config.ts
diff --git a/package.json b/package.json
diff --git a/src/voTest.ts b/src/voTest.ts
diff --git a/yarn.lock b/yarn.lock
