import { render } from "@testing-library/react";

import { Autocomplete } from "../Autocomplete";

describe("rendering Autocomplete", () => {
  it("serializes autocompleteConfig to data-autocomplete-config for SSR output", () => {
    const { container } = render(
      <Autocomplete
        id="search-autocomplete"
        options={["", "apple", "apricot"]}
        placeholder=""
        autocompleteConfig={{
          customInputClassName: "input--search-icon",
        }}
      />,
    );

    const select = container.querySelector("select");

    expect(select).toHaveAttribute(
      "data-autocomplete-config",
      JSON.stringify({
        customInputClassName: "input--search-icon",
      }),
    );
  });

  it("keeps explicit data-autocomplete-config attribute when provided", () => {
    const { container } = render(
      <Autocomplete
        id="search-autocomplete"
        options={["", "apple", "apricot"]}
        placeholder=""
        autocompleteConfig={{
          customInputClassName: "input--search-icon",
        }}
        data-autocomplete-config='{"customInputClassName":"input--search-icon-with-placeholder"}'
      />,
    );

    const select = container.querySelector("select");

    expect(select).toHaveAttribute(
      "data-autocomplete-config",
      '{"customInputClassName":"input--search-icon-with-placeholder"}',
    );
  });
});