Select using aria-label for auth utilities

Author: bfollington

typescript/packages/jumble/integration/basic-flow.test.ts

@@ -10,17 +10,22 @@ import {
 } from "@std/testing/bdd";
 import {
   addCharm,
+  assertAndSnapshot,
   inspectCharm,
   login,
   sleep,
   waitForSelectorWithText,
 } from "./utils.ts";
+import { join } from "@std/path";
 
 const TOOLSHED_API_URL = Deno.env.get("TOOLSHED_API_URL") ??
   "http://localhost:8000/";
 const FRONTEND_URL = Deno.env.get("FRONTEND_URL") ?? "http://localhost:5173/";
 const HEADLESS = true;
+const RECORD_SNAPSHOTS = false;
 
+const SNAPSHOTS_DIR = join(Deno.cwd(), "test_snapshots");
+console.log("SNAPSHOTS_DIR=", SNAPSHOTS_DIR);
 console.log(`TOOLSHED_API_URL=${TOOLSHED_API_URL}`);
 console.log(`FRONTEND_URL=${FRONTEND_URL}`);
 
@@ -48,57 +53,81 @@ describe("integration", () => {
   });
 
   it("renders a new charm", async () => {
-    assert(page);
-    assert(testCharm);
-    const anchor = await page.waitForSelector("nav a");
-    assert(
-      (await anchor.innerText()) === "common-knowledge",
+    assertAndSnapshot(page, "Page should be defined");
+    assertAndSnapshot(testCharm, "Test charm should be defined");
+
+    const anchor = await page!.waitForSelector("nav a");
+    const innerText = await anchor.innerText();
+    assertAndSnapshot(
+      innerText === "common-knowledge",
       "Logged in and Common Knowledge title renders",
+      page,
+      "logged_in_state",
     );
 
-    await page.goto(`${FRONTEND_URL}${testCharm.space}/${testCharm.charmId}`);
+    await page!.goto(
+      `${FRONTEND_URL}${testCharm!.space}/${testCharm!.charmId}`,
+    );
     console.log(`Waiting for charm to render`);
 
     await waitForSelectorWithText(
-      page,
+      page!,
       "a[aria-current='charm-title']",
       "Simple Value: 1",
     );
     console.log("Charm rendered.");
+    await assertAndSnapshot(
+      true,
+      "Charm rendered successfully",
+      page,
+      "charm_rendered",
+    );
 
     console.log("Clicking button");
     // Sometimes clicking this button throws:
     // https://jsr.io/@astral/astral/0.5.2/src/element_handle.ts#L192
     // As if the reference was invalidated by a spurious re-render between
     // getting an element handle, and clicking it.
     await sleep(1000);
-    const button = await page.waitForSelector(
+    const button = await page!.waitForSelector(
       "div[aria-label='charm-content'] button",
     );
     await button.click();
+    await assertAndSnapshot(true, "Button clicked", page, "button_clicked");
 
     console.log("Checking if title changed");
     await waitForSelectorWithText(
-      page,
+      page!,
       "a[aria-current='charm-title']",
       "Simple Value: 2",
     );
     console.log("Title changed");
+    await assertAndSnapshot(
+      true,
+      "Title changed successfully",
+      page,
+      "title_changed",
+    );
 
     console.log("Inspecting charm to verify updates propagated from browser.");
     const charm = await inspectCharm(
       TOOLSHED_API_URL,
-      testCharm.space,
-      testCharm.charmId,
+      testCharm!.space,
+      testCharm!.charmId,
     );
     console.log("Charm:", charm);
-    assert(charm.includes("Simple Value: 2"), "Charm updates propagated.");
+    assertAndSnapshot(
+      charm.includes("Simple Value: 2"),
+      "Charm updates propagated.",
+      page,
+      "updates_propagated",
+    );
   });
 
   // Placeholder test ensuring browser can be used
   // across multiple tests (replace when we have more integration tests!)
   it("[placeholder]", () => {
-    assert(page);
-    assert(testCharm);
+    assertAndSnapshot(page, "Page should be defined");
+    assertAndSnapshot(testCharm, "Test charm should be defined");
   });
 });

typescript/packages/jumble/integration/utils.ts

