@fungi.computer/bonsai 0.0.0-stage → 0.0.1

package/test/browser/edit-in-inkcap.browser.mjs

@@ -0,0 +1,83 @@
+// The Code tab's Inkcap entry and unsynced chip at both widths and themes.
+import assert from "node:assert/strict";
+import console from "node:console";
+import process from "node:process";
+import { mkdir } from "node:fs/promises";
+import { chromium } from "playwright";
+
+const origin = process.argv[2];
+const output = process.argv[3];
+assert.ok(origin && output, "Usage: edit-in-inkcap.browser.mjs <origin> <dir>");
+await mkdir(output, { recursive: true });
+const browser = await chromium.launch({ headless: true });
+try {
+  for (const scenario of ["code", "pending"])
+    for (const width of [1440, 390])
+      for (const theme of ["light", "dark"]) {
+        const page = await browser.newPage({
+          viewport: { width, height: width === 390 ? 844 : 900 },
+          colorScheme: theme,
+          reducedMotion: "reduce",
+        });
+        const errors = [];
+        page.on("pageerror", (error) => errors.push(error.message));
+        await page.goto(
+          `${origin}/test/browser/visual.html?tab=code${scenario === "pending" ? "&pending" : ""}`,
+        );
+        await page.evaluate((value) => {
+          globalThis.document.documentElement.setAttribute("data-theme", value);
+        }, theme);
+        const edit = page.getByRole("button", {
+          name: "Edit in Inkcap",
+          exact: true,
+        });
+        await edit.waitFor();
+        if (scenario === "pending") {
+          await page.getByText("Unsynced edit", { exact: true }).waitFor();
+          await page
+            .getByRole("button", { name: "Sync", exact: true })
+            .waitFor();
+          await page
+            .getByText("Three new lilies float by the reeds.")
+            .waitFor();
+        }
+        await page.evaluate(() => globalThis.document.fonts.ready);
+        assert.deepEqual(errors, []);
+        await page.screenshot({
+          path: `${output}/${scenario}-${String(width)}-${theme}.png`,
+          fullPage: true,
+        });
+        await edit.click();
+        assert.deepEqual(
+          JSON.parse(
+            await page.evaluate(
+              () => globalThis.document.documentElement.dataset.openApp,
+            ),
+          ),
+          {
+            role: "files",
+            intent: {
+              kind: "navigate",
+              params: [
+                { key: "repository", value: "koi-pond" },
+                { key: "branch", value: "main" },
+                { key: "path", value: "README.md" },
+              ],
+            },
+          },
+        );
+        assert.ok(
+          (await page.evaluate(
+            () => globalThis.document.documentElement.scrollWidth,
+          )) <= width,
+          "no horizontal page scroll",
+        );
+        assert.deepEqual(errors, []);
+        await page.close();
+      }
+  console.log(
+    "PASS Edit in Inkcap entry and unsynced chip 1440/390 light/dark",
+  );
+} finally {
+  await browser.close();
+}

package/test/browser/repository-settings-fixture.tsx

