@licklist/design 0.63.1-dev.7 → 0.63.2

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

@@ -0,0 +1,285 @@
+/* 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

@@ -0,0 +1,170 @@
+/* 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

@@ -0,0 +1,130 @@
+/* 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");
+  });
+});