shoc-frontend-new/src/test/app/(protected)/workorders/service-picker-search-placeholder.test.tsx

import { fireEvent, render, screen } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
import { WizardStepLocationServiceSelect } from "@/app/(protected)/workorders/_components/wizard/wizard-step-location-service-select";
import { PmTypePickerPopover } from "@/app/(protected)/workorders/_components/list/table/cells/pm-type-picker-popover";
import {
  EMPTY_WIZARD_DRAFT,
  type WorkOrderWizardDraft,
} from "@/domain/work-orders/types/work-order-wizard";

describe("service picker search placeholder", () => {
  it("uses a type-neutral search placeholder in the wizard service picker", () => {
    const draft: WorkOrderWizardDraft = { ...EMPTY_WIZARD_DRAFT, pm: "" };

    render(
      <WizardStepLocationServiceSelect
        draft={draft}
        services={[
          { id: "1", value: "HVAC" },
          { id: "2", value: "Plumbing" },
        ]}
        svcOpen={false}
        onSvcOpenChange={vi.fn()}
        svcSearch=""
        onSvcSearchChange={vi.fn()}
        onUpdate={vi.fn()}
        onPatch={vi.fn()}
      />,
    );

    fireEvent.click(screen.getByRole("button", { name: /select service/i }));

    expect(screen.getByPlaceholderText("Search services…")).toBeTruthy();
    expect(screen.queryByPlaceholderText("Search PM type…")).toBeNull();
  });

  it("uses a type-neutral search placeholder in the table service picker popover", () => {
    const anchor = document.createElement("button");

    render(
      <PmTypePickerPopover
        anchorEl={anchor}
        search=""
        filtered={["HVAC", "Plumbing"]}
        value=""
        showAddDetails={false}
        onSearchChange={vi.fn()}
        onClose={vi.fn()}
        onPick={vi.fn()}
        onAddDetails={vi.fn()}
      />,
    );

    expect(screen.getByPlaceholderText("Search service…")).toBeTruthy();
    expect(screen.queryByPlaceholderText("Search PM type…")).toBeNull();
  });
});