pages.test.ts

20.2 KB · raw

1import { beforeAll, describe, expect, test } from "bun:test";2import { mkdir, mkdtemp, writeFile } from "node:fs/promises";3import { tmpdir } from "node:os";4import { join } from "node:path";5import type { Hono } from "hono";6import { openBucket } from "../src/bucket/reader.ts";7import { syncAll } from "../src/bucket/sync.ts";8import { fileAt, objectBytes, type Save } from "../src/mirror/queries.ts";9import { openMirror } from "../src/mirror/store.ts";10import { timelineSvg } from "../src/pages/timeline.ts";11import { createApp } from "../src/server/app.ts";12import { openKeprDb } from "../src/server/db.ts";13import { type Fixture, makeKohBucket } from "./fixture.ts";1415let fx: Fixture;16let app: Hono;17let mirrorDir: string;18let tailSaves: string[];19const get = (path: string) => app.request(path);20const body = async (path: string) => (await get(path)).text();21// History's IDs only, not the Atlas picker's, which lists every save.22const historyIds = (page: string) => {23	const list = /data-list="history">(.*?)<\/div>/s.exec(page)?.[1] ?? "";24	return [...list.matchAll(/class="history-id">([0-9a-f]+)</g)].map((m) => m[1]);25};2627beforeAll(async () => {28	fx = await makeKohBucket();29	const secretRepo = await makeKohBucket("hidden");30	const large = await makeKohBucket("large");31	// Over 1 MB each: text with a two-byte "é" split by the 1 MB mark, and invalid UTF-8 with no NUL.32	await writeFile(33		join(large.repoDir, "big.txt"),34		`${"a".repeat(1024 * 1024 - 1)}é${"b".repeat(1000)}\n`,35	);36	await writeFile(join(large.repoDir, "big.bin"), new Uint8Array(1024 * 1024 + 500).fill(0xff));37	Bun.spawnSync(["koh3", "save", "add large files"], {38		cwd: large.repoDir,39		env: { PATH: process.env.PATH, HOME: join(large.repoDir, "../../home"), NO_COLOR: "1" },40	});41	// A file that gains its final newline, then loses it again.42	const tail = await makeKohBucket("tail");43	const tailEnv = { PATH: process.env.PATH, HOME: join(tail.repoDir, "../../home"), NO_COLOR: "1" };44	for (const [text, message] of [45		["a\nb", "add tail"],46		["a\nb\n", "end tail with a newline"],47		["a\nb", "drop the newline"],48	] as const) {49		await writeFile(join(tail.repoDir, "tail.txt"), text);50		Bun.spawnSync(["koh3", "save", message], { cwd: tail.repoDir, env: tailEnv });51	}52	tailSaves = JSON.parse(53		Bun.spawnSync(["koh3", "view", "--json"], {54			cwd: tail.repoDir,55			env: tailEnv,56		}).stdout.toString(),57	).saves.map((save: { id: string }) => save.id);58	const dataDir = await mkdtemp(join(tmpdir(), "kepr-pages-"));59	await mkdir(join(dataDir, "assets"));60	await writeFile(join(dataDir, "assets", "plain.txt"), "asset\n");61	const kepr = openKeprDb(dataDir);62	mirrorDir = join(dataDir, "mirror");63	for (const bucketDir of [fx.bucketDir, secretRepo.bucketDir, large.bucketDir, tail.bucketDir]) {64		const bucket = openBucket({ kind: "folder", path: bucketDir });65		await syncAll({ bucket, kepr, mirrorDir });66	}67	kepr.run("UPDATE repos SET public = 1, homepage = 'https://demo.example' WHERE name = 'demo'");68	kepr.run("UPDATE repos SET public = 1 WHERE name IN ('large', 'tail')");69	app = createApp(70		{71			domain: "kepr.example",72			dataDir,73			adminPasswordHash: "$argon2id$x",74			bucket: { kind: "folder", path: fx.bucketDir },75		},76		kepr,77	);78});7980const [head, , second, first] = [0, 1, 2, 3].map((i) => () => fx.saveIds[i] as string);8182describe("the visibility gate", () => {83	test("a private repo and an unknown one are the same 404, everywhere", async () => {84		for (const suffix of ["", "/files/src/main.ts", "/raw/src/main.ts"]) {85			const hidden = await get(`/hidden${suffix}`);86			const missing = await get(`/nowhere${suffix}`);87			expect(hidden.status).toBe(404);88			expect(missing.status).toBe(404);89			expect((await hidden.text()).replaceAll("/hidden", "/nowhere")).toBe(await missing.text());90		}91	});92});9394describe("the repo page", () => {95	test("renders header, timeline, history and README at HEAD with a short cache", async () => {96		const response = await get("/demo");97		expect(response.status).toBe(200);98		expect(response.headers.get("cache-control")).toBe("public, max-age=60");99		const page = await response.text();100		expect(page).toContain('<h1 class="repo-name">demo</h1>');101		// The README opens with an HTML comment and a raw <p align>; neither is the intro.102		expect(/<div class="repo-desc"><p>(.*?)<\/p>/.exec(page)?.[1]).toBe(103			"A small repo for <strong>Kepr's</strong> tests.",104		);105		expect(page).toContain(106			'<meta property="og:description" content="A small repo for Kepr&#39;s tests.">',107		);108		expect(page).toContain('href="https://demo.example"');109		expect(page).toContain('<span class="lang-badge">TypeScript</span>');110		expect(page).toContain("3 saves");111		expect(page).not.toContain('class="install-line"');112		expect(page.match(/class="dot d\d"/g)?.length).toBe(3);113		expect(page).not.toContain("density = activity");114		expect(historyIds(page)).toEqual([head(), second(), first()]);115		expect(page).toContain('data-copy="koh steal kepr.example/demo"');116		expect(page).toContain('href="/demo/releases" data-panel="releases">builds</a>');117	});118119	test("a page past the last, or too large to bind, is page 1", async () => {120		for (const query of ["?page=2", `?page=${"9".repeat(400)}`, "?page=1e999", "?page=x"]) {121			const response = await get(`/demo${query}`);122			expect([query, response.status]).toEqual([query, 200]);123			expect(historyIds(await response.text()).length).toBe(3);124		}125	});126127	test("checkpoints never appear", async () => {128		expect(await body("/demo")).not.toContain(fx.saveIds[1] as string);129	});130131	test("the README points relative links and images at raw files and drops unsafe links", async () => {132		const page = await body("/demo");133		expect(page).toContain('<a href="/demo/raw/docs/guide.md">the guide</a>');134		expect(page).toContain('<img src="/demo/raw/docs/logo.png" alt="logo">');135		expect(page).toContain('<a href="https://example.com">the site</a>');136		expect(page).not.toContain('href="javascript:');137		expect(page).toContain("&lt;script&gt;alert");138		expect(page).not.toContain("<script>alert");139	});140});141142describe("the timeline", () => {143	// A replayed save keeps its original time, so newest-first order is not time order.144	const saves = [300, 100, 500, 200].map(145		(created_at, i): Save => ({146			id: `00000000000${i}`,147			parent: "",148			message: "m",149			created_at: created_at * 86400,150			machine: "m",151			agent: "",152			session: "",153			is_checkpoint: false,154		}),155	);156157	test("span from the earliest to the latest save, whatever the line's order", () => {158		const dots = [...timelineSvg("demo", saves).value.matchAll(/cx="([\d.]+)%"/g)].map((m) => m[1]);159		expect(dots).toEqual(["50.000", "1.000", "99.000", "25.500"]);160	});161});162163describe("the file viewer", () => {164	test("shows a file at HEAD and at an old save, with line anchors", async () => {165		const now = await get("/demo/files/src/main.ts");166		expect(now.headers.get("cache-control")).toBe("public, max-age=60");167		const nowPage = await now.text();168		expect(nowPage).toContain("hello");169		expect(nowPage).toContain(170			'<span class="line" id="L2"><a class="ln" href="#L2">2</a><span class="lc">',171		);172		expect(nowPage).toContain('class="tk-');173174		const then = await get(`/demo/files/src/main.ts?at=${second().slice(0, 6)}`);175		expect(then.headers.get("cache-control")).toBe("private, max-age=31536000");176		const thenPage = await then.text();177		expect(thenPage).toContain("&#39;hi&#39;");178		expect(thenPage).not.toContain("hello");179		expect(thenPage).toContain(`/demo/raw/src/main.ts?at=${second()}`);180	});181182	test("a file absent at that save, a bad save or an unsafe path is a 404", async () => {183		expect((await get(`/demo/files/src/main.ts?at=${first()}`)).status).toBe(404);184		expect((await get("/demo/files/src/main.ts?at=zzzzzz")).status).toBe(404);185		expect((await get("/demo/files/src/main.ts?at=abc")).status).toBe(404);186		expect((await get("/demo/files/src%2F..%2FREADME.md")).status).toBe(404);187		expect((await get("/demo/files/nothing.txt")).status).toBe(404);188	});189190	test("Markdown renders, with a source toggle", async () => {191		const rendered = await body("/demo/files/docs/guide.md");192		expect(rendered).toContain("<h1>Guide</h1>");193		const source = await body("/demo/files/docs/guide.md?view=source");194		expect(source).toContain('id="L1"');195		expect(source).not.toContain("<h1>Guide</h1>");196	});197198	test("an image displays inline from its raw file", async () => {199		expect(await body("/demo/files/docs/logo.png")).toContain('<img src="/demo/raw/docs/logo.png"');200	});201});202203describe("files over 1 MB", () => {204	test("text shows its first 1 MB with a raw link, even with a character cut at the mark", async () => {205		const page = await body("/large/files/big.txt");206		expect(page).toContain("showing the first 1 MB");207		expect(page).toContain('href="/large/raw/big.txt"');208		expect(page).not.toContain("bbb");209		const raw = await get("/large/raw/big.txt");210		expect(raw.headers.get("content-type")).toBe("text/plain; charset=utf-8");211	});212213	test("invalid UTF-8 without a NUL is binary, not text", async () => {214		const page = await body("/large/files/big.bin");215		expect(page).toContain("binary file");216		expect(page).not.toContain('class="code"');217		const raw = await get("/large/raw/big.bin");218		expect(raw.headers.get("content-type")).toBe("application/octet-stream");219	});220});221222describe("the Atlas", () => {223	// A row's detail panel, fetched on hover or select; a folder's path ends in a slash.224	const panelOf = (path: string, at?: string) =>225		body(`/demo/atlas/panel?${new URLSearchParams(at ? { path, at } : { path })}`);226	const rowOf = (page: string, name: string) =>227		new RegExp(`data-name="${name}"[^>]*>(.*?)</a>`, "s").exec(page)?.[1] ?? "";228229	test("sits between the timeline and History", async () => {230		const page = await body("/demo");231		const atlas = page.indexOf('id="atlas"');232		expect(page.indexOf('class="timeline"')).toBeLessThan(atlas);233		expect(atlas).toBeLessThan(page.indexOf('id="history"'));234	});235236	test("is a folder tree, folders first, then files, alphabetical", async () => {237		const names = [...(await body("/demo")).matchAll(/class="atlas-name">([^<]*)</g)].map(238			(m) => m[1],239		);240		expect(names).toEqual([241			"docs/",242			"guide.md",243			"logo.png",244			"src/",245			"lib/",246			"deep/",247			"util.ts",248			"main.ts",249			"vendor/",250			"big.c",251			"README.md",252			"secret.txt",253		]);254	});255256	test("rows carry the first sentence of the file's own comment, rendered, and link to the file", async () => {257		const page = await body("/demo");258		expect(rowOf(page, "util.ts")).toContain(259			'<span class="atlas-desc">The <em>one</em> helper.</span>',260		);261		expect(rowOf(page, "main.ts")).toContain("Entry point.");262		expect(rowOf(page, "guide.md")).toContain('<span class="atlas-desc">Read me.</span>');263		expect(rowOf(page, "secret.txt")).toContain('<span class="atlas-desc"></span>');264		expect(page).toContain(265			'<a class="atlas-row atlas-file" href="/demo/files/src/main.ts" data-name="main.ts" data-path="src/main.ts">',266		);267		const util = await panelOf("src/lib/deep/util.ts");268		expect(util).toContain("<p>The <em>one</em> helper. Deep down.</p>");269		expect(util).toContain("<dt>exports</dt><dd>one</dd>");270		expect(await panelOf("src/main.ts")).not.toContain("atlas-map");271	});272273	test("the panel counts only real saves, crediting a checkpoint's change to the next save", async () => {274		const page = await body("/demo");275		const main = await panelOf("src/main.ts");276		expect(main).toContain("<dt>lines</dt><dd>2</dd>");277		expect(main).toContain("<dt>saves</dt><dd>2</dd>");278		expect(main).toContain(`<dt>first save</dt><dd><a href="/demo/saves/${second()}">`);279		expect(main).toContain(`<dt>last save</dt><dd><a href="/demo/saves/${head()}">`);280		const guide = await panelOf("docs/guide.md");281		expect(guide).toContain("<dt>saves</dt><dd>2</dd>");282		expect(guide).toContain(`<dt>last save</dt><dd><a href="/demo/saves/${head()}">`);283		expect(await panelOf("docs/logo.png")).toContain("<dt>lines</dt><dd>binary</dd>");284		expect(page).not.toContain(fx.saveIds[1] as string);285	});286287	test("a folder's panel sums its files and counts the saves that touched anything under it", async () => {288		const docs = await panelOf("docs/");289		expect(docs).toContain('<p class="atlas-info-path mono">docs</p>');290		expect(docs).toContain("<dt>lines</dt><dd>3</dd>");291		expect(docs).toContain("<dt>files</dt><dd>2</dd>");292		expect(docs).toContain("<dt>saves</dt><dd>2</dd>");293		expect(docs).toContain(`<dt>first save</dt><dd><a href="/demo/saves/${first()}">`);294		expect(docs).toContain(`<dt>last save</dt><dd><a href="/demo/saves/${head()}">`);295		const src = await panelOf("src/");296		expect(src).toContain("<dt>saves</dt><dd>3</dd>");297	});298299	test("can be viewed at an older save, and an unknown save is a 404", async () => {300		const page = await body(`/demo?at=${second().slice(0, 8)}`);301		expect(page).toContain(`title="explore through time">${second()}</summary>`);302		expect(page).toContain(`<a class="atlas-picker-row active" href="/demo?at=${second()}#atlas"`);303		expect(page).toContain('<a class="atlas-head-link mono" href="/demo#atlas">back to HEAD</a>');304		expect(page).toContain(`href="/demo/files/src/main.ts?at=${second()}"`);305		const main = await panelOf("src/main.ts", second().slice(0, 8));306		expect(main).toContain("<dt>saves</dt><dd>1</dd>");307		expect(main).not.toContain(head());308		const oldest = await body(`/demo?at=${first()}`);309		expect(oldest).not.toContain('data-name="main.ts"');310		expect((await get("/demo?at=abcdef")).status).toBe(404);311		expect((await get("/demo?at=../x")).status).toBe(404);312	});313314	test("the page carries no panels; each is fetched alone, and anything unknown is a 404", async () => {315		expect(await body("/demo")).not.toContain("<template>");316		const panel = await get("/demo/atlas/panel?path=src/main.ts");317		expect(panel.status).toBe(200);318		expect(panel.headers.get("content-type")).toContain("text/html");319		for (const query of [320			"path=nope.ts",321			"path=src/main.ts&at=abcdef",322			"path=../secret.txt",323			"path=",324			"",325			"path=nope/",326		]) {327			expect(`${query} ${(await get(`/demo/atlas/panel?${query}`)).status}`).toBe(`${query} 404`);328		}329		expect((await get("/nobody/atlas/panel?path=README.md")).status).toBe(404);330	});331});332333describe("the save page", () => {334	test("shows the save's facts and diffs against the previous real save, skipping the checkpoint", async () => {335		const response = await get(`/demo/saves/${head()}`);336		expect(response.status).toBe(200);337		expect(response.headers.get("cache-control")).toBe("public, max-age=60");338		const page = await response.text();339		expect(page).toContain('<h1 class="save-message-head">say hello</h1>');340		expect(page).toContain(341			`<dt>parent</dt><dd><a href="/demo/saves/${second()}">${second()}</a></dd>`,342		);343		expect(page).not.toContain(fx.saveIds[1] as string);344		expect(page).not.toContain("save-flag");345		// The guide's edit was first recorded by the checkpoint; it belongs to this save.346		const rows = [347			...page.matchAll(348				/class="change-row change-(\w+)" href="#diff-\d"><span class="change-path">([^<]+)</g,349			),350		];351		expect(rows.map((m) => [m[1], m[2]])).toEqual([352			["modified", "docs/guide.md"],353			["modified", "src/main.ts"],354		]);355		expect(page).toContain('<span class="diff-add">+1</span> <span class="diff-del">−1</span>');356		expect(page).toContain('<span class="dh">@@ -1,2 +1,2 @@</span>');357		expect(page).toContain(358			'<span class="dl dl-del"><span class="ln">2</span><span class="ln"></span><span class="ds">-</span>',359		);360		expect(page).toContain('class="tk-');361		expect(page).toContain(`href="/demo/archive/${head()}.tar.gz"`);362		expect(page).toContain(`href="/demo?at=${head()}#atlas"`);363	});364365	test("the first save diffs against nothing, notes binaries, and shows its flag and agent", async () => {366		const page = await body(`/demo/saves/${first()}`);367		expect(page).toContain('<span class="save-flag-label mono">flagged</span> holds a secret');368		expect(page).toContain("<dt>parent</dt><dd>none, the first save</dd>");369		expect(page).toContain(370			'change-added" href="#diff-2"><span class="change-path">docs/logo.png</span><span class="change-stat mono"><span class="diff-note">binary</span>',371		);372		expect(page).toContain("binary file, not shown");373		expect(page).toContain('<span class="dh">@@ -0,0 +1 @@</span>');374		const second_ = await body(`/demo/saves/${second()}`);375		expect(second_).toContain("<dt>agent</dt><dd>test-agent</dd><dt>session</dt><dd>fixture</dd>");376		expect(second_).not.toContain("save-flag");377	});378379	test("a change to the final newline alone is a changed last line, marked as in GNU diff", async () => {380		const marker = '<span class="dh">\\ No newline at end of file</span>';381		const row = (kind: string, a: string, b: string, sign: string) =>382			`<span class="dl dl-${kind}"><span class="ln">${a}</span><span class="ln">${b}</span><span class="ds">${sign}</span><span class="lc">b</span></span>`;383		const gained = await body(`/tail/saves/${tailSaves[1]}`);384		expect(gained).toContain('<span class="diff-add">+1</span> <span class="diff-del">−1</span>');385		expect(gained).toContain(`${row("del", "2", "", "-")}${marker}${row("add", "", "2", "+")}<`);386		const lost = await body(`/tail/saves/${tailSaves[0]}`);387		expect(lost).toContain(`${row("del", "2", "", "-")}${row("add", "", "2", "+")}${marker}`);388	});389390	test("a prefix redirects, and a checkpoint, an unknown or a private save is a 404", async () => {391		const short = await get(`/demo/saves/${head().slice(0, 6)}`);392		expect(short.status).toBe(302);393		expect(short.headers.get("location")).toBe(`/demo/saves/${head()}`);394		expect((await get(`/demo/saves/${fx.saveIds[1]}`)).status).toBe(404);395		expect((await get("/demo/saves/abcdef")).status).toBe(404);396		expect((await get("/demo/saves/abc")).status).toBe(404);397		expect((await get(`/hidden/saves/${head()}`)).status).toBe(404);398	});399});400401describe("raw files", () => {402	test("are the exact object bytes, text as text/plain", async () => {403		const mirror = openMirror(mirrorDir, "demo");404		for (const [path, type] of [405			["src/main.ts", "text/plain; charset=utf-8"],406			["docs/logo.png", "image/png"],407			["README.md", "text/plain; charset=utf-8"],408		] as const) {409			const response = await get(`/demo/raw/${path}`);410			const file = fileAt(mirror, head(), path);411			expect(response.headers.get("content-type")).toBe(type);412			expect(new Uint8Array(await response.arrayBuffer())).toEqual(413				objectBytes(mirror, file?.hash as string) as Uint8Array<ArrayBuffer>,414			);415		}416		expect(await (await get(`/demo/raw/src/main.ts?at=${second()}`)).text()).toContain("'hi'");417	});418});419420test("static assets and raw files carry route-based sandboxing", async () => {421	const css = await get("/static/css/kepr.css");422	expect(css.status).toBe(200);423	expect(css.headers.get("content-type")).toContain("text/css");424	const raw = await get("/demo/raw/README.md");425	expect(raw.headers.get("content-security-policy")).toContain("sandbox");426	const asset = await get("/static/assets/plain.txt");427	expect(asset.headers.get("content-security-policy")).toContain("sandbox");428	const favicon = await get("/favicon.svg");429	expect(favicon.headers.get("content-type")).toBe("image/svg+xml");430	expect(favicon.headers.get("content-security-policy")).not.toContain("sandbox");431	expect((await get("/static/../package.json")).status).toBe(404);432	const csp = (await get("/demo")).headers.get("content-security-policy") ?? "";433	expect(csp).toContain("style-src 'self' https://fonts.bunny.net");434	expect(csp).toContain("font-src https://fonts.bunny.net");435	expect(csp).not.toContain("unsafe-inline");436});437438describe("housekeeping routes", () => {439	test("robots.txt points at the sitemap, which lists public repos only", async () => {440		expect(await body("/robots.txt")).toBe(441			"User-agent: *\nAllow: /\n\nSitemap: https://kepr.example/sitemap.xml\n",442		);443		const sitemap = await get("/sitemap.xml");444		expect(sitemap.headers.get("Content-Type")).toBe("application/xml; charset=UTF-8");445		const xml = await sitemap.text();446		expect(xml).toStartWith('<?xml version="1.0" encoding="UTF-8"?>\n<urlset');447		for (const repo of ["demo", "large", "tail"]) {448			expect(xml).toContain(`<loc>https://kepr.example/${repo}</loc>`);449		}450		expect(xml).not.toContain("hidden");451	});452453	test("favicon.svg is Kepr 2's mark, and every page links it", async () => {454		const res = await get("/favicon.svg");455		expect(res.headers.get("Content-Type")).toBe("image/svg+xml");456		expect(await res.text()).toContain('<polygon points="16,3 27,23 5,23"');457		expect(await body("/demo")).toContain(458			'<link rel="icon" href="/favicon.svg" type="image/svg+xml">',459		);460	});461});