From 9f2012bbbbecb156b0a3562977efa3af5bf29a4f Mon Sep 17 00:00:00 2001
From: Ben Follington <5009316+bfollington@users.noreply.github.com>
Date: Fri, 7 Mar 2025 09:15:43 +1000
Subject: [PATCH 1/8] Add aria-labels to AuthenticationView

---
 .../jumble/src/views/AuthenticationView.tsx   | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/typescript/packages/jumble/src/views/AuthenticationView.tsx b/typescript/packages/jumble/src/views/AuthenticationView.tsx
index e04c49979..a9055c41c 100644
--- a/typescript/packages/jumble/src/views/AuthenticationView.tsx
+++ b/typescript/packages/jumble/src/views/AuthenticationView.tsx
@@ -92,6 +92,7 @@ function SuccessRegistration({
               <p className="mb-2">Your Secret Recovery Phrase:</p>
               <div className="relative">
                 <textarea
+                  aria-label="mnemonic"
                   readOnly
                   value={mnemonic}
                   rows={3}
@@ -99,6 +100,7 @@ function SuccessRegistration({
                 />
                 <button
                   type="button"
+                  aria-label="copy-mnemonic"
                   onClick={copyToClipboard}
                   className={`absolute right-2 top-1/2 transform -translate-y-1/2 ${
                     copied ? "text-green-500" : ""
@@ -115,7 +117,12 @@ function SuccessRegistration({
             </div>
           )
         )}
-      <button type="button" className={BTN_PRIMARY} onClick={onLogin}>
+      <button
+        type="button"
+        className={BTN_PRIMARY}
+        onClick={onLogin}
+        aria-label="continue-login"
+      >
         <LuLock className="w-5 h-5" /> Continue to Login
       </button>
     </div>
@@ -292,6 +299,7 @@ export function AuthenticationView() {
                     <button
                       type="button"
                       className={BTN_PRIMARY}
+                      aria-label="unlock-with-last-key"
                       onClick={async () => {
                         if (storedCredential.method === AUTH_METHOD_PASSKEY) {
                           await handleLogin(AUTH_METHOD_PASSKEY);
@@ -308,6 +316,7 @@ export function AuthenticationView() {
                     </button>
                     <button
                       type="button"
+                      aria-label="login-new-method"
                       className={LIST_ITEM}
                       onClick={() => setFlow("login")}
                     >
@@ -315,6 +324,7 @@ export function AuthenticationView() {
                     </button>
                     <button
                       type="button"
+                      aria-label="register"
                       className={LIST_ITEM}
                       onClick={() => setFlow("register")}
                     >
@@ -323,6 +333,7 @@ export function AuthenticationView() {
                     <button
                       type="button"
                       className={LIST_ITEM}
+                      aria-label="clear-credentials"
                       onClick={() => {
                         clearStoredCredential();
                         setStoredCredential(null);
@@ -337,6 +348,7 @@ export function AuthenticationView() {
                     <button
                       type="button"
                       className={BTN_PRIMARY}
+                      aria-label="register"
                       onClick={() => setFlow("register")}
                     >
                       <LuCirclePlus className="w-5 h-5" /> Register
@@ -344,6 +356,7 @@ export function AuthenticationView() {
                     <button
                       type="button"
                       className={BTN_PRIMARY}
+                      aria-label="login"
                       onClick={() => setFlow("login")}
                     >
                       <LuLock className="w-5 h-5" /> Login
@@ -363,6 +376,7 @@ export function AuthenticationView() {
                   key={m}
                   type="button"
                   className={LIST_ITEM}
+                  aria-label={"method-" + m}
                   onClick={async () => await handleMethodSelect(m)}
                 >
                   {m === AUTH_METHOD_PASSKEY
@@ -381,6 +395,7 @@ export function AuthenticationView() {
               <button
                 type="button"
                 className={BTN_PRIMARY}
+                aria-label="back"
                 onClick={() => setFlow(null)}
               >
                 <LuArrowLeft className="w-5 h-5" /> Back
@@ -395,6 +410,7 @@ export function AuthenticationView() {
                   <button
                     type="button"
                     className={BTN_PRIMARY}
+                    aria-label="register-with-passphrase"
                     onClick={() => handleRegister(AUTH_METHOD_PASSPHRASE)}
                   >
                     <LuKeyRound className="w-5 h-5" /> Register with Passphrase
@@ -418,9 +434,14 @@ export function AuthenticationView() {
                       name={AUTH_METHOD_PASSPHRASE}
                       className="w-full p-2 pr-10 border-2 border-black"
                       placeholder="Enter your passphrase"
+                      aria-label="enter-passphrase"
                       autoComplete="current-password"
                     />
-                    <button type="submit" className={BTN_PRIMARY}>
+                    <button
+                      type="submit"
+                      className={BTN_PRIMARY}
+                      aria-label="login"
+                    >
                       <LuLock className="w-5 h-5" /> Login
                     </button>
                   </form>
@@ -428,6 +449,7 @@ export function AuthenticationView() {
               <button
                 type="button"
                 className={BTN_PRIMARY}
+                aria-label="back"
                 onClick={() => setFlow(null)}
               >
                 <LuArrowLeft className="w-5 h-5" /> Back

From 0b06b58461d4a6525439cef807417a55ee4ddabb Mon Sep 17 00:00:00 2001
From: Ben Follington <5009316+bfollington@users.noreply.github.com>
Date: Fri, 7 Mar 2025 09:16:11 +1000
Subject: [PATCH 2/8] Select using aria-label for auth utilities

---
 .../jumble/integration/basic-flow.test.ts     | 57 ++++++++++----
 .../packages/jumble/integration/utils.ts      | 78 +++++++++++++++----
 2 files changed, 106 insertions(+), 29 deletions(-)

diff --git a/typescript/packages/jumble/integration/basic-flow.test.ts b/typescript/packages/jumble/integration/basic-flow.test.ts
index d6d62b61e..6d016b48d 100644
--- a/typescript/packages/jumble/integration/basic-flow.test.ts
+++ b/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,23 +53,35 @@ 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:
@@ -72,33 +89,45 @@ describe("integration", () => {
     // 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");
   });
 });
diff --git a/typescript/packages/jumble/integration/utils.ts b/typescript/packages/jumble/integration/utils.ts
index 704f99488..95e3830ae 100644
--- a/typescript/packages/jumble/integration/utils.ts
+++ b/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 (

From 1488139b1d5dadca54e0e7c754df73daed0df34e Mon Sep 17 00:00:00 2001
From: Ben Follington <5009316+bfollington@users.noreply.github.com>
Date: Fri, 7 Mar 2025 09:17:05 +1000
Subject: [PATCH 3/8] Added a feature to screenshot + snapshot HTML on every
 assertion, disabled by default

set RECORD_SNAPSHOTS = true to use it, may be useful for CI
---
 typescript/packages/jumble/integration/utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/typescript/packages/jumble/integration/utils.ts b/typescript/packages/jumble/integration/utils.ts
index 95e3830ae..018f74924 100644
--- a/typescript/packages/jumble/integration/utils.ts
+++ b/typescript/packages/jumble/integration/utils.ts
@@ -11,7 +11,7 @@ export const decode = (() => {
   return (buffer: Uint8Array): string => decoder.decode(buffer);
 })();
 
-const RECORD_SNAPSHOTS = true;
+const RECORD_SNAPSHOTS = false;
 const SNAPSHOTS_DIR = join(Deno.cwd(), "test_snapshots");
 console.log("SNAPSHOTS_DIR=", SNAPSHOTS_DIR);
 

From 4bdca1614619afd2432daf67d6f9d667eb9f480c Mon Sep 17 00:00:00 2001
From: Ben Follington <5009316+bfollington@users.noreply.github.com>
Date: Fri, 7 Mar 2025 12:52:08 +1000
Subject: [PATCH 4/8] Clean up unused code

---
 typescript/packages/jumble/integration/basic-flow.test.ts | 5 -----
 typescript/packages/jumble/integration/utils.ts           | 5 -----
 2 files changed, 10 deletions(-)

diff --git a/typescript/packages/jumble/integration/basic-flow.test.ts b/typescript/packages/jumble/integration/basic-flow.test.ts
index 6d016b48d..92c879571 100644
--- a/typescript/packages/jumble/integration/basic-flow.test.ts
+++ b/typescript/packages/jumble/integration/basic-flow.test.ts
@@ -1,5 +1,4 @@
 import { Browser, launch, Page } from "@astral/astral";
-import { assert } from "@std/assert";
 import {
   afterAll,
   afterEach,
@@ -16,16 +15,12 @@ import {
   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}`);
 
diff --git a/typescript/packages/jumble/integration/utils.ts b/typescript/packages/jumble/integration/utils.ts
index 018f74924..936da402d 100644
--- a/typescript/packages/jumble/integration/utils.ts
+++ b/typescript/packages/jumble/integration/utils.ts
@@ -22,9 +22,6 @@ export async function assertAndSnapshot(
   page?: Page | void,
   snapshotName?: string,
 ): Promise<void> {
-  if (!condition) {
-    throw new Error(message);
-  }
   assert(condition, message);
 
   if (RECORD_SNAPSHOTS && page && snapshotName) {
@@ -32,11 +29,9 @@ export async function assertAndSnapshot(
     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);
 

From 3452bbf1aab926e946bf9baae88c6bf5701601e1 Mon Sep 17 00:00:00 2001
From: Ben Follington <5009316+bfollington@users.noreply.github.com>
Date: Fri, 7 Mar 2025 12:56:20 +1000
Subject: [PATCH 5/8] Use `asserts` to clean up control flow

---
 .../packages/jumble/integration/utils.ts      | 31 ++++++++++++-------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/typescript/packages/jumble/integration/utils.ts b/typescript/packages/jumble/integration/utils.ts
index 936da402d..4672ccfce 100644
--- a/typescript/packages/jumble/integration/utils.ts
+++ b/typescript/packages/jumble/integration/utils.ts
@@ -15,15 +15,7 @@ const RECORD_SNAPSHOTS = false;
 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> {
-  assert(condition, message);
-
+async function captureDetails(page: Page, snapshotName: string) {
   if (RECORD_SNAPSHOTS && page && snapshotName) {
     ensureDirSync(SNAPSHOTS_DIR);
     const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
@@ -38,6 +30,21 @@ export async function assertAndSnapshot(
     console.log(`Snapshot saved: ${filePrefix}`);
   }
 }
+// Helper function to assert, take screenshot and snapshot HTML
+export function assertAndSnapshot(
+  condition: unknown,
+  message: string,
+  page?: Page | void,
+  snapshotName?: string,
+): asserts condition is
+  & NonNullable<unknown>
+  & (boolean | number | string | object) {
+  assert(condition, message);
+
+  if (RECORD_SNAPSHOTS && page && snapshotName) {
+    captureDetails(page, snapshotName);
+  }
+}
 
 export const sleep = (ms: number) =>
   new Promise((resolve) => setTimeout(resolve, ms));
@@ -46,14 +53,14 @@ export async function tryClick(
   el?: ElementHandle | null,
   page?: Page,
 ): Promise<void> {
-  await assertAndSnapshot(
-    el !== null && el !== undefined,
+  assertAndSnapshot(
+    el,
     "Element does not exist or is not clickable",
     page,
     "try_click_element",
   );
 
-  await el!.click();
+  await el.click();
 }
 
 export const login = async (page: Page) => {

From 0b3067911eac4280de3d3173d03b90159512c8c3 Mon Sep 17 00:00:00 2001
From: Ben Follington <5009316+bfollington@users.noreply.github.com>
Date: Fri, 7 Mar 2025 13:02:21 +1000
Subject: [PATCH 6/8] Seperate snapshot and assert behaviour

---
 .../jumble/integration/basic-flow.test.ts     | 36 ++++++++-----------
 .../packages/jumble/integration/utils.ts      | 28 +++------------
 2 files changed, 20 insertions(+), 44 deletions(-)

diff --git a/typescript/packages/jumble/integration/basic-flow.test.ts b/typescript/packages/jumble/integration/basic-flow.test.ts
index 92c879571..ce42d9283 100644
--- a/typescript/packages/jumble/integration/basic-flow.test.ts
+++ b/typescript/packages/jumble/integration/basic-flow.test.ts
@@ -9,12 +9,13 @@ import {
 } from "@std/testing/bdd";
 import {
   addCharm,
-  assertAndSnapshot,
   inspectCharm,
   login,
   sleep,
+  snapshot,
   waitForSelectorWithText,
 } from "./utils.ts";
+import { assert } from "@std/assert";
 
 const TOOLSHED_API_URL = Deno.env.get("TOOLSHED_API_URL") ??
   "http://localhost:8000/";
@@ -48,34 +49,30 @@ describe("integration", () => {
   });
 
   it("renders a new charm", async () => {
-    assertAndSnapshot(page, "Page should be defined");
-    assertAndSnapshot(testCharm, "Test charm should be defined");
+    assert(page, "Page should be defined");
+    assert(testCharm, "Test charm should be defined");
 
     const anchor = await page!.waitForSelector("nav a");
     const innerText = await anchor.innerText();
-    assertAndSnapshot(
+    assert(
       innerText === "common-knowledge",
       "Logged in and Common Knowledge title renders",
-      page,
-      "logged_in_state",
     );
 
     await page!.goto(
       `${FRONTEND_URL}${testCharm!.space}/${testCharm!.charmId}`,
     );
-    console.log(`Waiting for charm to render`);
+    await snapshot(page, "Waiting for charm to render");
 
     await waitForSelectorWithText(
       page!,
       "a[aria-current='charm-title']",
       "Simple Value: 1",
     );
-    console.log("Charm rendered.");
-    await assertAndSnapshot(
+    await snapshot(page, "Charm rendered.");
+    assert(
       true,
       "Charm rendered successfully",
-      page,
-      "charm_rendered",
     );
 
     console.log("Clicking button");
@@ -88,7 +85,7 @@ describe("integration", () => {
       "div[aria-label='charm-content'] button",
     );
     await button.click();
-    await assertAndSnapshot(true, "Button clicked", page, "button_clicked");
+    assert(true, "Button clicked");
 
     console.log("Checking if title changed");
     await waitForSelectorWithText(
@@ -96,14 +93,13 @@ describe("integration", () => {
       "a[aria-current='charm-title']",
       "Simple Value: 2",
     );
-    console.log("Title changed");
-    await assertAndSnapshot(
+    assert(
       true,
       "Title changed successfully",
-      page,
-      "title_changed",
     );
 
+    await snapshot(page, "Title changed");
+
     console.log("Inspecting charm to verify updates propagated from browser.");
     const charm = await inspectCharm(
       TOOLSHED_API_URL,
@@ -111,18 +107,16 @@ describe("integration", () => {
       testCharm!.charmId,
     );
     console.log("Charm:", charm);
-    assertAndSnapshot(
+    assert(
       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]", () => {
-    assertAndSnapshot(page, "Page should be defined");
-    assertAndSnapshot(testCharm, "Test charm should be defined");
+    assert(page, "Page should be defined");
+    assert(testCharm, "Test charm should be defined");
   });
 });
diff --git a/typescript/packages/jumble/integration/utils.ts b/typescript/packages/jumble/integration/utils.ts
index 4672ccfce..16450a21a 100644
--- a/typescript/packages/jumble/integration/utils.ts
+++ b/typescript/packages/jumble/integration/utils.ts
@@ -15,7 +15,8 @@ const RECORD_SNAPSHOTS = false;
 const SNAPSHOTS_DIR = join(Deno.cwd(), "test_snapshots");
 console.log("SNAPSHOTS_DIR=", SNAPSHOTS_DIR);
 
-async function captureDetails(page: Page, snapshotName: string) {
+export async function snapshot(page: Page | undefined, snapshotName: string) {
+  console.log(snapshotName);
   if (RECORD_SNAPSHOTS && page && snapshotName) {
     ensureDirSync(SNAPSHOTS_DIR);
     const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
@@ -27,22 +28,7 @@ async function captureDetails(page: Page, snapshotName: string) {
     const html = await page.content();
     Deno.writeTextFileSync(`${SNAPSHOTS_DIR}/${filePrefix}.html`, html);
 
-    console.log(`Snapshot saved: ${filePrefix}`);
-  }
-}
-// Helper function to assert, take screenshot and snapshot HTML
-export function assertAndSnapshot(
-  condition: unknown,
-  message: string,
-  page?: Page | void,
-  snapshotName?: string,
-): asserts condition is
-  & NonNullable<unknown>
-  & (boolean | number | string | object) {
-  assert(condition, message);
-
-  if (RECORD_SNAPSHOTS && page && snapshotName) {
-    captureDetails(page, snapshotName);
+    console.log(`→ Snapshot saved: ${filePrefix}`);
   }
 }
 
@@ -53,12 +39,8 @@ export async function tryClick(
   el?: ElementHandle | null,
   page?: Page,
 ): Promise<void> {
-  assertAndSnapshot(
-    el,
-    "Element does not exist or is not clickable",
-    page,
-    "try_click_element",
-  );
+  await snapshot(page, "try_click_element");
+  assert(el, "Element does not exist or is not clickable");
 
   await el.click();
 }

From a7bc32b44aedf9d502752d42a35b5db996857ec9 Mon Sep 17 00:00:00 2001
From: Ben Follington <5009316+bfollington@users.noreply.github.com>
Date: Fri, 7 Mar 2025 13:11:37 +1000
Subject: [PATCH 7/8] Relax the use of `!`

---
 .../jumble/integration/basic-flow.test.ts     | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/typescript/packages/jumble/integration/basic-flow.test.ts b/typescript/packages/jumble/integration/basic-flow.test.ts
index ce42d9283..296ef863f 100644
--- a/typescript/packages/jumble/integration/basic-flow.test.ts
+++ b/typescript/packages/jumble/integration/basic-flow.test.ts
@@ -52,20 +52,21 @@ describe("integration", () => {
     assert(page, "Page should be defined");
     assert(testCharm, "Test charm should be defined");
 
-    const anchor = await page!.waitForSelector("nav a");
-    const innerText = await anchor.innerText();
+    await snapshot(page, "Initial state");
+
+    const anchor = await page.waitForSelector("nav a");
     assert(
-      innerText === "common-knowledge",
+      (await anchor.innerText()) === "common-knowledge",
       "Logged in and Common Knowledge title renders",
     );
 
-    await page!.goto(
-      `${FRONTEND_URL}${testCharm!.space}/${testCharm!.charmId}`,
+    await page.goto(
+      `${FRONTEND_URL}${testCharm.space}/${testCharm.charmId}`,
     );
     await snapshot(page, "Waiting for charm to render");
 
     await waitForSelectorWithText(
-      page!,
+      page,
       "a[aria-current='charm-title']",
       "Simple Value: 1",
     );
@@ -81,7 +82,7 @@ describe("integration", () => {
     // 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();
@@ -89,7 +90,7 @@ describe("integration", () => {
 
     console.log("Checking if title changed");
     await waitForSelectorWithText(
-      page!,
+      page,
       "a[aria-current='charm-title']",
       "Simple Value: 2",
     );
@@ -103,8 +104,8 @@ describe("integration", () => {
     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(

From 232cf90d73632608291ce740e769ce5ce7d36d87 Mon Sep 17 00:00:00 2001
From: Ben Follington <5009316+bfollington@users.noreply.github.com>
Date: Fri, 7 Mar 2025 13:13:40 +1000
Subject: [PATCH 8/8] Remove assert(true)

---
 typescript/packages/jumble/integration/basic-flow.test.ts | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/typescript/packages/jumble/integration/basic-flow.test.ts b/typescript/packages/jumble/integration/basic-flow.test.ts
index 296ef863f..3717ccfa2 100644
--- a/typescript/packages/jumble/integration/basic-flow.test.ts
+++ b/typescript/packages/jumble/integration/basic-flow.test.ts
@@ -86,7 +86,7 @@ describe("integration", () => {
       "div[aria-label='charm-content'] button",
     );
     await button.click();
-    assert(true, "Button clicked");
+    await snapshot(page, "Button clicked");
 
     console.log("Checking if title changed");
     await waitForSelectorWithText(
@@ -94,10 +94,6 @@ describe("integration", () => {
       "a[aria-current='charm-title']",
       "Simple Value: 2",
     );
-    assert(
-      true,
-      "Title changed successfully",
-    );
 
     await snapshot(page, "Title changed");
 
@@ -107,6 +103,7 @@ describe("integration", () => {
       testCharm.space,
       testCharm.charmId,
     );
+
     console.log("Charm:", charm);
     assert(
       charm.includes("Simple Value: 2"),