Update alfa (#74)

* Update Alfa

* Only run test once

* Add info about Codespace

* Give details about all options, and set them correctly

* Update yarn

* Adapt to latest Alfa test utils

* Update Selenium example

* Update to latest Alfa

* Adapt to latest Alfa

* Update Alfa and code

.yarnrc.yml

@@ -4,4 +4,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.5.1.cjs
+yarnPath: .yarn/releases/yarn-4.5.3.cjs

accessibility-code-checker/README.md

@@ -2,7 +2,7 @@
 
 These workspaces demonstrate how to use Siteimprove's Accessibility Code Checker with various browser automations.
 
-You can clone this repository to have a working setup on your local computer from which you can easily experiment.
+You can clone this repository to have a working setup on your local computer from which you can easily experiment. Alternatively, you can also run it as a Codespace from this Github repository (from the Code / Codespaces menu).
 
 ## Setup
 
@@ -13,6 +13,10 @@ $ yarn install
 $ yarn build
 ```
 
+### From a Codespace
+
+Codespaces in this repository are pre-installed and built, so you can skip the above steps. Credentials for the Siteimprove Intelligence Platform are read from the environment variables `SI_USER_EMAIL` and `SI_API_KEY`. Use `export SI_USER_EMAIL=...` and `export SI_API=...` to set them within the Codespace for the full experience. 
+
 ## Starting the server
 
 From [the top-level of the repository](..), start the server:

accessibility-code-checker/cypress/cypress.config.ts

@@ -1,5 +1,10 @@
-import type { Audit } from "@siteimprove/alfa-test-utils/audit";
-import { Logging, SIP } from "@siteimprove/alfa-test-utils/report";
+import {
+  type Audit,
+  type CommitInformation,
+  Logging,
+  SIP,
+} from "@siteimprove/alfa-test-utils";
+import { getCommitInformation } from "@siteimprove/alfa-test-utils/git";
 
 import { defineConfig } from "cypress";
 
@@ -12,13 +17,49 @@ export default defineConfig({
       on("task", {
         // Upload audit to Siteimprove Intelligence Platform and log results
         async report(audit: Audit.JSON): Promise<null> {
-          const pageReportUrl = await SIP.upload(audit, {
-            userName: process.env.SI_USER_EMAIL,
-            apiKey: process.env.SI_API_KEY,
-            testName: (git) => `${git.BranchName} – Cypress integration`,
+          // (mandatory) Setup credentials (e.g., from environment variables).
+          const userName = process.env.SI_USER_EMAIL;
+          const apiKey = process.env.SI_API_KEY;
+
+          // (mandatory) Setup site ID; TODO: replace with your own.
+          const siteID = "6255777";
+
+          // (recommended) Fetch information about the latest commit
+          const gitInformation = await getCommitInformation();
+
+          // (optional) Name the test, this can be built from the commit information.
+          const testName = (commit: CommitInformation) =>
+            `On branch ${commit.BranchName} – Cypress integration`;
+
+          // (optional) Provide a page title, this defaults to the first <title> element.
+          // const pageTitle = "My page title";
+
+          // (optional) Provide a page URL, this defaults to the page URL upon scraping.
+          // This is useful to overwrite localhost URLs.
+          const pageURL = "https://demo.siteimprovedemo.com/";
+
+          const url = await SIP.upload(audit, {
+            // mandatory options
+            userName,
+            apiKey,
+            siteID,
+            // optional options
+            commitInformation: gitInformation,
+            testName,
+            // pageTitle,
+            pageURL,
           });
 
-          Logging.fromAudit(audit, pageReportUrl).print();
+          Logging.fromAudit(audit, url).print();
+
+          // If the upload failed, show the reason.
+          if (url.isErr()) {
+            console.warn(`\n${url.getErr()}\n`);
+          }
+          // If the git information couldn't be retrieved, show the reason.
+          if (gitInformation.isErr()) {
+            console.warn(`\n${gitInformation.getErr()}\n`);
+          }
 
           return null;
         },

accessibility-code-checker/cypress/package.json

@@ -12,8 +12,8 @@
     "test": "cypress run"
   },
   "devDependencies": {
-    "@siteimprove/alfa-cypress": "^0.74.2",
-    "@siteimprove/alfa-test-utils": "^0.74.2",
+    "@siteimprove/alfa-cypress": "^0.76.0",
+    "@siteimprove/alfa-test-utils": "^0.76.0",
     "cypress": "^13.15.0"
   }
 }

accessibility-code-checker/cypress/test/cypress.spec.ts

@@ -1,9 +1,9 @@
 import { Cypress as AlfaCypress } from "@siteimprove/alfa-cypress";
-import { Audit } from "@siteimprove/alfa-test-utils/audit";
+import { Audit } from "@siteimprove/alfa-test-utils";
 
 it("should be accessible", () => {
   // Navigate to the local web page
-  // This suppose that the server is already started. See the demo-site folder.
+  // This supposes that the server is already running. See the demo-site folder.
   // TODO: Replace with your own page
   cy.visit("http://localhost:5173");
 

accessibility-code-checker/cypress/tsconfig.json

@@ -3,10 +3,9 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "skipLibCheck": true,
-    "types": ["cypress"]
+    "types": ["cypress", "node"],
+    "moduleResolution": "Node16",
+    "noEmit": true
   },
-  "include": [
-    "test-utils/**/*.ts",
-    "test-utils/**/*.tsx"
-  ]
+  "include": ["cypress.config.ts", "test/cypress.spec.ts"]
 }

accessibility-code-checker/playwright/package.json

@@ -10,7 +10,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.47.0",
-    "@siteimprove/alfa-playwright": "^0.74.2",
-    "@siteimprove/alfa-test-utils": "^0.74.2"
+    "@siteimprove/alfa-playwright": "^0.76.0",
+    "@siteimprove/alfa-test-utils": "^0.76.0"
   }
 }

accessibility-code-checker/playwright/test/playwright.spec.ts

@@ -1,11 +1,17 @@
 import { test, expect } from "@playwright/test";
 
 import { Playwright } from "@siteimprove/alfa-playwright";
-import { Audit, Logging, SIP } from "@siteimprove/alfa-test-utils";
+import {
+  Audit,
+  type CommitInformation,
+  Logging,
+  SIP,
+} from "@siteimprove/alfa-test-utils";
+import { getCommitInformation } from "@siteimprove/alfa-test-utils/git";
 
 test("is page accessible", async ({ page }) => {
   // Navigate to the local web page
-  // This suppose that the server is already started. See the demo-site folder.
+  // This supposes that the server is already running. See the demo-site folder.
   // TODO: Replace with your own page
   await page.goto("http://localhost:5173");
 
@@ -23,20 +29,53 @@ test("is page accessible", async ({ page }) => {
   // Run the audit
   const alfaResult = await Audit.run(alfaPage);
 
-  // Setup credentials from environment variables.
+  // (mandatory) Setup credentials (e.g., from environment variables).
   const userName = process.env.SI_USER_EMAIL;
   const apiKey = process.env.SI_API_KEY;
 
-  // Upload the result to Siteimprove Intelligence Platform, if credentials are provided
+  // (mandatory) Setup site ID; TODO: replace with your own.
+  const siteID = "6255777";
+
+  // (recommended) Fetch information about the latest commit
+  const gitInformation = await getCommitInformation();
+
+  // (optional) Name the test, this can be built from the commit information.
+  const testName = (commit: CommitInformation) =>
+    `On branch ${commit.BranchName} – Playwright integration`;
+
+  // (optional) Provide a page title, this defaults to the first <title> element.
+  // const pageTitle = "My page title";
+
+  // (optional) Provide a page URL, this defaults to the page URL upon scraping.
+  // This is useful to overwrite localhost URLs.
+  const pageURL = "https://demo.siteimprovedemo.com/";
+
+  // Upload the result to Siteimprove Intelligence Platform.
+  // If any mandatory option is missing, this will fail.
   const url = await SIP.upload(alfaResult, {
+    // mandatory options
     userName,
     apiKey,
-    testName: (git) => `${git.BranchName} – Playwright integration`,
+    siteID,
+    // optional options
+    commitInformation: gitInformation,
+    testName,
+    // pageTitle,
+    pageURL,
   });
 
   // Log the result to the console
   Logging.fromAudit(alfaResult, url).print();
 
+  // If the upload failed, show the reason.
+  if (url.isErr()) {
+    console.warn(`\n${url.getErr()}\n`);
+  }
+  // If the git information couldn't be retrieved, show the reason.
+  if (gitInformation.isErr()) {
+    console.warn(`\n${gitInformation.getErr()}\n`);
+  }
+
   // Check if some rule was failing.
   const failingRules = alfaResult.resultAggregates.filter(
     (aggregate) => aggregate.failed > 0,

accessibility-code-checker/playwright/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "$schema": "http://json.schemastore.org/tsconfig",
   "extends": "../tsconfig.json",
+  "compilerOptions": { "noEmit": true },
   "files": ["test/playwright.spec.ts"]
 }

accessibility-code-checker/puppeteer/package.json

@@ -9,11 +9,11 @@
     "test": "node test/puppeteer.spec.js"
   },
   "devDependencies": {
-    "@siteimprove/alfa-test": "^0.93.8",
-    "@siteimprove/alfa-test-utils": "^0.74.2"
+    "@siteimprove/alfa-test-deprecated": "^0.96.0",
+    "@siteimprove/alfa-test-utils": "^0.76.0"
   },
   "dependencies": {
-    "@siteimprove/alfa-puppeteer": "^0.74.2",
+    "@siteimprove/alfa-puppeteer": "^0.76.0",
     "puppeteer": "^23.6.0"
   }
 }

accessibility-code-checker/puppeteer/test/puppeteer.spec.ts

@@ -1,7 +1,13 @@
 import { Puppeteer } from "@siteimprove/alfa-puppeteer";
-import { Audit, Logging, SIP } from "@siteimprove/alfa-test-utils";
+import {
+  Audit,
+  type CommitInformation,
+  Logging,
+  SIP,
+} from "@siteimprove/alfa-test-utils";
 
-import { test } from "@siteimprove/alfa-test";
+import { test } from "@siteimprove/alfa-test-deprecated";
+import { getCommitInformation } from "@siteimprove/alfa-test-utils/git";
 
 import puppeteer from "puppeteer";
 
@@ -13,7 +19,7 @@ test("Page should be accessible", async (t) => {
   });
 
   // Navigate to the local web page
-  // This suppose that the server is already started. See the demo-site folder.
+  // This supposes that the server is already running. See the demo-site folder.
   // TODO: Replace with your own page
   const page = await browser.newPage();
   await page.goto("http://localhost:5173");
@@ -35,19 +41,50 @@ test("Page should be accessible", async (t) => {
   // Run the audit
   const alfaResult = await Audit.run(alfaPage);
 
-  // Setup credentials from environment variables.
+  // (mandatory) Setup credentials (e.g., from environment variables).
   const userName = process.env.SI_USER_EMAIL;
   const apiKey = process.env.SI_API_KEY;
 
+  // (mandatory) Setup site ID; TODO: replace with your own.
+  const siteID = "6255777";
+
+  // (recommended) Fetch information about the latest commit
+  const gitInformation = await getCommitInformation();
+
+  // (optional) Name the test, this can be built from the commit information.
+  const testName = (commit: CommitInformation) =>
+    `On branch ${commit.BranchName} – Puppeteer integration`;
+
+  // (optional) Provide a page title, this defaults to the first <title> element.
+  // const pageTitle = "My page title";
+
+  // (optional) Provide a page URL, this defaults to the page URL upon scraping.
+  // This is useful to overwrite localhost URLs.
+  const pageURL = "https://demo.siteimprovedemo.com/";
+
   // Upload the result to Siteimprove Intelligence Platform, if credentials are provided
   const url = await SIP.upload(alfaResult, {
+    // mandatory options
     userName,
     apiKey,
-    testName: (git) => `${git.BranchName} – Puppeteer integration`,
+    siteID,
+    // optional options
+    commitInformation: gitInformation,
+    testName,
+    // pageTitle,
+    pageURL,
   });
 
   // Log the result to the console
   Logging.fromAudit(alfaResult, url).print();
+  // If the upload failed, show the reason.
+  if (url.isErr()) {
+    console.warn(`\n${url.getErr()}\n`);
+  }
+  // If the git information couldn't be retrieved, show the reason.
+  if (gitInformation.isErr()) {
+    console.warn(`\n${gitInformation.getErr()}\n`);
+  }
 
   // Check if some rule was failing.
   const failingRules = alfaResult.resultAggregates.filter(

accessibility-code-checker/selenium/package.json

@@ -9,9 +9,9 @@
     "test": "node test/selenium.spec.js"
   },
   "devDependencies": {
-    "@siteimprove/alfa-selenium": "^0.74.2",
-    "@siteimprove/alfa-test": "^0.93.8",
-    "@siteimprove/alfa-test-utils": "^0.74.2",
+    "@siteimprove/alfa-selenium": "^0.76.0",
+    "@siteimprove/alfa-test-deprecated": "^0.96.0",
+    "@siteimprove/alfa-test-utils": "^0.76.0",
     "@types/selenium-webdriver": "^4",
     "selenium-webdriver": "^4.25.0"
   }