@licklist/design 0.63.2 → 0.63.3-dev.0

package/tests/Auth/Authorizer.test.tsx

@@ -1,194 +0,0 @@
-import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
-import { mount, shallow } from "enzyme";
-import * as React from "react";
-import { act } from "react-dom/test-utils";
-import { QueryClientProvider } from "react-query";
-import { Authorizer } from "../../src/auth/Authorizer";
-import useAuthMock from "../__mock__/hooks/useAuthMock";
-import useUserMock from "../__mock__/hooks/useUserMock";
-import useAuthApi from "../__mock__/hooks/useAuthApi";
-import { queryClient } from "../packages/react-query";
-
-jest.mock("react-i18next", () => ({
-  Trans: jest.fn().mockReturnValue("test"),
-  useTranslation: () => ({
-    t: jest.fn((arg) => arg),
-  }),
-}));
-jest.mock("@licklist/plugins/dist/context/user/hooks/useAuth");
-jest.mock("@licklist/plugins/dist/context/user/hooks/useUser");
-jest.mock("@licklist/plugins/dist/hooks/Api/useAuthApi");
-
-const DEFAULT_PROFILE_RESPONSE = {
-  useProfile: () => ({
-    isLoading: false,
-    isFetching: false,
-    isError: false,
-    data: { access_token: "test" },
-  }),
-};
-
-const DEFAULT_PROFILE_LOADING_RESPONSE = {
-  useProfile: () => ({
-    isLoading: true,
-    isFetching: false,
-    isError: false,
-    data: { access_token: "test" },
-  }),
-};
-
-describe("Authorizer", () => {
-  it("should be rendered without issues", () => {
-    useAuthMock({
-      secrets: null,
-    });
-    useUserMock({
-      profile: null,
-    });
-    useAuthApi(DEFAULT_PROFILE_LOADING_RESPONSE);
-
-    const component = shallow(
-      <QueryClientProvider client={queryClient}>
-        <Authorizer />
-      </QueryClientProvider>
-    );
-
-    expect(component.exists()).toBeTruthy();
-  });
-
-  it("should render children if authorized", () => {
-    let component: any;
-
-    useAuthMock({
-      secrets: "not-null",
-    });
-    useUserMock({
-      profile: "not-null",
-    });
-    useAuthApi(DEFAULT_PROFILE_LOADING_RESPONSE);
-
-    RouteService.getCurrentPage = jest.fn();
-    RouteService.getCurrentRoute = jest.fn();
-    RouteService.cleanRedirect = jest.fn();
-
-    act(() => {
-      component = mount(
-        <QueryClientProvider client={queryClient}>
-          <Authorizer>
-            <p>test</p>
-          </Authorizer>
-        </QueryClientProvider>
-      );
-    });
-
-    component.update();
-
-    expect(RouteService.getCurrentPage).toHaveBeenCalledTimes(0);
-    expect(RouteService.getCurrentRoute).toHaveBeenCalledTimes(0);
-    expect(RouteService.cleanRedirect).toHaveBeenCalledTimes(0);
-    expect(component.exists()).toBeTruthy();
-    expect(component.find("BlockLoader").exists()).toBeTruthy();
-  });
-
-  it("should render children if current page is login", () => {
-    let component: any;
-
-    useAuthMock({
-      secrets: null,
-    });
-    useUserMock({
-      profile: null,
-    });
-    useAuthApi(DEFAULT_PROFILE_LOADING_RESPONSE);
-
-    RouteService.getCurrentPage = jest.fn().mockReturnValue("/login");
-    RouteService.getCurrentRoute = jest.fn();
-    RouteService.cleanRedirect = jest.fn();
-
-    act(() => {
-      component = mount(
-        <QueryClientProvider client={queryClient}>
-          <Authorizer>
-            <p>test</p>
-          </Authorizer>
-        </QueryClientProvider>
-      );
-    });
-
-    component.update();
-
-    expect(RouteService.getCurrentPage).toHaveBeenCalledTimes(0);
-    expect(RouteService.getCurrentRoute).toHaveBeenCalledTimes(0);
-    expect(RouteService.cleanRedirect).toHaveBeenCalledTimes(0);
-    expect(component.exists()).toBeTruthy();
-    expect(component.find("BlockLoader").exists()).toBeTruthy();
-  });
-
-  it("should NOT render children if profile is loading or fetching", () => {
-    let component: any;
-
-    useAuthMock({
-      secrets: null,
-    });
-    useUserMock({
-      profile: null,
-    });
-    useAuthApi(DEFAULT_PROFILE_LOADING_RESPONSE);
-
-    RouteService.getCurrentPage = jest.fn();
-    RouteService.getCurrentRoute = jest.fn();
-    RouteService.cleanRedirect = jest.fn();
-
-    act(() => {
-      component = mount(
-        <QueryClientProvider client={queryClient}>
-          <Authorizer>
-            <p>test</p>
-          </Authorizer>
-        </QueryClientProvider>
-      );
-    });
-
-    component.update();
-
-    expect(RouteService.getCurrentPage).toHaveBeenCalledTimes(0);
-    expect(RouteService.getCurrentRoute).toHaveBeenCalledTimes(0);
-    expect(RouteService.cleanRedirect).toHaveBeenCalledTimes(0);
-    expect(component.exists()).toBeTruthy();
-    expect(component.find("BlockLoader").exists()).toBeTruthy();
-  });
-
-  it("should NOT render children if unauthorized and current page is not login", () => {
-    let component: any;
-
-    useAuthMock({
-      secrets: null,
-    });
-    useUserMock({
-      profile: null,
-    });
-    useAuthApi(DEFAULT_PROFILE_RESPONSE);
-
-    RouteService.getCurrentPage = jest.fn();
-    RouteService.getCurrentRoute = jest.fn();
-    RouteService.cleanRedirect = jest.fn();
-
-    act(() => {
-      component = mount(
-        <QueryClientProvider client={queryClient}>
-          <Authorizer>
-            <p>test</p>
-          </Authorizer>
-        </QueryClientProvider>
-      );
-    });
-
-    component.update();
-
-    expect(RouteService.getCurrentPage).toHaveBeenCalledTimes(3);
-    expect(RouteService.getCurrentRoute).toHaveBeenCalledTimes(1);
-    expect(RouteService.cleanRedirect).toHaveBeenCalledTimes(1);
-    expect(component.exists()).toBeTruthy();
-    expect(component.find("BlockLoader").exists()).toBeTruthy();
-  });
-});

