loop/webui/src/web-components/sketch-container-status.test.ts

import { html, fixture, expect } from "@open-wc/testing";
import "./sketch-container-status";
import type { SketchContainerStatus } from "./sketch-container-status";
import { State } from "../types";

describe("SketchContainerStatus", () => {
  // Mock complete state for testing
  const mockCompleteState: State = {
    hostname: "test-host",
    working_dir: "/test/dir",
    initial_commit: "abcdef1234567890",
    message_count: 42,
    os: "linux",
    title: "Test Session",
    total_usage: {
      input_tokens: 1000,
      output_tokens: 2000,
      cache_read_input_tokens: 300,
      cache_creation_input_tokens: 400,
      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>
    `);

    // Check that all expected elements exist
    expect(el.shadowRoot!.querySelector("#hostname")).to.exist;
    expect(el.shadowRoot!.querySelector("#workingDir")).to.exist;
    expect(el.shadowRoot!.querySelector("#initialCommit")).to.exist;
    expect(el.shadowRoot!.querySelector("#messageCount")).to.exist;
    expect(el.shadowRoot!.querySelector("#inputTokens")).to.exist;
    expect(el.shadowRoot!.querySelector("#outputTokens")).to.exist;
    expect(el.shadowRoot!.querySelector("#cacheReadInputTokens")).to.exist;
    expect(el.shadowRoot!.querySelector("#cacheCreationInputTokens")).to.exist;
    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",
    );
  });

  it("renders with undefined state", async () => {
    const el: SketchContainerStatus = await fixture(html`
      <sketch-container-status></sketch-container-status>
    `);

    // 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",
    );
  });

  it("renders with partial state data", async () => {
    const partialState: Partial<State> = {
      hostname: "partial-host",
      message_count: 10,
      os: "linux",
      title: "Partial Test",
      total_usage: {
        input_tokens: 500,
      },
    };

    const el: SketchContainerStatus = await fixture(html`
      <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",
    );

    // 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",
    );
  });

  it("handles cost formatting correctly", async () => {
    // Test with different cost values
    const testCases = [
      { cost: 0, expected: "$0.00" },
      { cost: 0.1, expected: "$0.10" },
      { cost: 1.234, expected: "$1.23" },
      { cost: 10.009, expected: "$10.01" },
    ];

    for (const testCase of testCases) {
      const stateWithCost = {
        ...mockCompleteState,
        total_usage: {
          ...mockCompleteState.total_usage,
          total_cost_usd: testCase.cost,
        },
      };

      const el: SketchContainerStatus = await fixture(html`
        <sketch-container-status
          .state=${stateWithCost}
        ></sketch-container-status>
      `);

      expect(el.shadowRoot!.querySelector("#totalCost")!.textContent).to.equal(
        testCase.expected,
      );
    }
  });

  it("truncates commit hash to 8 characters", async () => {
    const stateWithLongCommit = {
      ...mockCompleteState,
      initial_commit: "1234567890abcdef1234567890abcdef12345678",
    };

    const el: SketchContainerStatus = await fixture(html`
      <sketch-container-status
        .state=${stateWithLongCommit}
      ></sketch-container-status>
    `);

    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>
    `);

    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");
    expect(logsLink).to.exist;
    expect(logsLink!.getAttribute("href")).to.equal("logs");

    // Check for download link
    const downloadLink = links.find((link) => link.textContent === "Download");
    expect(downloadLink).to.exist;
    expect(downloadLink!.getAttribute("href")).to.equal("download");
  });
});