import { expect, test } from "vitest";
import { render } from "vitest-browser-vue";
import SearchField from "@/components/SearchField.vue";

test("default placeholder", async () => {
  const { getByRole } = render(SearchField, {
    props: { modelValue: "" },
  });

  const searchBox = getByRole("searchbox");
  await expect.element(searchBox).toBeInTheDocument();
  await expect.element(searchBox).toHaveAttribute("placeholder", "Search…");
});

test("custom placeholder", async () => {
  const customPlaceholder = "Hello there";
  const { getByRole } = render(SearchField, {
    props: { placeholder: customPlaceholder, modelValue: "" },
  });

  const searchBox = getByRole("searchbox");
  await expect.element(searchBox).toBeInTheDocument();
  await expect.element(searchBox)
    .toHaveAttribute("placeholder", customPlaceholder);
});

test("empty search disabled clear button", async () => {
  const { getByRole } = render(SearchField, { props: { modelValue: "" } });

  const button = getByRole("button", { name: "clear" });
  await expect.element(button).toBeInTheDocument();
  await expect.element(button).toBeDisabled();
});

test("non-empty search enabled clear button", async () => {
  const { getByRole } = render(SearchField, { props: { modelValue: "hello" } });

  const button = getByRole("button", { name: "clear" });
  await expect.element(button).toBeInTheDocument();
  await expect.element(button).toBeEnabled();
});

test("filling search enables clear button", async () => {
  const { getByRole } = render(SearchField, { props: { modelValue: "" } });
  const searchBox = getByRole("searchbox");
  const button = getByRole("button", { name: "clear" });

  // simulate user typing into the input
  await searchBox.fill("abc");

  await expect.element(button).toBeEnabled();
});

test("clear button clears model value", async () => {
  const { getByRole } = render(SearchField, { props: { modelValue: "hello" } });
  const searchBox = getByRole("searchbox");
  const button = getByRole("button", { name: "clear" });

  // ensure initial state
  await expect.element(searchBox).toBeInTheDocument();
  await expect.element(button).toBeEnabled();

  // click the clear button and assert the input was cleared
  await button.click();

  // input should reflect cleared model
  await expect.element(searchBox).toHaveValue("");
  await expect.element(button).toBeDisabled();
});