shoc-frontend-new/src/test/app/(protected)/locations/locations-contacts-cell.test.tsx

import { fireEvent, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { LocationsContactsCell } from "@/app/(protected)/locations/_components/locations-contacts-cell";
import type { LocationListItem } from "@/domain/locations/types/location";
import { renderWithProviders } from "@/test/test-utils";

function rowWithContacts(overrides: Partial<LocationListItem>): LocationListItem {
  return {
    id: 1,
    name: "Dallas DC",
    clientName: "Acme",
    sitePhone: "",
    address: "3811 Distribution Dr",
    city: "Dallas",
    state: "TX",
    zipCode: "70068",
    phone: "(421) 433-0032",
    contact: "Jane",
    contactEmail: "jane@example.com",
    status: "Active",
    accountId: 7,
    ...overrides,
  };
}

describe("LocationsContactsCell", () => {
  it("renders only the main contact name when a single contact exists", () => {
    renderWithProviders(
      <LocationsContactsCell
        row={rowWithContacts({ contacts: [{ name: "Jane", phone: "(421) 433-0032" }] })}
      />,
      { withAuth: false },
    );

    expect(screen.getByText("Jane")).toBeInTheDocument();
    expect(screen.queryByText(/^\+\d+$/)).not.toBeInTheDocument();
  });

  it("shows a +N chip and lists remaining contact names on hover", async () => {
    renderWithProviders(
      <LocationsContactsCell
        row={rowWithContacts({
          contacts: [
            { name: "Jane", phone: "(421) 433-0032" },
            { name: "Bob", phone: "(421) 433-0033" },
            { name: "Carol", phone: "(421) 433-0034" },
          ],
        })}
      />,
      { withAuth: false },
    );

    const chip = screen.getByText("+2");
    expect(chip).toBeInTheDocument();
    expect(screen.getByLabelText("2 more contacts: Bob, Carol")).toBeInTheDocument();

    fireEvent.mouseOver(chip);
    expect(await screen.findByText("Bob, Carol")).toBeInTheDocument();
  });

  it("falls back to the legacy contact field without a chip", () => {
    renderWithProviders(<LocationsContactsCell row={rowWithContacts({})} />, {
      withAuth: false,
    });

    expect(screen.getByText("Jane")).toBeInTheDocument();
    expect(screen.queryByText(/^\+\d+$/)).not.toBeInTheDocument();
  });

  it("renders a placeholder when no contact exists", () => {
    renderWithProviders(
      <LocationsContactsCell row={rowWithContacts({ contact: "", phone: "" })} />,
      { withAuth: false },
    );

    expect(screen.getByText("—")).toBeInTheDocument();
  });
});