playthrough 0.1.0 → 0.3.0

package/src/reporter.js

@@ -1 +1 @@
-export { t as ACTIONS, n as ASSETS, i as GLIMPSES, a as HANDS, o as HOLD, s as PERSON, c as PICTURE, l as READINGS, u as RECORDING, r as default, d as firstLine, f as glimpsesOf, p as readingsOf, m as readingsOn, h as seconds } from "./reporter-Biym3TnN.js";
+export { t as ACTIONS, n as ASSETS, i as GLIMPSES, a as HANDS, o as HOLD, s as PERSON, c as PICTURE, l as READINGS, u as RECORDING, d as UNMET, f as WROTE, r as default, p as firstLine, m as glimpsesOf, h as hashOf, g as readingsOf, _ as readingsOn, v as seconds } from "./reporter-4C_7joIm.js";

package/src/test.js

@@ -1,9 +1,10 @@
-import { _ as make, a as REACHES_OUTSIDE, b as repo, i as ALONGSIDE, m as firstOf, n as readPage, o as WALKED, r as unhovered, v as personIn, y as setupIn } from "./read-BBNVC-oH.js";
-import { a as HANDS, c as PICTURE, d as firstLine, g as keepAssets, h as seconds, i as GLIMPSES, l as READINGS, n as ASSETS, o as HOLD, s as PERSON, t as ACTIONS, u as RECORDING } from "./reporter-Biym3TnN.js";
+import { a as HANDS, c as PICTURE, d as UNMET, f as WROTE, i as GLIMPSES, l as READINGS, n as ASSETS, o as HOLD, p as firstLine, s as PERSON, t as ACTIONS, u as RECORDING, v as seconds, y as keepAssets } from "./reporter-4C_7joIm.js";
+import { C as make, E as repo, T as setupIn, b as changes, n as REACHES_OUTSIDE, r as WALKED, t as ALONGSIDE, w as personIn, x as firstOf } from "./flows-Dt7fcPLt.js";
+import { n as readPage, r as unhovered } from "./read-Bg9XVTtn.js";
 import { readFileSync, writeFileSync } from "node:fs";
 import { join } from "node:path";
-import { pathToFileURL } from "node:url";
 import { expect as expect$1, test as test$1 } from "@playwright/test";
+import { pathToFileURL } from "node:url";
 import { AsyncLocalStorage } from "node:async_hooks";
 // src/rest.ts
 const STILL = 300;
@@ -82,7 +83,7 @@ function onlyWaits(expect) {
 		if (typeof check !== "function") return check;
 		return (...args) => {
 			try {
-				return Promise.resolve(check.apply(target, args)).catch(() => {});
+				return Promise.resolve(check.apply(target, args)).catch(() => underway && (underway.unmet = (underway.unmet ?? 0) + 1));
 			} catch {}
 		};
 	} });
