@truedat/auth 8.14.3 → 8.14.5

package/src/users/components/__tests__/UserModals.spec.js

@@ -0,0 +1,554 @@
+import { act, fireEvent, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Provider } from "react-redux";
+import { createStore, combineReducers, applyMiddleware } from "redux";
+import { render } from "@truedat/test/render";
+import coreEs from "@truedat/core/messages/es";
+import authEs from "../../../messages/es";
+import { userModalOperation } from "../../reducers/userModalOperation";
+import {
+  createUser,
+  updateUser,
+  updatePassword,
+  deleteUser,
+} from "../../routines";
+import { NewUser } from "../NewUser";
+import { EditUserModal } from "../EditUserModal";
+import { UserInfoModal } from "../UserInfoModal";
+import { UserPasswordModal } from "../UserPasswordModal";
+import { DeleteUserModal } from "../UserActions";
+
+describe("User modal shell", () => {
+  const user = { id: 1, user_name: "alice", full_name: "Alice", role: "user" };
+
+  it("confirms deletion from edit and preserves edits when cancelled", async () => {
+    const onClose = jest.fn();
+    const dispatch = jest.fn();
+    render(<EditUserModal user={user} groups={[]} onClose={onClose} />, {
+      dispatch,
+    });
+    const keyboard = userEvent.setup({ delay: null });
+    fireEvent.change(document.getElementById("full_name"), {
+      target: { value: "Alice Updated" },
+    });
+    await keyboard.click(screen.getByRole("button", { name: "Delete user" }));
+    expect(screen.getAllByRole("dialog")).toHaveLength(1);
+    expect(
+      screen.getByRole("button", { name: "user.delete.submit" }),
+    ).toBeVisible();
+    expect(onClose).not.toHaveBeenCalled();
+    await keyboard.click(
+      screen.getByRole("button", { name: "actions.cancel" }),
+    );
+    expect(document.getElementById("full_name")).toHaveValue("Alice Updated");
+    await keyboard.click(screen.getByRole("button", { name: "Delete user" }));
+    await keyboard.click(
+      screen.getByRole("button", { name: "user.delete.submit" }),
+    );
+    expect(dispatch).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: deleteUser.TRIGGER,
+        payload: { id: user.id },
+      }),
+    );
+  });
+
+  it.each(["alice", "admin"])(
+    "waits for the target user before showing password fields for session %s",
+    (authUserName) => {
+      const onClose = jest.fn();
+      const { rerender } = render(
+        <UserPasswordModal
+          user={{}}
+          authUserName={authUserName}
+          onClose={onClose}
+        />,
+      );
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+      expect(document.getElementById("currentPassword")).toBeNull();
+
+      rerender(
+        <UserPasswordModal
+          user={user}
+          authUserName={authUserName}
+          onClose={onClose}
+        />,
+      );
+      expect(screen.getByRole("dialog")).toBeVisible();
+      if (authUserName === user.user_name) {
+        expect(document.getElementById("currentPassword")).toBeVisible();
+      } else {
+        expect(document.getElementById("currentPassword")).toBeNull();
+      }
+    },
+  );
+
+  it.each([
+    ["finance", "finance"],
+    ["Finance", "Finance"],
+    [{ alias: "Finance" }, "Finance"],
+    [{ name: "Finance" }, "Finance"],
+    [{ name: "finance", alias: "Finance" }, "Finance"],
+    [{ id: 7, name: "finance", alias: "Finance" }, "Finance"],
+  ])("links group %p to its detail route", (group, label) => {
+    render(
+      <UserInfoModal
+        user={{ ...user, groups: [group] }}
+        groups={[{ id: 7, name: "finance", alias: "Finance" }]}
+        onClose={jest.fn()}
+      />,
+    );
+    const link = screen.getByRole("link", { name: label });
+    expect(link).toHaveAttribute("href", "/groups/7");
+    expect(link).toHaveAttribute("target", "_blank");
+    expect(link).toHaveAttribute("rel", "noopener noreferrer");
+    expect(link.querySelector(".external.alternate.icon")).toHaveAttribute(
+      "aria-hidden",
+      "true",
+    );
+  });
+
+  it.each([
+    [NewUser, { createUser: jest.fn() }, "new-user-form"],
+    [EditUserModal, { user, updateUser: jest.fn() }, "edit-user-form"],
+    [
+      UserPasswordModal,
+      { user, updatePassword: jest.fn() },
+      "password-modal-form",
+    ],
+    [UserInfoModal, { user }, null],
+  ])(
+    "renders %p through the shared accessible modal",
+    async (Component, props, formId) => {
+      const onClose = jest.fn();
+      render(<Component {...props} onClose={onClose} />);
+      const dialog = screen.getByRole("dialog");
+      expect(dialog).toHaveClass("true-modal", "user-modal");
+      expect(dialog).toHaveAccessibleName();
+      expect(dialog.querySelectorAll(".content")).toHaveLength(1);
+      if (formId) {
+        expect(dialog.querySelector('button[type="submit"]')).toHaveAttribute(
+          "form",
+          formId,
+        );
+        expect(document.getElementById(formId)).toHaveProperty(
+          "tagName",
+          "FORM",
+        );
+      }
+      const keyboard = userEvent.setup({
+        advanceTimers: jest.advanceTimersByTime,
+      });
+      await keyboard.keyboard("{Escape}");
+      await waitFor(() => expect(onClose).toHaveBeenCalledTimes(1));
+      await keyboard.click(
+        screen.getByLabelText("Close", { selector: "button" }),
+      );
+      await waitFor(() => expect(onClose).toHaveBeenCalledTimes(2));
+    },
+  );
+});
+
+describe("User modal operations", () => {
+  const account = {
+    id: 1,
+    user_name: "alice",
+    full_name: "Alice",
+    role: "user",
+  };
+
+  it.each([
+    [
+      NewUser,
+      createUser,
+      { groups: [] },
+      {
+        full_name: "Alice",
+        user_name: "alice",
+        password: "secret123",
+        rep_password: "secret123",
+      },
+    ],
+    [
+      EditUserModal,
+      updateUser,
+      { user: account, groups: [] },
+      { full_name: "Alice Updated" },
+    ],
+    [
+      UserPasswordModal,
+      updatePassword,
+      { user: account },
+      { password: "secret123", passwordConfirmation: "secret123" },
+    ],
+    [DeleteUserModal, deleteUser, { id: 1, name: "Alice" }, {}],
+  ])(
+    "%p waits for its own success, retains errors and blocks duplicate submissions",
+    async (Component, routine, props, fields) => {
+      const actions = [];
+      const store = createStore(
+        combineReducers({ userModalOperation }),
+        applyMiddleware(() => (next) => (action) => {
+          actions.push(action);
+          return next(action);
+        }),
+      );
+      const onClose = jest.fn();
+      render(
+        <Provider store={store}>
+          <Component {...props} onClose={onClose} />
+        </Provider>,
+      );
+      Object.entries(fields).forEach(([id, value]) =>
+        fireEvent.change(document.getElementById(id), { target: { value } }),
+      );
+      const keyboard = userEvent.setup({ delay: null });
+      const button =
+        Component === DeleteUserModal
+          ? screen.getByRole("button", { name: "user.delete.submit" })
+          : document.querySelector('button[type="submit"]');
+      await waitFor(() => expect(button).not.toBeDisabled());
+      await keyboard.click(button);
+      await waitFor(() =>
+        expect(
+          actions.filter(({ type }) => type === routine.TRIGGER),
+        ).toHaveLength(1),
+      );
+      const trigger = actions.find(({ type }) => type === routine.TRIGGER);
+      await keyboard.click(button);
+      await keyboard.keyboard("{Escape}");
+      await keyboard.click(
+        screen.getByLabelText("Close", { selector: "button" }),
+      );
+      await keyboard.click(screen.getByRole("dialog").parentElement);
+      expect(
+        actions.filter(({ type }) => type === routine.TRIGGER),
+      ).toHaveLength(1);
+      expect(onClose).not.toHaveBeenCalled();
+      expect(button).toBeDisabled();
+      Object.keys(fields).forEach((id) =>
+        expect(document.getElementById(id)).toBeDisabled(),
+      );
+      act(() => store.dispatch(routine.fulfill()));
+      expect(onClose).not.toHaveBeenCalled();
+      act(() =>
+        store.dispatch({ ...routine.failure("failure"), meta: trigger.meta }),
+      );
+      expect(
+        document.querySelector(".true-modal-banner [role=alert]"),
+      ).toBeInTheDocument();
+      Object.entries(fields).forEach(([id, value]) =>
+        expect(document.getElementById(id)).toHaveValue(value),
+      );
+      await keyboard.click(button);
+      await waitFor(() =>
+        expect(
+          actions.filter(({ type }) => type === routine.TRIGGER),
+        ).toHaveLength(2),
+      );
+      const retries = actions.filter(({ type }) => type === routine.TRIGGER);
+      expect(retries).toHaveLength(2);
+      expect(
+        document.querySelector(".true-modal-banner [role=alert]"),
+      ).not.toBeInTheDocument();
+      act(() => store.dispatch({ ...routine.success({}), meta: trigger.meta }));
+      expect(onClose).not.toHaveBeenCalled();
+      act(() =>
+        store.dispatch({ ...routine.success({}), meta: retries[1].meta }),
+      );
+      expect(onClose).toHaveBeenCalledTimes(1);
+    },
+  );
+});
+
+describe("User form interactions and content", () => {
+  const account = {
+    id: 1,
+    full_name: "Usuario de prueba",
+    user_name: "test.user",
+    role: "user",
+  };
+  const options = {
+    locale: "es",
+    messages: {
+      es: {
+        ...coreEs,
+        ...authEs,
+        "user.info.title": "Información del usuario",
+        "user.info.unavailable": "No disponible",
+        "user.info.no_groups": "Sin grupos asignados",
+        "user.info.no_permissions": "Sin roles asignados",
+        "user.info.no_group_permissions": "Sin roles heredados de grupos",
+        "user.delete.title": "Eliminar usuario",
+        "user.delete.description":
+          "La cuenta de <strong>{name}</strong> será <danger>eliminada</danger>.",
+        "user.delete.confirm": "¿Confirmas la eliminación?",
+      },
+    },
+  };
+  const change = (name, value) =>
+    fireEvent.change(document.getElementById(name), { target: { value } });
+  afterEach(() => {
+    delete document.execCommand;
+  });
+
+  it("shows all creation fields and validates the entire form before submitting", async () => {
+    const dispatch = jest.fn();
+    render(<NewUser groups={[]} onClose={jest.fn()} />, {
+      ...options,
+      dispatch,
+    });
+    const form = document.getElementById("new-user-form");
+    fireEvent.submit(form);
+    await screen.findByText(/Nombre completo.*requerido/i);
+    expect(document.getElementById("password")).toBeVisible();
+    expect(document.getElementById("full_name")).toHaveFocus();
+    await act(async () => {
+      change("full_name", account.full_name);
+      change("user_name", account.user_name);
+    });
+    await act(async () => fireEvent.submit(form));
+    expect(document.getElementById("password")).toHaveAttribute(
+      "aria-invalid",
+      "true",
+    );
+    expect(dispatch).not.toHaveBeenCalledWith(
+      expect.objectContaining({ type: createUser.TRIGGER }),
+    );
+    await act(async () => {
+      change("password", "example123");
+      change("rep_password", "example123");
+    });
+    fireEvent.submit(form);
+    await waitFor(() =>
+      expect(dispatch).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: createUser.TRIGGER,
+          payload: expect.objectContaining({
+            full_name: account.full_name,
+            user_name: account.user_name,
+            password: "example123",
+            rep_password: "example123",
+          }),
+        }),
+      ),
+    );
+  });
+
+  it.each(["cancel", "escape", "close", "backdrop"])(
+    "clears password fields before %s closes without submitting",
+    async (method) => {
+      const dispatch = jest.fn();
+      const editedFields = [];
+      document.execCommand = jest.fn((command) => {
+        expect(command).toBe("delete");
+        const input = document.activeElement;
+        expect(input.type).toBe("password");
+        expect(input.selectionStart).toBe(0);
+        expect(input.selectionEnd).toBe(input.value.length);
+        editedFields.push(input.id);
+        return true;
+      });
+      const onClose = jest.fn(() => {
+        expect(document.getElementById("password")).toHaveValue("");
+        expect(document.getElementById("passwordConfirmation")).toHaveValue("");
+      });
+      render(<UserPasswordModal user={account} onClose={onClose} />, {
+        ...options,
+        dispatch,
+      });
+      await act(async () => {
+        change("password", "example123");
+        change("passwordConfirmation", "example123");
+      });
+      if (method === "cancel")
+        fireEvent.click(screen.getByRole("button", { name: "Cancelar" }));
+      if (method === "close")
+        fireEvent.click(
+          screen.getByLabelText("Cerrar", { selector: "button" }),
+        );
+      if (method === "escape")
+        fireEvent.keyDown(document, { key: "Escape", keyCode: 27 });
+      if (method === "backdrop")
+        fireEvent.click(screen.getByRole("dialog").parentElement);
+      expect(editedFields).toEqual(["password", "passwordConfirmation"]);
+      expect(onClose).not.toHaveBeenCalled();
+      fireEvent.click(screen.getByRole("button", { name: "Cancelar" }));
+      fireEvent.submit(document.getElementById("password-modal-form"));
+      expect(editedFields).toEqual(["password", "passwordConfirmation"]);
+      await waitFor(() => expect(onClose).toHaveBeenCalledTimes(1));
+      expect(dispatch).not.toHaveBeenCalledWith(
+        expect.objectContaining({ type: updatePassword.TRIGGER }),
+      );
+    },
+  );
+
+  it("does not navigate after unmounting during password discard", () => {
+    const onClose = jest.fn();
+    const { unmount } = render(
+      <UserPasswordModal user={account} onClose={onClose} />,
+      options,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Cancelar" }));
+    unmount();
+    act(() => jest.runOnlyPendingTimers());
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it("revalidates confirmation when the original password changes", async () => {
+    render(<UserPasswordModal user={account} onClose={jest.fn()} />, options);
+    await act(async () => {
+      change("password", "example123");
+      change("passwordConfirmation", "example123");
+    });
+    expect(
+      screen.getByRole("button", { name: "Cambiar contraseña" }),
+    ).toBeEnabled();
+    await act(async () => change("password", "different123"));
+    await waitFor(() =>
+      expect(document.getElementById("passwordConfirmation")).toHaveAttribute(
+        "aria-invalid",
+        "true",
+      ),
+    );
+    expect(
+      screen.getByRole("button", { name: "Cambiar contraseña" }),
+    ).toBeDisabled();
+    expect(document.getElementById("passwordConfirmation")).toHaveAttribute(
+      "aria-describedby",
+      "passwordConfirmation-feedback",
+    );
+  });
+
+  it("shows labeled user details and explicit empty states", () => {
+    render(
+      <UserInfoModal
+        user={account}
+        acls={[]}
+        groupAcls={[]}
+        onClose={jest.fn()}
+      />,
+      options,
+    );
+    expect(screen.getByRole("dialog")).toHaveAccessibleName(
+      "Información del usuario",
+    );
+    expect(screen.getByText("Nombre de usuario")).toBeVisible();
+    expect(screen.getByText("ID externo")).toBeVisible();
+    expect(screen.getAllByText("No disponible")).toHaveLength(2);
+    expect(screen.getByText("Sin grupos asignados")).toBeVisible();
+    expect(
+      screen.queryByRole("heading", { name: /^Grupos/ }),
+    ).not.toBeInTheDocument();
+    expect(screen.getByText("Sin roles asignados")).toBeVisible();
+    expect(screen.queryByRole("table")).not.toBeInTheDocument();
+  });
+
+  it("validates the edit form like the creation form and focuses the first invalid field", async () => {
+    const dispatch = jest.fn();
+    render(<EditUserModal user={account} groups={[]} onClose={jest.fn()} />, {
+      ...options,
+      dispatch,
+    });
+    const form = document.getElementById("edit-user-form");
+    expect(form).toHaveAttribute("novalidate");
+    await act(async () => change("full_name", ""));
+    await act(async () => fireEvent.submit(form));
+    await screen.findByText(/Nombre completo.*requerido/i);
+    expect(document.getElementById("full_name")).toHaveFocus();
+    expect(dispatch).not.toHaveBeenCalledWith(
+      expect.objectContaining({ type: updateUser.TRIGGER }),
+    );
+  });
+
+  it("shows the same user fields in the creation and edit forms", () => {
+    const fieldIds = () =>
+      [...document.querySelectorAll("form [id]")]
+        .map((element) => element.id)
+        .filter((id) => !/password|feedback/.test(id));
+    const created = render(
+      <NewUser groups={[]} onClose={jest.fn()} />,
+      options,
+    );
+    const creationFields = fieldIds();
+    created.unmount();
+    render(
+      <EditUserModal user={account} groups={[]} onClose={jest.fn()} />,
+      options,
+    );
+    expect(fieldIds()).toEqual(creationFields);
+    expect(creationFields).toEqual(
+      expect.arrayContaining([
+        "full_name",
+        "email",
+        "role",
+        "user_name",
+        "external_id",
+        "groups",
+      ]),
+    );
+  });
+
+  it("shows a visible deletion heading and structured destructive copy", () => {
+    render(
+      <DeleteUserModal id={1} name={account.full_name} onClose={jest.fn()} />,
+      options,
+    );
+    const dialog = screen.getByRole("dialog", { name: "Eliminar usuario" });
+    expect(dialog.querySelector(".header")).toBeVisible();
+    expect(screen.getByText(account.full_name).tagName).toBe("STRONG");
+    expect(screen.getByText("eliminada")).toHaveClass("um-danger-text");
+    expect(screen.getByText("¿Confirmas la eliminación?").tagName).toBe("P");
+  });
+});
+
+describe("Unified user permissions", () => {
+  const resource = { id: 1, type: "domain", name: "Finance" };
+  const user = { id: 1, full_name: "Alice", role: "user" };
+
+  it.each([[[]], [[{ resource, role: "Reader" }]]])(
+    "hides role grouping for zero or one distinct role across direct and inherited permissions",
+    (acls) => {
+      render(
+        <UserInfoModal
+          user={user}
+          acls={acls}
+          groupAcls={[{ resource, role: "Reader", group: "Team", groupId: 7 }]}
+          onClose={jest.fn()}
+        />,
+      );
+      expect(screen.queryByRole("checkbox")).not.toBeInTheDocument();
+      expect(screen.getAllByRole("table")).toHaveLength(1);
+      expect(screen.getByRole("link", { name: "Team" })).toHaveAttribute(
+        "href",
+        "/groups/7",
+      );
+    },
+  );
+
+  it("switches between group and role grouping in one collapsible table", async () => {
+    render(
+      <UserInfoModal
+        user={user}
+        acls={[{ resource, role: "Editor" }]}
+        groupAcls={[{ resource, role: "Reader", group: "Team", groupId: 7 }]}
+        onClose={jest.fn()}
+      />,
+    );
+    const keyboard = userEvent.setup({ delay: null });
+    const grouping = screen.getByRole("checkbox");
+    expect(grouping).not.toBeChecked();
+    await keyboard.click(grouping);
+    expect(grouping).toBeChecked();
+    expect(screen.getAllByRole("table")).toHaveLength(1);
+    expect(screen.getByRole("link", { name: "Team" })).toHaveAttribute(
+      "href",
+      "/groups/7",
+    );
+    const header = screen.getByRole("button", { expanded: true });
+    await keyboard.click(header);
+    expect(screen.queryByRole("table")).not.toBeInTheDocument();
+    await keyboard.click(header);
+    expect(screen.getByRole("table")).toBeVisible();
+  });
+});

package/src/users/components/__tests__/UserRoutes.spec.js

@@ -4,6 +4,7 @@ import { renderWithIntl } from "@truedat/test/renderWithIntl";
 import { waitForLoad } from "@truedat/test/waitForLoad";
 import { useAuthorized } from "@truedat/core/hooks/useAuthorized";
 import { UserRoutes } from "../UserRoutes";
+import { AdminUserRoutes } from "../AdminUserRoutes";
 
 const render = (component, { routes = ["/"] } = {}) =>
   renderWithIntl(
@@ -30,14 +31,11 @@ jest.mock("../../../groups/components/NewGroup", () => () => (
 jest.mock("../../../groups/components/EditGroup", () => () => (
   <div>EditGroup</div>
 ));
-jest.mock("../EditUser", () => () => <div>EditUser</div>);
 jest.mock("../GroupUserCrumbs", () => () => <div>GroupUserCrumbs</div>);
 jest.mock("../NewUser", () => () => <div>NewUser</div>);
-jest.mock("../User", () => () => <div>User</div>);
 jest.mock("../UserLoader", () => () => <div>UserLoader</div>);
 jest.mock("../UsersAndGroups", () => () => <div>UsersAndGroups</div>);
 jest.mock("../UsersLoader", () => () => <div>UsersLoader</div>);
-jest.mock("../UserPassword", () => () => <div>UserPassword</div>);
 jest.mock("@truedat/core/router/Unauthorized", () => () => (
   <div>Unauthorized</div>
 ));
@@ -138,3 +136,10 @@ describe("<UserRoutes />", () => {
     expect(rendered.container).toMatchSnapshot();
   });
 });
+
+it("renders the user modal host on the administrative creation route", async () => {
+  const rendered = render(<AdminUserRoutes />, { routes: ["/users/new"] });
+  await waitForLoad(rendered);
+  expect(rendered.getByText("UsersAndGroups")).toBeInTheDocument();
+  expect(rendered.queryByText("NewUser")).not.toBeInTheDocument();
+});

package/src/users/components/__tests__/UserTypeSelector.spec.js

@@ -0,0 +1,32 @@
+import { useState } from "react";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import UserTypeSelector from "../UserTypeSelector";
+
+it("moves selection and focus with arrows, Home and End", async () => {
+  const Selector = () => {
+    const [value, setValue] = useState("user");
+    return <UserTypeSelector value={value} onChange={setValue} />;
+  };
+  render(<Selector />);
+  const keyboard = userEvent.setup({ delay: null });
+  await keyboard.tab();
+  expect(screen.getByRole("radio", { name: "user.type.user" })).toHaveFocus();
+  await keyboard.keyboard("{ArrowRight}");
+  expect(
+    screen.getByRole("radio", { name: "user.type.service" }),
+  ).toHaveFocus();
+  expect(
+    screen.getByRole("radio", { name: "user.type.service" }),
+  ).toHaveAttribute("aria-checked", "true");
+  await keyboard.keyboard("{End}{ArrowRight}");
+  expect(screen.getByRole("radio", { name: "user.type.admin" })).toHaveFocus();
+  await keyboard.keyboard("{ArrowLeft}{Home}");
+  expect(screen.getByRole("radio", { name: "user.type.admin" })).toHaveFocus();
+});
+
+it("disables all options while saving", () => {
+  render(<UserTypeSelector disabled value="user" />);
+  screen.getAllByRole("radio").forEach((radio) => expect(radio).toBeDisabled());
+});

package/src/users/components/__tests__/UsersAndGroups.spec.js

@@ -22,6 +22,13 @@ jest.mock("../../../groups/components/GroupCards", () => ({
     return <div>GroupCards</div>;
   },
 }));
+jest.mock(
+  "../NewUser",
+  () =>
+    function NewUser() {
+      return <div>NewUserModal</div>;
+    },
+);
 
 describe("<UsersAndGroups />", () => {
   it("renders correctly with default route", async () => {
@@ -45,4 +52,14 @@ describe("<UsersAndGroups />", () => {
     await waitForLoad(rendered);
     expect(rendered.container).toMatchSnapshot();
   });
+
+  it("renders UserCards behind the new user modal", async () => {
+    const rendered = render(<UsersAndGroups />, {
+      routes: [`${USERS}/new`],
+    });
+    await waitForLoad(rendered);
+
+    expect(rendered.getByText("UserCards")).toBeInTheDocument();
+    expect(rendered.getByText("NewUserModal")).toBeInTheDocument();
+  });
 });