@griddo/ax 10.1.96 → 10.2.0

package/src/__tests__/modules/Users/UserCreate/SiteItem/RolesModal/RoleItem/RoleItem.test.tsx

@@ -0,0 +1,107 @@
+import React from "react";
+import { ThemeProvider } from "styled-components";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { parseTheme } from "@ax/helpers";
+import globalTheme from "@ax/themes/theme.json";
+import RoleItem, { IRoleItemProps } from "./../../../../../../../modules/Users/UserCreate/SiteItem/RolesModal/RoleItem";
+
+const onClickMock = jest.fn();
+const onChangeMock = jest.fn();
+const defaultProps: IRoleItemProps = {
+  role: {
+    id: 1,
+    name: "Administrator",
+    hex: "#C7ECF8",
+    description:
+      "You can manage all of your site's settings, users and roles. You can create and publish all pages of your site.",
+    permissions: { totalPermissions: "78/78", sitePermissions: [], globalPermissions: [] },
+    active: true,
+    users: [],
+  },
+  onChange: onChangeMock,
+  onClick: onClickMock,
+};
+
+afterEach(() => {
+  jest.clearAllMocks();
+  cleanup();
+});
+
+describe("RoleItem module rendering", () => {
+  it("should render the componet with check", async () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <RoleItem {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByTestId("roles-modal-item")).toBeTruthy();
+    expect(screen.getByLabelText(defaultProps.role.name)).toBeTruthy();
+  });
+
+  it("should render the componet with check checked", async () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <RoleItem {...defaultProps} isChecked={true} />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByTestId("roles-modal-item")).toBeTruthy();
+    const check = screen.getByLabelText(defaultProps.role.name);
+    expect(check).toBeTruthy();
+    expect(check).toBeChecked();
+  });
+
+  it("should render the componet without check", async () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <RoleItem {...defaultProps} isReadOnly={true} />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByTestId("roles-modal-item")).toBeTruthy();
+    expect(screen.queryByLabelText(defaultProps.role.name)).toBeFalsy();
+  });
+
+  it("should render the componet selected", async () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <RoleItem {...defaultProps} isSelected={true} />
+      </ThemeProvider>
+    );
+
+    const item = screen.getByTestId("roles-modal-item");
+    expect(item).toBeTruthy();
+    expect(item).toHaveStyle("border: 2px solid #5057ff");
+  });
+});
+
+describe("RoleItem module events", () => {
+  it("should call onClick on title click", async () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <RoleItem {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const titleComponent = screen.getByTestId("roles-modal-item-title");
+    expect(titleComponent).toBeTruthy();
+    fireEvent.click(titleComponent);
+    expect(onClickMock).toBeCalledTimes(1);
+  });
+
+  it("should call onChange on check change", async () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <RoleItem {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const check = screen.getByLabelText(defaultProps.role.name);
+    expect(check).toBeTruthy();
+    fireEvent.click(check);
+    expect(onChangeMock).toBeCalledTimes(1);
+  });
+});

package/src/__tests__/modules/Users/UserCreate/SiteItem/RolesModal/RolesModal.test.tsx

