import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, expect, it } from "vitest";
import { Workbench } from "../../src/components/Workbench";

describe("Workbench", () => {
  it("keeps conversion views synchronized", async () => {
    const user = userEvent.setup();
    render(<Workbench />);
    const source = screen.getByLabelText("Encoded input");
    await user.clear(source);
    await user.type(source, "Ada");
    await user.click(screen.getByRole("button", { name: "Apply input" }));
    expect(screen.getByLabelText("hex output")).toHaveValue("416461");
    expect(screen.getByLabelText("base64 output")).toHaveValue("QWRh");
  });

  it("shows malformed decoder errors without clearing bytes", async () => {
    const user = userEvent.setup();
    render(<Workbench />);
    await user.click(screen.getByRole("button", { name: "ASN.1 DER" }));
    expect(screen.getByRole("alert")).toBeVisible();
    expect(screen.getByRole("button", { name: "Byte 20: 0a" })).toBeVisible();
  });

  it("edits and searches the canonical byte buffer", async () => {
    const user = userEvent.setup();
    render(<Workbench />);
    const editOffset = screen.getAllByLabelText("Offset (decimal or 0x…)")[0]!;
    await user.clear(editOffset);
    await user.type(editOffset, "0");
    await user.type(screen.getByLabelText("Replacement bytes (hex)"), "41");
    await user.click(screen.getByRole("button", { name: "Apply byte edit" }));
    expect(
      (screen.getByLabelText("hex output") as HTMLTextAreaElement).value,
    ).toMatch(/^41/u);
    await user.click(screen.getByRole("button", { name: "Search" }));
    expect(await screen.findByText(/1 match/u)).toBeVisible();
  });
});