@griddo/ax 10.1.96 → 10.2.0

package/src/__tests__/modules/Users/Roles/BulkHeader/BulkHeader.test.tsx

@@ -0,0 +1,158 @@
+import React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { render, screen, cleanup, act, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { CalledWithMock, mock } from "jest-mock-extended";
+
+import { parseTheme } from "@ax/helpers";
+
+import BulkHeader, { IBulkHeaderProps } from "@ax/modules/Users/Roles/BulkHeader";
+
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+const defaultProps = mock<IBulkHeaderProps>();
+defaultProps.selectedRoles = [];
+defaultProps.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: [],
+  },
+];
+
+describe("BulkHeader component rendering", () => {
+  it("should render bulk header", async () => {
+    defaultProps.showBulk = true;
+    defaultProps.checkState.isAllSelected = true;
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <BulkHeader {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+    const bulkOptions = screen.getByTestId("bulk-header-wrapper");
+    expect(bulkOptions).toBeTruthy();
+  });
+
+  it("should render bulk header options", async () => {
+    defaultProps.showBulk = true;
+    defaultProps.checkState.isAllSelected = true;
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <BulkHeader {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+    const buttonTexts = screen.getAllByTestId("button-text");
+    expect(buttonTexts.length).toEqual(1);
+  });
+
+  it("should render underline when isScrolling ", async () => {
+    defaultProps.showBulk = false;
+    defaultProps.isScrolling = true;
+    defaultProps.sortedListStatus = { isAscending: false, sortedByTitle: false };
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <BulkHeader {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+    const tableHeader = screen.getByTestId("roles-table-header");
+    expect(tableHeader).toHaveStyle("border-bottom: 1px solid #DBDDE9");
+  });
+
+  it("should render users filter when isSiteView ", async () => {
+    defaultProps.showBulk = false;
+    defaultProps.sortedListStatus = { isAscending: false, sortedByTitle: false, sortedByUsers: false };
+    defaultProps.isSiteView = true;
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <BulkHeader {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    const usersFilter = screen.getByTestId("users-filter-header");
+    expect(usersFilter).toBeTruthy();
+  });
+});
+
+describe("BulkHeader module events", () => {
+  it("should call deactivate role on click option", async () => {
+    defaultProps.showBulk = true;
+    defaultProps.isSiteView = false;
+    defaultProps.checkState.isAllSelected = true;
+    const activateRolesMock = jest.fn();
+
+    defaultProps.activateRoles = activateRolesMock as CalledWithMock<void, [active: boolean]> &
+      ((active: boolean) => void);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <BulkHeader {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+    const buttonTexts = screen.getAllByTestId("button-text");
+    expect(buttonTexts.length).toEqual(1);
+    fireEvent.click(buttonTexts[0]);
+    expect(activateRolesMock).toHaveBeenCalled();
+  });
+
+  it("should call activate role on click option", async () => {
+    defaultProps.showBulk = true;
+    defaultProps.checkState.isAllSelected = true;
+    const activateRolesMock = jest.fn();
+
+    defaultProps.activateRoles = activateRolesMock as CalledWithMock<void, [active: boolean]> &
+      ((active: boolean) => void);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <BulkHeader {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+    const buttonTexts = screen.getAllByTestId("button-text");
+    expect(buttonTexts.length).toEqual(1);
+    fireEvent.click(buttonTexts[0]);
+    expect(activateRolesMock).toHaveBeenCalled();
+  });
+});