webui: Add test for sketch-app-shell component
Created a basic test for the top-level Sketch App Shell component with API mocking. Reorganized mock data to be shared between tests and demo.
Co-Authored-By: sketch
diff --git a/webui/src/web-components/sketch-app-shell.test.ts b/webui/src/web-components/sketch-app-shell.test.ts
new file mode 100644
index 0000000..0b3ae6a
--- /dev/null
+++ b/webui/src/web-components/sketch-app-shell.test.ts
@@ -0,0 +1,88 @@
+import { test, expect } from "@sand4rt/experimental-ct-web";
+import { SketchAppShell } from "./sketch-app-shell";
+import { initialMessages, initialState } from "../fixtures/dummy";
+
+test("renders app shell with mocked API", async ({ page, mount }) => {
+ // Mock the state API response
+ await page.route("**/state", async (route) => {
+ await route.fulfill({ json: initialState });
+ });
+
+ // Mock the messages API response
+ await page.route("**/messages*", async (route) => {
+ const url = new URL(route.request().url());
+ const startIndex = parseInt(url.searchParams.get("start") || "0");
+ await route.fulfill({ json: initialMessages.slice(startIndex) });
+ });
+
+ // Mount the component
+ const component = await mount(SketchAppShell);
+
+ // Wait for initial data to load
+ await page.waitForTimeout(500);
+
+ // Verify the title is displayed correctly
+ await expect(component.locator(".chat-title")).toContainText(
+ initialState.title,
+ );
+
+ // Verify core components are rendered
+ await expect(component.locator("sketch-container-status")).toBeVisible();
+ await expect(component.locator("sketch-timeline")).toBeVisible();
+ await expect(component.locator("sketch-chat-input")).toBeVisible();
+ await expect(component.locator("sketch-view-mode-select")).toBeVisible();
+
+ // Default view should be chat view
+ await expect(component.locator(".chat-view.view-active")).toBeVisible();
+});
+
+const emptyState = {
+ message_count: 0,
+ total_usage: {
+ start_time: "2025-04-25T19:07:24.94241+01:00",
+ messages: 0,
+ input_tokens: 0,
+ output_tokens: 0,
+ cache_read_input_tokens: 0,
+ cache_creation_input_tokens: 0,
+ total_cost_usd: 0,
+ tool_uses: {},
+ },
+ initial_commit: "08e2cf2eaf043df77f8468d90bb21d0083de2132",
+ title: "",
+ hostname: "MacBook-Pro-9.local",
+ working_dir: "/Users/pokey/src/sketch",
+ os: "darwin",
+ git_origin: "git@github.com:boldsoftware/sketch.git",
+ inside_hostname: "MacBook-Pro-9.local",
+ inside_os: "darwin",
+ inside_working_dir: "/Users/pokey/src/sketch",
+};
+
+test("renders app shell with empty state", async ({ page, mount }) => {
+ // Mock the state API response
+ await page.route("**/state", async (route) => {
+ await route.fulfill({ json: emptyState });
+ });
+
+ // Mock the messages API response
+ await page.route("**/messages*", async (route) => {
+ await route.fulfill({ json: [] });
+ });
+
+ // Mount the component
+ const component = await mount(SketchAppShell);
+
+ // Wait for initial data to load
+ await page.waitForTimeout(500);
+
+ // Verify the title is displayed correctly
+ await expect(component.locator(".chat-title")).toContainText(
+ emptyState.title,
+ );
+
+ // Verify core components are rendered
+ await expect(component.locator("sketch-container-status")).toBeVisible();
+ await expect(component.locator("sketch-chat-input")).toBeVisible();
+ await expect(component.locator("sketch-view-mode-select")).toBeVisible();
+});