import { expect, test } from "vitest";
import { render, screen } from "@testing-library/react";
import { Highlight } from "./highlight";

test("renders matched segments as <mark> and plain text around them", () => {
  render(<Highlight text={"cast \x02bronze\x03 with patina"} />);
  const mark = screen.getByText("bronze");
  expect(mark.tagName).toBe("MARK");
  expect(document.body).toHaveTextContent("cast bronze with patina");
});

test("renders plain text unchanged when there are no markers", () => {
  render(<Highlight text="no markers here" />);
  expect(document.body).toHaveTextContent("no markers here");
  expect(screen.queryByRole("mark")).toBeNull();
});