@@ -124,6 +125,10 @@ const seeded = `(() => {
 const recorded = test$1.extend({
 	locale: "en-US",
 	timezoneId: "UTC",
+	contextOptions: async ({ contextOptions }, use) => use({
+		...(await setupOf()).use,
+		...contextOptions
+	}),
 	person: [async ({}, use) => use(firstOf(await setupOf())), { option: true }],
 	rest: async ({ page }, use) => use(run ? await watchRest(page) : async () => {}),
 	setup: async ({ page, request, baseURL, person, rest: _ }, use, testInfo) => {
@@ -151,7 +156,7 @@ const recorded = test$1.extend({
 		await use(async (person, screen = {}) => {
 			const app = await setupOf();
 			personIn(app, person);
-			const { page, context } = await pageFor(browser, baseURL, screen);
+			const { page, context } = await pageFor(browser, baseURL, screen, app.use);
 			opened.push(context);
 			const flow = underway;
 			const rest = run && flow && await watchRest(page);
@@ -185,6 +190,7 @@ const recorded = test$1.extend({
 		await page.exposeFunction("__playthrough", (event) => void (flow.page === page && flow.events.push(event)));
 		flow.assets.push(keepAssets(page, run.folder));
 		pace(page);
+		dialogsOn(page, flow);
 		pointer = {
 			page,
 			x: 640,
@@ -192,6 +198,7 @@ const recorded = test$1.extend({
 		};
 		underway = flow;
 		const { events, readings, glimpses, pictures, actions } = flow;
+		if (page.url() !== "about:blank") await page.evaluate(() => window.rrwebRecord?.record.takeFullSnapshot());
 		await page.mouse.move(pointer.x, pointer.y);
 		try {
 			await use();
@@ -249,6 +256,14 @@ const recorded = test$1.extend({
 			body: JSON.stringify(flow.hands),
 			contentType: "application/json"
 		});
+		if (flow.wrote) await testInfo.attach(WROTE, {
+			body: flow.wrote,
+			contentType: "text/plain"
+		});
+		if (flow.unmet) await testInfo.attach(UNMET, {
+			body: String(flow.unmet),
+			contentType: "text/plain"
+		});
 		for (const picture of pictures) await testInfo.attach(PICTURE, {
 			body: picture,
 			contentType: "image/png"
@@ -256,12 +271,18 @@ const recorded = test$1.extend({
 	}, { auto: true }]
 });
 async function readied(page, run) {
+	const host = new URL(run.app.url).hostname;
+	page.on("request", (sent) => {
+		const flow = underway;
+		if (flow && !flow.wrote && changes(sent.method()) && new URL(sent.url()).hostname === host) flow.wrote = `${sent.method()} ${new URL(sent.url()).pathname}`;
+	});
 	await page.addInitScript({ content: recorder(run.recorder) });
 	await page.clock.setSystemTime(onReviewDay(run.started));
 	await page.addInitScript({ content: seeded });
 }
-async function pageFor(browser, baseURL, screen) {
+async function pageFor(browser, baseURL, screen, use) {
 	const context = await browser.newContext({
+		...use,
 		baseURL,
 		locale: "en-US",
 		timezoneId: "UTC",
@@ -277,6 +298,7 @@ async function carryOn(flow, page, rest, person, run) {
 	await flow.page.waitForTimeout(HANDING);
 	await page.exposeFunction("__playthrough", (event) => void (flow.page === page && flow.events.push(event)));
 	flow.assets.push(keepAssets(page, run.folder));
+	dialogsOn(page, flow);
 	flow.hands.push({
 		at: Date.now(),
 		person
@@ -294,6 +316,70 @@ async function carryOn(flow, page, rest, person, run) {
 	};
 	if (page.url() !== "about:blank") await page.evaluate(() => window.rrwebRecord?.record.takeFullSnapshot());
 }
+const holding = /* @__PURE__ */ new WeakMap();
+const answered = /* @__PURE__ */ new WeakSet();
+function dialogsOn(page, flow) {
+	const listening = (to) => to.listenerCount("dialog");
+	page.on("dialog", (dialog) => {
+		const theirs = listening(page) > 1 || listening(page.context()) > 0;
+		if (dialog.type() === "beforeunload") return void (theirs || dialog.accept().catch(() => {}));
+		answers(dialog);
+		const said = {
+			type: dialog.type(),
+			message: dialog.message(),
+			...dialog.type() === "prompt" && { value: dialog.defaultValue() }
+		};
+		if (flow.page === page) flow.events.push({
+			type: 5,
+			data: {
+				tag: "dialog",
+				payload: said
+			},
+			timestamp: Date.now()
+		});
+		let answered = () => {};
+		flow.dialog = new Promise((done) => answered = done);
+		holding.set(dialog, {
+			flow,
+			page,
+			read: new Promise((read) => setTimeout(read, Math.min(4e3, 1200 + 40 * dialog.message().length))),
+			answered
+		});
+		if (!theirs) dialog.dismiss().catch(() => {});
+	});
+}
+function answers(dialog) {
+	const prototype = Object.getPrototypeOf(dialog);
+	if (answered.has(prototype)) return;
+	answered.add(prototype);
+	for (const [name, yes] of [["accept", true], ["dismiss", false]]) {
+		const original = prototype[name];
+		prototype[name] = async function(value) {
+			const held = holding.get(this);
+			holding.delete(this);
+			if (held) {
+				await held.read;
+				const answer = {
+					yes,
+					...yes && this.type() === "prompt" && { value: value ?? "" }
+				};
+				if (held.flow.page === held.page) held.flow.events.push({
+					type: 5,
+					data: {
+						tag: "dialog answered",
+						payload: answer
+					},
+					timestamp: Date.now()
+				});
+			}
+			try {
+				return await original.call(this, value);
+			} finally {
+				held?.answered();
+			}
+		};
+	}
+}
 let collecting;
 let around = [];
 let loading = Promise.resolve();
@@ -346,7 +432,7 @@ async function runAlongside(page, { request, baseURL, started, setup: appSetup,
 		let made;
 		const handTo = async (person, screen = {}) => {
 			personIn(appSetup, person);
-			const next = await pageFor(page.context().browser(), baseURL, screen);
+			const next = await pageFor(page.context().browser(), baseURL, screen, appSetup.use);
 			opened.push(next.context);
 			const rest = await readied(next.page);
 			await appSetup.signIn?.({
@@ -506,6 +592,7 @@ const step = Object.assign(async (title, body, options) => {
 	const flow = underway;
 	if (!flow || flow.depth) return playwrightStep(title, body, options);
 	return playwrightStep(title, async (info) => {
+		if (run?.stops?.[test$1.info().title] === title) throw new Error("It stopped here the first time it was recorded.");
 		Object.assign(flow, {
 			step: title,
 			inStep: 0
@@ -520,12 +607,13 @@ const step = Object.assign(async (title, body, options) => {
 		await flow.rest();
 		const at = seconds(Date.now() - (flow.events[0]?.timestamp ?? Date.now()));
 		await unhovered(flow.page, async () => {
-			const { screen, things } = await readPage(flow.page);
+			const { screen, things, items } = await readPage(flow.page);
 			flow.readings.push({
 				step: title,
 				at,
 				screen,
-				things
+				things,
+				items
 			});
 			flow.pictures.push(await flow.page.screenshot({
 				animations: "disabled",
@@ -598,7 +686,8 @@ function pace(page) {
 				await pointer.page.mouse.move(pointer.x, pointer.y);
 				await pointer.page.waitForTimeout(HANDING);
 			}
-			if (pointer) await approach(this, pointer);
+			const timeout = args.findLast((arg) => !!arg && typeof arg === "object" && typeof arg.timeout === "number")?.timeout;
+			if (pointer) await approach(this, pointer, timeout).catch((error) => Promise.reject(asAction(error, action)));
 			const [text, options] = args;
 			const typed = pointer && action === "fill" && typeof text === "string" && text && await typedInto(this) ? text : void 0;
 			const result = await acted(action, () => pathTo(this), typed ? async () => {
@@ -642,7 +731,12 @@ async function acted(does, target, act, given) {
 		keeping.wrote = false;
 		[on, address] = [await target(keeping.page), keeping.page.url()];
 	}
-	const result = await act();
+	if (underway) underway.dialog = void 0;
+	const result = await act().catch(async (error) => {
+		const dialog = underway?.dialog;
+		if (!dialog) throw error;
+		await dialog;
+	});
 	underway?.actions.push(Date.now());
 	const walk = run?.walk;
 	if (walk && underway?.depth && !underway.walked && walk.step === underway.step && walk.actions === ++underway.inStep) {
@@ -698,12 +792,13 @@ async function walkOn(flow, walk) {
 		await flow.rest();
 		walked.done.push(since());
 		await unhovered(flow.page, async () => {
-			const { screen, things } = await readPage(flow.page);
+			const { screen, things, items } = await readPage(flow.page);
 			flow.readings.push({
 				step: "In the app",
 				at: since(),
 				screen,
-				things
+				things,
+				items
 			});
 		});
 		await look();
@@ -744,7 +839,18 @@ const typedInto = (target) => target.evaluate((on) => on.isContentEditable || on
 	"tel",
 	"password"
 ].includes(on.type)).catch(() => false);
-async function approach(target, at) {
+function asAction(error, action) {
+	if (error instanceof Error) {
+		error.message = error.message.replace("locator.waitFor", `locator.${action}`);
+		error.stack &&= error.stack.replace("locator.waitFor", `locator.${action}`);
+	}
+	return error;
+}
+async function approach(target, at, timeout) {
+	await target.waitFor({
+		state: "attached",
+		timeout
+	});
 	const scroll = await target.evaluate((element) => {
 		const box = element.getBoundingClientRect();
 		if (box.top >= 0 && box.bottom <= innerHeight) return void 0;
@@ -753,8 +859,7 @@ async function approach(target, at) {
 			from: scrollY,
 			to: Math.max(0, Math.min(most, scrollY + box.top + box.height / 2 - innerHeight / 2))
 		};
-	}, void 0, { timeout: 5e3 }).catch(() => "missing");
-	if (scroll === "missing") return;
+	}, void 0, { timeout: 5e3 }).catch(() => void 0);
 	if (scroll && Math.abs(scroll.to - scroll.from) >= 1) {
 		const moves = Math.max(10, Math.min(36, Math.round(Math.abs(scroll.to - scroll.from) / 25)));
 		for (let i = 1; i <= moves; i++) {

package/types/cli/src/app.d.ts

@@ -0,0 +1,4 @@
+import { type App } from "./repo.js";
+export declare function keepRunning(app: App, root: string): Promise<number | undefined>;
+export declare function stopApp(url: string): Promise<void>;
+export declare const serves: (url: string) => Promise<boolean>;

package/types/cli/src/changes.d.ts

@@ -6,6 +6,7 @@ export type Found = {
     element?: Element;
     alike?: Element[];
     box?: Box;
+    pieces: string[];
 };
 export declare function changesAt(then: Reading, now: Reading, unsteady?: Set<string>, shown?: Shown): Found[];
 type Shown = {

package/types/cli/src/compare.d.ts

@@ -9,5 +9,10 @@ export type Recorded = {
     picture: (name: string) => Promise<Buffer>;
 };
 export declare function compareWithEarlier(reviews: Reviews, id: string, number: number, flows: Flow[]): Promise<Comparison[]>;
-export declare function changesByThemselves(first: Recorded, second: Recorded): Promise<Change[]>;
-export declare function compare(page: Page, earlier: Recorded, round: Recorded, unsteady?: Set<string>): Promise<Comparison>;
+export declare function changesByThemselves(first: Recorded, second: Recorded): Promise<(Change & {
+    pieces: string[];
+})[]>;
+export declare function compare(page: Page, earlier: Recorded, round: Recorded, unsteady?: Unsteady): Promise<Comparison>;
+type Unsteady = (flow: string) => Set<string>;
+export declare function unsteadyIn(flows: Flow[]): Unsteady;
+export {};

package/types/cli/src/flows.d.ts

@@ -1,5 +1,5 @@
 import { type Did, type Flow } from "../../review/src/index.js";
-import { type Failed } from "./reporter.js";
+import { type Failed, type Written } from "./reporter.js";
 import { type App, type Repo } from "./repo.js";
 export type Run = {
     flows: string;
@@ -14,6 +14,7 @@ export type Run = {
     taken: string[];
     started: string;
     walk?: Walk;
+    stops?: Record<string, string>;
 };
 export type Walk = {
     flow: string;
@@ -73,7 +74,9 @@ export type Cookie = {
 export declare const ALONGSIDE: unique symbol;
 export declare const REACHES_OUTSIDE = "reaches outside";
 export declare const BEAT = 650;
+export declare const waitsFor: ({ before }: Pick<Run, "before">) => 3000 | 10000;
 export declare function makeFlowsFolder(repo: Repo, id: string): Promise<void>;
+export declare const called: (names: string[]) => string;
 export declare const isFlow: (name: string) => boolean;
 export declare function howToWriteFlows(repo: Repo, id: string): string;
 export declare function runFlows(repo: Repo, id: string, round: number, { later, first }: {
@@ -86,15 +89,17 @@ export declare function runFlows(repo: Repo, id: string, round: number, { later,
 export declare function keepFailed(repo: Repo, id: string, round: number, failed: Failed[]): Promise<void>;
 export declare const failedLastTime: (repo: Repo, id: string) => Promise<string[]>;
 export declare const whereItStopped: (repo: Repo, id: string, failed: Failed[]) => string;
-type Ran = {
+export type Ran = {
     recorded: {
         flow: Flow;
         files: {
             name: string;
             bytes: Buffer;
         }[];
+        wrote?: string;
     }[];
     failed: Failed[];
+    written: Record<string, Written>;
 };
 export type WalkedRun = Walked & {
     events: {
@@ -109,5 +114,4 @@ export type WalkedRun = Walked & {
     pictures: (Buffer | undefined)[];
 };
 export declare function walkFork(repo: Repo, id: string, walk: Walk): Promise<WalkedRun | undefined>;
-export declare const failedAt: ({ flow, at }: Failed) => string;
-export {};
+export declare const failedAt: ({ flow, at, why }: Failed) => string;

package/types/cli/src/pictures.d.ts

@@ -1,6 +1,7 @@
 import type { Page } from "@playwright/test";
 import { type Reading } from "../../page/src/index.js";
 import { type Found } from "./changes.js";
+export declare const HERE = "here:";
 export declare function picturesAt(page: Page, then: Reading, now: Reading, pictures: {
     then: Buffer;
     now: Buffer;

package/types/cli/src/read.d.ts

@@ -1,8 +1,9 @@
 import type { Page } from "@playwright/test";
-import type { Reading, Thing } from "../../page/src/index.js";
+import type { Item, Reading, Thing } from "../../page/src/index.js";
 export declare function readPage(page: Page): Promise<{
     screen: Reading["screen"];
     things: Thing[];
+    items: Item[];
 }>;
 export declare function unhovered<T>(page: Page, look: () => Promise<T>): Promise<T>;
 export declare function read(): {
@@ -11,4 +12,5 @@ export declare function read(): {
         height: number;
     };
     things: any[];
+    items: Item[];
 };

package/types/cli/src/repo.d.ts

@@ -2,6 +2,7 @@ import { Reviews } from "../../review/src/index.js";
 export type App = {
     start: string;
     url: string;
+    oneAtATime?: boolean;
 };
 export type Repo = ReturnType<typeof repo>;
 export declare function repo(root?: string): {
@@ -10,9 +11,12 @@ export declare function repo(root?: string): {
     flows: (review: string) => string;
     failed: (review: string) => string;
     round: (review: string, round: number) => string;
+    ranOnBefore: (review: string) => string;
     setAside: string;
+    appFile: string;
     setup: string;
     borrowed: string;
+    tried: string;
     show: (path: string) => string;
     keepOutOfGit(): Promise<void>;
     app(): Promise<App>;

package/types/cli/src/reporter.d.ts

@@ -1,6 +1,6 @@
-import type { Reporter, TestCase, TestResult } from "@playwright/test/reporter";
+import type { Reporter, TestCase, TestError, TestResult } from "@playwright/test/reporter";
 import type { Reading } from "../../page/src/index.js";
-import type { Flow, Reviews } from "../../review/src/index.js";
+import { type Flow, type Reviews } from "../../review/src/index.js";
 export declare const RECORDING = "playthrough recording";
 export declare const READINGS = "playthrough readings";
 export declare const GLIMPSES = "playthrough glimpses";
@@ -9,11 +9,13 @@ export declare const ASSETS = "playthrough assets";
 export declare const PERSON = "playthrough person";
 export declare const HANDS = "playthrough hands";
 export declare const ACTIONS = "playthrough actions";
+export declare const WROTE = "playthrough wrote";
+export declare const UNMET = "playthrough unmet";
 export declare const HOLD = 1500;
 export declare const readingsOf: (flow: Flow) => string;
 export declare function readingsOn(reviews: Reviews, review: string, round: number, flow: Flow): Promise<Reading[]>;
 export declare const glimpsesOf: (flow: Flow) => string;
-export declare const firstLine: (said: string) => string;
+export declare function firstLine(said: string): string;
 export type Failed = {
     flow: string;
     at?: string;
@@ -23,19 +25,27 @@ export type Failed = {
 export type Recorded = {
     flow: Flow;
     files: string[];
+    wrote?: string;
 };
 export type Hand = {
     at: number;
     person: string;
 };
+export type Written = {
+    file: string;
+    hash: string;
+};
+export declare const hashOf: (file: string) => string | undefined;
 export default class Flows implements Reporter {
     #private;
-    constructor({ folder, before, taken }: {
+    constructor({ folder, flows, before, taken }: {
         folder: string;
+        flows: string;
         before: boolean;
         taken: string[];
     });
-    onTestEnd(test: TestCase, result: TestResult): undefined;
+    onTestEnd(test: TestCase, result: TestResult): void;
+    onError(error: TestError): void;
     onEnd(): void;
     printsToStdio(): boolean;
 }

package/types/cli/src/setup.d.ts

@@ -1,4 +1,4 @@
-import { type APIRequestContext, type Page } from "@playwright/test";
+import { type APIRequestContext, type BrowserContextOptions, type Page } from "@playwright/test";
 type Make = (given: {
     page: Page;
     request: APIRequestContext;
@@ -21,13 +21,16 @@ export type Setup = {
     after?: After;
     signIn?: SignIn;
     people?: People;
+    use?: BrowserContextOptions;
 };
 export declare function setupIn(file: string, written?: number): Promise<Setup>;
+export declare const changes: (method: string) => boolean;
+export declare function watching(request: APIRequestContext, changed: () => void): APIRequestContext;
 export declare const firstOf: ({ people }: Setup) => string;
 export declare function personIn({ people }: Setup, person: string): void;
 export type Made = {
     setup: Record<string, any>;
-    giveBack: () => Promise<void>;
+    giveBack: () => Promise<boolean>;
 };
 export declare function make({ make, after }: Setup, borrowed: string, given: Parameters<Make>[0] & {
     baseURL: string;

package/types/cli/src/test.d.ts

@@ -8,7 +8,7 @@ export declare const tablet: Screen;
 export declare const expect: import("@playwright/test").Expect<{}>;
 export declare const onReviewDay: (started: string, now?: number) => Date;
 export type HandTo = (person: string, screen?: Screen) => Promise<Page>;
-export declare function pageFor(browser: Browser, baseURL: string, screen: Screen): Promise<{
+export declare function pageFor(browser: Browser, baseURL: string, screen: Screen, use?: BrowserContextOptions): Promise<{
     context: BrowserContext;
     page: Page;
 }>;

package/types/cli/src/try-setup.d.ts

@@ -0,0 +1,2 @@
+import type { Repo } from "./repo.js";
+export declare function trySetup(repo: Repo, again: string): Promise<void>;

package/types/page/src/reading.d.ts

@@ -26,6 +26,16 @@ export type Thing = {
     labelled?: true;
     live?: true;
     node?: number;
+    item?: number;
+};
+export type Item = {
+    role: "row" | "listitem";
+    words: string;
+    box: Thing["box"];
+    page: Thing["page"];
+    list: number;
+    holder?: number;
+    node?: number;
 };
 export type Reading = {
     step: string;
@@ -36,5 +46,6 @@ export type Reading = {
     };
     picture: string;
     things: Thing[];
+    items?: Item[];
 };
 export type Glimpse = Omit<Reading, "picture">;

package/types/review/src/rules.d.ts

@@ -24,8 +24,9 @@ export declare function problemsWithId(id: string): string[];
 export declare function problemsStarting(id: string, title: string, asked?: string): string[];
 export declare function problemsWithRound(review: Review, round: Round): string[];
 export declare function problemsAddingToBefore(review: Review, flows: Flow[], cantStart: string[]): string[];
-export declare function withInBefore(before: Round, flows: Flow[], cantStart: string[]): Round;
+export declare function withInBefore(before: Round, flows: Flow[], cantStart: string[], gone?: string[]): Round;
 export declare function problemsWithComparison(review: Review, comparison: Comparison): string[];
+export declare const LONGEST_LINE = 140;
 export declare function problemsFinishing(review: Review, number: number): string[];
 export declare function problemsWithFile(review: Review, round: number, name: string): string[];
 export declare function problemsWithFileName(name: string): string[];

package/types/review/src/store.d.ts

@@ -29,10 +29,13 @@ export declare class Reviews {
             name: string;
             bytes: Uint8Array;
         }[];
+        commit?: string;
+        gone?: string[];
     }): Promise<void>;
     saveComparison(id: string, comparison: Comparison): Promise<void>;
     send(id: string, send: Send): Promise<void>;
     accept(id: string, by: string): Promise<void>;
     file(id: string, round: number, name: string): Promise<Uint8Array | undefined>;
+    files(id: string, round: number): Promise<string[]>;
     wait(id: string, until: (review: Review) => boolean, signal?: AbortSignal): Promise<Review>;
 }