@@ -1,5 +1,8 @@
 import { ElementHandle, Page } from "@astral/astral";
 import * as path from "@std/path";
+import { assert } from "@std/assert";
+import { ensureDirSync } from "@std/fs";
+import { join } from "@std/path";
 
 const COMMON_CLI_PATH = path.join(import.meta.dirname!, "../../common-cli");
 
@@ -8,9 +11,56 @@ export const decode = (() => {
   return (buffer: Uint8Array): string => decoder.decode(buffer);
 })();
 
+const RECORD_SNAPSHOTS = true;
+const SNAPSHOTS_DIR = join(Deno.cwd(), "test_snapshots");
+console.log("SNAPSHOTS_DIR=", SNAPSHOTS_DIR);
+
+// Helper function to assert, take screenshot and snapshot HTML
+export async function assertAndSnapshot(
+  condition: unknown,
+  message: string,
+  page?: Page | void,
+  snapshotName?: string,
+): Promise<void> {
+  if (!condition) {
+    throw new Error(message);
+  }
+  assert(condition, message);
+
+  if (RECORD_SNAPSHOTS && page && snapshotName) {
+    ensureDirSync(SNAPSHOTS_DIR);
+    const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
+    const filePrefix = `${snapshotName}_${timestamp}`;
+
+    // Take screenshot
+    const screenshot = await page.screenshot();
+    Deno.writeFileSync(`${SNAPSHOTS_DIR}/${filePrefix}.png`, screenshot);
+
+    // Snapshot HTML
+    const html = await page.content();
+    Deno.writeTextFileSync(`${SNAPSHOTS_DIR}/${filePrefix}.html`, html);
+
+    console.log(`Snapshot saved: ${filePrefix}`);
+  }
+}
+
 export const sleep = (ms: number) =>
   new Promise((resolve) => setTimeout(resolve, ms));
 
+export async function tryClick(
+  el?: ElementHandle | null,
+  page?: Page,
+): Promise<void> {
+  await assertAndSnapshot(
+    el !== null && el !== undefined,
+    "Element does not exist or is not clickable",
+    page,
+    "try_click_element",
+  );
+
+  await el!.click();
+}
+
 export const login = async (page: Page) => {
   // Wait a second :(
   // See if #user-avatar is rendered
@@ -24,44 +74,42 @@ export const login = async (page: Page) => {
 
   // If not logged in, see if any credential data is
   // persisting. If so, destroy local data.
-  let buttons = await page.$$("button");
-  for (const button of buttons) {
-    if ((await button.innerText()) === "Clear Saved Credentials") {
-      await button.click();
-    }
+  let button = await page.$("button[aria-label='clear-credentials']");
+  if (button) {
+    await tryClick(button, page);
   }
 
   // Try log in
   console.log("Logging in");
 
   // Click the first button, "register"
-  let button = await page.$("button");
-  await button!.click();
+  button = await page.$("button[aria-label='register']");
+  await tryClick(button, page);
 
   // Click the first button, "register with passphrase"
-  button = await page.$("button");
-  await button!.click();
+  button = await page.$("button[aria-label='register-with-passphrase']");
+  await tryClick(button, page);
 
   // Get the mnemonic from textarea.
-  let input = await page.$("textarea");
+  let input = await page.$("textarea[aria-label='mnemonic']");
   const mnemonic = await input!.evaluate((textarea: HTMLInputElement) =>
     textarea.value
   );
 
   // Click the SECOND button, "continue to login"
-  buttons = await page.$$("button");
-  await buttons[1]!.click();
+  button = await page.$("button[aria-label='continue-login']");
+  await tryClick(button, page);
 
   // Paste the mnemonic in the input.
-  input = await page.$("input");
+  input = await page.$("input[aria-label='enter-passphrase']");
   await input!.evaluate(
     (input: HTMLInputElement, mnemonic: string) => input.value = mnemonic,
     { args: [mnemonic] },
   );
 
   // Click the only button, "login"
-  button = await page.$("button");
-  await button!.click();
+  button = await page.$("button[aria-label='login']");
+  await tryClick(button, page);
 };
 
 export const waitForSelectorWithText = async (