chore: Run jumble integration tests as Deno tests (#537)

chore: Run jumble integration tests as Deno tests, so that we can add more than 1 test

Author: jsantell

typescript/packages/jumble/deno.json

@@ -4,7 +4,7 @@
     "build": "deno run -A --node-modules-dir=auto npm:vite build",
     "preview": "deno run -A --node-modules-dir=auto npm:vite preview",
     "test": "echo 'No tests to run.'",
-    "integration": "deno run -A ./integration/smoke-test.ts"
+    "integration": "deno test -A ./integration/*.test.ts"
   },
   "imports": {
     "@/": "./src/",

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

@@ -0,0 +1,104 @@
+import { Browser, launch, Page } from "@astral/astral";
+import { assert } from "@std/assert";
+import {
+  afterAll,
+  afterEach,
+  beforeAll,
+  beforeEach,
+  describe,
+  it,
+} from "@std/testing/bdd";
+import {
+  addCharm,
+  inspectCharm,
+  login,
+  sleep,
+  waitForSelectorWithText,
+} from "./utils.ts";
+
+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;
+
+console.log(`TOOLSHED_API_URL=${TOOLSHED_API_URL}`);
+console.log(`FRONTEND_URL=${FRONTEND_URL}`);
+
+describe("integration", () => {
+  let browser: Browser | void = undefined;
+  let page: Page | void = undefined;
+  let testCharm: { charmId: string; space: string } | void = undefined;
+
+  beforeAll(async () => {
+    testCharm = await addCharm(TOOLSHED_API_URL);
+    console.log(`Charm added`, testCharm);
+    browser = await launch({ headless: HEADLESS });
+  });
+  beforeEach(async () => {
+    console.log(`Waiting to open website at ${FRONTEND_URL}`);
+    page = await browser!.newPage(FRONTEND_URL);
+    console.log(`Opened website at ${FRONTEND_URL}`);
+    await login(page);
+  });
+  afterEach(async () => {
+    await page!.close();
+  });
+  afterAll(async () => {
+    await browser!.close();
+  });
+
+  it("renders a new charm", async () => {
+    assert(page);
+    assert(testCharm);
+    const anchor = await page.waitForSelector("nav a");
+    assert(
+      (await anchor.innerText()) === "common-knowledge",
+      "Logged in and Common Knowledge title renders",
+    );
+
+    await page.goto(`${FRONTEND_URL}${testCharm.space}/${testCharm.charmId}`);
+    console.log(`Waiting for charm to render`);
+
+    await waitForSelectorWithText(
+      page,
+      "a[aria-current='charm-title']",
+      "Simple Value: 1",
+    );
+    console.log("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(
+      "div[aria-label='charm-content'] button",
+    );
+    await button.click();
+
+    console.log("Checking if title changed");
+    await waitForSelectorWithText(
+      page,
+      "a[aria-current='charm-title']",
+      "Simple Value: 2",
+    );
+    console.log("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);
+    assert(charm.includes("Simple Value: 2"), "Charm 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);
+  });
+});

typescript/packages/jumble/integration/smoke-test.ts

@@ -12,7 +12,17 @@ export const sleep = (ms: number) =>
   new Promise((resolve) => setTimeout(resolve, ms));
 
 export const login = async (page: Page) => {
-  // First, see if any credential data is
+  // Wait a second :(
+  // See if #user-avatar is rendered
+  // Check if we're already logged in
+  await sleep(1000);
+  const avatar = await page.$("#user-avatar");
+  if (avatar) {
+    console.log("Already logged in");
+    return;
+  }
+
+  // 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) {
@@ -21,6 +31,9 @@ export const login = async (page: Page) => {
     }
   }
 
+  // Try log in
+  console.log("Logging in");
+
   // Click the first button, "register"
   let button = await page.$("button");
   await button!.click();

typescript/packages/jumble/integration/utils.ts

@@ -43,6 +43,7 @@ export function User() {
   };
   return (
     <div
+      id="user-avatar"
       onClick={clearAuthentication}
       style={styles}
       className="relative group flex max-w-xs items-center rounded-full bg-gray-800 text-sm focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-hidden cursor-pointer"