@traky-app/ui 1.6.3 → 1.6.4

package/src/ui/__tests__/geo-selects.test.tsx

@@ -0,0 +1,504 @@
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useState } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { getGeoCountries } from "../../lib/geo-csc";
+import { fetchCities, fetchStates } from "../../lib/geo-locations";
+import { CitySelect } from "../city-select";
+import { CountrySelect } from "../country-select";
+import { StateSelect } from "../state-select";
+
+vi.mock("../../lib/geo-csc", () => ({
+  getGeoCountries: vi.fn(),
+}));
+
+vi.mock("../../lib/geo-locations", () => ({
+  fetchStates: vi.fn(),
+  fetchCities: vi.fn(),
+}));
+
+const countries = [
+  { code: "EC", name: "Ecuador" },
+  { code: "CO", name: "Colombia" },
+  { code: "PE", name: "Peru" },
+];
+
+beforeEach(() => {
+  vi.mocked(getGeoCountries).mockResolvedValue(countries);
+  vi.mocked(fetchStates).mockImplementation(async (countryCode: string) => {
+    if (countryCode === "EC") {
+      return [
+        { code: "P", name: "Pichincha" },
+        { code: "G", name: "Guayas" },
+      ];
+    }
+    if (countryCode === "CO") {
+      return [{ code: "ANT", name: "Antioquia" }];
+    }
+    return [];
+  });
+  vi.mocked(fetchCities).mockImplementation(
+    async (countryCode: string, stateCode: string) => {
+      if (countryCode === "EC" && stateCode === "P") {
+        return [
+          { code: "UIO", name: "Quito", stateCode: "P", stateName: "Pichincha" },
+          { code: "CAY", name: "Cayambe", stateCode: "P" },
+        ];
+      }
+      if (countryCode === "EC" && stateCode === "G") {
+        return [{ code: "GYE", name: "Guayaquil", stateCode: "G" }];
+      }
+      return [];
+    },
+  );
+});
+
+function trigger() {
+  return screen.getByRole("combobox");
+}
+
+async function expectTrigger(text: string) {
+  await waitFor(() => {
+    expect(trigger()).toHaveTextContent(text);
+  });
+  return trigger();
+}
+
+async function pickOption(name: RegExp | string) {
+  const user = userEvent.setup();
+  await user.click(trigger());
+  const option = await screen.findByRole("option", { name });
+  await user.click(option);
+  return user;
+}
+
+describe("CountrySelect", () => {
+  it("muestra el placeholder y respeta id, className, fileName y disabled", () => {
+    const { rerender } = render(
+      <CountrySelect id="pais" className="w-64" fileName="Origen" />,
+    );
+    const trigger = screen.getByRole("combobox");
+    expect(trigger).toHaveAttribute("id", "pais");
+    expect(trigger).toHaveClass("w-64");
+    expect(trigger).toHaveTextContent("Origen");
+    expect(trigger).toBeEnabled();
+
+    rerender(<CountrySelect disabled />);
+    expect(screen.getByRole("combobox")).toBeDisabled();
+    expect(screen.getByRole("combobox")).toHaveTextContent("País");
+  });
+
+  it("usa el código en sm y md, y el nombre largo en lg", () => {
+    const { rerender } = render(<CountrySelect value="EC" size="sm" />);
+    expect(screen.getByRole("combobox")).toHaveTextContent("EC");
+
+    rerender(<CountrySelect value="EC" size="md" />);
+    expect(screen.getByRole("combobox")).toHaveTextContent("EC");
+
+    rerender(<CountrySelect value="EC" size="lg" />);
+    expect(screen.getByRole("combobox")).toHaveTextContent("Ecuador");
+  });
+
+  it("value controla la selección y defaultValue no la pisa", () => {
+    const { rerender } = render(
+      <CountrySelect size="lg" value="ec" defaultValue="CO" />,
+    );
+    expect(screen.getByRole("combobox")).toHaveTextContent("Ecuador");
+
+    rerender(<CountrySelect size="lg" value="" defaultValue="CO" />);
+    expect(screen.getByRole("combobox")).toHaveTextContent("País");
+
+    rerender(<CountrySelect size="lg" value="CO" />);
+    expect(screen.getByRole("combobox")).toHaveTextContent("Colombia");
+  });
+
+  it("defaultValue inicia la selección y no cambia si la prop cambia después", () => {
+    const onChange = vi.fn();
+    const { rerender } = render(
+      <CountrySelect size="lg" defaultValue="ec" onChange={onChange} />,
+    );
+    expect(screen.getByRole("combobox")).toHaveTextContent("Ecuador");
+    expect(onChange).not.toHaveBeenCalled();
+
+    rerender(<CountrySelect size="lg" defaultValue="CO" onChange={onChange} />);
+    expect(screen.getByRole("combobox")).toHaveTextContent("Ecuador");
+  });
+
+  it("en modo libre onChange recibe el país y el trigger se queda con la elección", async () => {
+    const onChange = vi.fn();
+    render(<CountrySelect size="lg" onChange={onChange} />);
+
+    await pickOption(/Ecuador/);
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({ code: "EC", short: "EC", long: "Ecuador" }),
+    );
+    expect(screen.getByRole("combobox")).toHaveTextContent("Ecuador");
+  });
+
+  it("en modo controlado onChange no cambia el texto hasta que value cambie", async () => {
+    const onChange = vi.fn();
+    render(<CountrySelect size="lg" value="EC" onChange={onChange} />);
+
+    await pickOption(/Colombia/);
+
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({ code: "CO", long: "Colombia" }),
+    );
+    expect(screen.getByRole("combobox")).toHaveTextContent("Ecuador");
+  });
+
+  it("allowClear llama onClear y vacía solo el modo libre", async () => {
+    const onChange = vi.fn();
+    const onClear = vi.fn();
+    const { rerender } = render(
+      <CountrySelect
+        size="lg"
+        defaultValue="EC"
+        allowClear
+        clearLabel="Ninguno"
+        onChange={onChange}
+        onClear={onClear}
+      />,
+    );
+
+    const user = userEvent.setup();
+    await user.click(screen.getByRole("combobox"));
+    await user.click(await screen.findByRole("option", { name: "Ninguno" }));
+
+    expect(onClear).toHaveBeenCalledTimes(1);
+    expect(onChange).not.toHaveBeenCalled();
+    expect(screen.getByRole("combobox")).toHaveTextContent("País");
+
+    rerender(
+      <CountrySelect
+        size="lg"
+        value="EC"
+        allowClear
+        clearLabel="Ninguno"
+        onClear={onClear}
+      />,
+    );
+    await user.click(screen.getByRole("combobox"));
+    await user.click(await screen.findByRole("option", { name: "Ninguno" }));
+    expect(onClear).toHaveBeenCalledTimes(2);
+    expect(screen.getByRole("combobox")).toHaveTextContent("Ecuador");
+  });
+
+  it("allowedCodes filtra el listado y searchPlaceholder llega al buscador", async () => {
+    const user = userEvent.setup();
+    render(
+      <CountrySelect
+        allowedCodes={["CO", "ec"]}
+        searchPlaceholder="Busca el país"
+      />,
+    );
+
+    await user.click(screen.getByRole("combobox"));
+    expect(screen.getByPlaceholderText("Busca el país")).toBeInTheDocument();
+    expect(await screen.findByRole("option", { name: /Colombia/ })).toBeInTheDocument();
+    expect(screen.getByRole("option", { name: /Ecuador/ })).toBeInTheDocument();
+    expect(screen.queryByRole("option", { name: /Perú/ })).not.toBeInTheDocument();
+  });
+
+  it("muestra la carga y el vacío del catálogo", async () => {
+    let resolveCountries: (value: typeof countries) => void = () => {};
+    vi.mocked(getGeoCountries).mockReturnValue(
+      new Promise((resolve) => {
+        resolveCountries = resolve;
+      }),
+    );
+    const user = userEvent.setup();
+    render(<CountrySelect />);
+
+    await user.click(screen.getByRole("combobox"));
+    expect(await screen.findByText("Cargando países…")).toBeInTheDocument();
+
+    resolveCountries([]);
+    expect(await screen.findByText("No se encontró el país.")).toBeInTheDocument();
+  });
+});
+
+describe("StateSelect", () => {
+  it("queda inactivo sin país y no pide provincias", () => {
+    render(<StateSelect id="provincia" className="w-40" />);
+    const trigger = screen.getByRole("combobox");
+    expect(trigger).toBeDisabled();
+    expect(trigger).toHaveAttribute("id", "provincia");
+    expect(trigger).toHaveClass("w-40");
+    expect(trigger).toHaveTextContent("Indica un país");
+    expect(fetchStates).not.toHaveBeenCalled();
+  });
+
+  it("normaliza el país, usa placeholder y muestra el código", async () => {
+    const user = userEvent.setup();
+    render(
+      <StateSelect countryCode=" ec " placeholder="Elige provincia" showCode />,
+    );
+
+    expect(await expectTrigger("Elige provincia")).toBeEnabled();
+    expect(fetchStates).toHaveBeenCalledWith("EC");
+
+    await user.click(screen.getByRole("combobox"));
+    const pichincha = await screen.findByRole("option", { name: /^Pichincha/ });
+    expect(within(pichincha).getByText("P")).toBeInTheDocument();
+    expect(screen.getByPlaceholderText("Buscar estado, región o municipio…")).toBeInTheDocument();
+  });
+
+  it("oculta el código y respeta disabled", async () => {
+    const user = userEvent.setup();
+    const { rerender } = render(
+      <StateSelect countryCode="EC" showCode={false} />,
+    );
+    await user.click(await expectTrigger("Buscar estado, región o municipio…"));
+    const pichincha = await screen.findByRole("option", { name: "Pichincha" });
+    expect(within(pichincha).queryByText("P")).not.toBeInTheDocument();
+
+    rerender(<StateSelect countryCode="EC" disabled />);
+    expect(screen.getByRole("combobox")).toBeDisabled();
+  });
+
+  it("value controla por código o nombre y gana a defaultValue", async () => {
+    const { rerender } = render(
+      <StateSelect countryCode="EC" value="G" defaultValue="P" />,
+    );
+    await expectTrigger("Guayas");
+
+    rerender(<StateSelect countryCode="EC" value="Pichincha" />);
+    await expectTrigger("Pichincha");
+
+    rerender(<StateSelect countryCode="EC" value="" defaultValue="P" />);
+    await expectTrigger("Buscar estado, región o municipio…");
+  });
+
+  it("defaultValue se mantiene al recibir el país y no dispara onChange", async () => {
+    const onChange = vi.fn();
+    const { rerender } = render(
+      <StateSelect defaultValue="P" onChange={onChange} />,
+    );
+    rerender(<StateSelect countryCode="EC" defaultValue="P" onChange={onChange} />);
+
+    await expectTrigger("Pichincha");
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("en modo libre onChange recibe la provincia y la conserva", async () => {
+    const onChange = vi.fn();
+    render(<StateSelect countryCode="EC" onChange={onChange} />);
+    await expectTrigger("Buscar estado, región o municipio…");
+
+    await pickOption(/^Pichincha/);
+
+    expect(onChange).toHaveBeenCalledWith({ code: "P", name: "Pichincha" });
+    await expectTrigger("Pichincha");
+  });
+
+  it("en modo controlado el texto sigue a value", async () => {
+    const onChange = vi.fn();
+    const { rerender } = render(
+      <StateSelect countryCode="EC" value="P" onChange={onChange} />,
+    );
+    await expectTrigger("Pichincha");
+
+    await pickOption(/^Guayas/);
+
+    expect(onChange).toHaveBeenCalledWith({ code: "G", name: "Guayas" });
+    await expectTrigger("Pichincha");
+
+    rerender(<StateSelect countryCode="EC" value="G" onChange={onChange} />);
+    await expectTrigger("Guayas");
+  });
+
+  it("al cambiar de país avisa con null y suelta la selección libre", async () => {
+    const onChange = vi.fn();
+    const { rerender } = render(
+      <StateSelect countryCode="EC" defaultValue="P" onChange={onChange} />,
+    );
+    await expectTrigger("Pichincha");
+
+    rerender(<StateSelect countryCode="CO" defaultValue="P" onChange={onChange} />);
+
+    await waitFor(() => {
+      expect(onChange).toHaveBeenCalledWith(null);
+    });
+    await expectTrigger("Buscar estado, región o municipio…");
+  });
+
+  it("muestra el vacío cuando el país no tiene provincias", async () => {
+    const user = userEvent.setup();
+    render(<StateSelect countryCode="PE" />);
+    await user.click(await expectTrigger("Buscar estado, región o municipio…"));
+    expect(await screen.findByText("Sin estados, regiones ni municipios.")).toBeInTheDocument();
+  });
+});
+
+describe("CitySelect", () => {
+  it("queda inactivo hasta tener país y provincia", () => {
+    const { rerender } = render(<CitySelect countryCode="EC" />);
+    expect(screen.getByRole("combobox")).toBeDisabled();
+    expect(screen.getByRole("combobox")).toHaveTextContent("Indica país y estado, región o municipio");
+    expect(fetchCities).not.toHaveBeenCalled();
+
+    rerender(<CitySelect stateCode="P" />);
+    expect(screen.getByRole("combobox")).toBeDisabled();
+    expect(fetchCities).not.toHaveBeenCalled();
+  });
+
+  it("pide ciudades con los códigos normalizados y aplica placeholder, id y className", async () => {
+    render(
+      <CitySelect
+        id="ciudad"
+        className="w-52"
+        countryCode=" ec "
+        stateCode=" P "
+        placeholder="Elige ciudad"
+      />,
+    );
+
+    const trigger = await expectTrigger("Elige ciudad");
+    expect(trigger).toBeEnabled();
+    expect(trigger).toHaveAttribute("id", "ciudad");
+    expect(trigger).toHaveClass("w-52");
+    expect(fetchCities).toHaveBeenCalledWith("EC", "P");
+  });
+
+  it("value y defaultValue eligen por código o nombre", async () => {
+    const onChange = vi.fn();
+    const { rerender } = render(
+      <CitySelect
+        countryCode="EC"
+        stateCode="P"
+        value="UIO"
+        defaultValue="CAY"
+        onChange={onChange}
+      />,
+    );
+    await expectTrigger("Quito");
+    expect(onChange).not.toHaveBeenCalled();
+
+    rerender(
+      <CitySelect countryCode="EC" stateCode="P" value="Cayambe" onChange={onChange} />,
+    );
+    await expectTrigger("Cayambe");
+
+    rerender(
+      <CitySelect
+        countryCode="EC"
+        stateCode="P"
+        value=""
+        defaultValue="UIO"
+        onChange={onChange}
+      />,
+    );
+    await expectTrigger("Buscar ciudad, pueblo o distrito…");
+  });
+
+  it("defaultValue espera a la provincia y no dispara onChange", async () => {
+    const onChange = vi.fn();
+    const { rerender } = render(
+      <CitySelect countryCode="EC" defaultValue="UIO" onChange={onChange} />,
+    );
+    rerender(
+      <CitySelect
+        countryCode="EC"
+        stateCode="P"
+        defaultValue="UIO"
+        onChange={onChange}
+      />,
+    );
+
+    await expectTrigger("Quito");
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("en modo libre onChange recibe la ciudad y showCode la enseña", async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <CitySelect countryCode="EC" stateCode="P" showCode onChange={onChange} />,
+    );
+    await user.click(await expectTrigger("Buscar ciudad, pueblo o distrito…"));
+    const quito = await screen.findByRole("option", { name: /^Quito/ });
+    expect(within(quito).getByText("UIO")).toBeInTheDocument();
+    await user.click(quito);
+
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({ code: "UIO", name: "Quito", stateCode: "P" }),
+    );
+    await expectTrigger("Quito");
+  });
+
+  it("en modo controlado el texto sigue a value", async () => {
+    const onChange = vi.fn();
+    const { rerender } = render(
+      <CitySelect countryCode="EC" stateCode="P" value="UIO" onChange={onChange} />,
+    );
+    await expectTrigger("Quito");
+
+    await pickOption(/^Cayambe/);
+
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({ code: "CAY", name: "Cayambe" }),
+    );
+    await expectTrigger("Quito");
+
+    rerender(
+      <CitySelect countryCode="EC" stateCode="P" value="CAY" onChange={onChange} />,
+    );
+    await expectTrigger("Cayambe");
+  });
+
+  it("al cambiar la provincia avisa con null y suelta la selección libre", async () => {
+    const onChange = vi.fn();
+    const { rerender } = render(
+      <CitySelect
+        countryCode="EC"
+        stateCode="P"
+        defaultValue="UIO"
+        onChange={onChange}
+      />,
+    );
+    await expectTrigger("Quito");
+
+    rerender(
+      <CitySelect
+        countryCode="EC"
+        stateCode="G"
+        defaultValue="UIO"
+        onChange={onChange}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(onChange).toHaveBeenCalledWith(null);
+    });
+    await expectTrigger("Buscar ciudad, pueblo o distrito…");
+  });
+
+  it("muestra el vacío y oculta el código", async () => {
+    const user = userEvent.setup();
+    render(<CitySelect countryCode="EC" stateCode="X" showCode={false} />);
+    await user.click(await expectTrigger("Buscar ciudad, pueblo o distrito…"));
+    expect(await screen.findByText("Sin ciudades, pueblos ni distritos.")).toBeInTheDocument();
+  });
+
+  it("un padre controlado refleja value y onChange", async () => {
+    function Harness() {
+      const [city, setCity] = useState("");
+      return (
+        <CitySelect
+          countryCode="EC"
+          stateCode="P"
+          value={city}
+          onChange={(option) => setCity(option?.code ?? "")}
+        />
+      );
+    }
+
+    render(<Harness />);
+    await expectTrigger("Buscar ciudad, pueblo o distrito…");
+    await pickOption(/^Quito/);
+    await expectTrigger("Quito");
+  });
+});

