mirror of
https://github.com/getpaseo/paseo.git
synced 2026-10-31 05:32:58 +00:00
Mohamed Boudra
eee70e7fef
* fix(app): show a lone tool call as itself and group from the second call A run of one tool call or thought renders as the call. When a second call arrives the row becomes a group that keeps the first call's id, so the row key stays put. Tool call and group open state move into a per-agent store: opening a lone call also opens its future group without notifying the timeline, so a click re-renders only that tool call. * test(app): cover lone tool calls turning into groups Desktop journeys check that an opened lone call keeps its details open inside the new group, that clicking it renders no timeline component, and that the group header lands where the call was. Compact covers the call sheet and a closed group.
79 lines
2.9 KiB
TypeScript
79 lines
2.9 KiB
TypeScript
import type { Page } from "@playwright/test";
|
|
|
|
declare global {
|
|
var __PASEO_E2E_REACT_RENDERS__: Record<string, number> | undefined;
|
|
}
|
|
|
|
/**
|
|
* Counts which components render in each React commit, by name, the way React DevTools
|
|
* highlights updates: a fiber rendered when React performed work on it in that commit.
|
|
* Install before the app loads; React registers with the DevTools hook at startup.
|
|
*/
|
|
export async function recordReactRenders(page: Page): Promise<void> {
|
|
await page.addInitScript(() => {
|
|
const PERFORMED_WORK = 1;
|
|
interface Fiber {
|
|
type: unknown;
|
|
flags: number;
|
|
child: Fiber | null;
|
|
sibling: Fiber | null;
|
|
alternate: Fiber | null;
|
|
}
|
|
const nameOf = (type: unknown): string | null => {
|
|
if (typeof type === "function") {
|
|
return (type as { displayName?: string }).displayName || type.name || null;
|
|
}
|
|
if (!type || typeof type !== "object") return null;
|
|
const component = type as { displayName?: string; render?: unknown; type?: unknown };
|
|
return component.displayName || nameOf(component.render) || nameOf(component.type);
|
|
};
|
|
const record = (root: Fiber) => {
|
|
const renders = (globalThis.__PASEO_E2E_REACT_RENDERS__ ??= {});
|
|
const pending: Fiber[] = [root];
|
|
while (pending.length > 0) {
|
|
const fiber = pending.pop()!;
|
|
const name = typeof fiber.type === "string" ? null : nameOf(fiber.type);
|
|
if (name && (fiber.flags & PERFORMED_WORK) !== 0) renders[name] = (renders[name] ?? 0) + 1;
|
|
// A subtree React bailed out of is shared with the previous commit; skip it.
|
|
if (fiber.alternate && fiber.child === fiber.alternate.child) continue;
|
|
for (let child = fiber.child; child; child = child.sibling) pending.push(child);
|
|
}
|
|
};
|
|
let rendererCount = 0;
|
|
Object.defineProperty(globalThis, "__REACT_DEVTOOLS_GLOBAL_HOOK__", {
|
|
configurable: true,
|
|
value: {
|
|
supportsFiber: true,
|
|
isDisabled: false,
|
|
renderers: new Map(),
|
|
inject(renderer: unknown) {
|
|
rendererCount += 1;
|
|
this.renderers.set(rendererCount, renderer);
|
|
return rendererCount;
|
|
},
|
|
checkDCE() {},
|
|
onScheduleFiberRoot() {},
|
|
onCommitFiberRoot(_rendererId: number, root: { current: Fiber }) {
|
|
record(root.current);
|
|
},
|
|
onPostCommitFiberRoot() {},
|
|
onCommitFiberUnmount() {},
|
|
},
|
|
});
|
|
});
|
|
}
|
|
|
|
export async function resetReactRenders(page: Page): Promise<void> {
|
|
await page.evaluate(() => {
|
|
globalThis.__PASEO_E2E_REACT_RENDERS__ = {};
|
|
});
|
|
}
|
|
|
|
/** Render counts per component name since the last reset, read after the next painted frame. */
|
|
export async function readReactRenders(page: Page): Promise<Record<string, number>> {
|
|
return page.evaluate(async () => {
|
|
await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
|
|
return { ...globalThis.__PASEO_E2E_REACT_RENDERS__ };
|
|
});
|
|
}
|