@truedat/auth 7.5.9 → 7.5.11

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

@@ -1,40 +1,10 @@
-import React from "react";
-import { waitFor } from "@testing-library/react";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
 import InitialUser from "../InitialUser";
 
-const renderOpts = {
-  messages: {
-    en: {
-      "actions.cancel": "cancel",
-      "actions.save": "save",
-      "form.validation.minLength": "{prop} min length {value}",
-      "form.validation.required": "{prop} required",
-      "users.actions.create_admin_account": "Configure Admin Account",
-      "user.form.email": "Email address",
-      "user.form.external_id": "External ID",
-      "user.form.full_name": "Full name",
-      "user.form.groups": "Groups",
-      "user.form.password": "password",
-      "user.form.user_name": "Username",
-      "user.form.password_confirmation": "confirm",
-      "user.form.placeholder.email": "pperez@example.com",
-      "user.form.placeholder.external_id": "pperez",
-      "user.form.placeholder.full_name": "Pepe Perez",
-      "user.form.placeholder.user_name": "pperez",
-      "user.form.placeholder.groups": "Madrid DG",
-      "user.form.role": "role",
-      "user.type.admin": "admin",
-      "user.type.service": "service",
-      "user.type.user": "user",
-      "user.type.agent": "Ai Agent",
-    },
-  },
-};
-
 describe("<InitialUser />", () => {
   it("matches the latest snapshot", async () => {
-    const { container } = render(<InitialUser />, renderOpts);
-    await waitFor(() => expect(container).toMatchSnapshot());
+    const rendered = render(<InitialUser />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,41 +1,10 @@
-import React from "react";
-import { waitFor } from "@testing-library/react";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
 import NewUser from "../NewUser";
 
-const renderOpts = {
-  messages: {
-    en: {
-      "actions.cancel": "cancel",
-      "actions.save": "save",
-      "form.validation.minLength": "{prop} min length {value}",
-      "form.validation.required": "{prop} required",
-      "navigation.members.users": "Users",
-      "user.form.email": "Email address",
-      "user.form.external_id": "External ID",
-      "user.form.full_name": "Full name",
-      "user.form.groups": "Groups",
-      "user.form.password": "password",
-      "user.form.user_name": "Username",
-      "user.form.password_confirmation": "confirm",
-      "user.form.placeholder.email": "pperez@example.com",
-      "user.form.placeholder.external_id": "pperez",
-      "user.form.placeholder.full_name": "Pepe Perez",
-      "user.form.placeholder.user_name": "pperez",
-      "user.form.placeholder.groups": "Madrid DG",
-      "user.form.role": "role",
-      "user.type.admin": "admin",
-      "user.type.service": "service",
-      "user.type.user": "user",
-      "user.type.agent": "Ai Agent",
-      "users.actions.create": "create",
-    },
-  },
-};
-
 describe("<NewUser />", () => {
   it("matches the latest snapshot", async () => {
-    const { container } = render(<NewUser />, renderOpts);
-    await waitFor(() => expect(container).toMatchSnapshot());
+    const rendered = render(<NewUser />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,75 +1,57 @@
-import React from "react";
+import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { render } from "@truedat/test/render";
-import { waitFor } from "@testing-library/react";
 import { Password } from "../Password";
 
 describe("<Password />", () => {
   const updatePassword = jest.fn();
 
-  const renderOpts = {
-    messages: {
-      en: {
-        "actions.cancel": "Cancel",
-        "form.validation.minLength": "{prop} min length {value}",
-        "form.validation.required": "{prop} required",
-        "login.form.re_password.label": "Re password",
-        "user.password.cancel": "Cancel",
-        "user.password.change": "Change password",
-        "user.password.current": "Current password",
-        "user.password.header": "Password",
-        "user.password.must.match": "Passwords must match",
-        "user.password.new_password": "New password",
-        "user.password.save": "Save",
-        "user.password.success.change": "The password has been updated"
-      }
-    }
-  };
-
   it("matches the latest snapshot", async () => {
     const props = {};
-    const { container } = render(<Password {...props} />, renderOpts);
-    await waitFor(() => expect(container).toMatchSnapshot());
+    const rendered = render(<Password {...props} />);
+    await waitFor(() => expect(rendered.container).toMatchSnapshot());
   });
 
   it("calls updatePassword for non admin user", async () => {
     const props = { userName: "joe", authUserName: "joe", updatePassword };
-    const { getByLabelText, getByRole, findByRole } = render(
-      <Password {...props} />,
-      renderOpts
-    );
+    const rendered = render(<Password {...props} />);
+    const user = userEvent.setup({ delay: null });
 
     // Submit button should initially be disabled
     await waitFor(() =>
-      expect(getByRole("button", { name: /Save/ })).toBeDisabled()
+      expect(rendered.getByRole("button", { name: /save/i })).toBeDisabled()
     );
 
-    userEvent.type(
-      getByLabelText("Current password", { selector: "input" }),
+    await user.type(
+      rendered.getByLabelText(/user.password.current/i, { selector: "input" }),
       "oldPassword"
     );
-    userEvent.type(
-      getByLabelText("New password", { selector: "input" }),
+    await user.type(
+      rendered.getByLabelText(/user.password.new_password/i, {
+        selector: "input",
+      }),
       "Va1id.pa$$w0rd!"
     );
-    userEvent.type(
-      getByLabelText("Re password", { selector: "input" }),
+    await user.type(
+      rendered.getByLabelText(/login.form.re_password.label/i, {
+        selector: "input",
+      }),
       "Va1id.pa$$w0rd!"
     );
 
     await waitFor(() =>
-      expect(getByRole("button", { name: /Save/ })).not.toBeDisabled()
+      expect(rendered.getByRole("button", { name: /save/i })).not.toBeDisabled()
     );
 
     // Submit
-    userEvent.click(await findByRole("button", { name: /Save/ }));
+    await user.click(await rendered.findByRole("button", { name: /save/i }));
 
     await waitFor(() =>
       expect(updatePassword).toHaveBeenCalledWith({
         user: {
           old_password: "oldPassword",
-          new_password: "Va1id.pa$$w0rd!"
-        }
+          new_password: "Va1id.pa$$w0rd!",
+        },
       })
     );
   });
@@ -79,82 +61,90 @@ describe("<Password />", () => {
       id: 42,
       userName: "joe",
       authUserName: "bob",
-      updatePassword
+      updatePassword,
     };
-    const { queryByLabelText, getByLabelText, getByRole, findByRole } = render(
-      <Password {...props} />,
-      renderOpts
-    );
+    const rendered = render(<Password {...props} />);
+    const user = userEvent.setup({ delay: null });
 
     // Submit button should initially be disabled
     await waitFor(() =>
-      expect(getByRole("button", { name: /Save/ })).toBeDisabled()
+      expect(rendered.getByRole("button", { name: /save/i })).toBeDisabled()
     );
 
     // No current password id needed for admin users
     expect(
-      await queryByLabelText("Current password", { selector: "input" })
+      await rendered.queryByLabelText(/user.password.current/i, {
+        selector: "input",
+      })
     ).toBeNull();
 
-    userEvent.type(
-      getByLabelText("New password", { selector: "input" }),
+    await user.type(
+      rendered.getByLabelText(/user.password.new_password/i, {
+        selector: "input",
+      }),
       "Va1id.pa$$w0rd!"
     );
-    userEvent.type(
-      getByLabelText("Re password", { selector: "input" }),
+    await user.type(
+      rendered.getByLabelText(/login.form.re_password.label/i, {
+        selector: "input",
+      }),
       "Va1id.pa$$w0rd!"
     );
 
     await waitFor(() =>
-      expect(getByRole("button", { name: /Save/ })).not.toBeDisabled()
+      expect(rendered.getByRole("button", { name: /save/i })).not.toBeDisabled()
     );
 
     // Submit
-    userEvent.click(await findByRole("button", { name: /Save/ }));
+    await user.click(await rendered.findByRole("button", { name: /save/i }));
 
     await waitFor(() =>
       expect(updatePassword).toHaveBeenCalledWith({
         user: {
           id: 42,
-          new_password: "Va1id.pa$$w0rd!"
-        }
+          new_password: "Va1id.pa$$w0rd!",
+        },
       })
     );
   });
 
   it("requires current password to have min length", async () => {
     const props = { userName: "joe", authUserName: "joe", updatePassword };
-    const { getByLabelText, findByText } = render(
-      <Password {...props} />,
-      renderOpts
-    );
+    const rendered = render(<Password {...props} />);
+    const user = userEvent.setup({ delay: null });
 
-    userEvent.type(
-      getByLabelText("Current password", { selector: "input" }),
+    await user.type(
+      rendered.getByLabelText(/user.password.current/i, { selector: "input" }),
       "short"
     );
 
-    expect(await findByText(/Current password min length 6/)).not.toBeNull();
+    expect(
+      await rendered.findByText(/form.validation.minLength/i)
+    ).not.toBeNull();
   });
 
   it("requires new password to password confirmation to be the same", async () => {
     const props = { userName: "joe", authUserName: "joe", updatePassword };
-    const { getByLabelText, findByText } = render(
-      <Password {...props} />,
-      renderOpts
-    );
+    const rendered = render(<Password {...props} />);
+    const user = userEvent.setup({ delay: null });
 
     await waitFor(() => {
-      userEvent.type(
-        getByLabelText("New password", { selector: "input" }),
+      user.type(
+        rendered.getByLabelText(/user.password.new_password/i, {
+          selector: "input",
+        }),
         "Va1id.pa$$w0rd!"
       );
-      userEvent.type(
-        getByLabelText("Re password", { selector: "input" }),
+      user.type(
+        rendered.getByLabelText(/login.form.re_password.label/i, {
+          selector: "input",
+        }),
         "different"
       );
     });
 
-    expect(await findByText(/Passwords must match/)).not.toBeNull();
+    expect(
+      await rendered.findByText(/user.password.must.match/i)
+    ).not.toBeNull();
   });
 });

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

@@ -1,10 +1,9 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import User from "../User";
 
 describe("<User />", () => {
   const user = {
-    id: 1,
+    id: "1",
     user_name: "joe",
     role: "admin",
     full_name: "Joe Bloggs",

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

@@ -1,17 +1,15 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render } from "@truedat/test/render";
 import { UserAclRow } from "../UserAclRow";
 
 describe("<UserAclRow />", () => {
   const acl = {
     resource: "resource1",
-    role: "role1"
+    role: "role1",
   };
 
-  const props = { acl };
-
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(<UserAclRow {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const props = { acl };
+    const rendered = render(<UserAclRow {...props} />);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
 import UserAcls from "../UserAcls";
@@ -8,23 +7,23 @@ const renderOpts = {
     en: {
       "user.acl.role": "role",
       "user.acl.domain": "domain",
-      "user.acl": "acl"
-    }
+      "user.acl": "acl",
+    },
   },
   state: {
     user: {
       acls: [
         {
           resource: { id: 1, name: "resource1", type: "domain" },
-          role: { id: 2, name: "role1" }
+          role: { id: 2, name: "role1" },
         },
         {
           resource: { id: 2, name: "resource2", type: "domain" },
-          role: { id: 3, name: "role2" }
-        }
-      ]
-    }
-  }
+          role: { id: 3, name: "role2" },
+        },
+      ],
+    },
+  },
 };
 
 describe("<UserAcls />", () => {

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

@@ -1,17 +1,16 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render } from "@truedat/test/render";
 import { UserActions } from "../UserActions";
 
 describe("<UserActions />", () => {
   const user = {
     id: "2",
-    userName: "userTest"
+    userName: "userTest",
   };
   const deleteUser = jest.fn();
 
   const props = { user, deleteUser };
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(<UserActions {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<UserActions {...props} />);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,26 +1,26 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render } from "@truedat/test/render";
 import { UserCard } from "../UserCard";
 
 describe("<UserCard />", () => {
   const deleteUser = jest.fn();
   const user = {
-    id: 1,
+    id: "1",
     user_name: "joe",
     role: "admin",
     full_name: "Joe Bloggs",
     email: "joe@bloggs.net",
     uid: "uID00001",
   };
-  const props_fullname = { user, deleteUser, showFullname: true };
-  const props_uid = { user, deleteUser, showFullname: false };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<UserCard {...props_fullname} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot when showing full name", () => {
+    const props = { user, deleteUser, showFullname: true };
+    const rendered = render(<UserCard {...props} />);
+    expect(rendered.container).toMatchSnapshot();
   });
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<UserCard {...props_uid} />);
-    expect(wrapper).toMatchSnapshot();
+
+  it("matches the latest snapshot when showing UID", () => {
+    const props = { user, deleteUser, showFullname: false };
+    const rendered = render(<UserCard {...props} />);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,62 +1,70 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { Message } from "semantic-ui-react";
-import { intl } from "@truedat/test/intl-stub";
+import userEvent from "@testing-library/user-event";
+import { render, waitForLoad } from "@truedat/test/render";
 import { UserCards } from "../UserCards";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
 describe("<UserCards />", () => {
   const users = [
     {
-      id: 1,
+      id: "1",
       email: "email@email.com",
       full_name: "Pepito Pérez",
       user_name: "user",
-      role: "admin"
+      role: "admin",
     },
     {
-      id: 2,
+      id: "2",
       email: "email2@email.com",
       full_name: "Miguel Muñoz",
       user_name: "user2",
-      role: "user"
+      role: "user",
     },
     {
-      id: 3,
+      id: "3",
       email: "email3@email.com",
       full_name: "Rosa Martin",
       user_name: "user3",
-      role: "user"
-    }
+      role: "user",
+    },
   ];
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<UserCards users={users} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<UserCards users={users} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("contains a card for each user", () => {
+  it("contains a card for each user", async () => {
     const props = { users };
-    const wrapper = shallow(<UserCards {...props} />);
-    expect(wrapper.findWhere(n => n.prop("user"))).toHaveLength(3);
+    const rendered = render(<UserCards {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container.querySelectorAll(".card")).toHaveLength(3);
   });
 
-  it("contains a card for each use matching the filter", () => {
+  it("contains a card for each user matching the filter", async () => {
     const props = { users };
-    const wrapper = shallow(<UserCards {...props} />);
-    wrapper.find("SearchInput").prop("onChange")({}, { value: " MUÑoZ  " });
-    expect(wrapper.findWhere(n => n.prop("user"))).toHaveLength(1);
-    expect(wrapper.find(Message)).toHaveLength(0);
+    const rendered = render(<UserCards {...props} />);
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
+    const searchInput = rendered.getByPlaceholderText(/search/i);
+    await user.type(searchInput, " MUÑoZ  ");
+
+    expect(rendered.container.querySelectorAll(".card")).toHaveLength(1);
+    expect(
+      rendered.queryByText(/user.search.no_results/i)
+    ).not.toBeInTheDocument();
   });
 
-  it("contains a message when no users are found", () => {
+  it("contains a message when no users are found", async () => {
     const props = { users };
-    const wrapper = shallow(<UserCards {...props} />);
-    wrapper.find("SearchInput").prop("onChange")({}, { value: "foo" });
-    expect(wrapper.findWhere(n => n.prop("user"))).toHaveLength(0);
-    expect(wrapper.find(Message)).toHaveLength(1);
+    const rendered = render(<UserCards {...props} />);
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
+    const searchInput = rendered.getByPlaceholderText(/search/i);
+    await user.type(searchInput, "foo");
+
+    expect(rendered.container.querySelectorAll(".card")).toHaveLength(0);
+    expect(rendered.getByText(/user.search.no_results/i)).toBeInTheDocument();
   });
 });

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

@@ -1,43 +1,33 @@
-import React from "react";
 import userEvent from "@testing-library/user-event";
 import { waitFor } from "@testing-library/react";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
 import { domainsMock } from "@truedat/test/mocks";
 import { UserDomainsFilter } from "../UserDomainsFilter";
 
 describe("<UserDomainsFilter />", () => {
   const props = { setDashboardDomains: jest.fn() };
-  const mocks = [domainsMock({ action: "viewDomain" })];
+  const renderOpts = {
+    mocks: [domainsMock({ action: "viewDomain" })],
+  };
 
   it("matches the latest snapshot", async () => {
-    const { container, queryByText } = render(
-      <UserDomainsFilter {...props} />,
-      { mocks }
-    );
-    await waitFor(() => {
-      expect(queryByText(/fooDomain/)).toBeInTheDocument();
-    });
-    expect(container).toMatchSnapshot();
+    const rendered = render(<UserDomainsFilter {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("calls setDashboardDomains when clicking button", async () => {
-    const { queryByText, findByText } = render(
-      <UserDomainsFilter {...props} />,
-      { mocks }
-    );
-
-    await waitFor(() => {
-      expect(queryByText(/fooDomain/)).toBeInTheDocument();
-    });
+    const rendered = render(<UserDomainsFilter {...props} />, renderOpts);
+    await waitForLoad(rendered);
 
-    userEvent.click(await findByText("Filter"));
+    userEvent.click(await rendered.findByText(/userDomainsFilter.button/i));
 
     await waitFor(() => {
       expect(props.setDashboardDomains).toHaveBeenCalledWith([1, 2, 3, 33]);
     });
 
-    userEvent.click(await findByText("fooDomain"));
-    userEvent.click(await findByText("Filter"));
+    userEvent.click(await rendered.findByText(/foodomain/i));
+    userEvent.click(await rendered.findByText(/userDomainsFilter.button/i));
 
     await waitFor(() => {
       expect(props.setDashboardDomains).toHaveBeenCalledWith([1]);