package/tests/Auth/Layout/UserNavDropDown.test.tsx

@@ -1,43 +0,0 @@
-import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
-import { mount, shallow } from "enzyme";
-import * as React from "react";
-import useTranslationMock from "../../__mock__/hooks/useTranslationMock";
-import useUserMock from "../../__mock__/hooks/useUserMock";
-import { UserNavDropDown } from "../../../src/auth/Layout/UserNavDropDown";
-
-jest.mock("react-i18next");
-jest.mock("@licklist/plugins/dist/context/user/hooks/useUser");
-
-describe("UserNavDropDown", () => {
-  it("should be rendered without issues", () => {
-    useTranslationMock({
-      t: jest.fn(),
-    });
-    useUserMock({
-      profile: null,
-    });
-
-    const component = shallow(<UserNavDropDown />);
-
-    expect(component.exists()).toBeTruthy();
-  });
-
-  it("should logout on click", () => {
-    useTranslationMock({
-      t: jest.fn(),
-    });
-    useUserMock({
-      logout: jest.fn(),
-    });
-
-    RouteService.redirectTo = jest.fn();
-
-    const component = mount(<UserNavDropDown />);
-
-    expect(component.exists()).toBeTruthy();
-
-    component.children().prop("onClick")();
-
-    expect(RouteService.redirectTo).toHaveBeenCalledTimes(1);
-  });
-});

package/tests/Auth/Layout/UserNavDropDownToggle.test.tsx

@@ -1,33 +0,0 @@
-import { IUser } from "@licklist/plugins/dist/types/context/user/IUser";
-import { shallow } from "enzyme";
-import * as React from "react";
-import { UserNavDropDownToggle } from "../../../src/auth/Layout/UserNavDropDownToggle";
-import useTranslationMock from "../../__mock__/hooks/useTranslationMock";
-
-jest.mock("react-i18next");
-jest.mock("@licklist/plugins/dist/context/user/hooks/useUser");
-
-const user: IUser = {
-  id: 1,
-  first_name: "first_name",
-  last_name: "last_name",
-  email: "email",
-  user_roles: [],
-  user_detail: {
-    postcode: "",
-    birthday: "",
-    phone: "",
-  },
-};
-
-describe("UserNavDropDownToggle", () => {
-  it("should be rendered without issues", () => {
-    useTranslationMock({
-      t: jest.fn(),
-    });
-
-    const component = shallow(<UserNavDropDownToggle user={user} />);
-
-    expect(component.exists()).toBeTruthy();
-  });
-});

