@griddo/ax 1.73.28 → 1.74.0

package/src/__tests__/components/Login/RecoveryModal/RecoveryModal.test.tsx

@@ -0,0 +1,185 @@
+import * as React from "react";
+import Axios from "axios";
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen, fireEvent, waitFor, act } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { parseTheme } from "@ax/helpers";
+import RecoveryModal, { IRecoveryProps } from "@ax/components/Login/RecoveryModal";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+jest.mock("axios"); // This overwrites axios methods with jest Mock
+const mockedAxios = Axios as jest.MockedFunction<typeof Axios>;
+
+describe("Recovery modal component rendering", () => {
+  it("should render the component if closed", () => {
+    const defaultProps: IRecoveryProps = {
+      isOpen: true,
+      toggleModal: jest.fn(),
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <RecoveryModal {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const modalContent = screen.getByTestId("recovery-modal-content");
+    expect(modalContent).toBeTruthy();
+  });
+
+  it("should not render the component content if closed", () => {
+    const defaultProps: IRecoveryProps = {
+      isOpen: false,
+      toggleModal: jest.fn(),
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <RecoveryModal {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const modalContent = screen.queryByTestId("recovery-modal-content");
+    expect(modalContent).toBeFalsy();
+  });
+});
+
+describe("Login component events", () => {
+  it("should call toggleModal on cancel button click", () => {
+    const toggleModalMock = jest.fn();
+    const defaultProps: IRecoveryProps = {
+      isOpen: true,
+      toggleModal: toggleModalMock,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <RecoveryModal {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const button = screen.getByText("Cancel");
+    expect(button).toBeTruthy();
+    fireEvent.click(button);
+
+    expect(toggleModalMock).toBeCalledTimes(1);
+  });
+
+  it("should disable button if email is not valid", () => {
+    const toggleModalMock = jest.fn();
+    const defaultProps: IRecoveryProps = {
+      isOpen: true,
+      toggleModal: toggleModalMock,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <RecoveryModal {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const input = screen.getByLabelText("email");
+    expect(input).toBeTruthy();
+    fireEvent.change(input, { target: { value: "asdfasfsdf" } });
+
+    const button = screen.getByText("Reset Password").closest("button");
+    expect(button).toBeTruthy();
+    expect(button).toBeDisabled();
+  });
+
+  it("should enable button if email is valid", async () => {
+    const toggleModalMock = jest.fn();
+    const defaultProps: IRecoveryProps = {
+      isOpen: true,
+      toggleModal: toggleModalMock,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <RecoveryModal {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const input = screen.getByLabelText("email");
+    expect(input).toBeTruthy();
+    fireEvent.change(input, { target: { value: "prueba@email.com" } });
+
+    const button = screen.getByText("Reset Password").closest("button");
+
+    await waitFor(() => expect(button).not.toBeDisabled(), {
+      timeout: 5000,
+    });
+  });
+
+  it("should hide input if api response is ok", async () => {
+    const defaultProps: IRecoveryProps = {
+      isOpen: true,
+      toggleModal: jest.fn(),
+    };
+
+    const data = { data: [], status: 200, statusText: "Ok", headers: {}, config: {} };
+    mockedAxios.mockResolvedValue(data);
+
+    const Component = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <RecoveryModal {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const { rerender } = render(Component);
+
+    const input = screen.getByLabelText("email");
+    expect(input).toBeTruthy();
+    fireEvent.change(input, { target: { value: "prueba@email.com" } });
+    const button = screen.getByTestId("button-default");
+
+    await waitFor(() => expect(screen.getByTestId("button-default")).not.toBeDisabled(), {
+      timeout: 5000,
+    });
+
+    button.click();
+
+    await act(async () => rerender(Component));
+
+    expect(screen.queryByLabelText("email")).toBeFalsy();
+
+    const button2 = screen.getByText("Got it!").closest("button");
+    expect(button2).toBeTruthy();
+  });
+
+  it("should show error if api response is not ok", async () => {
+    const defaultProps: IRecoveryProps = {
+      isOpen: true,
+      toggleModal: jest.fn(),
+    };
+
+    const data = { data: [], status: 400, statusText: "error", headers: {}, config: {} };
+    mockedAxios.mockResolvedValue(data);
+
+    const Component = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <RecoveryModal {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const { rerender } = render(Component);
+
+    const input = screen.getByLabelText("email");
+    expect(input).toBeTruthy();
+    fireEvent.change(input, { target: { value: "prueba@email.com" } });
+    const button = screen.getByTestId("button-default");
+
+    await waitFor(() => expect(screen.getByTestId("button-default")).not.toBeDisabled(), {
+      timeout: 5000,
+    });
+
+    button.click();
+
+    await act(async () => rerender(Component));
+
+    expect(screen.getByText("Sorry, this email doesn't exist.")).toBeTruthy();
+  });
+});

package/src/__tests__/components/TableFilters/LiveFilter/LiveFilter.test.tsx

@@ -16,7 +16,7 @@ const defaultProps = mock<ILiveFilterProps>();
 
 describe("LiveFilter component rendering", () => {
   it("should render live filter", async () => {
-    defaultProps.isStructuredData = false;
+    defaultProps.hasBasicStatus = false;
     defaultProps.value = "all";
     const filterItems = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
 
@@ -52,7 +52,7 @@ describe("LiveFilter component rendering", () => {
   });
 
   it("should render the component with no options", async () => {
-    defaultProps.isStructuredData = false;
+    defaultProps.hasBasicStatus = false;
     defaultProps.value = "all";
     const filterItems = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
 
@@ -90,7 +90,7 @@ describe("LiveFilter component rendering", () => {
 
 describe("LiveFilter events", () => {
   it("should render check group on click", async () => {
-    defaultProps.isStructuredData = false;
+    defaultProps.hasBasicStatus = false;
     defaultProps.value = "all";
     const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
 
@@ -131,7 +131,7 @@ describe("LiveFilter events", () => {
   });
 
   it("should check option on click", async () => {
-    defaultProps.isStructuredData = false;
+    defaultProps.hasBasicStatus = false;
     defaultProps.value = "all";
     const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
 
@@ -175,7 +175,7 @@ describe("LiveFilter events", () => {
   });
 
   it("should uncheck selected option on click and select 'All' option", async () => {
-    defaultProps.isStructuredData = false;
+    defaultProps.hasBasicStatus = false;
     defaultProps.value = "all";
     const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
 
@@ -224,7 +224,7 @@ describe("LiveFilter events", () => {
   });
 
   it("should call filterItems action on change", async () => {
-    defaultProps.isStructuredData = false;
+    defaultProps.hasBasicStatus = false;
     defaultProps.value = "all";
     const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
 

package/src/__tests__/modules/Sites/Sites.test.tsx

@@ -0,0 +1,259 @@
+import React from "react";
+import axios from "axios";
+
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@ax/helpers";
+import { mock } from "jest-mock-extended";
+import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import { Router } from "react-router-dom";
+
+import { history } from "@ax/routes";
+import globalTheme from "@ax/themes/theme.json";
+import { render, cleanup, screen, act } from "../../../../config/jest/test-utils";
+import Sites, { ISitesProps } from "./../../../modules/Sites";
+import { sitesDataMock, userDataMock } from "./../../../__mocks__/store/SitesList";
+import { sitesResponse, structuredDataResponse } from "./../../../__mocks__/axios/SitesList";
+
+afterEach(cleanup);
+jest.mock("axios");
+const mockedAxios = axios as jest.MockedFunction<typeof axios>;
+
+const defaultProps = mock<ISitesProps>();
+describe("Sites module rendering", () => {
+  it("should render loading component when is loading", async () => {
+    mockedAxios.mockResolvedValue(sitesResponse);
+    mockedAxios.mockResolvedValue(structuredDataResponse);
+
+    const initialStore = {
+      app: {
+        isLoading: true,
+        globalLangs: [
+          { id: 4, locale: "en_GB", language: "English", label: "EN", isDefault: true },
+          { id: 2, locale: "es_ES", language: "Spanish", label: "ES", isDefault: false },
+        ],
+        token: "eyJhbGciOiJIUzI",
+      },
+      users: userDataMock,
+      sites: {
+        totalItems: 0,
+        sites: [],
+        recentSites: [],
+      },
+      structuredData: { global: [], sites: [] },
+    };
+
+    const middlewares: any = [thunk];
+    const mockStore = configureStore(middlewares);
+    const store = mockStore(initialStore);
+
+    const initialState = { ...initialStore, ...defaultProps };
+
+    const Component = (
+      <Router history={history}>
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <Sites {...initialState} />
+        </ThemeProvider>
+      </Router>
+    );
+
+    await act(async () => {
+      render(Component, { store });
+    });
+
+    const loadingComponent = screen.getByTestId("loading-wrapper");
+
+    expect(loadingComponent).toBeTruthy();
+  });
+
+  it("should render recent sites list when there are recent sites", async () => {
+    mockedAxios.mockResolvedValue(sitesResponse);
+    mockedAxios.mockResolvedValue(structuredDataResponse);
+
+    const initialStore = {
+      app: {
+        isLoading: false,
+        globalLangs: [
+          { id: 4, locale: "en_GB", language: "English", label: "EN", isDefault: true },
+          { id: 2, locale: "es_ES", language: "Spanish", label: "ES", isDefault: false },
+        ],
+        token: "eyJhbGciOiJIUzI",
+      },
+      users: userDataMock,
+      sites: sitesDataMock,
+      structuredData: { global: [], sites: [] },
+    };
+
+    const middlewares: any = [thunk];
+    const mockStore = configureStore(middlewares);
+    const store = mockStore(initialStore);
+
+    const initialState = { ...initialStore, ...defaultProps };
+
+    const Component = (
+      <Router history={history}>
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <Sites {...initialState} />
+        </ThemeProvider>
+      </Router>
+    );
+
+    await act(async () => {
+      render(Component, { store });
+    });
+
+    const recentSitesList = screen.getByTestId("recent-sites-list");
+    const sectionHeader = screen.getByTestId("recent-sites-header");
+    const title = screen.getByTestId("recent-sites-title");
+    const recentSitesItemsWrapper = screen.getByTestId("recent-sites-items-wrapper");
+    const collapseButton = screen.getByTestId("recent-sites-collapse-button");
+    const hideLabel = screen.getByTestId("recent-sites-hide-label");
+
+    expect(recentSitesList).toBeTruthy();
+    expect(sectionHeader).toBeTruthy();
+    expect(title).toBeTruthy();
+    expect(recentSitesItemsWrapper).toBeTruthy();
+    expect(collapseButton).toBeTruthy();
+    expect(hideLabel).toBeTruthy();
+  });
+
+  it("should render default sites list view", async () => {
+    mockedAxios.mockResolvedValue(sitesResponse);
+    mockedAxios.mockResolvedValue(structuredDataResponse);
+
+    const initialStore = {
+      app: {
+        isLoading: false,
+        globalLangs: [
+          { id: 4, locale: "en_GB", language: "English", label: "EN", isDefault: true },
+          { id: 2, locale: "es_ES", language: "Spanish", label: "ES", isDefault: false },
+        ],
+        token: "eyJhbGciOiJIUzI",
+      },
+      users: userDataMock,
+      sites: sitesDataMock,
+      structuredData: { global: [], sites: [] },
+    };
+
+    const middlewares: any = [thunk];
+    const mockStore = configureStore(middlewares);
+    const store = mockStore(initialStore);
+
+    const initialState = { ...initialStore, ...defaultProps };
+
+    const Component = (
+      <Router history={history}>
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <Sites {...initialState} />
+        </ThemeProvider>
+      </Router>
+    );
+
+    await act(async () => {
+      render(Component, { store });
+    });
+
+    const sectionHeader = screen.getByTestId("all-sites-header");
+    const title = screen.getByTestId("all-sites-title");
+    const headerIconsWrapper = screen.getByTestId("all-sites-header-icons");
+    const filterSelect = screen.getByTestId("all-sites-grid-filter");
+    const filterSelectLabel = screen.getByTestId("all-sites-grid-filter-label");
+    const sitesGridList = screen.getByTestId("sites-grid-list");
+
+    expect(sectionHeader).toBeTruthy();
+    expect(title).toBeTruthy();
+    expect(headerIconsWrapper).toBeTruthy();
+    expect(filterSelect).toBeTruthy();
+    expect(filterSelectLabel).toBeTruthy();
+    expect(sitesGridList).toBeTruthy();
+  });
+
+  it("should not render recent sites list when recent sites list is empty", async () => {
+    mockedAxios.mockResolvedValue(sitesResponse);
+    mockedAxios.mockResolvedValue(structuredDataResponse);
+
+    const initialStore = {
+      app: {
+        isLoading: false,
+        globalLangs: [
+          { id: 4, locale: "en_GB", language: "English", label: "EN", isDefault: true },
+          { id: 2, locale: "es_ES", language: "Spanish", label: "ES", isDefault: false },
+        ],
+        token: "eyJhbGciOiJIUzI",
+      },
+      users: userDataMock,
+      sites: {
+        totalItems: 2,
+        sites: sitesDataMock.sites,
+        recentSites: [],
+      },
+      structuredData: { global: [], sites: [] },
+    };
+
+    const middlewares: any = [thunk];
+    const mockStore = configureStore(middlewares);
+    const store = mockStore(initialStore);
+
+    const initialState = { ...initialStore, ...defaultProps };
+
+    const Component = (
+      <Router history={history}>
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <Sites {...initialState} />
+        </ThemeProvider>
+      </Router>
+    );
+
+    await act(async () => {
+      render(Component, { store });
+    });
+
+    const recentSitesList = screen.queryByTestId("recent-sites-list");
+
+    expect(recentSitesList).not.toBeTruthy();
+  });
+
+  it("should render empty state when no sites", async () => {
+    mockedAxios.mockResolvedValue(sitesResponse);
+    mockedAxios.mockResolvedValue(structuredDataResponse);
+
+    const initialStore = {
+      app: {
+        isLoading: false,
+        globalLangs: [
+          { id: 4, locale: "en_GB", language: "English", label: "EN", isDefault: true },
+          { id: 2, locale: "es_ES", language: "Spanish", label: "ES", isDefault: false },
+        ],
+        token: "eyJhbGciOiJIUzI",
+      },
+      users: userDataMock,
+      sites: {
+        totalItems: 0,
+        sites: [],
+        recentSites: [],
+      },
+      structuredData: { global: [], sites: [] },
+    };
+
+    const middlewares: any = [thunk];
+    const mockStore = configureStore(middlewares);
+    const store = mockStore(initialStore);
+
+    const initialState = { ...initialStore, ...defaultProps };
+
+    const Component = (
+      <Router history={history}>
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <Sites {...initialState} />
+        </ThemeProvider>
+      </Router>
+    );
+
+    await act(async () => {
+      render(Component, { store });
+    });
+
+    const emptyState = screen.getByTestId("empty-state");
+    expect(emptyState).toBeTruthy();
+  });
+});

package/src/__tests__/modules/Sites/SitesList/ListView/BulkHeader/BulkHeader.test.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { render, screen, cleanup, act } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { mock } from "jest-mock-extended";
+
+import { parseTheme } from "@ax/helpers";
+
+import BulkHeader, { IBulkHeaderProps } from "./../../../../../../modules/Sites/SitesList/ListView/BulkHeader";
+
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+const defaultProps = mock<IBulkHeaderProps>();
+
+describe("BulkHeader component rendering", () => {
+  it("should render table header", async () => {
+    defaultProps.showBulk = false;
+    defaultProps.checkState = { isAllSelected: false, indeterminate: false };
+    defaultProps.filterValues = { order: "lastAccess-desc", liveStatus: "all" };
+    defaultProps.sortedListStatus = { isAscending: false, sortedByTitle: false, sortedByLastAccess: true };
+    defaultProps.totalItems = 22;
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <BulkHeader {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    const tableHeader = screen.getByTestId("sites-table-header");
+    expect(tableHeader).toBeTruthy();
+  });
+
+  it("should render bulk header", async () => {
+    defaultProps.showBulk = true;
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <BulkHeader {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    expect(screen.getByTestId("sites-list-bulk-wrapper")).toBeTruthy();
+  });
+});