@@ -0,0 +1,108 @@
+/** Real repository pages with controlled App-method replies, no provider writes. */
+import { useEffect, useRef } from "react";
+import { createRoot } from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createCapabilityRegistry } from "@fungi.computer/agar";
+import { appMethods } from "@fungi.computer/agar/backend";
+import * as z from "zod";
+import { repoDetail } from "../../shared/contract.js";
+import { connect } from "../../web/transport.js";
+import { RouterProvider, useRouter } from "../../web/router.js";
+import { RepoPage } from "../../web/pages.js";
+import "@fungi.computer/caps/fonts.css";
+import "../../web/bonsai.css";
+
+const name = "disposable-merge-1791840651624";
+const live = { connected: true, error: null, fresh: new Set<number>() };
+const detail = repoDetail.parse({
+  repo: {
+    name,
+    description: "Contest probe repository",
+    parent: null,
+    owner: null,
+    createdAt: 0,
+    lastPushAt: null,
+    forks: [],
+    openChanges: 0,
+    activity: [],
+  },
+  defaultBranch: "main",
+  refs: [],
+  cloneUrl: `https://example.test/git/${name}.git`,
+  empty: true,
+});
+const client = new QueryClient({
+  defaultOptions: { queries: { staleTime: Infinity, retry: false } },
+});
+client.setQueryData(["repo", name], detail);
+client.setQueryData(["events", name], { events: [] });
+client.setQueryData(["changes", name], { changes: [] });
+client.setQueryData(["agents"], { agents: [] });
+let attempts = 0;
+let withdrawn = false;
+const capabilities = createCapabilityRegistry();
+capabilities.provide(appMethods, {
+  call: (method, inputJson) => {
+    if (method === "repos.delete") {
+      z.strictObject({ repo: z.literal(name) }).parse(JSON.parse(inputJson));
+      attempts += 1;
+      const counter = document.getElementById("attempts");
+      if (counter) counter.textContent = String(attempts);
+      if (new URLSearchParams(location.search).get("scenario") === "refused")
+        return Promise.resolve({
+          error: "Only the owner can delete repositories",
+        });
+      withdrawn = true;
+      return Promise.resolve(
+        attempts === 1
+          ? { error: "Provider temporarily unavailable; retry deletion" }
+          : { deleted: true },
+      );
+    }
+    if (method === "repos.get")
+      return Promise.resolve(withdrawn ? { error: "No repository" } : detail);
+    if (method === "issues.read")
+      return Promise.resolve({ error: "Repository has no commits" });
+    if (method === "repos.list")
+      return Promise.resolve({ repos: withdrawn ? [] : [detail.repo] });
+    if (method === "activity.list") return Promise.resolve({ events: [] });
+    if (method === "changes.list") return Promise.resolve({ changes: [] });
+    if (method === "actors.list") return Promise.resolve({ agents: [] });
+    return Promise.reject(new Error(`Unexpected fixture method: ${method}`));
+  },
+});
+connect({ capabilities });
+
+function Shell() {
+  const { route, go } = useRouter();
+  const opened = useRef(false);
+  useEffect(() => {
+    if (!opened.current) {
+      opened.current = true;
+      go(`/${name}`);
+    }
+  }, [go]);
+  return (
+    <div className="caps-app-canvas bonsai-shell">
+      <main className="bonsai-page">
+        {route.page === "repo" ? (
+          <RepoPage route={route} live={live} />
+        ) : (
+          <h1>Repositories</h1>
+        )}
+      </main>
+      <output id="attempts" hidden>
+        0
+      </output>
+    </div>
+  );
+}
+const root = document.getElementById("root");
+if (!root) throw new Error("Settings fixture root missing");
+createRoot(root).render(
+  <QueryClientProvider client={client}>
+    <RouterProvider>
+      <Shell />
+    </RouterProvider>
+  </QueryClientProvider>,
+);

package/test/browser/repository-settings.browser.mjs

