webui/src/web-components/sketch-timeline.test.ts

import { test, expect } from "@sand4rt/experimental-ct-web";
import { SketchTimeline } from "./sketch-timeline";
import { AgentMessage } from "../types";

// Helper function to create mock timeline messages
function createMockMessage(props: Partial<AgentMessage> = {}): AgentMessage {
  return {
    idx: props.idx || 0,
    type: props.type || "agent",
    content: props.content || "Hello world",
    timestamp: props.timestamp || "2023-05-15T12:00:00Z",
    elapsed: props.elapsed || 1500000000, // 1.5 seconds in nanoseconds
    end_of_turn: props.end_of_turn || false,
    conversation_id: props.conversation_id || "conv123",
    tool_calls: props.tool_calls || [],
    commits: props.commits || [],
    usage: props.usage,
    hide_output: props.hide_output || false,
    ...props,
  };
}

// Extend window interface for test globals
declare global {
  interface Window {
    scrollCalled?: boolean;
    testEventFired?: boolean;
    testEventDetail?: any;
  }
}

// Helper function to create an array of mock messages
function createMockMessages(count: number): AgentMessage[] {
  return Array.from({ length: count }, (_, i) =>
    createMockMessage({
      idx: i,
      content: `Message ${i + 1}`,
      type: i % 3 === 0 ? "user" : "agent",
      timestamp: new Date(Date.now() - (count - i) * 60000).toISOString(),
    }),
  );
}

test("renders empty state when no messages", async ({ mount }) => {
  const timeline = await mount(SketchTimeline, {
    props: {
      messages: [],
    },
  });

  await expect(timeline.locator(".welcome-box")).toBeVisible();
  await expect(timeline.locator(".welcome-box-title")).toContainText(
    "How to use Sketch",
  );
});

test("renders messages when provided", async ({ mount }) => {
  const messages = createMockMessages(5);

  const timeline = await mount(SketchTimeline, {
    props: {
      messages,
    },
  });

  await expect(timeline.locator(".timeline-container")).toBeVisible();
  await expect(timeline.locator("sketch-timeline-message")).toHaveCount(5);
});

test("shows thinking indicator when agent is active", async ({ mount }) => {
  const messages = createMockMessages(3);

  const timeline = await mount(SketchTimeline, {
    props: {
      messages,
      llmCalls: 1,
      toolCalls: ["thinking"],
    },
  });

  await expect(timeline.locator(".thinking-indicator")).toBeVisible();
  await expect(timeline.locator(".thinking-bubble")).toBeVisible();
  await expect(timeline.locator(".thinking-dots .dot")).toHaveCount(3);
});

test("filters out messages with hide_output flag", async ({ mount }) => {
  const messages = [
    createMockMessage({ idx: 0, content: "Visible message 1" }),
    createMockMessage({ idx: 1, content: "Hidden message", hide_output: true }),
    createMockMessage({ idx: 2, content: "Visible message 2" }),
  ];

  const timeline = await mount(SketchTimeline, {
    props: {
      messages,
    },
  });

  // Should only show 2 visible messages
  await expect(timeline.locator("sketch-timeline-message")).toHaveCount(2);

  // Verify the hidden message is not rendered by checking each visible message individually
  const visibleMessages = timeline.locator("sketch-timeline-message");
  await expect(visibleMessages.nth(0)).toContainText("Visible message 1");
  await expect(visibleMessages.nth(1)).toContainText("Visible message 2");

  // Check that no message contains the hidden text
  const firstMessageText = await visibleMessages.nth(0).textContent();
  const secondMessageText = await visibleMessages.nth(1).textContent();
  expect(firstMessageText).not.toContain("Hidden message");
  expect(secondMessageText).not.toContain("Hidden message");
});

// Viewport Management Tests

test("limits initial message count based on initialMessageCount property", async ({
  mount,
}) => {
  const messages = createMockMessages(50);

  const timeline = await mount(SketchTimeline, {
    props: {
      messages,
      initialMessageCount: 10,
    },
  });

  // Should only render the most recent 10 messages initially
  await expect(timeline.locator("sketch-timeline-message")).toHaveCount(10);

  // Should show the most recent messages (41-50)
  await expect(
    timeline.locator("sketch-timeline-message").first(),
  ).toContainText("Message 41");
  await expect(
    timeline.locator("sketch-timeline-message").last(),
  ).toContainText("Message 50");
});