@@ -0,0 +1,159 @@
+import React from "react";
+import { ThemeProvider } from "styled-components";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { parseTheme } from "@ax/helpers";
+import globalTheme from "@ax/themes/theme.json";
+import RolesModal, { IRolesModalProps } from "./../../../../../../modules/Users/UserCreate/SiteItem/RolesModal";
+
+const addRolesMock = jest.fn();
+const toggleModalMock = jest.fn();
+const defaultProps: IRolesModalProps = {
+  roles: [
+    {
+      id: 1,
+      name: "Administrator",
+      hex: "#C7ECF8",
+      description:
+        "You can manage all of your site's settings, users and roles. You can create and publish all pages of your site.",
+      permissions: { totalPermissions: "78/78", sitePermissions: [], globalPermissions: [] },
+      active: true,
+      users: [],
+    },
+    {
+      id: 2,
+      name: "Constructor",
+      hex: "#B5FBFF",
+      description:
+        "You can edit your website, add pages, modules, modify URLs, menus, colours and themes, html tags. You don't manage users, or manage the site configuration.",
+      permissions: { totalPermissions: "49/78", sitePermissions: [], globalPermissions: [] },
+      active: true,
+      users: [],
+    },
+    {
+      id: 3,
+      name: "Editor",
+      hex: "#E2EE9F",
+      description: "You have permission to view, add and edit site content, such as pages and blocks.",
+      permissions: { totalPermissions: "21/78", sitePermissions: [], globalPermissions: [] },
+      active: false,
+      users: [],
+    },
+  ],
+  addRoles: addRolesMock,
+  toggleModal: toggleModalMock,
+  isOpen: true,
+};
+
+afterEach(() => {
+  jest.clearAllMocks();
+  cleanup();
+});
+
+describe("RolesModal module rendering", () => {
+  it("should render the componet with active roles", async () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <RolesModal {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.queryByTestId("modal-roles-content")).toBeTruthy();
+    expect(screen.queryAllByTestId("roles-modal-item").length).toBe(2);
+  });
+
+  it("should render the componet without roles", async () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <RolesModal {...defaultProps} roles={undefined} />
+      </ThemeProvider>
+    );
+
+    expect(screen.queryByTestId("modal-roles-content")).toBeTruthy();
+    expect(screen.queryAllByTestId("roles-modal-item").length).toBe(0);
+  });
+
+  it("should render the componet with roles selected", async () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <RolesModal {...defaultProps} selectedRoles={[1]} />
+      </ThemeProvider>
+    );
+
+    expect(screen.queryByTestId("modal-roles-content")).toBeTruthy();
+    const check = screen.getByLabelText("Administrator");
+    expect(check).toBeChecked();
+  });
+});
+
+describe("RolesModal module events", () => {
+  it("should render permisions when role is selected", async () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <RolesModal {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.queryByTestId("permissions-wrapper")).toHaveTextContent("Administrator");
+    const roleItems = screen.queryAllByTestId("roles-modal-item-title");
+    fireEvent.click(roleItems[1]);
+
+    expect(screen.queryByTestId("permissions-wrapper")).toHaveTextContent("Constructor");
+  });
+
+  it("should check item, call addRoles with roles checked and close modal", async () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <RolesModal {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    fireEvent.click(screen.getByLabelText("Administrator"));
+    fireEvent.click(screen.getByText("Add User Role"));
+
+    expect(addRolesMock).toBeCalledWith([1]);
+    expect(toggleModalMock).toBeCalledTimes(1);
+  });
+
+  it("should uncheck item, call addRoles with roles checked and close modal", async () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <RolesModal {...defaultProps} selectedRoles={[1]} />
+      </ThemeProvider>
+    );
+
+    fireEvent.click(screen.getByLabelText("Administrator"));
+    fireEvent.click(screen.getByLabelText("Constructor"));
+    fireEvent.click(screen.getByText("Add User Role"));
+
+    expect(addRolesMock).toBeCalledWith([2]);
+    expect(toggleModalMock).toBeCalledTimes(1);
+  });
+
+  it("should call addRoles with empty array", async () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <RolesModal {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    fireEvent.click(screen.getByText("Add User Role"));
+
+    expect(addRolesMock).toBeCalledWith([]);
+    expect(toggleModalMock).toBeCalledTimes(1);
+  });
+
+  it("should call addRoles with previously selected role", async () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <RolesModal {...defaultProps} selectedRoles={[2]} />
+      </ThemeProvider>
+    );
+
+    fireEvent.click(screen.getByText("Add User Role"));
+
+    expect(addRolesMock).toBeCalledWith([2]);
+    expect(toggleModalMock).toBeCalledTimes(1);
+  });
+});

package/src/__tests__/modules/Users/UserCreate/SiteItem/SiteItem.test.tsx

