|
| 1 | +// SPDX-License-Identifier: MPL-2.0 |
| 2 | +// SPDX-FileCopyrightText: 2026 hyperpolymath |
| 3 | +// |
| 4 | +// Browser tests for the AffineScript TEA runtime, driven through the Todo |
| 5 | +// reference app (../examples/todo/Todo.affine) in headless Chromium. |
| 6 | +// |
| 7 | +// Run: cd affinescript-tea/e2e && bun install --frozen-lockfile && bun test |
| 8 | +// Needs the compiler built (`dune build` at the repo root) and Playwright's |
| 9 | +// Chromium (`bunx playwright install chromium` if not cached). |
| 10 | + |
| 11 | +import { afterAll, beforeAll, expect, test } from "bun:test"; |
| 12 | +import { mkdtempSync, copyFileSync, writeFileSync } from "node:fs"; |
| 13 | +import { tmpdir } from "node:os"; |
| 14 | +import { join } from "node:path"; |
| 15 | +import { chromium } from "playwright"; |
| 16 | + |
| 17 | +const repo = new URL("../../", import.meta.url).pathname; |
| 18 | +const teaSrc = join(repo, "affinescript-tea/src"); |
| 19 | +const site = mkdtempSync(join(tmpdir(), "tea-e2e-")); |
| 20 | + |
| 21 | +let server; |
| 22 | +let browser; |
| 23 | +let page; |
| 24 | +const consoleErrors = []; |
| 25 | + |
| 26 | +/** Compile the Todo example to Bun-ESM into the served directory. */ |
| 27 | +function compileTodo() { |
| 28 | + const out = Bun.spawnSync({ |
| 29 | + cmd: [join(repo, "_build/default/bin/main.exe"), "compile", "--bun-esm", |
| 30 | + join(repo, "affinescript-tea/examples/todo/Todo.affine"), "-o", join(site, "todo.bun.js")], |
| 31 | + cwd: join(repo, "affinescript-tea/examples/todo"), |
| 32 | + env: { ...process.env, AFFINESCRIPT_STDLIB: join(repo, "stdlib"), AFFINESCRIPT_PATH: teaSrc }, |
| 33 | + }); |
| 34 | + if (out.exitCode !== 0) { |
| 35 | + throw new Error(`compile failed:\n${out.stdout}\n${out.stderr}`); |
| 36 | + } |
| 37 | +} |
| 38 | + |
| 39 | +beforeAll(async () => { |
| 40 | + compileTodo(); |
| 41 | + copyFileSync(join(teaSrc, "tea_host.js"), join(site, "tea_host.js")); |
| 42 | + writeFileSync( |
| 43 | + join(site, "index.html"), |
| 44 | + `<!doctype html><meta charset="utf-8"><title>todo</title><div id="root"></div> |
| 45 | +<script type="module">import "./tea_host.js"; import { main } from "./todo.bun.js"; main();</script>`, |
| 46 | + ); |
| 47 | + server = Bun.serve({ |
| 48 | + port: 0, |
| 49 | + fetch(req) { |
| 50 | + const path = new URL(req.url).pathname; |
| 51 | + const file = Bun.file(join(site, path === "/" ? "index.html" : path.slice(1))); |
| 52 | + return new Response(file); |
| 53 | + }, |
| 54 | + }); |
| 55 | + browser = await chromium.launch(); |
| 56 | + page = await browser.newPage(); |
| 57 | + page.on("console", (m) => { |
| 58 | + if (m.type() === "error") consoleErrors.push(m.text()); |
| 59 | + }); |
| 60 | + page.on("pageerror", (e) => consoleErrors.push(String(e))); |
| 61 | + await page.goto(`http://localhost:${server.port}/`); |
| 62 | + await page.waitForSelector("#app"); |
| 63 | +}); |
| 64 | + |
| 65 | +afterAll(async () => { |
| 66 | + await browser?.close(); |
| 67 | + server?.stop(true); |
| 68 | +}); |
| 69 | + |
| 70 | +/** |
| 71 | + * Poll `read` until `check(value)` passes (or 5 s elapse), then assert it. |
| 72 | + * Rendering is batched to the next animation frame, so DOM reads after an |
| 73 | + * interaction must wait for it. |
| 74 | + */ |
| 75 | +async function eventually(read, check) { |
| 76 | + const deadline = Date.now() + 5000; |
| 77 | + let value = await read(); |
| 78 | + while (Date.now() < deadline) { |
| 79 | + try { |
| 80 | + check(value); |
| 81 | + return; |
| 82 | + } catch { |
| 83 | + await new Promise((r) => setTimeout(r, 20)); |
| 84 | + value = await read(); |
| 85 | + } |
| 86 | + } |
| 87 | + check(value); |
| 88 | +} |
| 89 | + |
| 90 | +/** Text of every item title, in DOM order. */ |
| 91 | +const titles = () => page.$$eval("#items .title", (els) => els.map((e) => e.textContent)); |
| 92 | + |
| 93 | +/** Add an item by typing it and pressing Enter. */ |
| 94 | +async function add(title) { |
| 95 | + await page.fill("#draft", title); |
| 96 | + await page.press("#draft", "Enter"); |
| 97 | + await eventually(titles, (v) => expect(v).toContain(title)); |
| 98 | +} |
| 99 | + |
| 100 | +test("mounts the initial view and runs the init command", async () => { |
| 101 | + expect(await page.textContent("h1")).toBe("Todo"); |
| 102 | + expect(await page.textContent("#count")).toBe("0 left"); |
| 103 | + await eventually(() => page.textContent("#notice"), (v) => expect(v).toBe("ready")); |
| 104 | +}); |
| 105 | + |
| 106 | +test("controlled input + Enter adds an item and clears the draft", async () => { |
| 107 | + await add("milk"); |
| 108 | + expect(await page.inputValue("#draft")).toBe(""); |
| 109 | + expect(await page.textContent("#count")).toBe("1 left"); |
| 110 | + await eventually(() => page.textContent("#notice"), (v) => expect(v).toBe("added milk")); |
| 111 | +}); |
| 112 | + |
| 113 | +test("the add button and an empty draft", async () => { |
| 114 | + await page.click("#add"); |
| 115 | + expect(await titles()).toEqual(["milk"]); |
| 116 | + await page.fill("#draft", "eggs"); |
| 117 | + await page.click("#add"); |
| 118 | + await eventually(titles, (v) => expect(v).toEqual(["milk", "eggs"])); |
| 119 | +}); |
| 120 | + |
| 121 | +test("keyed reorder moves the existing DOM node instead of recreating it", async () => { |
| 122 | + await add("bread"); |
| 123 | + await page.$eval('#items li[data-id="3"]', (li) => { |
| 124 | + li.__marker = "kept"; |
| 125 | + }); |
| 126 | + await page.click('#items li[data-id="3"] .top'); |
| 127 | + await eventually(titles, (v) => expect(v).toEqual(["bread", "milk", "eggs"])); |
| 128 | + const marker = await page.$eval("#items li:first-child", (li) => li.__marker ?? null); |
| 129 | + expect(marker).toBe("kept"); |
| 130 | +}); |
| 131 | + |
| 132 | +test("toggling updates the checkbox, class and count", async () => { |
| 133 | + await page.click('#items li[data-id="1"] input[type=checkbox]'); |
| 134 | + await eventually(() => page.textContent("#count"), (v) => expect(v).toBe("2 left")); |
| 135 | + expect(await page.getAttribute('#items li[data-id="1"]', "class")).toBe("item done"); |
| 136 | + expect(await page.isChecked('#items li[data-id="1"] input[type=checkbox]')).toBe(true); |
| 137 | +}); |
| 138 | + |
| 139 | +test("removing an item removes exactly its node", async () => { |
| 140 | + await page.click('#items li[data-id="2"] .remove'); |
| 141 | + await eventually(titles, (v) => expect(v).toEqual(["bread", "milk"])); |
| 142 | + expect(await page.$$eval("#items li", (els) => els.length)).toBe(2); |
| 143 | +}); |
| 144 | + |
| 145 | +test("a subscription starts and stops with the model", async () => { |
| 146 | + await page.click("#tick"); |
| 147 | + await eventually(async () => Number(await page.textContent("#ticks")), (v) => expect(v).toBeGreaterThan(3)); |
| 148 | + await page.click("#tick"); |
| 149 | + await page.waitForTimeout(60); |
| 150 | + const stopped = Number(await page.textContent("#ticks")); |
| 151 | + await page.waitForTimeout(150); |
| 152 | + expect(Number(await page.textContent("#ticks"))).toBe(stopped); |
| 153 | +}); |
| 154 | + |
| 155 | +test("no runtime errors were reported", () => { |
| 156 | + expect(consoleErrors).toEqual([]); |
| 157 | +}); |
0 commit comments