@licklist/design 0.63.1 → 0.63.3-dev.0

package/tests/Auth/Register/RegisterComponent.test.tsx

@@ -1,285 +0,0 @@
-/* eslint-disable prefer-promise-reject-errors */
-import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
-import { UserRegisterRequest } from "@licklist/plugins/dist/types/Request/UserRegisterRequest";
-import { mount, shallow } from "enzyme";
-import * as React from "react";
-import { act } from "react-dom/test-utils";
-import { MemoryRouter } from "react-router-dom";
-import {
-  RegisterComponent,
-  RegisterFormComponent,
-} from "../../../src/auth/Register";
-import useAuthMock from "../../__mock__/hooks/useAuthMock";
-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("moment", () => () => ({
-  year: jest.fn().mockReturnThis(),
-  month: jest.fn().mockReturnThis(),
-  date: jest.fn().mockReturnThis(),
-  diff: jest.fn().mockReturnThis(),
-  format: "format",
-}));
-jest.mock("react-i18next", () => ({
-  Trans: jest.fn().mockReturnValue("test"),
-  useTranslation: jest.fn(),
-}));
-jest.mock("react-hook-form", () => ({
-  Controller: () => "controller",
-  useForm: () => ({
-    register: jest.fn(),
-    handleSubmit: (callback: (e: any) => void) => (e: any) => callback(e),
-    formState: {
-      errors: jest.fn(),
-      dirtyFields: {
-        has: jest.fn(),
-      },
-    },
-    setValue: jest.fn(),
-    getValues: jest.fn(),
-    control: jest.fn(),
-    watch: jest.fn(),
-  }),
-}));
-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(),
-  });
-});
-
-afterAll(() => {
-  jest.resetAllMocks();
-});
-
-describe("RegisterComponent", () => {
-  it("should be rendered without issues", () => {
-    const component = shallow(
-      <MemoryRouter initialEntries={["/"]}>
-        <RegisterComponent />
-      </MemoryRouter>
-    );
-
-    expect(component.exists()).toBeTruthy();
-  });
-
-  it("should show danger notification if register did not succeed", async () => {
-    let component: any;
-
-    const notificationDangerMock = jest.fn();
-    const notificationSuccessMock = jest.fn();
-    const registerMock = jest.fn(() =>
-      Promise.reject({
-        config: "",
-        request: "",
-        response: {
-          data: { errors: ["Something went wrong"] },
-        },
-      } as any)
-    );
-    const profileMock = jest.fn();
-
-    useNotificationMock({
-      danger: notificationDangerMock,
-      success: notificationSuccessMock,
-    });
-    useUserApiMock({
-      register: registerMock,
-      profile: profileMock,
-    });
-
-    RouteService.redirectTo = jest.fn();
-
-    act(() => {
-      component = mount(
-        <MemoryRouter>
-          <RegisterComponent />
-        </MemoryRouter>
-      );
-    });
-
-    await act(async () => {
-      const credentials: UserRegisterRequest = {
-        email: "email",
-        password: "password",
-        first_name: "first_name",
-        last_name: "last_name",
-      };
-
-      await component.find(RegisterFormComponent).prop("onSubmit")(credentials);
-    });
-
-    component.update();
-
-    expect(component.exists()).toBeTruthy();
-    expect(registerMock).toHaveBeenCalledTimes(1);
-    expect(notificationDangerMock).toHaveBeenCalledTimes(0);
-    expect(profileMock).toHaveBeenCalledTimes(0);
-    expect(notificationSuccessMock).toHaveBeenCalledTimes(0);
-  });
-
-  it("should show danger notification if profile did not succeed", async () => {
-    let component: any;
-
-    const registerResponse = {
-      access_token: "access_token",
-      refresh_token: "refresh_token",
-      token_type: "token_type",
-      expires_in: null,
-    };
-
-    const notificationDangerMock = jest.fn();
-    const notificationSuccessMock = jest.fn();
-    const registerMock = jest.fn(() => Promise.resolve(registerResponse));
-    const profileMock = jest.fn(() => Promise.reject(new Error("danger")));
-    const setAuthorizationTokenMock = jest.fn();
-    const setSecretsMock = jest.fn();
-
-    useNotificationMock({
-      danger: notificationDangerMock,
-      success: notificationSuccessMock,
-    });
-    useUserApiMock({
-      register: registerMock,
-      profile: profileMock,
-      setAuthorizationToken: setAuthorizationTokenMock,
-    });
-    useAuthMock({
-      setSecrets: setSecretsMock,
-    });
-
-    RouteService.redirectTo = jest.fn();
-
-    act(() => {
-      component = mount(
-        <MemoryRouter>
-          <RegisterComponent />
-        </MemoryRouter>
-      );
-    });
-
-    await act(async () => {
-      const credentials: UserRegisterRequest = {
-        email: "email",
-        password: "password",
-        first_name: "first_name",
-        last_name: "last_name",
-      };
-
-      await component.find(RegisterFormComponent).prop("onSubmit")(credentials);
-    });
-
-    component.update();
-
-    expect(component.exists()).toBeTruthy();
-    expect(registerMock).toHaveBeenCalledTimes(1);
-    expect(setSecretsMock).toHaveBeenCalledTimes(1);
-    expect(setSecretsMock).toHaveBeenCalledWith(registerResponse);
-    expect(setAuthorizationTokenMock).toHaveBeenCalledTimes(1);
-    expect(setAuthorizationTokenMock).toHaveBeenCalledWith(
-      registerResponse.access_token
-    );
-    expect(profileMock).toHaveBeenCalledTimes(1);
-    expect(notificationDangerMock).toHaveBeenCalledTimes(1);
-    expect(notificationSuccessMock).toHaveBeenCalledTimes(0);
-  });
-
-  it("should show success notification if register and profile did succeed", async () => {
-    let component: any;
-
-    const registerResponse = {
-      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 registerMock = jest.fn(() => Promise.resolve(registerResponse));
-    const profileMock = jest.fn(() =>
-      Promise.resolve({
-        error: false,
-        message: profileResponse,
-      })
-    );
-    const setAuthorizationTokenMock = jest.fn();
-    const setSecretsMock = jest.fn();
-    const userLoginMock = jest.fn();
-
-    useNotificationMock({
-      danger: notificationDangerMock,
-      success: notificationSuccessMock,
-    });
-    useUserApiMock({
-      register: registerMock,
-      profile: profileMock,
-      setAuthorizationToken: setAuthorizationTokenMock,
-    });
-    useAuthMock({
-      setSecrets: setSecretsMock,
-    });
-    useUserMock({
-      login: userLoginMock,
-    });
-
-    RouteService.redirectTo = jest.fn();
-
-    act(() => {
-      component = mount(
-        <MemoryRouter>
-          <RegisterComponent />
-        </MemoryRouter>
-      );
-    });
-
-    await act(async () => {
-      const credentials: UserRegisterRequest = {
-        email: "email",
-        password: "password",
-        first_name: "first_name",
-        last_name: "last_name",
-      };
-
-      await component.find(RegisterFormComponent).prop("onSubmit")(credentials);
-    });
-
-    component.update();
-
-    expect(component.exists()).toBeTruthy();
-    expect(registerMock).toHaveBeenCalledTimes(1);
-    expect(setSecretsMock).toHaveBeenCalledTimes(1);
-    expect(setSecretsMock).toHaveBeenCalledWith(registerResponse);
-    expect(setAuthorizationTokenMock).toHaveBeenCalledTimes(1);
-    expect(setAuthorizationTokenMock).toHaveBeenCalledWith(
-      registerResponse.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/Register/RegisterFormComponent.test.tsx

@@ -1,170 +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 { RegisterFormComponent } from "../../../src/auth/Register/RegisterFormComponent";
-import useTranslationMock from "../../__mock__/hooks/useTranslationMock";
-
-jest.mock("moment", () => () => ({
-  year: jest.fn().mockReturnThis(),
-  month: jest.fn().mockReturnThis(),
-  date: jest.fn().mockReturnThis(),
-  diff: jest.fn().mockReturnThis(),
-  format: "format",
-}));
-jest.mock("react-i18next", () => ({
-  Trans: jest.fn().mockReturnValue("test"),
-  useTranslation: jest.fn(),
-}));
-jest.mock("react-hook-form", () => ({
-  Controller: () => "controller",
-  useForm: () => ({
-    register: jest.fn(),
-    handleSubmit: (callback: (e: any) => void) => (e: any) => callback(e),
-    formState: {
-      errors: jest.fn(),
-      dirtyFields: {
-        has: jest.fn(),
-      },
-    },
-    setValue: jest.fn(),
-    getValues: jest.fn(),
-    control: jest.fn(),
-    watch: jest.fn(),
-  }),
-}));
-jest.mock("@licklist/plugins/dist/context/app/hooks/useNotification");
-
-beforeEach(() => {
-  useTranslationMock();
-});
-
-afterAll(() => {
-  jest.resetAllMocks();
-});
-
-describe("RegisterFormComponent", () => {
-  it("should be rendered without issues", () => {
-    const component = shallow(
-      <RegisterFormComponent
-        isLoading={false}
-        setIsLoading={() => false}
-        invitation={null}
-      />
-    );
-
-    expect(component.exists()).toBeTruthy();
-  });
-
-  it("should be disabled if it is loading", () => {
-    const component = mount(
-      <RegisterFormComponent
-        isLoading
-        setIsLoading={() => false}
-        invitation={null}
-      />
-    );
-
-    expect(component.exists()).toBeTruthy();
-    expect(
-      component.find({ name: "first_name" }).at(0).prop("disabled")
-    ).toBeTruthy();
-    expect(
-      component.find({ name: "last_name" }).at(0).prop("disabled")
-    ).toBeTruthy();
-    expect(
-      component.find({ name: "email" }).at(0).prop("disabled")
-    ).toBeTruthy();
-    expect(
-      component.find({ name: "password" }).at(0).prop("disabled")
-    ).toBeTruthy();
-    expect(
-      component.find({ name: "post_code" }).at(0).prop("disabled")
-    ).toBeTruthy();
-    expect(
-      component.find({ name: "gender" }).at(0).prop("disabled")
-    ).toBeTruthy();
-    expect(
-      component.find({ name: "gender" }).at(1).prop("disabled")
-    ).toBeTruthy();
-    expect(
-      component.find({ name: "receive_promo" }).at(0).prop("disabled")
-    ).toBeTruthy();
-    expect(
-      component.find({ name: "receive_partner_promo" }).at(0).prop("disabled")
-    ).toBeTruthy();
-    expect(
-      component.find({ type: "submit" }).at(0).prop("disabled")
-    ).toBeTruthy();
-  });
-
-  it("should handle submit action", async () => {
-    const onSubmitMock = jest.fn();
-
-    const { container } = render(
-      <RegisterFormComponent
-        isLoading={false}
-        setIsLoading={() => false}
-        onSubmit={onSubmitMock}
-        invitation={null}
-      />
-    );
-
-    const firstNameEvent = {
-      target: {
-        name: "first_name",
-        value: "first_name",
-      },
-    };
-
-    const lastNameEvent = {
-      target: {
-        name: "last_name",
-        value: "last_name",
-      },
-    };
-
-    const emailEvent = {
-      target: {
-        name: "email",
-        value: "email",
-      },
-    };
-
-    const passwordEvent = {
-      target: {
-        name: "password",
-        value: "password",
-      },
-    };
-
-    const postCodeEvent = {
-      target: {
-        name: "post_code",
-        value: "post_code",
-      },
-    };
-
-    const firstName = container.querySelector('input[name="first_name"]');
-    const lastName = container.querySelector('input[name="last_name"]');
-    const email = container.querySelector('input[name="email"]');
-    const password = container.querySelector('input[name="password"]');
-    const postCode = container.querySelector('input[name="post_code"]');
-    const submit = container.querySelector('button[type="submit"]');
-
-    fireEvent.input(firstName!, firstNameEvent);
-    fireEvent.input(lastName!, lastNameEvent);
-    fireEvent.input(email!, emailEvent);
-    fireEvent.input(password!, passwordEvent);
-    fireEvent.input(postCode!, postCodeEvent);
-
-    await act(async () => {
-      fireEvent.submit(submit!);
-    });
-
-    expect(onSubmitMock).toHaveBeenCalledTimes(1);
-  });
-});

package/tests/Auth/Settings/Dashboard/IpInput.test.tsx

@@ -1,130 +0,0 @@
-/* eslint-disable testing-library/no-node-access */
-/* eslint-disable testing-library/no-render-in-setup */
-/* eslint-disable testing-library/no-unnecessary-act */
-/* eslint-disable react/function-component-definition */
-import React, { FunctionComponent } from "react";
-import { FormProvider, useForm } from "react-hook-form";
-import { render, fireEvent, act } from "@testing-library/react";
-import { DashboardSettingFormFieldValues } from "../../../../src/setting/dashboard/DashboardSettingForm";
-import {
-  IpInput,
-  parseIp,
-} from "../../../../src/setting/dashboard/components/IpInput";
-import useTranslationMock from "../../../__mock__/hooks/useTranslationMock";
-
-const TestIpInput: FunctionComponent = () => {
-  const form = useForm<DashboardSettingFormFieldValues>();
-  return (
-    <FormProvider {...form}>
-      <IpInput onChange={() => {}} value="" />
-    </FormProvider>
-  );
-};
-
-jest.mock("react-i18next", () => ({
-  useTranslation: jest.fn(),
-}));
-
-afterAll(() => {
-  jest.resetAllMocks();
-});
-
-let element: HTMLElement;
-beforeEach(async () => {
-  await act(async () => {
-    useTranslationMock();
-    const { container } = render(<TestIpInput />);
-    element = container;
-  });
-});
-
-describe("IpInput", () => {
-  it("should switch focus on next input if ArrowRight key has been pressed", () => {
-    const inputs = element.getElementsByTagName("input");
-    const firstInput = inputs[0];
-    const secondInput = inputs[1];
-    act(() => {
-      fireEvent.keyDown(firstInput, { key: "ArrowRight" });
-    });
-    expect(secondInput).toHaveFocus();
-  });
-  it("should focus next input if 3 digits has been typed", () => {
-    const inputs = element.getElementsByTagName("input");
-    const firstInput = inputs[0];
-    const secondInput = inputs[1];
-    act(() => {
-      fireEvent.input(firstInput, { target: { value: "123" } });
-    });
-    expect(secondInput.focus).toBeTruthy();
-  });
-  it("should focus previous input if ArrowLeft key have been pressed", () => {
-    const inputs = element.getElementsByTagName("input");
-    const firstInput = inputs[0];
-    const secondInput = inputs[1];
-    act(() => {
-      fireEvent.keyDown(secondInput, { key: "ArrowLeft" });
-    });
-    expect(firstInput).toHaveFocus();
-  });
-  it("should focus previous input if Backspace key have been pressed and current input is empty", () => {
-    const inputs = element.getElementsByTagName("input");
-    const firstInput = inputs[0];
-    const secondInput = inputs[1];
-    act(() => {
-      fireEvent.keyDown(secondInput, { key: "Backspace" });
-    });
-    expect(firstInput).toHaveFocus();
-  });
-  it("should show error message if required filed has been skipped", () => {
-    const inputs = element.getElementsByTagName("input");
-    const errorDiv = element.querySelector(".invalid-feedback");
-    const firstInput = inputs[0];
-    const secondInput = inputs[1];
-    act(() => {
-      fireEvent.input(firstInput, { target: { value: "" } });
-      fireEvent.focus(secondInput);
-    });
-    expect(errorDiv).toBeVisible();
-  });
-  it("should show IP validation error if invalid value for IP field has been passed", () => {
-    const inputs = element.getElementsByTagName("input");
-    const errorDiv = element.querySelector(".invalid-feedback");
-    const firstInput = inputs[0];
-    act(() => {
-      fireEvent.input(firstInput, { target: { value: "256" } });
-    });
-    expect(errorDiv).toBeVisible();
-  });
-  it("should show Port validation error if invalid value for Port field has been passed", () => {
-    const inputs = element.getElementsByTagName("input");
-    const errorDiv = element.querySelector(".invalid-feedback");
-    const portInput = inputs[inputs.length - 1];
-    act(() => {
-      fireEvent.input(portInput, { target: { value: "999999" } });
-    });
-    expect(errorDiv).toBeVisible();
-  });
-  it("parseIp should return correct values", () => {
-    const correctIp = "192.158.1.38:2305";
-    const expectedOutput = ["192", "158", "1", "38", "2305"];
-    const output = parseIp(correctIp);
-
-    expect(output).toStrictEqual(expectedOutput);
-  });
-  it("Pasting data from the clipboard correctly", () => {
-    const inputs = element.getElementsByTagName("input");
-    const ip = "192.158.1.38:2305";
-    act(() => {
-      fireEvent.paste(inputs[0], {
-        clipboardData: {
-          getData: () => ip,
-        },
-      });
-    });
-    expect(inputs[0].value).toBe("192");
-    expect(inputs[1].value).toBe("158");
-    expect(inputs[2].value).toBe("1");
-    expect(inputs[3].value).toBe("38");
-    expect(inputs[4].value).toBe("2305");
-  });
-});