/** @jsxImportSource https://esm.sh/hono/jsx */ import { clsx } from "https://esm.sh/clsx"; import { useEffect, useState } from "https://esm.sh/hono/jsx/dom"; import { Island } from "https://esm.town/v/pomdtr/island"; import { CheckCircleIcon, ExclamationCircleIcon, MagnifyingGlassCircleIcon, PlayCircleIcon, QuestionMarkCircleIcon, StopCircleIcon, } from "https://esm.town/v/pomdtr/test_explorer_icons"; export type Test = { val: any; name: string; status?: TestStatus; last_run_at?: string; }; type Props = { tests: Test[]; }; const iconSize = 20; type TestStatus = "none" | "running" | "success" | "failure"; const StatusIcon = (props: { status: TestStatus }) => { const style = { width: iconSize, height: iconSize }; switch (props.status) { case "success": { return ; } case "failure": { return ; } default: { return ; } } }; const RunIcon = (props: any & { status: TestStatus }) => { const { status, ...iconProps } = props; const style = { width: iconSize, height: iconSize }; switch (props.status) { case "running": { return ; } default: { return ; } } }; function TestItem({ test, run }: { test: Test; run: () => void }) { return (

{test.name} {" "}

); } function groupBySlug(tests: Test[]): Record { const groups = {}; for (const test of Object.values(tests)) { const slug = `${test.val.author.username}/${test.val.name}`; if (!groups[slug]) { groups[slug] = [test]; } else { groups[slug].push(test); } } return groups; } function useTests(initialTests: Test[]) { const id = (test: Test) => `${test.val.name}/${test.name}`; const [tests, setTests] = useState(Object.fromEntries(initialTests.map((test) => { return [id(test), test]; }))); const groups = groupBySlug(tests); return { groups, runTest: async (test) => { const testID = id(test); tests[testID].status = "running"; setTests({ ...tests }); const resp = await fetch("/api/run", { method: "POST", body: JSON.stringify({ test: test.name, val: test.val.name, }), }); const { success, error } = await resp.json(); tests[testID].status = success ? "success" : "failure"; tests[testID].message = error; setTests({ ...tests }); }, }; } function TestExplorerView({ tests }: Props) { const { groups, runTest } = useTests(tests); return (

{Object.entries(groups).map(([slug, tests], idx) => { let groupStatus: TestStatus | undefined; for (const test of tests) { if (test.status == "running") { groupStatus = "running"; break; } if (test.status == "failure") { groupStatus = "failure"; break; } if (test.status == "success") { groupStatus = "success"; continue; } } return ( <>

{slug} {" "} {" "} { e.preventDefault(); for (const test of tests) { runTest(test); } }} />

runTest(test)} />

{idx < Object.keys(groups).length - 1 ?

: undefined} ); })}

); } export default function(props: { tests: Test[] }) { return ( <>

); }