loop/webui/src/web-components/sketch-chat-input.test.ts

import { html, fixture, expect, oneEvent, elementUpdated, fixtureCleanup } from "@open-wc/testing";
import "./sketch-chat-input";
import { SketchChatInput } from "./sketch-chat-input";

describe("SketchChatInput", () => {
  afterEach(() => {
    fixtureCleanup();
  });

  it("initializes with empty content by default", async () => {
    const el: SketchChatInput = await fixture(html`
      <sketch-chat-input></sketch-chat-input>
    `);

    expect(el.content).to.equal("");
    const textarea = el.shadowRoot!.querySelector("#chatInput") as HTMLTextAreaElement;
    expect(textarea.value).to.equal("");
  });

  it("initializes with provided content", async () => {
    const testContent = "Hello, world!";
    const el: SketchChatInput = await fixture(html`
      <sketch-chat-input .content=${testContent}></sketch-chat-input>
    `);

    expect(el.content).to.equal(testContent);
    const textarea = el.shadowRoot!.querySelector("#chatInput") as HTMLTextAreaElement;
    expect(textarea.value).to.equal(testContent);
  });

  it("updates content when typing in the textarea", async () => {
    const el: SketchChatInput = await fixture(html`
      <sketch-chat-input></sketch-chat-input>
    `);

    const textarea = el.shadowRoot!.querySelector("#chatInput") as HTMLTextAreaElement;
    const newValue = "New message";
    
    textarea.value = newValue;
    textarea.dispatchEvent(new Event("input"));
    
    expect(el.content).to.equal(newValue);
  });

  it("sends message when clicking the send button", async () => {
    const testContent = "Test message";
    const el: SketchChatInput = await fixture(html`
      <sketch-chat-input .content=${testContent}></sketch-chat-input>
    `);

    const button = el.shadowRoot!.querySelector("#sendChatButton") as HTMLButtonElement;
    
    // Setup listener for the send-chat event
    setTimeout(() => button.click());
    const { detail } = await oneEvent(el, "send-chat");
    
    expect(detail.message).to.equal(testContent);
    expect(el.content).to.equal("");
  });

  it("sends message when pressing Enter (without shift)", async () => {
    const testContent = "Test message";
    const el: SketchChatInput = await fixture(html`
      <sketch-chat-input .content=${testContent}></sketch-chat-input>
    `);

    const textarea = el.shadowRoot!.querySelector("#chatInput") as HTMLTextAreaElement;
    
    // Setup listener for the send-chat event
    setTimeout(() => {
      const enterEvent = new KeyboardEvent("keydown", {
        key: "Enter",
        bubbles: true,
        cancelable: true,
        shiftKey: false
      });
      textarea.dispatchEvent(enterEvent);
    });
    
    const { detail } = await oneEvent(el, "send-chat");
    
    expect(detail.message).to.equal(testContent);
    expect(el.content).to.equal("");
  });

  it("does not send message when pressing Shift+Enter", async () => {
    const testContent = "Test message";
    const el: SketchChatInput = await fixture(html`
      <sketch-chat-input .content=${testContent}></sketch-chat-input>
    `);

    const textarea = el.shadowRoot!.querySelector("#chatInput") as HTMLTextAreaElement;
    
    // Create a flag to track if the event was fired
    let eventFired = false;
    el.addEventListener("send-chat", () => {
      eventFired = true;
    });
    
    // Dispatch the shift+enter keydown event
    const shiftEnterEvent = new KeyboardEvent("keydown", {
      key: "Enter",
      bubbles: true,
      cancelable: true,
      shiftKey: true
    });
    textarea.dispatchEvent(shiftEnterEvent);
    
    // Wait a short time to verify no event was fired
    await new Promise(resolve => setTimeout(resolve, 10));
    
    expect(eventFired).to.be.false;
    expect(el.content).to.equal(testContent);
  });

  it("updates content when receiving update-content event", async () => {
    const el: SketchChatInput = await fixture(html`
      <sketch-chat-input></sketch-chat-input>
    `);

    const newContent = "Updated content";
    
    // Dispatch the update-content event
    const updateEvent = new CustomEvent("update-content", {
      detail: { content: newContent },
      bubbles: true
    });
    el.dispatchEvent(updateEvent);
    
    // Wait for the component to update
    await elementUpdated(el);
    
    expect(el.content).to.equal(newContent);
    const textarea = el.shadowRoot!.querySelector("#chatInput") as HTMLTextAreaElement;
    expect(textarea.value).to.equal(newContent);
  });
});