package/tests/Auth/Login/LoginComponent.test.tsx

@@ -1,246 +0,0 @@
-import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
-import { UserLoginRequest } from "@licklist/plugins/dist/types/Request/UserLoginRequest";
-import { mount, shallow } from "enzyme";
-import * as React from "react";
-import { act } from "react-dom/test-utils";
-import { MemoryRouter } from "react-router-dom";
-import { LoginComponent, LoginFormComponent } from "../../../src/auth/Login";
-import useAuthMock from "../../__mock__/hooks/useAuthMock";
-import useFormMock from "../../__mock__/hooks/useFormMock";
-import useNotificationMock from "../../__mock__/hooks/useNotificationMock";
-import useTranslationMock from "../../__mock__/hooks/useTranslationMock";
-import useUserApiMock from "../../__mock__/hooks/useUserApiMock";
-import useUserMock from "../../__mock__/hooks/useUserMock";
-
-jest.mock("react-i18next", () => ({
-  Trans: jest.fn().mockReturnValue("test"),
-  useTranslation: jest.fn(),
-}));
-jest.mock("react-hook-form");
-jest.mock("@licklist/plugins/dist/context/app/hooks/useNotification");
-jest.mock("@licklist/plugins/dist/context/user/hooks/useAuth");
-jest.mock("@licklist/plugins/dist/context/user/hooks/useUser");
-jest.mock("@licklist/plugins/dist/hooks/Api/useUserApi");
-
-beforeEach(() => {
-  useTranslationMock();
-  useNotificationMock({
-    danger: jest.fn(),
-    success: jest.fn(),
-  });
-  useAuthMock({
-    setSecrets: jest.fn(),
-  });
-  useUserMock({
-    login: jest.fn(),
-    clearInvitation: jest.fn(),
-  });
-  useFormMock();
-});
-
-afterAll(() => {
-  jest.resetAllMocks();
-});
-
-describe("LoginComponent", () => {
-  it("should be rendered without issues", () => {
-    const component = shallow(
-      <MemoryRouter initialEntries={["/"]}>
-        <LoginComponent />
-      </MemoryRouter>
-    );
-
-    expect(component.exists()).toBeTruthy();
-  });
-
-  it("should show danger notification if login did not succeed", async () => {
-    let component: any;
-
-    const notificationDangerMock = jest.fn();
-    const notificationSuccessMock = jest.fn();
-    const loginMock = jest.fn(() => Promise.reject(new Error("danger")));
-    const profileMock = jest.fn();
-
-    useNotificationMock({
-      danger: notificationDangerMock,
-      success: notificationSuccessMock,
-    });
-    useUserApiMock({
-      login: loginMock,
-      profile: profileMock,
-    });
-
-    RouteService.redirectTo = jest.fn();
-
-    act(() => {
-      component = mount(
-        <MemoryRouter>
-          <LoginComponent />
-        </MemoryRouter>
-      );
-    });
-
-    await act(async () => {
-      const credentials: UserLoginRequest = {
-        email: "email",
-        password: "password",
-      };
-
-      await component.find(LoginFormComponent).prop("onSubmit")(credentials);
-    });
-
-    component.update();
-
-    expect(component.exists()).toBeTruthy();
-    expect(loginMock).toHaveBeenCalledTimes(1);
-    expect(notificationDangerMock).toHaveBeenCalledTimes(1);
-    expect(profileMock).toHaveBeenCalledTimes(0);
-    expect(notificationSuccessMock).toHaveBeenCalledTimes(0);
-  });
-
-  it("should show danger notification if profile did not succeed", async () => {
-    let component: any;
-
-    const loginResponse = {
-      access_token: "access_token",
-      refresh_token: "refresh_token",
-      token_type: "token_type",
-      expires_in: null,
-    };
-
-    const notificationDangerMock = jest.fn();
-    const notificationSuccessMock = jest.fn();
-    const loginMock = jest.fn(() => Promise.resolve(loginResponse));
-    const profileMock = jest.fn(() => Promise.reject(new Error("danger")));
-    const setAuthorizationTokenMock = jest.fn();
-    const setSecretsMock = jest.fn();
-
-    useNotificationMock({
-      danger: notificationDangerMock,
-      success: notificationSuccessMock,
-    });
-    useUserApiMock({
-      login: loginMock,
-      profile: profileMock,
-      setAuthorizationToken: setAuthorizationTokenMock,
-    });
-    useAuthMock({
-      setSecrets: setSecretsMock,
-    });
-
-    RouteService.redirectTo = jest.fn();
-
-    act(() => {
-      component = mount(
-        <MemoryRouter>
-          <LoginComponent />
-        </MemoryRouter>
-      );
-    });
-
-    await act(async () => {
-      const credentials: UserLoginRequest = {
-        email: "email",
-        password: "password",
-      };
-
-      await component.find(LoginFormComponent).prop("onSubmit")(credentials);
-    });
-
-    component.update();
-
-    expect(component.exists()).toBeTruthy();
-    expect(loginMock).toHaveBeenCalledTimes(1);
-    expect(setSecretsMock).toHaveBeenCalledTimes(1);
-    expect(setSecretsMock).toHaveBeenCalledWith(loginResponse);
-    expect(setAuthorizationTokenMock).toHaveBeenCalledTimes(1);
-    expect(setAuthorizationTokenMock).toHaveBeenCalledWith(
-      loginResponse.access_token
-    );
-    expect(profileMock).toHaveBeenCalledTimes(1);
-    expect(notificationDangerMock).toHaveBeenCalledTimes(1);
-    expect(notificationSuccessMock).toHaveBeenCalledTimes(0);
-  });
-
-  it("should show success notification if login and profile did succeed", async () => {
-    let component: any;
-
-    const loginResponse = {
-      access_token: "access_token",
-      refresh_token: "refresh_token",
-      token_type: "token_type",
-      expires_in: null,
-    };
-    const profileResponse = {
-      id: 1,
-      first_name: "first_name",
-      last_name: "last_name",
-      email: "email",
-      role: null,
-    };
-
-    const notificationDangerMock = jest.fn();
-    const notificationSuccessMock = jest.fn();
-    const loginMock = jest.fn(() => Promise.resolve(loginResponse));
-    const profileMock = jest.fn(() =>
-      Promise.resolve({
-        data: profileResponse,
-      })
-    );
-    const setAuthorizationTokenMock = jest.fn();
-    const setSecretsMock = jest.fn();
-    const userLoginMock = jest.fn();
-
-    useNotificationMock({
-      danger: notificationDangerMock,
-      success: notificationSuccessMock,
-    });
-    useUserApiMock({
-      login: loginMock,
-      profile: profileMock,
-      setAuthorizationToken: setAuthorizationTokenMock,
-    });
-    useAuthMock({
-      setSecrets: setSecretsMock,
-    });
-    useUserMock({
-      login: userLoginMock,
-    });
-
-    RouteService.redirectTo = jest.fn();
-
-    act(() => {
-      component = mount(
-        <MemoryRouter>
-          <LoginComponent />
-        </MemoryRouter>
-      );
-    });
-
-    await act(async () => {
-      const credentials: UserLoginRequest = {
-        email: "email",
-        password: "password",
-      };
-
-      await component.find(LoginFormComponent).prop("onSubmit")(credentials);
-    });
-
-    component.update();
-
-    expect(component.exists()).toBeTruthy();
-    expect(loginMock).toHaveBeenCalledTimes(1);
-    expect(setSecretsMock).toHaveBeenCalledTimes(1);
-    expect(setSecretsMock).toHaveBeenCalledWith(loginResponse);
-    expect(setAuthorizationTokenMock).toHaveBeenCalledTimes(1);
-    expect(setAuthorizationTokenMock).toHaveBeenCalledWith(
-      loginResponse.access_token
-    );
-    expect(profileMock).toHaveBeenCalledTimes(1);
-    expect(userLoginMock).toHaveBeenCalledTimes(1);
-    expect(userLoginMock).toHaveBeenCalledWith(profileResponse);
-    expect(notificationDangerMock).toHaveBeenCalledTimes(0);
-    expect(notificationSuccessMock).toHaveBeenCalledTimes(1);
-    expect(RouteService.redirectTo).toHaveBeenCalledTimes(1);
-  });
-});

