Seperate snapshot and assert behaviour

Author: bfollington

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,41 +85,38 @@ 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(
       page!,
       "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,
       testCharm!.space,
       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");
   });
 });

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();
 }