@adea-ai/ui 0.140.0 → 0.142.0

package/dist/components/composites/test-results/test-results.js

@@ -0,0 +1,631 @@
+import { cn } from "../../../lib/utils.js";
+import { Button } from "../../ui/button/button.js";
+import { DiffBlock } from "../../ui/diff-block/diff-block.js";
+import { Trace, TraceDetail, TraceLine } from "../../ui/trace/trace.js";
+import { writeClipboardText } from "../../../lib/clipboard.js";
+import { StackTrace } from "../stack-trace/stack-trace.js";
+import { boundedEntries, describeCount, firstFailureRenderPath, formatDuration, listedCounts, reconcileCounts, sameFailure, siblingKey, suiteState } from "./test-results-model.js";
+import { className, createComponent, effect, insert, memo, mergeProps, setAttribute, setStyleProperty, spread, template } from "solid-js/web";
+import { Check, CircleCheck, CircleMinus, CircleX, Copy, FlaskConical, LoaderCircle } from "lucide-solid";
+import { For, Show, createComputed, createEffect, createMemo, createSignal, splitProps } from "solid-js";
+//#region src/components/composites/test-results/test-results.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span class="flex items-center gap-1 whitespace-nowrap">`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div aria-hidden=true data-slot=test-results-bar class="flex h-1.5 w-full gap-px overflow-hidden rounded-full bg-muted">`);
+var _tmpl$3 = /*#__PURE__*/ template(`<span>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<li class="px-1.5 py-0.5">`);
+var _tmpl$5 = /*#__PURE__*/ template(`<pre data-slot=test-results-message tabindex=0 role=group aria-label="Failure message"class="m-0 max-h-64 overflow-auto font-code text-code whitespace-pre-wrap text-foreground [overflow-wrap:anywhere]">`);
+var _tmpl$6 = /*#__PURE__*/ template(`<div class="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground"><span class=italic>`);
+var _tmpl$7 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$8 = /*#__PURE__*/ template(`<span class="flex items-center gap-1 text-info">Running`);
+var _tmpl$9 = /*#__PURE__*/ template(`<span class=text-muted-foreground> tests reported`);
+var _tmpl$0 = /*#__PURE__*/ template(`<span class=text-muted-foreground>in `);
+var _tmpl$1 = /*#__PURE__*/ template(`<p class="m-0 text-xs text-muted-foreground">Counts are from the tests listed below.`);
+var _tmpl$10 = /*#__PURE__*/ template(`<div class="flex flex-col gap-1.5"><div class="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm">`);
+var _tmpl$11 = /*#__PURE__*/ template(`<section data-slot=test-results>`);
+var _tmpl$12 = /*#__PURE__*/ template(`<p class="m-0 text-sm text-muted-foreground">No test results`);
+var _tmpl$13 = /*#__PURE__*/ template(`<span class=text-muted-foreground> tests reported (<!> listed)`);
+var TEST_RESULTS_LIST_LIMIT = 50;
+var OUTCOME_ICON = {
+	failed: () => createComponent(CircleX, {
+		"aria-hidden": "true",
+		"class": "size-3.5 text-destructive"
+	}),
+	passed: () => createComponent(CircleCheck, {
+		"aria-hidden": "true",
+		"class": "size-3.5 text-success"
+	}),
+	skipped: () => createComponent(CircleMinus, {
+		"aria-hidden": "true",
+		"class": "size-3.5 text-muted-foreground"
+	})
+};
+function CountReadout(props) {
+	return (() => {
+		var _el$ = _tmpl$();
+		insert(_el$, () => OUTCOME_ICON[props.line.outcome](), null);
+		insert(_el$, () => describeCount(props.line), null);
+		effect(() => setAttribute(_el$, "data-outcome", props.line.outcome));
+		return _el$;
+	})();
+}
+var SEGMENT_CLASS = {
+	failed: "bg-destructive",
+	passed: "bg-success",
+	skipped: "bg-muted-foreground/40"
+};
+function SummaryBar(props) {
+	const visible = () => props.lines.filter((line) => line.count > 0);
+	return createComponent(Show, {
+		get when() {
+			return visible().length > 0;
+		},
+		get children() {
+			var _el$2 = _tmpl$2();
+			insert(_el$2, createComponent(For, {
+				get each() {
+					return visible();
+				},
+				children: (line) => (() => {
+					var _el$3 = _tmpl$3();
+					effect((_p$) => {
+						var _v$ = cn("min-w-1", SEGMENT_CLASS[line.outcome]), _v$2 = `${line.count} 1 0`;
+						_v$ !== _p$.e && className(_el$3, _p$.e = _v$);
+						_v$2 !== _p$.t && setStyleProperty(_el$3, "flex", _p$.t = _v$2);
+						return _p$;
+					}, {
+						e: void 0,
+						t: void 0
+					});
+					return _el$3;
+				})()
+			}));
+			return _el$2;
+		}
+	});
+}
+var TRACE_STATUS = {
+	passed: {
+		status: "success",
+		label: "Passed"
+	},
+	failed: {
+		status: "error",
+		label: "Failed"
+	},
+	skipped: {
+		status: "cancelled",
+		label: "Skipped"
+	},
+	running: {
+		status: "running",
+		label: "Running"
+	},
+	pending: {
+		status: "pending",
+		label: "Not run yet"
+	}
+};
+/**
+* Keep keyboard focus through a reorder. Solid moves a keyed row's node instead
+* of replacing it, and a browser blurs a focused element that is moved, so an
+* immutable reorder would drop the reader's place onto the body even though the
+* node and its open state survive. The focused element is noted just before the
+* rows move and given focus back just after, but only when nothing else has taken
+* focus meanwhile, and only inside a test run, so a reader who has moved on is
+* never pulled back and an unrelated element is never refocused.
+*/
+function keepFocusThroughReorder(keys) {
+	let noted;
+	createComputed(() => {
+		keys();
+		const active = typeof document === "undefined" ? null : document.activeElement;
+		noted = active instanceof HTMLElement && active.closest("[data-slot=\"test-results\"]") ? active : void 0;
+	});
+	createEffect(() => {
+		keys();
+		const element = noted;
+		noted = void 0;
+		if (!element || !element.isConnected) return;
+		const active = document.activeElement;
+		if (active === null || active === document.body) element.focus({ preventScroll: true });
+	});
+}
+/** A list that shows its first `limit` items and offers the rest. */
+function Bounded(props) {
+	const [shown, setShown] = createSignal(props.limit);
+	const page = createMemo(() => boundedEntries(props.items, shown(), props.itemKey));
+	const visible = () => page().entries;
+	const visibleKeys = createMemo(() => visible().map((entry) => entry.key));
+	keepFocusThroughReorder(visibleKeys);
+	const hidden = () => props.items.length - visible().length;
+	return [createComponent(For, {
+		get each() {
+			return visibleKeys();
+		},
+		children: (key) => {
+			const entry = createMemo(() => page().byKey.get(key));
+			return props.children(() => entry().item, () => entry().index, key);
+		}
+	}), createComponent(Show, {
+		get when() {
+			return hidden() > 0;
+		},
+		get children() {
+			var _el$4 = _tmpl$4();
+			insert(_el$4, createComponent(Button, {
+				variant: "ghost",
+				size: "2xs",
+				onClick: () => setShown(shown() + props.limit),
+				get children() {
+					return [
+						"Show ",
+						memo(() => Math.min(hidden(), props.limit).toLocaleString()),
+						" more ",
+						memo(() => props.noun),
+						" (",
+						memo(() => hidden().toLocaleString()),
+						" hidden)"
+					];
+				}
+			}));
+			return _el$4;
+		}
+	})];
+}
+/** Characters of a failure message drawn before the rest is offered. */
+var TEST_RESULTS_MESSAGE_LIMIT = 4e3;
+/**
+* A failed test's message, which a runner may print at any length: a captured
+* log, a serialized object, a long assertion. It opens on its own for the first
+* failure, so it is bounded where the diff and stack are already bounded: the
+* body scrolls past a fixed height, only the first characters are drawn until the
+* reader asks for the rest, and Copy writes all of it.
+*/
+function FailureMessage(props) {
+	const [all, setAll] = createSignal(false);
+	const [copied, setCopied] = createSignal(false);
+	const [copyFailed, setCopyFailed] = createSignal(false);
+	const clipped = () => props.text.length > TEST_RESULTS_MESSAGE_LIMIT;
+	const cut = () => {
+		const last = props.text.charCodeAt(3999);
+		return last >= 55296 && last <= 56319 ? 3999 : TEST_RESULTS_MESSAGE_LIMIT;
+	};
+	const shown = () => clipped() && !all() ? props.text.slice(0, cut()) : props.text;
+	const copy = async () => {
+		let ok = true;
+		try {
+			await writeClipboardText(props.text);
+		} catch {
+			ok = false;
+		}
+		setCopied(ok);
+		setCopyFailed(!ok);
+		props.onCopy?.(ok);
+		if (ok) setTimeout(() => setCopied(false), 1500);
+	};
+	return [(() => {
+		var _el$5 = _tmpl$5();
+		insert(_el$5, shown);
+		return _el$5;
+	})(), createComponent(Show, {
+		get when() {
+			return clipped();
+		},
+		get children() {
+			var _el$6 = _tmpl$6(), _el$7 = _el$6.firstChild;
+			insert(_el$7, createComponent(Show, {
+				get when() {
+					return !all();
+				},
+				get fallback() {
+					return `All ${props.text.length.toLocaleString()} characters shown.`;
+				},
+				get children() {
+					return [
+						"Showing the first ",
+						memo(() => cut().toLocaleString()),
+						" of ",
+						memo(() => props.text.length.toLocaleString()),
+						" ",
+						"characters (copy has all of it)."
+					];
+				}
+			}));
+			insert(_el$6, createComponent(Show, {
+				get when() {
+					return !all();
+				},
+				get children() {
+					return createComponent(Button, {
+						variant: "ghost",
+						size: "2xs",
+						onClick: () => setAll(true),
+						get children() {
+							return [
+								"Show all ",
+								memo(() => props.text.length.toLocaleString()),
+								" characters"
+							];
+						}
+					});
+				}
+			}), null);
+			insert(_el$6, createComponent(Button, {
+				variant: "ghost",
+				size: "2xs",
+				get title() {
+					return copyFailed() ? "Copying is unavailable in this context" : void 0;
+				},
+				onClick: () => void copy(),
+				get children() {
+					return [createComponent(Show, {
+						get when() {
+							return copied();
+						},
+						get fallback() {
+							return createComponent(Copy, { "aria-hidden": "true" });
+						},
+						get children() {
+							return createComponent(Check, { "aria-hidden": "true" });
+						}
+					}), memo(() => copied() ? "Copied" : "Copy message")];
+				}
+			}), null);
+			return _el$6;
+		}
+	})];
+}
+function TestLine(props) {
+	const test = () => props.test();
+	const state = () => test().status ? TRACE_STATUS[test().status] : void 0;
+	const hasDetail = createMemo(() => Boolean(test().message || test().diff || test().stack));
+	const failureKey = createMemo(() => props.failure?.test === props.keyed ? props.failure : void 0, void 0, { equals: sameFailure });
+	const [open, setOpen] = createSignal(failureKey() !== void 0);
+	let previousFailure = failureKey();
+	let collapsedFailure;
+	createEffect(() => {
+		const currentFailure = failureKey();
+		if (currentFailure && !sameFailure(currentFailure, previousFailure) && !sameFailure(currentFailure, collapsedFailure)) setOpen(true);
+		previousFailure = currentFailure;
+	});
+	const handleOpenChange = (next) => {
+		if (!next && failureKey()) collapsedFailure = failureKey();
+		else if (next) collapsedFailure = void 0;
+		setOpen(next);
+	};
+	return createComponent(TraceLine, {
+		get title() {
+			return test().name;
+		},
+		get status() {
+			return state()?.status;
+		},
+		get statusLabel() {
+			return state()?.label;
+		},
+		get meta() {
+			return formatDuration(test().durationMs);
+		},
+		get open() {
+			return open();
+		},
+		onOpenChange: handleOpenChange,
+		get children() {
+			return memo(() => !!hasDetail())() ? createComponent(Show, {
+				get when() {
+					return open();
+				},
+				get children() {
+					return createComponent(TraceDetail, {
+						"class": "flex flex-col gap-2",
+						get children() {
+							return [
+								createComponent(Show, {
+									get when() {
+										return test().message;
+									},
+									get children() {
+										return createComponent(FailureMessage, { get text() {
+											return test().message;
+										} });
+									}
+								}),
+								createComponent(Show, {
+									get when() {
+										return test().diff;
+									},
+									get children() {
+										return createComponent(DiffBlock, {
+											get patch() {
+												return test().diff;
+											},
+											complete: true,
+											title: "Expected and received"
+										});
+									}
+								}),
+								createComponent(Show, {
+									get when() {
+										return test().stack;
+									},
+									get children() {
+										return createComponent(StackTrace, {
+											get text() {
+												return test().stack;
+											},
+											get onOpenFrame() {
+												return props.onOpenFrame;
+											}
+										});
+									}
+								})
+							];
+						}
+					});
+				}
+			}) : void 0;
+		}
+	});
+}
+function SuiteLine(props) {
+	const suite = () => props.suite();
+	const counts = createMemo(() => listedCounts([suite()]));
+	const state = createMemo(() => suiteState(counts()));
+	const children = () => (suite().tests?.length ?? 0) + (suite().suites?.length ?? 0) > 0;
+	const [open, setOpen] = createSignal(state() === "failed");
+	const failure = createMemo(() => props.failure?.suites[props.depth] === props.keyed ? props.failure : void 0, void 0, { equals: sameFailure });
+	const holdsFailure = createMemo(() => failure()?.suites.length === props.depth + 1);
+	let previousFailure = failure();
+	let collapsedFailure;
+	createEffect(() => {
+		const currentFailure = failure();
+		if (currentFailure && !sameFailure(currentFailure, previousFailure) && !sameFailure(currentFailure, collapsedFailure)) setOpen(true);
+		previousFailure = currentFailure;
+	});
+	const handleOpenChange = (next) => {
+		if (!next && failure()) collapsedFailure = failure();
+		else if (next) collapsedFailure = void 0;
+		setOpen(next);
+	};
+	const description = () => {
+		return [suite().file, counts().failed > 0 ? `${counts().failed.toLocaleString()} failed` : void 0].filter(Boolean).join(" · ") || void 0;
+	};
+	return createComponent(TraceLine, {
+		get icon() {
+			return createComponent(FlaskConical, {});
+		},
+		get title() {
+			return suite().name;
+		},
+		get description() {
+			return description();
+		},
+		get status() {
+			return memo(() => state() === "failed")() ? "error" : memo(() => state() === "running")() ? "running" : state() === "passed" ? "success" : void 0;
+		},
+		get statusLabel() {
+			return memo(() => state() === "failed")() ? "Has failing tests" : state() === "passed" ? "All listed tests passed" : void 0;
+		},
+		get meta() {
+			return formatDuration(suite().durationMs);
+		},
+		get open() {
+			return open();
+		},
+		onOpenChange: handleOpenChange,
+		get children() {
+			return memo(() => !!children())() ? (() => {
+				var _el$8 = _tmpl$7();
+				insert(_el$8, createComponent(Show, {
+					get when() {
+						return open();
+					},
+					get children() {
+						return createComponent(Trace, {
+							size: "sm",
+							get ["aria-label"]() {
+								return `${suite().name} tests`;
+							},
+							get children() {
+								return [createComponent(Bounded, {
+									get items() {
+										return suite().tests ?? [];
+									},
+									itemKey: siblingKey,
+									get limit() {
+										return props.limit;
+									},
+									noun: "tests",
+									children: (test, _index, key) => createComponent(TestLine, {
+										test,
+										keyed: key,
+										get failure() {
+											return memo(() => !!holdsFailure())() ? failure() : void 0;
+										},
+										get onOpenFrame() {
+											return props.onOpenFrame;
+										}
+									})
+								}), createComponent(Bounded, {
+									get items() {
+										return suite().suites ?? [];
+									},
+									itemKey: siblingKey,
+									get limit() {
+										return props.limit;
+									},
+									noun: "suites",
+									children: (nested, _index, key) => createComponent(SuiteLine, {
+										suite: nested,
+										keyed: key,
+										get depth() {
+											return props.depth + 1;
+										},
+										get limit() {
+											return props.limit;
+										},
+										get failure() {
+											return failure();
+										},
+										get onOpenFrame() {
+											return props.onOpenFrame;
+										}
+									})
+								})];
+							}
+						});
+					}
+				}));
+				return _el$8;
+			})() : void 0;
+		}
+	});
+}
+function TestResults(props) {
+	const [local, rest] = splitProps(props, [
+		"suites",
+		"summary",
+		"running",
+		"listLimit",
+		"onOpenFrame",
+		"label",
+		"class"
+	]);
+	const listed = createMemo(() => listedCounts(local.suites));
+	const counts = createMemo(() => reconcileCounts(local.summary, listed()));
+	const limit = () => Math.max(1, Math.floor(local.listLimit ?? 50));
+	const failure = createMemo(() => firstFailureRenderPath(local.suites), void 0, { equals: sameFailure });
+	const duration = () => formatDuration(local.summary?.durationMs, "long");
+	const nothing = () => counts().lines.length === 0 && counts().reportedTotal === void 0 && local.suites.length === 0 && !local.running;
+	return (() => {
+		var _el$9 = _tmpl$11();
+		spread(_el$9, mergeProps({
+			get ["aria-label"]() {
+				return local.label ?? "Test results";
+			},
+			get ["aria-busy"]() {
+				return local.running || void 0;
+			},
+			get ["class"]() {
+				return cn("flex min-w-0 flex-col gap-2", local.class);
+			}
+		}, rest), false, true);
+		insert(_el$9, createComponent(Show, {
+			get when() {
+				return !nothing();
+			},
+			get fallback() {
+				return _tmpl$12();
+			},
+			get children() {
+				return [(() => {
+					var _el$0 = _tmpl$10(), _el$1 = _el$0.firstChild;
+					insert(_el$1, createComponent(Show, {
+						get when() {
+							return local.running;
+						},
+						get children() {
+							var _el$10 = _tmpl$8(), _el$11 = _el$10.firstChild;
+							insert(_el$10, createComponent(LoaderCircle, {
+								"aria-hidden": "true",
+								"class": "size-3.5 motion-safe:animate-spin"
+							}), _el$11);
+							return _el$10;
+						}
+					}), null);
+					insert(_el$1, createComponent(For, {
+						get each() {
+							return counts().lines;
+						},
+						children: (line) => createComponent(CountReadout, { line })
+					}), null);
+					insert(_el$1, createComponent(Show, {
+						get when() {
+							return memo(() => !!(counts().lines.length === 0 && !counts().totalNote))() && counts().reportedTotal !== void 0;
+						},
+						get children() {
+							var _el$12 = _tmpl$9(), _el$13 = _el$12.firstChild;
+							insert(_el$12, () => counts().reportedTotal?.toLocaleString(), _el$13);
+							return _el$12;
+						}
+					}), null);
+					insert(_el$1, createComponent(Show, {
+						get when() {
+							return counts().totalNote;
+						},
+						children: (note) => (() => {
+							var _el$18 = _tmpl$13(), _el$19 = _el$18.firstChild, _el$21 = _el$19.nextSibling;
+							_el$21.nextSibling;
+							insert(_el$18, () => note().reported.toLocaleString(), _el$19);
+							insert(_el$18, () => note().listed.toLocaleString(), _el$21);
+							return _el$18;
+						})()
+					}), null);
+					insert(_el$1, createComponent(Show, {
+						get when() {
+							return duration();
+						},
+						get children() {
+							var _el$14 = _tmpl$0();
+							_el$14.firstChild;
+							insert(_el$14, duration, null);
+							return _el$14;
+						}
+					}), null);
+					insert(_el$0, createComponent(SummaryBar, { get lines() {
+						return counts().lines;
+					} }), null);
+					insert(_el$0, createComponent(Show, {
+						get when() {
+							return memo(() => counts().basis === "listed")() && counts().lines.length > 0;
+						},
+						get children() {
+							return _tmpl$1();
+						}
+					}), null);
+					return _el$0;
+				})(), createComponent(Show, {
+					get when() {
+						return local.suites.length > 0;
+					},
+					get children() {
+						return createComponent(Trace, {
+							"aria-label": "Test suites",
+							get children() {
+								return createComponent(Bounded, {
+									get items() {
+										return local.suites;
+									},
+									itemKey: siblingKey,
+									get limit() {
+										return limit();
+									},
+									noun: "suites",
+									children: (suite, _index, key) => createComponent(SuiteLine, {
+										suite,
+										keyed: key,
+										depth: 0,
+										get limit() {
+											return limit();
+										},
+										get failure() {
+											return failure();
+										},
+										get onOpenFrame() {
+											return local.onOpenFrame;
+										}
+									})
+								});
+							}
+						});
+					}
+				})];
+			}
+		}));
+		return _el$9;
+	})();
+}
+//#endregion
+export { TEST_RESULTS_LIST_LIMIT, TEST_RESULTS_MESSAGE_LIMIT, TestResults };
+
+//# sourceMappingURL=test-results.js.map