package/tests/Auth/Login/LoginFormComponent.test.tsx

@@ -1,182 +0,0 @@
-/* eslint-disable testing-library/no-unnecessary-act */
-/* eslint-disable testing-library/no-node-access */
-/* eslint-disable testing-library/no-container */
-import { mount, shallow } from "enzyme";
-import * as React from "react";
-import { act } from "react-dom/test-utils";
-import { fireEvent, render } from "@testing-library/react";
-import { LoginFormComponent } from "../../../src/auth/Login/LoginFormComponent";
-import useFormMock from "../../__mock__/hooks/useFormMock";
-import useTranslationMock from "../../__mock__/hooks/useTranslationMock";
-
-jest.mock("react-i18next", () => ({
-  Trans: jest.fn().mockReturnValue("test"),
-  useTranslation: jest.fn(),
-}));
-jest.mock("react-hook-form");
-jest.mock("@licklist/plugins/dist/context/app/hooks/useNotification");
-
-beforeEach(() => {
-  useTranslationMock();
-  useFormMock();
-});
-
-afterAll(() => {
-  jest.resetAllMocks();
-});
-
-describe("LoginFormComponent", () => {
-  it("should be rendered without issues", () => {
-    const component = shallow(
-      <LoginFormComponent
-        isLoading={false}
-        setIsLoading={() => false}
-        invitation={null}
-      />
-    );
-
-    expect(component.exists()).toBeTruthy();
-  });
-
-  it("should be disabled if it is loading", () => {
-    const component = mount(
-      <LoginFormComponent
-        isLoading
-        setIsLoading={() => false}
-        invitation={null}
-      />
-    );
-
-    expect(component.exists()).toBeTruthy();
-    expect(
-      component.find({ name: "email" }).at(0).prop("disabled")
-    ).toBeTruthy();
-    expect(
-      component.find({ name: "password" }).at(0).prop("disabled")
-    ).toBeTruthy();
-  });
-
-  it("should be disabled if invitation exist", () => {
-    const component = mount(
-      <LoginFormComponent
-        isLoading={false}
-        setIsLoading={() => false}
-        invitation={{
-          email: "test@test.test",
-          user_exists: false,
-          invitation_hash: "test",
-        }}
-      />
-    );
-
-    expect(component.exists()).toBeTruthy();
-    expect(
-      component.find({ name: "email" }).at(0).prop("disabled")
-    ).toBeTruthy();
-    expect(
-      component.find({ name: "password" }).at(0).prop("disabled")
-    ).toBeFalsy();
-  });
-
-  it("should set value on input change", () => {
-    const setValueMock = jest.fn();
-
-    useFormMock({
-      setValue: setValueMock,
-    });
-
-    const component = mount(
-      <LoginFormComponent
-        isLoading={false}
-        setIsLoading={() => false}
-        invitation={null}
-      />
-    );
-
-    const emailEvent = {
-      currentTarget: {
-        name: "email",
-        value: "test",
-      },
-    };
-
-    const passwordEvent = {
-      currentTarget: {
-        name: "password",
-        value: "test",
-      },
-    };
-
-    act(() => {
-      component.find({ name: "email" }).at(1).prop("onChange")(emailEvent);
-    });
-
-    expect(setValueMock).toHaveBeenCalledTimes(1);
-    expect(setValueMock).toHaveBeenCalledWith(
-      emailEvent.currentTarget.name,
-      emailEvent.currentTarget.value
-    );
-
-    act(() => {
-      component.find({ name: "password" }).at(1).prop("onChange")(
-        passwordEvent
-      );
-    });
-
-    expect(setValueMock).toHaveBeenCalledTimes(2);
-    expect(setValueMock).toHaveBeenLastCalledWith(
-      passwordEvent.currentTarget.name,
-      passwordEvent.currentTarget.value
-    );
-  });
-
-  it("should handle submit action", async () => {
-    const onSubmitMock = jest.fn();
-    const handleSubmitMock = jest
-      .fn()
-      .mockImplementation(
-        (callback: (e: any) => void) => (e: any) => callback(e)
-      );
-
-    useFormMock({
-      handleSubmit: handleSubmitMock,
-    });
-
-    const { container } = render(
-      <LoginFormComponent
-        isLoading={false}
-        setIsLoading={() => false}
-        onSubmit={onSubmitMock}
-        invitation={null}
-      />
-    );
-
-    const emailEvent = {
-      currentTarget: {
-        name: "email",
-        value: "email",
-      },
-    };
-
-    const passwordEvent = {
-      currentTarget: {
-        name: "password",
-        value: "password",
-      },
-    };
-
-    const email = container.querySelector('input[name="email"]');
-    const password = container.querySelector('input[name="password"]');
-    const submit = container.querySelector('button[type="submit"]');
-
-    fireEvent.input(email!, emailEvent);
-    fireEvent.input(password!, passwordEvent);
-
-    await act(async () => {
-      fireEvent.submit(submit!);
-    });
-
-    expect(handleSubmitMock).toHaveBeenCalledTimes(1);
-    expect(onSubmitMock).toHaveBeenCalledTimes(1);
-  });
-});