import { act } from "react";
import { createRoot } from "react-dom/client";
import { describe, expect, it } from "vitest";

import { HighlightableField } from "./HighlightableField";
import { SearchableField } from "./SearchableField";

describe("search destination wrappers", () => {
  it("keeps schema and registered fields programmatic focus fallbacks", async () => {
    const container = document.createElement("div");
    document.body.append(container);
    const root = createRoot(container);

    await act(async () => {
      root.render(
        <>
          <HighlightableField id="schema-field">
            Schema field
          </HighlightableField>
          <SearchableField
            id="registered-field"
            label="Registered field"
            tabId="general"
            tabLabel="General"
          >
            Registered field
          </SearchableField>
        </>,
      );
    });

    expect(
      container
        .querySelector('[data-search-field-id="schema-field"]')
        ?.hasAttribute("tabindex"),
    ).toBe(false);
    expect(
      container
        .querySelector('[data-search-field-id="registered-field"]')
        ?.hasAttribute("tabindex"),
    ).toBe(false);

    act(() => root.unmount());
    container.remove();
  });
});