test("handles viewport expansion correctly", async ({ mount }) => {
  const messages = createMockMessages(50);

  const timeline = await mount(SketchTimeline, {
    props: {
      messages,
      initialMessageCount: 10,
      loadChunkSize: 5,
    },
  });

  // Initially shows 10 messages
  await expect(timeline.locator("sketch-timeline-message")).toHaveCount(10);

  // Simulate expanding viewport by setting visibleMessageStartIndex
  await timeline.evaluate((element: SketchTimeline) => {
    (element as any).visibleMessageStartIndex = 5;
    element.requestUpdate();
    return element.updateComplete;
  });

  // Should now show 15 messages (10 initial + 5 chunk)
  await expect(timeline.locator("sketch-timeline-message")).toHaveCount(15);

  // Should show messages 36-50
  await expect(
    timeline.locator("sketch-timeline-message").first(),
  ).toContainText("Message 36");
  await expect(
    timeline.locator("sketch-timeline-message").last(),
  ).toContainText("Message 50");
});

test("resetViewport method resets to most recent messages", async ({
  mount,
}) => {
  const messages = createMockMessages(50);

  const timeline = await mount(SketchTimeline, {
    props: {
      messages,
      initialMessageCount: 10,
    },
  });

  // Expand viewport
  await timeline.evaluate((element: SketchTimeline) => {
    (element as any).visibleMessageStartIndex = 10;
    element.requestUpdate();
    return element.updateComplete;
  });

  await expect(timeline.locator("sketch-timeline-message")).toHaveCount(20);

  // Reset viewport
  await timeline.evaluate((element: SketchTimeline) => {
    element.resetViewport();
    return element.updateComplete;
  });

  // Should be back to initial count
  await expect(timeline.locator("sketch-timeline-message")).toHaveCount(10);
  await expect(
    timeline.locator("sketch-timeline-message").first(),
  ).toContainText("Message 41");
});

// Scroll State Management Tests

test("shows jump-to-latest button when not pinned to latest", async ({
  mount,
}) => {
  const messages = createMockMessages(10);

  const timeline = await mount(SketchTimeline, {
    props: {
      messages,
    },
  });

  // Initially should be pinned to latest (button hidden)
  await expect(timeline.locator("#jump-to-latest.floating")).not.toBeVisible();

  // Simulate floating state
  await timeline.evaluate((element: SketchTimeline) => {
    (element as any).scrollingState = "floating";
    element.requestUpdate();
    return element.updateComplete;
  });

  // Button should now be visible
  await expect(timeline.locator("#jump-to-latest.floating")).toBeVisible();
});

test("jump-to-latest button calls scroll method", async ({ mount }) => {
  const messages = createMockMessages(10);

  const timeline = await mount(SketchTimeline, {
    props: {
      messages,
    },
  });

  // Initialize the scroll tracking flag and set to floating state to show button
  await timeline.evaluate((element: SketchTimeline) => {
    // Initialize tracking flag
    (window as any).scrollCalled = false;

    // Set floating state
    (element as any).scrollingState = "floating";

    // Mock the scroll method
    (element as any).scrollToBottomWithRetry = async function () {
      (window as any).scrollCalled = true;
      return Promise.resolve();
    };

    element.requestUpdate();
    return element.updateComplete;
  });

  // Verify button is visible before clicking
  await expect(timeline.locator("#jump-to-latest.floating")).toBeVisible();

  // Click the jump to latest button
  await timeline.locator("#jump-to-latest").click();

  // Check if scroll was called
  const wasScrollCalled = await timeline.evaluate(
    () => (window as any).scrollCalled,
  );
  expect(wasScrollCalled).toBe(true);
});

// Loading State Tests

test("shows loading indicator when loading older messages", async ({
  mount,
}) => {
  const messages = createMockMessages(10);

  const timeline = await mount(SketchTimeline, {
    props: {
      messages,
    },
  });

  // Simulate loading state
  await timeline.evaluate((element: SketchTimeline) => {
    (element as any).isLoadingOlderMessages = true;
    element.requestUpdate();
    return element.updateComplete;
  });

  await expect(timeline.locator(".loading-indicator")).toBeVisible();
  await expect(timeline.locator(".loading-spinner")).toBeVisible();
  await expect(timeline.locator(".loading-indicator")).toContainText(
    "Loading older messages...",
  );
});

test("hides loading indicator when not loading", async ({ mount }) => {
  const messages = createMockMessages(10);

  const timeline = await mount(SketchTimeline, {
    props: {
      messages,
    },
  });

  // Should not show loading indicator by default
  await expect(timeline.locator(".loading-indicator")).not.toBeVisible();
});

// Memory Management and Cleanup Tests