@@ -0,0 +1,175 @@
+import React from "react";
+import { ThemeProvider } from "styled-components";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { parseTheme } from "@ax/helpers";
+import globalTheme from "@ax/themes/theme.json";
+import SiteItem, { ISiteItemProps } from "./../../../../../modules/Users/UserCreate/SiteItem";
+
+const itemOnChangeMock = jest.fn();
+const addRolesMock = jest.fn();
+const defaultProps: ISiteItemProps = {
+  item: { id: 1, name: "Site 1", onChange: itemOnChangeMock },
+  sites: [1, 2, 3],
+  roles: [
+    {
+      id: 1,
+      name: "Administrator",
+      hex: "#C7ECF8",
+      description:
+        "You can manage all of your site's settings, users and roles. You can create and publish all pages of your site.",
+      permissions: { totalPermissions: "78/78", sitePermissions: [], globalPermissions: [] },
+      active: true,
+      users: [],
+    },
+    {
+      id: 2,
+      name: "Constructor",
+      hex: "#B5FBFF",
+      description:
+        "You can edit your website, add pages, modules, modify URLs, menus, colours and themes, html tags. You don't manage users, or manage the site configuration.",
+      permissions: { totalPermissions: "49/78", sitePermissions: [], globalPermissions: [] },
+      active: true,
+      users: [],
+    },
+  ],
+  addRoles: addRolesMock,
+};
+
+afterEach(() => {
+  jest.clearAllMocks();
+  cleanup();
+});
+
+describe("SiteItem module rendering", () => {
+  it("should render the componet", async () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SiteItem {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByTestId("user-site-item")).toBeTruthy();
+    expect(screen.getByTestId("check-cell")).toBeTruthy();
+    expect(screen.getByTestId("action-cell")).toBeTruthy();
+    expect(screen.getByText("Add Roles")).toBeTruthy();
+    expect(screen.queryByTestId("wrapper-cell-featured")).toBeFalsy();
+    expect(screen.getByText(defaultProps.item.name)).toBeInTheDocument();
+  });
+
+  it("should render the componet readonly", async () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SiteItem {...defaultProps} readOnly={true} />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByTestId("user-site-item")).toBeTruthy();
+    expect(screen.queryByTestId("check-cell")).toBeFalsy();
+    expect(screen.queryByTestId("action-cell")).toBeFalsy();
+  });
+
+  it("should render the componet disabled", async () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SiteItem {...defaultProps} disabled={true} />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByTestId("user-site-item")).toBeTruthy();
+    const check = screen.getByLabelText(defaultProps.item.name);
+    expect(check).toBeTruthy();
+    expect(check).toBeDisabled();
+  });
+
+  it("should render the componet featured", async () => {
+    const itemProps = { ...defaultProps, featured: true, description: "descripción del item" };
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SiteItem {...itemProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByTestId("user-site-item")).toBeTruthy();
+    expect(screen.getByTestId("wrapper-cell-featured")).toBeTruthy();
+    expect(screen.getByTestId("check-cell")).toBeTruthy();
+    expect(screen.queryByTestId("action-cell")).toBeFalsy();
+    expect(screen.getByText(itemProps.description)).toBeInTheDocument();
+    expect(screen.getByText("Add Roles")).toBeTruthy();
+  });
+
+  it("should render the componet with roles", async () => {
+    const itemProps = { ...defaultProps, selected: [1] };
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SiteItem {...itemProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByTestId("user-site-item")).toBeTruthy();
+    expect(screen.queryByText("Add Roles")).toBeFalsy();
+    expect(screen.getByText("Edit Roles")).toBeTruthy();
+    expect(screen.getByText("Administrator")).toBeTruthy();
+  });
+});
+
+describe("SiteItem module events", () => {
+  it("should call onChange", async () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SiteItem {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const checkCell = screen.getByTestId("check-cell");
+    expect(checkCell).toBeTruthy();
+    fireEvent.click(checkCell);
+    expect(itemOnChangeMock).toBeCalledTimes(1);
+  });
+
+  it("should not call onChange if readOnly", async () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SiteItem {...defaultProps} readOnly={true} />
+      </ThemeProvider>
+    );
+
+    const nameCell = screen.getByTestId("name-cell");
+    expect(nameCell).toBeTruthy();
+    fireEvent.click(nameCell);
+    expect(itemOnChangeMock).toBeCalledTimes(0);
+  });
+
+  it("should open modal onClick", async () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SiteItem {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.queryByTestId("modal-roles-content")).toBeFalsy();
+    const button = screen.getByText("Add Roles");
+    fireEvent.click(button);
+
+    expect(screen.queryByTestId("modal-roles-content")).toBeTruthy();
+  });
+
+  it("should call add roles with site and roles selected", async () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SiteItem {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.queryByTestId("modal-roles-content")).toBeFalsy();
+    const button = screen.getByText("Add Roles");
+    fireEvent.click(button);
+
+    expect(screen.queryByTestId("modal-roles-content")).toBeTruthy();
+    fireEvent.click(screen.getByLabelText("Administrator"));
+    fireEvent.click(screen.getByText("Add User Role"));
+
+    expect(addRolesMock).toBeCalledWith({ siteId: 1, roles: [1] });
+  });
+});