ThothII/frontend/src/shell/SteerInput.test.tsx

// frontend/src/shell/SteerInput.test.tsx
import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { http, HttpResponse } from "msw";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { server } from "../test/msw";
import { useSessionStore } from "../store/sessionStore";
import { ComposerFooter, ContextGauge, SteerInput } from "./SteerInput";

beforeEach(() => {
  server.use(
    http.post("http://localhost:8787/sessions/:id/steer", () =>
      new HttpResponse(null, { status: 204 }),
    ),
  );
});

test("renders a text input and submit button", () => {
  render(<SteerInput sessionId="s1" />);
  expect(screen.getByRole("textbox")).toBeInTheDocument();
  expect(screen.getByRole("button", { name: /invia|send|steer/i })).toBeInTheDocument();
});

test("submitting typed text POSTs to /steer and clears the input", async () => {
  let captured: unknown = null;
  server.use(
    http.post("http://localhost:8787/sessions/:id/steer", async ({ request, params }) => {
      captured = { id: params.id, body: await request.json() };
      return new HttpResponse(null, { status: 204 });
    }),
  );
  render(<SteerInput sessionId="s1" />);
  const input = screen.getByRole("textbox");
  await userEvent.type(input, "redirect to plan B");
  await userEvent.click(screen.getByRole("button", { name: /invia|send|steer/i }));
  await waitFor(() => {
    expect(captured).toEqual({ id: "s1", body: { text: "redirect to plan B" } });
  });
  expect(input).toHaveValue("");
});

test("pressing Enter in the input submits the steer", async () => {
  let captured: unknown = null;
  server.use(
    http.post("http://localhost:8787/sessions/:id/steer", async ({ request }) => {
      captured = await request.json();
      return new HttpResponse(null, { status: 204 });
    }),
  );
  render(<SteerInput sessionId="s1" />);
  const input = screen.getByRole("textbox");
  await userEvent.type(input, "use approach X{Enter}");
  await waitFor(() => {
    expect(captured).toEqual({ text: "use approach X" });
  });
});

test("does not POST when input is empty", async () => {
  let called = false;
  server.use(
    http.post("http://localhost:8787/sessions/:id/steer", () => {
      called = true;
      return new HttpResponse(null, { status: 204 });
    }),
  );
  render(<SteerInput sessionId="s1" />);
  await userEvent.click(screen.getByRole("button", { name: /invia|send|steer/i }));
  // small wait to ensure the call didn't go through
  await new Promise((r) => setTimeout(r, 50));
  expect(called).toBe(false);
});


test("keeps the new-question composer white by default", () => {
  render(<SteerInput sessionId={null} />);
  const input = screen.getByRole("textbox", { name: /new question/i });
  expect(input).not.toHaveAttribute("data-awaiting-input");
  expect(input).not.toHaveClass("thot-awaiting-input");
});

test("marks the composer as awaiting input only when requested", () => {
  render(<SteerInput sessionId={null} awaitingInput />);
  const input = screen.getByRole("textbox", { name: /new question/i });
  expect(input).toHaveAttribute("data-awaiting-input", "true");
  expect(input).toHaveClass("thot-awaiting-input");
});

test("the context gauge uses green, yellow, and red at the requested thresholds", () => {
  const { rerender } = render(<ContextGauge pct={0.699} />);
  expect(screen.getByLabelText("Context usage 70%")).toHaveAttribute("data-level", "green");

  rerender(<ContextGauge pct={0.7} />);
  expect(screen.getByLabelText("Context usage 70%")).toHaveAttribute("data-level", "yellow");

  rerender(<ContextGauge pct={0.85} />);
  expect(screen.getByLabelText("Context usage 85%")).toHaveAttribute("data-level", "yellow");

  rerender(<ContextGauge pct={0.851} />);
  expect(screen.getByLabelText("Context usage 85%")).toHaveAttribute("data-level", "red");
});

test("footer shows cumulative k-token counters after workspace and context gauge after thinking", async () => {
  server.use(
    http.get("http://localhost:8787/settings", () => HttpResponse.json({
      workspace: "psd", provider: "zai", model: "glm-5.2", thinking: "medium",
    })),
    http.get("http://localhost:8787/workspaces", () => HttpResponse.json([{ name: "psd" }])),
    http.get("http://localhost:8787/models", () => HttpResponse.json({
      models: [{ provider: "zai", id: "glm-5.2", name: "GLM-5.2", reasoning: true }],
    })),
  );
  useSessionStore.getState().resetSession();
  useSessionStore.getState().applyEvent({
    type: "usage",
    usage: {
      input: 110_348,
      cacheRead: 633_344,
      output: 33_652,
      totalTokens: 55_935,
      contextWindow: 200_000,
    },
  });
  const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
  render(<QueryClientProvider client={client}><ComposerFooter /></QueryClientProvider>);

  const counters = screen.getByText("110k/633k/34k");
  const workspace = await screen.findByRole("combobox", { name: "Workspace" });
  const gauge = screen.getByLabelText("Context usage 28%");
  const thinking = await screen.findByRole("combobox", { name: "Thinking level" });
  expect(workspace.compareDocumentPosition(counters) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
  expect(thinking.compareDocumentPosition(gauge) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
});

test("pulses the stop dot only while the harness is working", () => {
  const { rerender } = render(<SteerInput sessionId="s1" working />);
  const dot = () =>
    screen.getByRole("button", { name: /stop and save session/i }).querySelector("span");
  expect(dot()).toHaveClass("thot-pulse");
  rerender(<SteerInput sessionId="s1" working={false} />);
  expect(dot()).not.toHaveClass("thot-pulse");
});