test("handles scroll container changes properly", async ({ mount }) => {
  const messages = createMockMessages(5);

  const timeline = await mount(SketchTimeline, {
    props: {
      messages,
    },
  });

  // Initialize call counters in window
  await timeline.evaluate(() => {
    (window as any).addListenerCalls = 0;
    (window as any).removeListenerCalls = 0;
  });

  // Set first container
  await timeline.evaluate((element: SketchTimeline) => {
    const mockContainer1 = {
      addEventListener: () => {
        (window as any).addListenerCalls =
          ((window as any).addListenerCalls || 0) + 1;
      },
      removeEventListener: () => {
        (window as any).removeListenerCalls =
          ((window as any).removeListenerCalls || 0) + 1;
      },
      isConnected: true,
      scrollTop: 0,
      scrollHeight: 1000,
      clientHeight: 500,
    };
    (element as any).scrollContainer = { value: mockContainer1 };
    element.requestUpdate();
    return element.updateComplete;
  });

  // Change to second container (should clean up first)
  await timeline.evaluate((element: SketchTimeline) => {
    const mockContainer2 = {
      addEventListener: () => {
        (window as any).addListenerCalls =
          ((window as any).addListenerCalls || 0) + 1;
      },
      removeEventListener: () => {
        (window as any).removeListenerCalls =
          ((window as any).removeListenerCalls || 0) + 1;
      },
      isConnected: true,
      scrollTop: 0,
      scrollHeight: 1000,
      clientHeight: 500,
    };
    (element as any).scrollContainer = { value: mockContainer2 };
    element.requestUpdate();
    return element.updateComplete;
  });

  // Get the call counts
  const addListenerCalls = await timeline.evaluate(
    () => (window as any).addListenerCalls || 0,
  );
  const removeListenerCalls = await timeline.evaluate(
    () => (window as any).removeListenerCalls || 0,
  );

  // Should have called addEventListener twice and removeEventListener once
  expect(addListenerCalls).toBeGreaterThan(0);
  expect(removeListenerCalls).toBeGreaterThan(0);
});

test("cancels loading operations on viewport reset", async ({ mount }) => {
  const messages = createMockMessages(50);

  const timeline = await mount(SketchTimeline, {
    props: {
      messages,
    },
  });

  // Set loading state
  await timeline.evaluate((element: SketchTimeline) => {
    (element as any).isLoadingOlderMessages = true;
    (element as any).loadingAbortController = new AbortController();
    element.requestUpdate();
    return element.updateComplete;
  });

  // Verify loading state
  await expect(timeline.locator(".loading-indicator")).toBeVisible();

  // Reset viewport (should cancel loading)
  await timeline.evaluate((element: SketchTimeline) => {
    element.resetViewport();
    return element.updateComplete;
  });

  // Loading should be cancelled
  const isLoading = await timeline.evaluate(
    (element: SketchTimeline) => (element as any).isLoadingOlderMessages,
  );
  expect(isLoading).toBe(false);

  await expect(timeline.locator(".loading-indicator")).not.toBeVisible();
});

// Message Filtering and Ordering Tests

test("displays messages in correct order (most recent at bottom)", async ({
  mount,
}) => {
  const messages = [
    createMockMessage({
      idx: 0,
      content: "First message",
      timestamp: "2023-01-01T10:00:00Z",
    }),
    createMockMessage({
      idx: 1,
      content: "Second message",
      timestamp: "2023-01-01T11:00:00Z",
    }),
    createMockMessage({
      idx: 2,
      content: "Third message",
      timestamp: "2023-01-01T12:00:00Z",
    }),
  ];

  const timeline = await mount(SketchTimeline, {
    props: {
      messages,
    },
  });

  const messageElements = timeline.locator("sketch-timeline-message");

  // Check order
  await expect(messageElements.nth(0)).toContainText("First message");
  await expect(messageElements.nth(1)).toContainText("Second message");
  await expect(messageElements.nth(2)).toContainText("Third message");
});

test("handles previousMessage prop correctly for message context", async ({
  mount,
}) => {
  const messages = [
    createMockMessage({ idx: 0, content: "First message", type: "user" }),
    createMockMessage({ idx: 1, content: "Second message", type: "agent" }),
    createMockMessage({ idx: 2, content: "Third message", type: "user" }),
  ];

  const timeline = await mount(SketchTimeline, {
    props: {
      messages,
    },
  });

  // Check that messages have the expected structure
  // The first message should not have a previous message context
  // The second message should have the first as previous, etc.

  const messageElements = timeline.locator("sketch-timeline-message");
  await expect(messageElements).toHaveCount(3);

  // All messages should be rendered
  await expect(messageElements.nth(0)).toContainText("First message");
  await expect(messageElements.nth(1)).toContainText("Second message");
  await expect(messageElements.nth(2)).toContainText("Third message");
});