package/src/ui/city-select.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { fetchCities } from "../lib/geo-locations";
+import type { GeoCityOption, GeoOption } from "../lib/geo-types";
+import { GeoSearchSelect } from "./geo-search-select";
+
+export type CitySelectProps = {
+  id?: string;
+  /** ISO-2 del país. */
+  countryCode?: string | null;
+  /** Código de provincia / estado. */
+  stateCode?: string | null;
+  /** Código o nombre controlado. `undefined` deja el selector sin controlar; `""` lo deja vacío. */
+  value?: string;
+  /** Código o nombre inicial cuando `value` no se pasa. */
+  defaultValue?: string;
+  onChange?: (option: GeoCityOption | null) => void;
+  disabled?: boolean;
+  className?: string;
+  placeholder?: string;
+  showCode?: boolean;
+};
+
+export function CitySelect({
+  id,
+  countryCode,
+  stateCode,
+  value,
+  defaultValue,
+  onChange,
+  disabled = false,
+  className,
+  placeholder = "Buscar ciudad, pueblo o distrito…",
+  showCode = true,
+}: CitySelectProps) {
+  const cc = countryCode?.trim().toUpperCase() ?? "";
+  const sc = stateCode?.trim() ?? "";
+  const ready = Boolean(cc && sc);
+  const isControlled = value !== undefined;
+  const [options, setOptions] = useState<GeoCityOption[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [internal, setInternal] = useState(defaultValue ?? "");
+  const onChangeRef = useRef(onChange);
+  const controlledRef = useRef(isControlled);
+  const selectionRef = useRef("");
+  const prevContext = useRef({ cc, sc });
+
+  onChangeRef.current = onChange;
+  controlledRef.current = isControlled;
+  selectionRef.current = (isControlled ? value : internal) ?? "";
+
+  useEffect(() => {
+    const previous = prevContext.current;
+    if (previous.cc === cc && previous.sc === sc) return;
+    prevContext.current = { cc, sc };
+    if (!previous.cc || !previous.sc) return;
+    if (!controlledRef.current) setInternal("");
+    if (selectionRef.current) onChangeRef.current?.(null);
+  }, [cc, sc]);
+
+  useEffect(() => {
+    if (!ready) {
+      setOptions([]);
+      setIsLoading(false);
+      return;
+    }
+
+    let cancelled = false;
+    setOptions([]);
+    setIsLoading(true);
+    void fetchCities(cc, sc)
+      .then((list) => {
+        if (!cancelled) setOptions(list);
+      })
+      .finally(() => {
+        if (!cancelled) setIsLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [cc, sc, ready]);
+
+  const current = isControlled ? (value ?? "") : internal;
+  const selected = useMemo(() => {
+    if (!current) return undefined;
+    return options.find(
+      (option) => option.code === current || option.name === current,
+    );
+  }, [current, options]);
+
+  return (
+    <GeoSearchSelect
+      id={id}
+      className={className}
+      placeholder={ready ? placeholder : "Indica país y estado, región o municipio"}
+      searchPlaceholder="Buscar ciudad, pueblo o distrito…"
+      emptyMessage="Sin ciudades, pueblos ni distritos."
+      options={options}
+      value={selected?.code}
+      displayValue={selected?.name}
+      onChange={(option: GeoOption) => {
+        const city = option as GeoCityOption;
+        if (!isControlled) setInternal(city.code);
+        onChange?.(city);
+      }}
+      disabled={disabled || !ready}
+      isLoading={ready && isLoading}
+      showCode={showCode}
+    />
+  );
+}