shoc-frontend-new/src/test/app/(protected)/locations/location-form-state.test.tsx

import { screen } from "@testing-library/react";
import { Route, Routes } from "react-router";
import { describe, expect, it, vi } from "vitest";
import LocationFormPage from "@/app/(protected)/locations/_components/location-form";
import { renderWithProviders } from "@/test/test-utils";

const useLocationDetail = vi.fn();
const useAccountsList = vi.fn();
const useCreateLocation = vi.fn();
const useUpdateLocation = vi.fn();

vi.mock("@/domain/locations/use-cases/use-location-detail", () => ({
  useLocationDetail: (...args: unknown[]) => useLocationDetail(...args),
}));

vi.mock("@/domain/accounts/use-cases/use-accounts-list", () => ({
  useAccountsList: (...args: unknown[]) => useAccountsList(...args),
}));

vi.mock("@/domain/locations/use-cases/use-create-location", () => ({
  useCreateLocation: (...args: unknown[]) => useCreateLocation(...args),
}));

vi.mock("@/domain/locations/use-cases/use-update-location", () => ({
  useUpdateLocation: (...args: unknown[]) => useUpdateLocation(...args),
}));

function mockHooks(location: Record<string, unknown> | null) {
  useLocationDetail.mockReturnValue({
    data: location,
    isLoading: false,
    error: null,
  });
  useAccountsList.mockReturnValue({
    data: { items: [], totalCount: 0, page: 1, pageSize: 50 },
    isLoading: false,
  });
  useCreateLocation.mockReturnValue({ mutate: vi.fn(), isPending: false });
  useUpdateLocation.mockReturnValue({ mutate: vi.fn(), isPending: false });
}

function renderEditPage(locationId: string) {
  return renderWithProviders(
    <Routes>
      <Route path="/locations/edit/:id" element={<LocationFormPage />} />
    </Routes>,
    {
      route: `/locations/edit/${locationId}`,
      routerProps: { initialEntries: [`/locations/edit/${locationId}`] },
      withAuth: false,
    },
  );
}

describe("LocationFormPage state field", () => {
  it("normalizes legacy API state values for edit", () => {
    mockHooks({
      id: "1",
      name: "Dallas DC",
      address: "3811 Distribution Dr",
      city: "Dallas",
      state: "texas",
      zipCode: "70068",
      phone: "(421) 433-0032",
      contact: "Jane",
      contactEmail: "jane@example.com",
      status: "Active",
      accountId: "7",
    });

    renderEditPage("1");

    const stateInput = screen.getByLabelText(/^State/);
    expect(stateInput).toHaveValue("Texas (TX)");
    expect(screen.getByText("Area: West")).toBeInTheDocument();
  });

  it("normalizes code values and keeps their derived area", () => {
    mockHooks({
      id: "2",
      state: "IL",
      status: "Active",
    });

    renderEditPage("2");

    expect(screen.getByLabelText(/^State/)).toHaveValue("Illinois (IL)");
    expect(screen.getByText("Area: Central")).toBeInTheDocument();
  });

  it("starts empty in create mode with no implicit IL default", () => {
    mockHooks(null);

    renderWithProviders(<LocationFormPage />, {
      route: "/locations/new",
      routerProps: { initialEntries: ["/locations/new"] },
      withAuth: false,
    });

    expect(screen.getByLabelText(/^State/)).toHaveValue("");
    expect(screen.queryByText(/Area: /)).not.toBeInTheDocument();
  });
});