// Event Handling Tests

test("handles show-commit-diff events from message components", async ({
  mount,
}) => {
  const messages = [
    createMockMessage({
      idx: 0,
      content: "Message with commit",
      commits: [
        {
          hash: "abc123def456",
          subject: "Test commit",
          body: "Test commit body",
          pushed_branch: "main",
        },
      ],
    }),
  ];

  const timeline = await mount(SketchTimeline, {
    props: {
      messages,
    },
  });

  // Listen for the bubbled event
  await timeline.evaluate((element) => {
    element.addEventListener("show-commit-diff", (event: CustomEvent) => {
      window.testEventFired = true;
      window.testEventDetail = event.detail;
    });
  });

  // Simulate the event being fired from a message component
  await timeline.evaluate((element) => {
    const event = new CustomEvent("show-commit-diff", {
      detail: { commitHash: "abc123def456" },
      bubbles: true,
      composed: true,
    });
    element.dispatchEvent(event);
  });

  // Check that event was handled
  const wasEventFired = await timeline.evaluate(() => window.testEventFired);
  const detail = await timeline.evaluate(() => window.testEventDetail);

  expect(wasEventFired).toBe(true);
  expect(detail?.commitHash).toBe("abc123def456");
});

// Edge Cases and Error Handling

test("handles empty filteredMessages gracefully", async ({ mount }) => {
  // All messages are hidden - this will still render timeline structure
  // because component only shows welcome box when messages.length === 0
  const messages = [
    createMockMessage({ idx: 0, content: "Hidden 1", hide_output: true }),
    createMockMessage({ idx: 1, content: "Hidden 2", hide_output: true }),
  ];

  const timeline = await mount(SketchTimeline, {
    props: {
      messages,
    },
  });

  // Should render the timeline structure but with no visible messages
  await expect(timeline.locator("sketch-timeline-message")).toHaveCount(0);

  // Should not show welcome box when messages array has content (even if all hidden)
  await expect(timeline.locator(".welcome-box")).not.toBeVisible();

  // Should not show loading indicator
  await expect(timeline.locator(".loading-indicator")).not.toBeVisible();

  // Timeline container exists but may not be visible due to CSS
  await expect(timeline.locator(".timeline-container")).toBeAttached();
});

test("handles message array updates correctly", async ({ mount }) => {
  const initialMessages = createMockMessages(5);

  const timeline = await mount(SketchTimeline, {
    props: {
      messages: initialMessages,
    },
  });

  await expect(timeline.locator("sketch-timeline-message")).toHaveCount(5);

  // Update with more messages
  const moreMessages = createMockMessages(10);
  await timeline.evaluate(
    (element: SketchTimeline, newMessages: AgentMessage[]) => {
      element.messages = newMessages;
      element.requestUpdate();
      return element.updateComplete;
    },
    moreMessages,
  );

  await expect(timeline.locator("sketch-timeline-message")).toHaveCount(10);

  // Update with fewer messages
  const fewerMessages = createMockMessages(3);
  await timeline.evaluate(
    (element: SketchTimeline, newMessages: AgentMessage[]) => {
      element.messages = newMessages;
      element.requestUpdate();
      return element.updateComplete;
    },
    fewerMessages,
  );

  await expect(timeline.locator("sketch-timeline-message")).toHaveCount(3);
});

test("messageKey method generates unique keys correctly", async ({ mount }) => {
  const timeline = await mount(SketchTimeline);

  const message1 = createMockMessage({ idx: 1, tool_calls: [] });
  const message2 = createMockMessage({ idx: 2, tool_calls: [] });
  const message3 = createMockMessage({
    idx: 1,
    tool_calls: [
      {
        tool_call_id: "call_123",
        name: "test",
        input: "{}",
        result_message: createMockMessage({ idx: 99, content: "result" }),
      },
    ],
  });

  const key1 = await timeline.evaluate(
    (element: SketchTimeline, msg: AgentMessage) => element.messageKey(msg),
    message1,
  );
  const key2 = await timeline.evaluate(
    (element: SketchTimeline, msg: AgentMessage) => element.messageKey(msg),
    message2,
  );
  const key3 = await timeline.evaluate(
    (element: SketchTimeline, msg: AgentMessage) => element.messageKey(msg),
    message3,
  );

  // Keys should be unique
  expect(key1).not.toBe(key2);
  expect(key1).not.toBe(key3);
  expect(key2).not.toBe(key3);

  // Keys should include message index
  expect(key1).toContain("message-1");
  expect(key2).toContain("message-2");
  expect(key3).toContain("message-1");

  // Message with tool call should have different key than without
  expect(key1).not.toBe(key3);
});