@truedat/auth 8.14.1 → 8.14.2

package/src/groups/components/__tests__/GroupForm.spec.js

@@ -4,6 +4,28 @@ import { render, waitForLoad } from "@truedat/test/render";
 import GroupForm from "../GroupForm";
 
 describe("<GroupForm />", () => {
+  it("preserves unsaved fields when server data is revalidated", async () => {
+    const group = { id: 1, name: "Team" };
+    const ui = render(
+      <GroupForm
+        group={group}
+        users={[]}
+        groupUsers={[]}
+        onSubmit={jest.fn()}
+      />,
+    );
+    const input = ui.getByPlaceholderText("group.form.name.placeholder");
+    await userEvent.setup({ delay: null }).type(input, " draft");
+    ui.rerender(
+      <GroupForm
+        group={{ ...group, name: "Server update" }}
+        users={[]}
+        groupUsers={[]}
+        onSubmit={jest.fn()}
+      />,
+    );
+    expect(input).toHaveValue("Team draft");
+  });
   const renderOpts = {
     state: {
       users: [{ id: 101, full_name: "John Doe", user_name: "jdoe" }],
@@ -38,7 +60,12 @@ describe("<GroupForm />", () => {
   it("updates name, description, alias and users fields", async () => {
     const onSubmit = jest.fn();
     const rendered = render(
-      <GroupForm group={{}} groupUsers={[]} onSubmit={onSubmit} />,
+      <GroupForm
+        group={{}}
+        groupUsers={[]}
+        users={renderOpts.state.users}
+        onSubmit={onSubmit}
+      />,
       renderOpts,
     );
 
@@ -51,7 +78,7 @@ describe("<GroupForm />", () => {
       "Team Alpha",
     );
     await user.type(
-      rendered.getByPlaceholderText(/group.form.description.placeholder/i),
+      rendered.getByPlaceholderText(/Descripción del grupo/i),
       "Alpha description",
     );
     await user.type(
@@ -67,9 +94,9 @@ describe("<GroupForm />", () => {
         rendered.getByPlaceholderText(/group.form.name.placeholder/i),
       ).toHaveValue("Team Alpha"),
     );
-    expect(
-      rendered.getByPlaceholderText(/group.form.description.placeholder/i),
-    ).toHaveValue("Alpha description");
+    expect(rendered.getByPlaceholderText(/Descripción del grupo/i)).toHaveValue(
+      "Alpha description",
+    );
     expect(
       rendered.getByPlaceholderText(/group.form.alias.placeholder/i),
     ).toHaveValue("alpha-team");

package/src/groups/components/__tests__/GroupMemberPicker.spec.js

@@ -0,0 +1,378 @@
+import { SWRConfig } from "swr";
+import { useQuery } from "@apollo/client";
+import { useState } from "react";
+import { act, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { render as renderComponent } from "@truedat/test/render";
+import { apiJson, apiJsonPost } from "@truedat/core/services/api";
+import GroupMemberPicker from "../GroupMemberPicker";
+
+const render = (component) => {
+  const cache = new Map();
+  return renderComponent(
+    <SWRConfig
+      value={{
+        provider: () => cache,
+        shouldRetryOnError: false,
+        dedupingInterval: 0,
+      }}
+    >
+      {component}
+    </SWRConfig>,
+  );
+};
+
+jest.mock("@truedat/core/services/api", () => ({
+  apiJson: jest.fn(),
+  apiJsonPost: jest.fn(),
+  JSON_OPTS: {},
+}));
+jest.mock("@apollo/client", () => ({
+  ...jest.requireActual("@apollo/client"),
+  useQuery: jest.fn(),
+}));
+const users = [
+  { id: 1, user_name: "ana", role: "user" },
+  { id: 2, user_name: "admin", role: "admin" },
+  { id: 3, user_name: "agent", role: "agent" },
+];
+const options = users.map(({ id, user_name }) => ({
+  value: id,
+  text: user_name,
+  key: id,
+}));
+beforeEach(() => {
+  jest.clearAllMocks();
+  useQuery.mockReturnValue({
+    data: { domains: [{ id: "12", name: "Finance", parentId: null }] },
+    loading: false,
+    refetch: jest.fn().mockResolvedValue({}),
+  });
+  apiJson.mockResolvedValue({ data: { data: [{ id: 1, name: "Owner" }] } });
+});
+it("disables hidden filter requests while allowing member search and selection", async () => {
+  const onChange = jest.fn();
+  useQuery.mockReturnValue({ error: new Error("offline") });
+  const ui = render(
+    <GroupMemberPicker
+      showFilters={false}
+      users={users}
+      options={options}
+      value={[1]}
+      onChange={onChange}
+    />,
+  );
+  expect(ui.queryByLabelText("Filtros de miembros")).not.toBeInTheDocument();
+  expect(
+    ui.queryByText("No se han podido cargar los dominios."),
+  ).not.toBeInTheDocument();
+  expect(
+    ui.queryByRole("button", { name: "Reintentar" }),
+  ).not.toBeInTheDocument();
+  expect(useQuery).toHaveBeenCalledWith(
+    expect.anything(),
+    expect.objectContaining({ skip: true }),
+  );
+  expect(apiJson).not.toHaveBeenCalled();
+  expect(apiJsonPost).not.toHaveBeenCalled();
+  const user = userEvent.setup({ delay: null });
+  const picker = ui.getByRole("combobox", { name: "Añadir miembros" });
+  await user.click(picker);
+  await user.type(picker.querySelector("input"), "admin");
+  await user.keyboard("{Enter}");
+  expect(onChange).toHaveBeenCalledWith([2, 1]);
+});
+it("filters account types without removing selected members", async () => {
+  const onChange = jest.fn();
+  const ui = render(
+    <GroupMemberPicker
+      users={users}
+      options={options}
+      value={[1]}
+      onChange={onChange}
+    />,
+  );
+  const user = userEvent.setup({ delay: null });
+  await user.click(ui.getByRole("listbox", { name: "Tipo de usuario" }));
+  await user.click(
+    ui.getByRole("option", { name: "user.type.admin", exact: true }),
+  );
+  await user.click(ui.getByRole("combobox", { name: "Añadir miembros" }));
+  expect(
+    ui.getByRole("option", { name: "admin", exact: true }),
+  ).toBeInTheDocument();
+  expect(
+    ui.queryByRole("option", { name: "agent", exact: true }),
+  ).not.toBeInTheDocument();
+  expect(ui.getByText("ana")).toBeInTheDocument();
+  expect(onChange).not.toHaveBeenCalled();
+});
+it("retries failed role searches and uses full users for combined type filtering", async () => {
+  apiJsonPost
+    .mockRejectedValueOnce(new Error("failed"))
+    .mockResolvedValueOnce({ data: { data: [{ id: 2 }] } });
+  const ui = render(
+    <GroupMemberPicker
+      users={users}
+      options={options}
+      value={[]}
+      onChange={jest.fn()}
+    />,
+  );
+  const user = userEvent.setup({ delay: null });
+  await waitFor(() =>
+    expect(ui.getByRole("option", { name: "Owner" })).toBeInTheDocument(),
+  );
+  await user.click(ui.getByRole("combobox", { name: "Rol" }));
+  await user.click(ui.getByRole("option", { name: "Owner", exact: true }));
+  await waitFor(() =>
+    expect(
+      ui.getByText("No se han podido cargar los usuarios."),
+    ).toBeInTheDocument(),
+  );
+  await user.click(ui.getByRole("button", { name: "Reintentar" }));
+  await waitFor(() =>
+    expect(
+      ui.queryByText("No se han podido cargar los usuarios."),
+    ).not.toBeInTheDocument(),
+  );
+  await user.click(ui.getByRole("listbox", { name: "Tipo de usuario" }));
+  await user.click(
+    ui.getByRole("option", { name: "user.type.admin", exact: true }),
+  );
+  await user.click(ui.getByRole("combobox", { name: "Añadir miembros" }));
+  expect(
+    ui.getByRole("option", { name: "admin", exact: true }),
+  ).toBeInTheDocument();
+  expect(apiJsonPost).toHaveBeenLastCalledWith(
+    "/api/users/search",
+    { roles: ["1"] },
+    {},
+  );
+});
+
+it.each(["click outside", "Tab", "Escape"])(
+  "does not add the highlighted candidate on %s",
+  async (action) => {
+    const onChange = jest.fn();
+    const ui = render(
+      <GroupMemberPicker
+        users={users}
+        options={options}
+        value={[]}
+        onChange={onChange}
+      />,
+    );
+    const user = userEvent.setup({ delay: null });
+    const picker = ui.getByRole("combobox", { name: "Añadir miembros" });
+    await user.click(picker);
+    await user.type(picker.querySelector("input"), "admin");
+    if (action === "click outside") {
+      await user.click(ui.getByText("Miembros seleccionados"));
+    } else {
+      await user.keyboard(`{${action}}`);
+    }
+    expect(onChange).not.toHaveBeenCalled();
+    expect(picker).toHaveAttribute("aria-expanded", "false");
+  },
+);
+
+it("adds the highlighted candidate with Enter", async () => {
+  const onChange = jest.fn();
+  const ui = render(
+    <GroupMemberPicker
+      users={users}
+      options={options}
+      value={[]}
+      onChange={onChange}
+    />,
+  );
+  const user = userEvent.setup({ delay: null });
+  const picker = ui.getByRole("combobox", { name: "Añadir miembros" });
+  await user.click(picker);
+  await user.type(picker.querySelector("input"), "admin");
+  await user.keyboard("{Enter}");
+  expect(onChange).toHaveBeenCalledWith([2]);
+});
+
+it("adds from search and only removes from the selected container", async () => {
+  const Picker = () => {
+    const [value, onChange] = useState([1]);
+    return (
+      <GroupMemberPicker
+        users={users}
+        options={options}
+        value={value}
+        onChange={onChange}
+      />
+    );
+  };
+  const ui = render(<Picker />);
+  const user = userEvent.setup({ delay: null });
+  const selected = ui.container.querySelector(".group-selected-members");
+  expect(selected.querySelector("input")).toBeNull();
+  await user.click(ui.getByRole("combobox", { name: "Añadir miembros" }));
+  await user.click(ui.getByRole("option", { name: "admin", exact: true }));
+  expect(selected.querySelector("li:first-child")).toHaveTextContent("admin");
+  expect(selected.querySelector("li:first-child")).toHaveClass(
+    "group-member-added",
+  );
+  await waitFor(
+    () =>
+      expect(selected.querySelector("li:first-child")).not.toHaveClass(
+        "group-member-added",
+      ),
+    { timeout: 2000 },
+  );
+  expect(
+    ui.container.querySelector(
+      ".group-member-selection .selection.dropdown .ui.label",
+    ),
+  ).toBeNull();
+  await user.click(selected.querySelector("li:first-child button"));
+  expect(selected).not.toHaveTextContent("admin");
+  expect(selected).toHaveTextContent("ana");
+});
+
+it("filters by domain with string user IDs and preserves selected members", async () => {
+  apiJsonPost.mockResolvedValue({ data: { data: [{ id: "2" }] } });
+  const ui = render(
+    <GroupMemberPicker
+      users={users}
+      options={options}
+      value={[1]}
+      onChange={jest.fn()}
+    />,
+  );
+  const user = userEvent.setup({ delay: null });
+  await user.click(ui.getByRole("combobox", { name: "Dominio" }));
+  await user.click(ui.getByRole("option", { name: "Finance" }));
+  await waitFor(() =>
+    expect(apiJsonPost).toHaveBeenCalledWith(
+      "/api/users/search",
+      { domains: ["12"] },
+      expect.anything(),
+    ),
+  );
+  await user.click(ui.getByRole("combobox", { name: "Añadir miembros" }));
+  expect(
+    ui.getByRole("option", { name: "admin", exact: true }),
+  ).toBeInTheDocument();
+  expect(
+    ui.container.querySelector(".group-selected-members"),
+  ).toHaveTextContent("ana");
+});
+it("keeps a failed domain filter visible and allows retry", async () => {
+  const refetch = jest.fn().mockResolvedValue({});
+  useQuery.mockReturnValue({ error: new Error("offline"), refetch });
+  const ui = render(
+    <GroupMemberPicker
+      users={users}
+      options={options}
+      value={[]}
+      onChange={jest.fn()}
+    />,
+  );
+  expect(ui.getByRole("combobox", { name: "Dominio" })).toHaveAttribute(
+    "aria-disabled",
+    "true",
+  );
+  expect(
+    ui.getByText("No se han podido cargar los dominios."),
+  ).toBeInTheDocument();
+  await userEvent
+    .setup({ delay: null })
+    .click(ui.getByRole("button", { name: "Reintentar" }));
+  expect(refetch).toHaveBeenCalledTimes(1);
+});
+
+it("adds all filtered candidates once without duplicating selected users", async () => {
+  apiJsonPost.mockResolvedValue({ data: { data: users } });
+  const Picker = () => {
+    const [value, onChange] = useState([1]);
+    return (
+      <GroupMemberPicker
+        users={users}
+        options={options}
+        value={value}
+        onChange={onChange}
+      />
+    );
+  };
+  const ui = render(<Picker />);
+  const user = userEvent.setup({ delay: null });
+  expect(
+    ui.queryByRole("button", { name: "Añadir todos" }),
+  ).not.toBeInTheDocument();
+  await waitFor(() =>
+    expect(ui.getByRole("option", { name: "Owner" })).toBeInTheDocument(),
+  );
+  await user.click(ui.getByRole("combobox", { name: "Rol" }));
+  await user.click(ui.getByRole("option", { name: "Owner" }));
+  const addAll = await ui.findByRole("button", {
+    name: "Añadir todos",
+  });
+  await waitFor(() => expect(addAll).not.toBeDisabled());
+  await user.click(addAll);
+  const rows = ui.container.querySelectorAll(".group-selected-members li");
+  expect(
+    [...rows].map((row) => row.querySelector("strong").textContent),
+  ).toEqual(["admin", "agent", "ana"]);
+  expect(rows[0]).toHaveClass("group-member-added");
+  expect(rows[1]).toHaveClass("group-member-added");
+  await waitFor(
+    () => expect(ui.container.querySelector(".group-member-added")).toBeNull(),
+    { timeout: 2000 },
+  );
+  expect(
+    ui.queryByRole("button", { name: "Añadir todos" }),
+  ).not.toBeInTheDocument();
+});
+
+it("restarts batch feedback on rapid additions, survives removal and clears on unmount", async () => {
+  jest.useFakeTimers();
+  const Picker = () => {
+    const [value, onChange] = useState([]);
+    return (
+      <GroupMemberPicker
+        users={users}
+        options={options}
+        value={value}
+        onChange={onChange}
+      />
+    );
+  };
+  let ui;
+  try {
+    ui = render(<Picker />);
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+    const add = async (name) => {
+      await user.click(ui.getByRole("combobox", { name: "Añadir miembros" }));
+      await user.click(ui.getByRole("option", { name, exact: true }));
+    };
+    await add("ana");
+    act(() => jest.advanceTimersByTime(500));
+    await add("admin");
+    const rows = ui.container.querySelectorAll(".group-selected-members li");
+    expect(rows[0]).toHaveTextContent("admin");
+    expect(rows[0]).toHaveClass("group-member-added");
+    expect(rows[1]).not.toHaveClass("group-member-added");
+    act(() => jest.advanceTimersByTime(400));
+    expect(rows[0]).toHaveClass("group-member-added");
+    await user.click(rows[0].querySelector("button"));
+    act(() => jest.advanceTimersByTime(500));
+    expect(ui.container.querySelector(".group-member-added")).toBeNull();
+    expect(
+      ui.container.querySelector(".group-selected-members"),
+    ).toHaveTextContent("ana");
+    await add("agent");
+    const clear = jest.spyOn(global, "clearTimeout");
+    ui.unmount();
+    expect(clear).toHaveBeenCalled();
+    clear.mockRestore();
+  } finally {
+    ui?.unmount();
+    jest.clearAllTimers();
+    jest.useRealTimers();
+  }
+});

package/src/groups/components/__tests__/GroupModals.spec.js

@@ -0,0 +1,210 @@
+import { useLocation } from "react-router";
+import { SWRConfig, useSWRConfig } from "swr";
+import { act, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import { apiJson, apiJsonPut, apiJsonDelete } from "@truedat/core/services/api";
+import { UserRoutes } from "../../../users/components/UserRoutes";
+
+jest.mock("@truedat/core/hooks/useAuthorized", () => ({
+  useAuthorized: () => true,
+}));
+jest.mock("@truedat/core/services/api", () => ({
+  apiJson: jest.fn(),
+  apiJsonPut: jest.fn(),
+  apiJsonPost: jest.fn(),
+  apiJsonDelete: jest.fn(),
+  JSON_OPTS: {},
+}));
+const members = [{ id: 101, user_name: "ana", full_name: "Ana" }];
+const group = {
+  id: 1,
+  name: "Team",
+  alias: "Analytics",
+  description: "Full description",
+  users: members,
+};
+const Capture = () => {
+  const location = useLocation();
+  const { mutate } = useSWRConfig();
+  return (
+    <>
+      <output>{location.pathname}</output>
+      <button type="button" onClick={() => mutate("/api/users")}>
+        Refresh users
+      </button>
+      <UserRoutes />
+    </>
+  );
+};
+const setup = (route) => {
+  const cache = new Map();
+  return render(
+    <SWRConfig
+      value={{
+        provider: () => cache,
+        shouldRetryOnError: false,
+        dedupingInterval: 0,
+      }}
+    >
+      <Capture />
+    </SWRConfig>,
+    { routes: [route] },
+  );
+};
+beforeEach(() => {
+  jest.resetAllMocks();
+  apiJson.mockImplementation((url) =>
+    Promise.resolve({
+      data: {
+        data:
+          url === "/api/users"
+            ? members
+            : url === "/api/groups"
+              ? [group]
+              : group,
+      },
+    }),
+  );
+});
+
+describe("Group modals", () => {
+  it.each(["/groups/new", "/groups/1", "/groups/1/edit"])(
+    "opens %s directly",
+    async (route) => {
+      const ui = setup(route);
+      await waitFor(() =>
+        expect(
+          ui.container.querySelector(".td-group-card"),
+        ).toBeInTheDocument(),
+      );
+      if (route === "/groups/1")
+        expect(
+          await ui.findByText("Full description", {
+            selector: ".true-modal-subtitle",
+          }),
+        ).toBeInTheDocument();
+      else
+        expect(
+          await ui.findByRole("textbox", { name: "Nombre del grupo" }),
+        ).toBeInTheDocument();
+    },
+  );
+
+  it("closes back to the group list", async () => {
+    const ui = setup("/groups/1");
+    await userEvent
+      .setup({ delay: null })
+      .click(ui.getByRole("button", { name: "Close" }));
+    await waitFor(() =>
+      expect(ui.queryByRole("dialog")).not.toBeInTheDocument(),
+    );
+    expect(ui.getByRole("status")).toHaveTextContent("/groups");
+  });
+
+  it("preserves edits after a failed write", async () => {
+    apiJsonPut.mockRejectedValue(new Error("offline"));
+    const ui = setup("/groups/1/edit");
+    const input = await ui.findByRole("textbox", { name: "Nombre del grupo" });
+    const user = userEvent.setup({ delay: null });
+    await user.clear(input);
+    await user.type(input, "Updated team");
+    await user.click(ui.getByRole("button", { name: "actions.save" }));
+    await ui.findByText(
+      "No se ha podido completar la operación. Inténtalo de nuevo.",
+    );
+    expect(input).toHaveValue("Updated team");
+  });
+
+  it("preserves an edit draft if directory revalidation fails", async () => {
+    const ui = setup("/groups/1/edit");
+    const input = await ui.findByRole("textbox", { name: "Nombre del grupo" });
+    const user = userEvent.setup({ delay: null });
+    await user.clear(input);
+    await user.type(input, "Draft team");
+
+    apiJson.mockRejectedValue(new Error("offline"));
+    await user.click(ui.getByRole("button", { name: "Refresh users" }));
+
+    expect(
+      await ui.findByText("No se han podido cargar los usuarios."),
+    ).toBeInTheDocument();
+    expect(input).toHaveValue("Draft team");
+  });
+
+  it("blocks closing while a write is pending", async () => {
+    const deferred = {};
+    apiJsonPut.mockReturnValue(
+      new Promise((resolve) => {
+        deferred.resolve = resolve;
+      }),
+    );
+    const ui = setup("/groups/1/edit");
+    const input = await ui.findByRole("textbox", { name: "Nombre del grupo" });
+    const user = userEvent.setup({ delay: null });
+    await user.type(input, " updated");
+    await waitFor(() =>
+      expect(
+        ui.getByRole("button", { name: "actions.save" }),
+      ).not.toBeDisabled(),
+    );
+    await user.click(ui.getByRole("button", { name: "actions.save" }));
+    await waitFor(() =>
+      expect(ui.getByRole("button", { name: "Close" })).toBeDisabled(),
+    );
+    await act(async () => deferred.resolve({ data: { data: group } }));
+  });
+
+  it("closes only after successful deletion", async () => {
+    const deferred = {};
+    apiJsonDelete.mockReturnValue(
+      new Promise((resolve) => {
+        deferred.resolve = resolve;
+      }),
+    );
+    const ui = setup("/groups/1/edit");
+    await ui.findByRole("textbox", { name: "Nombre del grupo" });
+    const user = userEvent.setup({ delay: null });
+    await user.click(document.querySelector(".group-delete-action"));
+    const confirmation = document.querySelector(".group-modal--delete");
+    await user.click(
+      within(confirmation).getByRole("button", { name: "actions.delete" }),
+    );
+    expect(
+      within(confirmation).getByRole("button", { name: "Close" }),
+    ).toBeDisabled();
+    await act(async () => deferred.resolve({}));
+    await waitFor(() =>
+      expect(ui.queryByRole("dialog")).not.toBeInTheDocument(),
+    );
+  });
+
+  it("shows an edit invitation for an empty group", async () => {
+    apiJson.mockImplementation((url) =>
+      Promise.resolve({
+        data: {
+          data:
+            url === "/api/users"
+              ? members
+              : url === "/api/groups"
+                ? [group]
+                : { ...group, users: [] },
+        },
+      }),
+    );
+    const ui = setup("/groups/1");
+    expect(
+      await ui.findByText("Este grupo no tiene miembros"),
+    ).toBeInTheDocument();
+  });
+
+  it("offers retry after detail loading fails", async () => {
+    apiJson.mockRejectedValue(new Error("offline"));
+    const ui = setup("/groups/1");
+    expect(
+      await within(ui.getByRole("dialog")).findByRole("button", {
+        name: "Reintentar",
+      }),
+    ).toBeInTheDocument();
+  });
+});

package/src/groups/components/__tests__/GroupUsers.spec.js

@@ -1,12 +1,27 @@
 import { render, waitForLoad } from "@truedat/test/render";
+import { useGroup, useGroupUsers } from "../../hooks/useGroups";
 import { GroupUsers } from "../GroupUsers";
 
+jest.mock("../../hooks/useGroups", () => ({
+  useGroup: jest.fn(),
+  useGroupUsers: jest.fn(),
+}));
+
 describe("<GroupUsers />", () => {
   const group = { id: "2", name: "grupo1", description: "aaa bbb cc" };
-  const props = { group };
+
+  beforeEach(() => {
+    useGroup.mockReturnValue({
+      group,
+      members: [],
+      loading: false,
+      retry: jest.fn(),
+    });
+    useGroupUsers.mockReturnValue({ users: [] });
+  });
 
   it("matches the latest snapshot", async () => {
-    const rendered = render(<GroupUsers {...props} />);
+    const rendered = render(<GroupUsers />);
     await waitForLoad(rendered);
     expect(rendered.container).toMatchSnapshot();
   });