loop/webui: add prettier
diff --git a/loop/webui/src/web-components/sketch-container-status.test.ts b/loop/webui/src/web-components/sketch-container-status.test.ts
index 3a898ee..1eae4ee 100644
--- a/loop/webui/src/web-components/sketch-container-status.test.ts
+++ b/loop/webui/src/web-components/sketch-container-status.test.ts
@@ -17,13 +17,15 @@
output_tokens: 2000,
cache_read_input_tokens: 300,
cache_creation_input_tokens: 400,
- total_cost_usd: 0.25
- }
+ total_cost_usd: 0.25,
+ },
};
it("renders with complete state data", async () => {
const el: SketchContainerStatus = await fixture(html`
- <sketch-container-status .state=${mockCompleteState}></sketch-container-status>
+ <sketch-container-status
+ .state=${mockCompleteState}
+ ></sketch-container-status>
`);
// Check that all expected elements exist
@@ -38,15 +40,33 @@
expect(el.shadowRoot!.querySelector("#totalCost")).to.exist;
// Verify content of displayed elements
- expect(el.shadowRoot!.querySelector("#hostname")!.textContent).to.equal("test-host");
- expect(el.shadowRoot!.querySelector("#workingDir")!.textContent).to.equal("/test/dir");
- expect(el.shadowRoot!.querySelector("#initialCommit")!.textContent).to.equal("abcdef12"); // Only first 8 chars
- expect(el.shadowRoot!.querySelector("#messageCount")!.textContent).to.equal("42");
- expect(el.shadowRoot!.querySelector("#inputTokens")!.textContent).to.equal("1000");
- expect(el.shadowRoot!.querySelector("#outputTokens")!.textContent).to.equal("2000");
- expect(el.shadowRoot!.querySelector("#cacheReadInputTokens")!.textContent).to.equal("300");
- expect(el.shadowRoot!.querySelector("#cacheCreationInputTokens")!.textContent).to.equal("400");
- expect(el.shadowRoot!.querySelector("#totalCost")!.textContent).to.equal("$0.25");
+ expect(el.shadowRoot!.querySelector("#hostname")!.textContent).to.equal(
+ "test-host",
+ );
+ expect(el.shadowRoot!.querySelector("#workingDir")!.textContent).to.equal(
+ "/test/dir",
+ );
+ expect(
+ el.shadowRoot!.querySelector("#initialCommit")!.textContent,
+ ).to.equal("abcdef12"); // Only first 8 chars
+ expect(el.shadowRoot!.querySelector("#messageCount")!.textContent).to.equal(
+ "42",
+ );
+ expect(el.shadowRoot!.querySelector("#inputTokens")!.textContent).to.equal(
+ "1000",
+ );
+ expect(el.shadowRoot!.querySelector("#outputTokens")!.textContent).to.equal(
+ "2000",
+ );
+ expect(
+ el.shadowRoot!.querySelector("#cacheReadInputTokens")!.textContent,
+ ).to.equal("300");
+ expect(
+ el.shadowRoot!.querySelector("#cacheCreationInputTokens")!.textContent,
+ ).to.equal("400");
+ expect(el.shadowRoot!.querySelector("#totalCost")!.textContent).to.equal(
+ "$0.25",
+ );
});
it("renders with undefined state", async () => {
@@ -56,12 +76,24 @@
// Elements should exist but be empty
expect(el.shadowRoot!.querySelector("#hostname")!.textContent).to.equal("");
- expect(el.shadowRoot!.querySelector("#workingDir")!.textContent).to.equal("");
- expect(el.shadowRoot!.querySelector("#initialCommit")!.textContent).to.equal("");
- expect(el.shadowRoot!.querySelector("#messageCount")!.textContent).to.equal("");
- expect(el.shadowRoot!.querySelector("#inputTokens")!.textContent).to.equal("");
- expect(el.shadowRoot!.querySelector("#outputTokens")!.textContent).to.equal("");
- expect(el.shadowRoot!.querySelector("#totalCost")!.textContent).to.equal("$0.00");
+ expect(el.shadowRoot!.querySelector("#workingDir")!.textContent).to.equal(
+ "",
+ );
+ expect(
+ el.shadowRoot!.querySelector("#initialCommit")!.textContent,
+ ).to.equal("");
+ expect(el.shadowRoot!.querySelector("#messageCount")!.textContent).to.equal(
+ "",
+ );
+ expect(el.shadowRoot!.querySelector("#inputTokens")!.textContent).to.equal(
+ "",
+ );
+ expect(el.shadowRoot!.querySelector("#outputTokens")!.textContent).to.equal(
+ "",
+ );
+ expect(el.shadowRoot!.querySelector("#totalCost")!.textContent).to.equal(
+ "$0.00",
+ );
});
it("renders with partial state data", async () => {
@@ -71,24 +103,40 @@
os: "linux",
title: "Partial Test",
total_usage: {
- input_tokens: 500
- }
+ input_tokens: 500,
+ },
};
const el: SketchContainerStatus = await fixture(html`
- <sketch-container-status .state=${partialState as State}></sketch-container-status>
+ <sketch-container-status
+ .state=${partialState as State}
+ ></sketch-container-status>
`);
// Check that elements with data are properly populated
- expect(el.shadowRoot!.querySelector("#hostname")!.textContent).to.equal("partial-host");
- expect(el.shadowRoot!.querySelector("#messageCount")!.textContent).to.equal("10");
- expect(el.shadowRoot!.querySelector("#inputTokens")!.textContent).to.equal("500");
-
+ expect(el.shadowRoot!.querySelector("#hostname")!.textContent).to.equal(
+ "partial-host",
+ );
+ expect(el.shadowRoot!.querySelector("#messageCount")!.textContent).to.equal(
+ "10",
+ );
+ expect(el.shadowRoot!.querySelector("#inputTokens")!.textContent).to.equal(
+ "500",
+ );
+
// Check that elements without data are empty
- expect(el.shadowRoot!.querySelector("#workingDir")!.textContent).to.equal("");
- expect(el.shadowRoot!.querySelector("#initialCommit")!.textContent).to.equal("");
- expect(el.shadowRoot!.querySelector("#outputTokens")!.textContent).to.equal("");
- expect(el.shadowRoot!.querySelector("#totalCost")!.textContent).to.equal("$0.00");
+ expect(el.shadowRoot!.querySelector("#workingDir")!.textContent).to.equal(
+ "",
+ );
+ expect(
+ el.shadowRoot!.querySelector("#initialCommit")!.textContent,
+ ).to.equal("");
+ expect(el.shadowRoot!.querySelector("#outputTokens")!.textContent).to.equal(
+ "",
+ );
+ expect(el.shadowRoot!.querySelector("#totalCost")!.textContent).to.equal(
+ "$0.00",
+ );
});
it("handles cost formatting correctly", async () => {
@@ -97,7 +145,7 @@
{ cost: 0, expected: "$0.00" },
{ cost: 0.1, expected: "$0.10" },
{ cost: 1.234, expected: "$1.23" },
- { cost: 10.009, expected: "$10.01" }
+ { cost: 10.009, expected: "$10.01" },
];
for (const testCase of testCases) {
@@ -105,47 +153,57 @@
...mockCompleteState,
total_usage: {
...mockCompleteState.total_usage,
- total_cost_usd: testCase.cost
- }
+ total_cost_usd: testCase.cost,
+ },
};
const el: SketchContainerStatus = await fixture(html`
- <sketch-container-status .state=${stateWithCost}></sketch-container-status>
+ <sketch-container-status
+ .state=${stateWithCost}
+ ></sketch-container-status>
`);
- expect(el.shadowRoot!.querySelector("#totalCost")!.textContent).to.equal(testCase.expected);
+ expect(el.shadowRoot!.querySelector("#totalCost")!.textContent).to.equal(
+ testCase.expected,
+ );
}
});
it("truncates commit hash to 8 characters", async () => {
const stateWithLongCommit = {
...mockCompleteState,
- initial_commit: "1234567890abcdef1234567890abcdef12345678"
+ initial_commit: "1234567890abcdef1234567890abcdef12345678",
};
const el: SketchContainerStatus = await fixture(html`
- <sketch-container-status .state=${stateWithLongCommit}></sketch-container-status>
+ <sketch-container-status
+ .state=${stateWithLongCommit}
+ ></sketch-container-status>
`);
- expect(el.shadowRoot!.querySelector("#initialCommit")!.textContent).to.equal("12345678");
+ expect(
+ el.shadowRoot!.querySelector("#initialCommit")!.textContent,
+ ).to.equal("12345678");
});
it("has correct link elements", async () => {
const el: SketchContainerStatus = await fixture(html`
- <sketch-container-status .state=${mockCompleteState}></sketch-container-status>
+ <sketch-container-status
+ .state=${mockCompleteState}
+ ></sketch-container-status>
`);
- const links = Array.from(el.shadowRoot!.querySelectorAll('a'));
+ const links = Array.from(el.shadowRoot!.querySelectorAll("a"));
expect(links.length).to.equal(2);
-
+
// Check for logs link
- const logsLink = links.find(link => link.textContent === 'Logs');
+ const logsLink = links.find((link) => link.textContent === "Logs");
expect(logsLink).to.exist;
- expect(logsLink!.getAttribute('href')).to.equal('logs');
-
+ expect(logsLink!.getAttribute("href")).to.equal("logs");
+
// Check for download link
- const downloadLink = links.find(link => link.textContent === 'Download');
+ const downloadLink = links.find((link) => link.textContent === "Download");
expect(downloadLink).to.exist;
- expect(downloadLink!.getAttribute('href')).to.equal('download');
+ expect(downloadLink!.getAttribute("href")).to.equal("download");
});
});