@@ -0,0 +1,136 @@
+import assert from "node:assert/strict";
+import console from "node:console";
+import process from "node:process";
+import { mkdir } from "node:fs/promises";
+import { fileURLToPath, URL } from "node:url";
+import { createServer } from "vite";
+import { chromium } from "playwright";
+import viteConfig from "./vite.config.mjs";
+
+const output = new URL(
+  "../../../../.botanical/repos-delete/shots/",
+  import.meta.url,
+);
+await mkdir(output, { recursive: true });
+const server = await createServer({
+  ...viteConfig,
+  configFile: false,
+  server: { ...viteConfig.server, port: 0 },
+});
+await server.listen();
+const origin = server.resolvedUrls.local[0];
+let browser;
+const name = "disposable-merge-1791840651624";
+const before = process.argv.includes("--before");
+try {
+  browser = await chromium.launch({ headless: true });
+  for (const width of [1440, 390])
+    for (const theme of ["light", "dark"]) {
+      const page = await browser.newPage({
+        viewport: { width, height: 1000 },
+        colorScheme: theme,
+      });
+      page.setDefaultTimeout(10000);
+      const errors = [];
+      page.on("pageerror", (cause) => errors.push(cause.message));
+      await page.goto(`${origin}test/browser/repository-settings.html`);
+      await page.evaluate(
+        (value) =>
+          globalThis.document.documentElement.setAttribute("data-theme", value),
+        theme,
+      );
+      await page.getByRole("heading", { name, exact: true }).waitFor();
+      const settings = page.getByRole("link", {
+        name: "Settings",
+        exact: true,
+      });
+      if (before) {
+        assert.equal(await settings.count(), 0);
+        await page.screenshot({
+          path: fileURLToPath(new URL(`${width}-${theme}-before.png`, output)),
+        });
+        await page.close();
+        continue;
+      }
+      await settings.click();
+      await page
+        .getByRole("heading", { name: "Repository settings", exact: true })
+        .waitFor();
+      assert.equal(await page.locator("#attempts").textContent(), "0");
+      await page.screenshot({
+        path: fileURLToPath(new URL(`${width}-${theme}-settings.png`, output)),
+      });
+      await page
+        .getByRole("button", { name: "Delete repository", exact: true })
+        .click();
+      await page
+        .getByRole("textbox", { name: "Repository name" })
+        .fill("wrong");
+      assert.equal(
+        await page
+          .getByRole("button", { name: "Confirm deletion" })
+          .isDisabled(),
+        true,
+      );
+      await page.getByRole("button", { name: "Cancel", exact: true }).click();
+      assert.equal(await page.locator("#attempts").textContent(), "0");
+      await page
+        .getByRole("button", { name: "Delete repository", exact: true })
+        .click();
+      await page.getByRole("textbox", { name: "Repository name" }).fill(name);
+      await page.screenshot({
+        path: fileURLToPath(new URL(`${width}-${theme}-confirm.png`, output)),
+      });
+      await page.getByRole("button", { name: "Confirm deletion" }).click();
+      await page
+        .getByRole("alert")
+        .filter({
+          hasText: "Deletion didn't finish because storage was unavailable.",
+        })
+        .waitFor();
+      assert.equal(await page.getByRole("alert").locator("p").count(), 1);
+      assert.equal(await page.locator("#attempts").textContent(), "1");
+      await page.screenshot({
+        path: fileURLToPath(new URL(`${width}-${theme}-retry.png`, output)),
+      });
+      await page.getByRole("button", { name: "Confirm deletion" }).click();
+      await page
+        .getByRole("heading", { name: "Repositories", exact: true })
+        .waitFor();
+      assert.equal(await page.locator("#attempts").textContent(), "2");
+      await page.goto(
+        `${origin}test/browser/repository-settings.html?scenario=refused`,
+      );
+      await page.getByRole("link", { name: "Settings", exact: true }).click();
+      await page
+        .getByRole("button", { name: "Delete repository", exact: true })
+        .click();
+      await page.getByRole("textbox", { name: "Repository name" }).fill(name);
+      await page.getByRole("button", { name: "Confirm deletion" }).click();
+      await page
+        .getByRole("alert")
+        .filter({ hasText: "Only the owner" })
+        .waitFor();
+      assert.deepEqual(errors, []);
+      assert.equal(
+        await page.evaluate(
+          () =>
+            globalThis.document.documentElement.scrollWidth <=
+            globalThis.innerWidth,
+        ),
+        true,
+        "no horizontal overflow",
+      );
+      await page.close();
+    }
+  console.log(
+    before
+      ? "PASS baseline 1440/390 light/dark: repository view before Settings"
+      : "PASS Settings 1440/390 light/dark: launcher entry, explicit confirmation, cancel, owner refusal, failed provider retry and home navigation",
+  );
+} finally {
+  await browser?.close();
+  await server.close();
+  console.log("CLOSED browser and Vite server");
+}
+process.exitCode = 0;

package/test/browser/repository-settings.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./repository-settings-fixture.tsx"></script>
+  </body>
+</html>