@licklist/design 0.59.0-dev.9 → 0.59.0

package/tests/Sales/SalesAndVIews.test.tsx

@@ -0,0 +1,63 @@
+/* eslint-disable testing-library/render-result-naming-convention */
+import * as React from "react";
+import { render } from "@testing-library/react";
+import moment from "moment";
+import { IntlProvider } from "react-intl";
+import useTranslationMock from "../__mock__/hooks/useTranslationMock";
+
+import {
+  ChartData,
+  SalesAndViewsChart,
+} from "../../src/sales/sales-and-views/SalesAndViewsChart";
+
+jest.mock("react-i18next", () => ({
+  Trans: jest.fn().mockReturnValue("test"),
+  useTranslation: jest.fn(),
+}));
+
+beforeEach(() => {
+  useTranslationMock();
+});
+
+afterAll(() => {
+  jest.resetAllMocks();
+});
+
+function generateRandom() {
+  return Math.floor(Math.random() * 100);
+}
+
+const genarateChartData = (): ChartData[] => {
+  const chartData = [];
+  const date = moment().subtract(90, "d");
+
+  for (let i = 0; i < 90; i += 1) {
+    chartData.push({
+      id: i,
+      sales: generateRandom(),
+      views: generateRandom(),
+      date: date.add(i, "d").format("YYYY-MM-DD"),
+    });
+  }
+  return chartData;
+};
+
+describe("SalesAndViewsChart", () => {
+  it("SalesAndViewsChart should be rendered without issues", () => {
+    const data = genarateChartData();
+
+    const screen = render(
+      <IntlProvider locale="en" timeZone="Europe/London">
+        <div style={{ height: "500px", width: "700px" }}>
+          <SalesAndViewsChart
+            data={data}
+            handleFilter={() => {}}
+            activePeriod="week"
+          />
+        </div>
+      </IntlProvider>
+    );
+    const salesHeaderContainer = screen.getAllByText("test");
+    expect(salesHeaderContainer[0]).toBeInTheDocument();
+  });
+});

package/tests/SnippetTemplates/SnippetTemplates.test.tsx

@@ -0,0 +1,56 @@
+/* eslint-disable testing-library/render-result-naming-convention */
+import * as React from "react";
+import { createMemoryHistory } from "history";
+import { Router } from "react-router-dom";
+import { render } from "@testing-library/react";
+import { SnippetTemplateCard } from "../../src/setting/dashboard/snippet-templates/card";
+import useTranslationMock from "../__mock__/hooks/useTranslationMock";
+
+const history = createMemoryHistory();
+
+jest.mock("react-i18next", () => ({
+  Trans: jest.fn().mockReturnValue("test"),
+  useTranslation: jest.fn(),
+}));
+
+beforeEach(() => {
+  useTranslationMock();
+});
+
+afterAll(() => {
+  jest.resetAllMocks();
+});
+
+describe("SnippetTemplates", () => {
+  it("SnippetTemplate should be rendered without issues", () => {
+    const screen = render(
+      <Router history={history as any}>
+        <SnippetTemplateCard
+          hasPermission
+          name="testSnippet"
+          onRemove={() => {}}
+          colors={["blue", "yellow"]}
+          href="/"
+        />
+      </Router>
+    );
+
+    expect(screen.getByRole("button")).toBeTruthy();
+  });
+
+  it("SnippetTemplate without permission", async () => {
+    const screen = render(
+      <Router history={history as any}>
+        <SnippetTemplateCard
+          hasPermission={false}
+          name="testSnippet"
+          onRemove={() => {}}
+          colors={["blue", "yellow"]}
+          href="/"
+        />
+      </Router>
+    );
+
+    expect(screen.queryByRole("button")).toBeFalsy();
+  });
+});

package/tests/Table/FilterHelperComponent.test.tsx

@@ -0,0 +1,88 @@
+import { mount, shallow } from "enzyme";
+import * as React from "react";
+import { act } from "react-dom/test-utils";
+import FormControl from "react-bootstrap/FormControl";
+import Button from "react-bootstrap/Button";
+import { FilterHelperComponent } from "../../src/table/FilterHelperComponent";
+
+describe("FilterHelperComponent", () => {
+  it("should be rendered without issues", () => {
+    const component = shallow(<FilterHelperComponent />);
+
+    expect(component.exists()).toBeTruthy();
+  });
+
+  it("should be mount without issues", () => {
+    const component = mount(
+      <FilterHelperComponent defaultValue="defaultValue" />
+    );
+
+    expect(component.exists()).toBeTruthy();
+  });
+
+  it("should act on change", () => {
+    const component = mount(<FilterHelperComponent />);
+
+    act(() => {
+      component.find(FormControl).first().prop("onChange")?.({
+        target: {
+          value: "onChange",
+        },
+      } as React.ChangeEvent<HTMLInputElement>);
+    });
+
+    component.update();
+    expect(component.find(FormControl).first().prop("value")).toBe("onChange");
+  });
+
+  it("should act on clear", () => {
+    const onClickFn = jest.fn();
+    const component = mount(<FilterHelperComponent onClickFn={onClickFn} />);
+
+    act(() => {
+      component.find(Button).first().prop("onClick")?.(
+        {} as React.MouseEvent<HTMLButtonElement>
+      );
+    });
+
+    component.update();
+    expect(onClickFn).toHaveBeenCalledTimes(1);
+  });
+
+  it("should act on search", () => {
+    const onClickFn = jest.fn();
+    const component = mount(<FilterHelperComponent onClickFn={onClickFn} />);
+
+    act(() => {
+      component.find(Button).last().prop("onClick")?.(
+        {} as React.MouseEvent<HTMLButtonElement>
+      );
+    });
+
+    component.update();
+    expect(onClickFn).toHaveBeenCalledTimes(1);
+  });
+
+  it("should act on enter", () => {
+    const onClickFn = jest.fn();
+    const component = mount(<FilterHelperComponent onClickFn={onClickFn} />);
+
+    act(() => {
+      component.find(FormControl).last().prop("onKeyDown")?.({
+        key: "Space",
+      } as React.KeyboardEvent);
+    });
+
+    component.update();
+    expect(onClickFn).toHaveBeenCalledTimes(0);
+
+    act(() => {
+      component.find(FormControl).last().prop("onKeyDown")?.({
+        key: "Enter",
+      } as React.KeyboardEvent);
+    });
+
+    component.update();
+    expect(onClickFn).toHaveBeenCalledTimes(1);
+  });
+});

package/tests/Table/PaginationHelperComponent.test.tsx

@@ -0,0 +1,109 @@
+/* eslint-disable @typescript-eslint/ban-types */
+import ILengthAwarePaginator from "@licklist/plugins/dist/types/services/Table/ILengthAwarePaginator";
+import { mount, shallow } from "enzyme";
+import * as React from "react";
+import PageItem from "react-bootstrap/PageItem";
+import { act } from "react-dom/test-utils";
+import { PaginationHelperComponent } from "../../src/table/PaginationHelperComponent";
+import useTranslationMock from "../__mock__/hooks/useTranslationMock";
+
+jest.mock("react-i18next", () => ({
+  Trans: jest.fn().mockReturnValue("test"),
+  useTranslation: jest.fn(),
+}));
+
+beforeEach(() => {
+  useTranslationMock();
+});
+
+afterAll(() => {
+  jest.resetAllMocks();
+});
+
+describe("PaginationHelperComponent", () => {
+  const getPaginator = (): ILengthAwarePaginator<{}> => ({
+    current_page: 1,
+    last_page: 1,
+    first_page_url: "first_page_url",
+    last_page_url: "last_page_url",
+    next_page_url: "next_page_url",
+    prev_page_url: "prev_page_url",
+    path: "path",
+    per_page: 1,
+    from: 0,
+    to: 1,
+    total: 1,
+    data: [
+      {
+        test: "data",
+      },
+    ],
+  });
+
+  it("should be rendered without issues", () => {
+    const component = shallow(<PaginationHelperComponent />);
+
+    expect(component.exists()).toBeTruthy();
+  });
+
+  it("should be mount without issues", () => {
+    const component = mount(
+      <PaginationHelperComponent paginator={getPaginator()} />
+    );
+
+    expect(component.exists()).toBeTruthy();
+  });
+
+  it("should render pagination section if there are more pages", () => {
+    const paginator = getPaginator();
+    paginator.last_page = 2;
+    const component = mount(
+      <PaginationHelperComponent paginator={paginator} />
+    );
+
+    expect(component.exists()).toBeTruthy();
+  });
+
+  it("should act on page change", () => {
+    const paginator = getPaginator();
+    const onPageChangeFn = jest.fn();
+    paginator.last_page = 2;
+    const component = mount(
+      <PaginationHelperComponent
+        paginator={paginator}
+        onPageChangeFn={onPageChangeFn}
+      />
+    );
+
+    act(() => {
+      component.find("button").first().prop("onClick")?.(
+        {} as React.MouseEvent<HTMLElement>
+      );
+    });
+
+    component.update();
+    expect(onPageChangeFn).toHaveBeenCalledTimes(1);
+  });
+
+  it("should act on page change by click on a specific page", () => {
+    const paginator = getPaginator();
+    const onPageChangeFn = jest.fn();
+    paginator.last_page = 2;
+    const component = mount(
+      <PaginationHelperComponent
+        paginator={paginator}
+        onPageChangeFn={onPageChangeFn}
+      />
+    );
+
+    act(() => {
+      component.find(PageItem).at(1).prop("onClick")?.(
+        {} as React.MouseEvent<HTMLElement>
+      );
+    });
+
+    component.update();
+    expect(onPageChangeFn).toHaveBeenCalledTimes(1);
+    expect(onPageChangeFn).toHaveBeenCalledWith(2);
+  });
+});

package/tests/Table/PerPageHelperComponent.test.tsx

@@ -0,0 +1,34 @@
+import { mount, shallow } from "enzyme";
+import * as React from "react";
+import { act } from "react-dom/test-utils";
+import { PerPageHelperComponent } from "../../src/table/PerPageHelperComponent";
+
+describe("PerPageHelperComponent", () => {
+  it("should be rendered without issues", () => {
+    const component = shallow(<PerPageHelperComponent />);
+
+    expect(component.exists()).toBeTruthy();
+  });
+
+  it("should be mount without issues", () => {
+    const component = mount(<PerPageHelperComponent defaultValue={10} />);
+
+    expect(component.exists()).toBeTruthy();
+  });
+
+  it("should act on change", () => {
+    const onChangeFn = jest.fn();
+    const component = mount(<PerPageHelperComponent onChangeFn={onChangeFn} />);
+
+    act(() => {
+      component.find("select").first().prop("onChange")?.({
+        target: {
+          value: "100",
+        },
+      } as React.ChangeEvent<HTMLSelectElement>);
+    });
+
+    component.update();
+    expect(onChangeFn).toHaveBeenCalledTimes(1);
+  });
+});

package/tests/Table/TableHelperComponent.test.tsx

@@ -0,0 +1,295 @@
+import TableService from "@licklist/plugins/dist/services/Table/TableService";
+import ILengthAwarePaginator from "@licklist/plugins/dist/types/services/Table/ILengthAwarePaginator";
+import ITableHeader from "@licklist/plugins/dist/types/services/Table/ITableHeader";
+import { mount, shallow } from "enzyme";
+import * as React from "react";
+import { act } from "react-dom/test-utils";
+import {
+  FilterHelperComponent,
+  PaginationHelperComponent,
+  PerPageHelperComponent,
+  TableHelperComponent,
+} from "../../src/table";
+import { getFilterOptionsValue } from "../../src/table/utils";
+import useQueryMock from "../__mock__/hooks/useQueryMock";
+
+jest.mock("@licklist/plugins/dist/hooks/Query/useQuery");
+jest.mock("react-router-dom", () => ({
+  useLocation: () => ({
+    pathname: "/",
+  }),
+}));
+
+beforeEach(() => {
+  useQueryMock();
+});
+
+afterAll(() => {
+  jest.resetAllMocks();
+});
+
+describe("TableHelperComponent", () => {
+  const getPaginator = (): ILengthAwarePaginator<any> => ({
+    current_page: 1,
+    last_page: 1,
+    first_page_url: "first_page_url",
+    last_page_url: "last_page_url",
+    next_page_url: "next_page_url",
+    prev_page_url: "prev_page_url",
+    path: "path",
+    per_page: 1,
+    from: 0,
+    to: 1,
+    total: 1,
+    data: [
+      {
+        id: 1,
+      },
+    ],
+  });
+  const defaultHeaders = (): ITableHeader[] => [
+    {
+      title: "ID",
+      isSortable: false,
+    },
+  ];
+  const defaultItemRenderer = (item: any) => (
+    <tr key={item.id}>
+      <td>{item.id}</td>
+    </tr>
+  );
+
+  it("should be rendered without issues", () => {
+    const component = shallow(
+      <TableHelperComponent
+        headers={defaultHeaders()}
+        renderItemFn={defaultItemRenderer}
+        isLoading
+      />
+    );
+
+    expect(component.exists()).toBeTruthy();
+  });
+
+  it("should be mount without issues", () => {
+    const component = mount(
+      <TableHelperComponent
+        headers={defaultHeaders()}
+        renderItemFn={defaultItemRenderer}
+        paginator={getPaginator()}
+        isLoading={false}
+      />
+    );
+
+    expect(component.exists()).toBeTruthy();
+  });
+
+  it("should act on refresh", () => {
+    const onRefreshFn = jest.fn();
+
+    mount(
+      <TableHelperComponent
+        headers={defaultHeaders()}
+        renderItemFn={defaultItemRenderer}
+        paginator={getPaginator()}
+        isLoading={false}
+        onRefreshFn={onRefreshFn}
+      />
+    );
+
+    expect(onRefreshFn).toHaveBeenCalledTimes(2);
+  });
+
+  it("should act on manual refresh trigger", () => {
+    const onRefreshFn = jest.fn();
+    let refreshAt = 0;
+
+    const component = mount(
+      <TableHelperComponent
+        headers={defaultHeaders()}
+        renderItemFn={defaultItemRenderer}
+        paginator={getPaginator()}
+        isLoading={false}
+        onRefreshFn={onRefreshFn}
+        refreshAt={refreshAt}
+      />
+    );
+
+    component.update();
+
+    act(() => {
+      refreshAt = 100;
+    });
+
+    component.update();
+
+    expect(onRefreshFn).toHaveBeenCalledTimes(1);
+  });
+
+  it("should act on sort by header", () => {
+    const headers = defaultHeaders();
+    headers.push({
+      title: "Name",
+      key: "sortKey",
+      isSortable: true,
+    });
+    headers.push({
+      title: "E-mail",
+      isSortable: true,
+    });
+
+    TableService.getHeaderClasses = jest.fn();
+    TableService.getSortDirection = jest.fn();
+
+    const component = mount(
+      <TableHelperComponent
+        headers={headers}
+        renderItemFn={defaultItemRenderer}
+        paginator={getPaginator()}
+        isLoading={false}
+      />
+    );
+
+    act(() => {
+      component.find("th").at(1).prop("onClick")?.(
+        {} as React.MouseEvent<HTMLElement>
+      );
+      component.find("th").at(2).prop("onClick")?.(
+        {} as React.MouseEvent<HTMLElement>
+      );
+    });
+
+    component.update();
+
+    expect(TableService.getHeaderClasses).toHaveBeenCalled();
+    expect(TableService.getSortDirection).toHaveBeenCalled();
+  });
+
+  it("should act on per page change", () => {
+    const onRefreshFn = jest.fn();
+    const component = mount(
+      <TableHelperComponent
+        headers={defaultHeaders()}
+        renderItemFn={defaultItemRenderer}
+        paginator={getPaginator()}
+        isLoading={false}
+        onRefreshFn={onRefreshFn}
+      />
+    );
+
+    component.update();
+
+    act(() => {
+      component.find(PerPageHelperComponent).at(0).prop("onChangeFn")?.(2);
+    });
+
+    component.update();
+
+    expect(onRefreshFn).toHaveBeenCalled();
+  });
+
+  it("should act on filter change", () => {
+    const onRefreshFn = jest.fn();
+    const component = mount(
+      <TableHelperComponent
+        headers={defaultHeaders()}
+        renderItemFn={defaultItemRenderer}
+        paginator={getPaginator()}
+        isLoading={false}
+        onRefreshFn={onRefreshFn}
+      />
+    );
+
+    component.update();
+
+    act(() => {
+      component.find(FilterHelperComponent).at(0).prop("onClickFn")?.(
+        "next-filter"
+      );
+    });
+
+    component.update();
+
+    expect(onRefreshFn).toHaveBeenCalled();
+  });
+
+  it("should act on paginator's page change", () => {
+    const onRefreshFn = jest.fn();
+    const component = mount(
+      <TableHelperComponent
+        headers={defaultHeaders()}
+        renderItemFn={defaultItemRenderer}
+        paginator={getPaginator()}
+        isLoading={false}
+        onRefreshFn={onRefreshFn}
+      />
+    );
+
+    component.update();
+
+    act(() => {
+      component.find(PaginationHelperComponent).at(0).prop("onPageChangeFn")?.(
+        2
+      );
+    });
+
+    component.update();
+
+    expect(onRefreshFn).toHaveBeenCalled();
+  });
+
+  it("should redirect with external parameters", () => {
+    const onRefreshFn = jest.fn();
+    const component = mount(
+      <TableHelperComponent
+        headers={defaultHeaders()}
+        renderItemFn={defaultItemRenderer}
+        paginator={getPaginator()}
+        isLoading={false}
+        onRefreshFn={onRefreshFn}
+      />
+    );
+
+    component.setProps({ externalFilters: { test: 1 } });
+
+    component.update();
+
+    expect(window.location.search.includes("&test=1")).toBeTruthy();
+
+    component.setProps({ externalFilters: { test: "test" } });
+
+    component.update();
+
+    expect(window.location.search.includes("&test=test")).toBeTruthy();
+
+    component.setProps({ externalFilters: {} });
+
+    component.update();
+
+    expect(window.location.search.includes("&test=test")).toBeFalsy();
+  });
+
+  describe("getFilterOptionsValue util", () => {
+    it("not change query value", () => {
+      const query = new URLSearchParams("&page=1");
+
+      expect(getFilterOptionsValue(query, { page: 2 }, "page")).toBe("1");
+    });
+
+    it("not apply initial values", () => {
+      const query = new URLSearchParams("");
+
+      expect(getFilterOptionsValue(query, { page: 2 }, "page")).toBe(2);
+    });
+
+    it("return default values for standard keys", () => {
+      const query = new URLSearchParams("");
+
+      expect(getFilterOptionsValue(query, {}, "page")).toBe(1);
+      expect(getFilterOptionsValue(query, {}, "perPage")).toBe(24);
+      expect(getFilterOptionsValue(query, {}, "filter")).toBe("");
+      expect(getFilterOptionsValue(query, {}, "sortKey")).toBe("id");
+      expect(getFilterOptionsValue(query, {}, "sortDirection")).toBe("asc");
+    });
+  });
+});

package/tests/TipTapEditor/TipTapEditor.test.tsx

@@ -0,0 +1,28 @@
+import { shallow, mount } from "enzyme";
+import * as React from "react";
+import { TipTapEditor } from "../../src/tiptap-editor/TipTapEditor";
+
+describe("TipTapEditorComponent", () => {
+  it("should be rendered without issues", () => {
+    const component = shallow(<TipTapEditor viewMode={false} />);
+
+    expect(component.exists()).toBeTruthy();
+  });
+
+  it("should be mount without issues", () => {
+    const component = mount(
+      <TipTapEditor viewMode content="<p>Test Content</p>" />
+    );
+
+    expect(component.exists()).toBeTruthy();
+  });
+
+  it("should be disabled if it is disabled", () => {
+    const component = shallow(
+      <TipTapEditor disabled viewMode={false} content="<p>Test Content</p>" />
+    );
+
+    expect(component.exists()).toBeTruthy();
+    expect(component.children().at(1).hasClass("editor-disabled")).toBeTruthy();
+  });
+});

package/tests/__mock__/hooks/useAuthApi.ts

@@ -0,0 +1,13 @@
+import * as useAuthApi from "@licklist/plugins/dist/hooks/Api/useAuthApi";
+
+/**
+ * Mocks custom hook
+ * @param mockReturn
+ */
+const useAuthApiMock = (mockReturn: any = null) => {
+  const authApiMock = useAuthApi as jest.Mocked<typeof useAuthApi>;
+
+  return authApiMock.default.mockReturnValue(mockReturn);
+};
+
+export default useAuthApiMock;

package/tests/__mock__/hooks/useAuthMock.ts

@@ -0,0 +1,13 @@
+import * as useAuthHook from "@licklist/plugins/dist/context/user/hooks/useAuth";
+
+/**
+ * Mocks custom hook
+ * @param mockReturn
+ */
+const useAuthMock = (mockReturn: any = null) => {
+  const useAuthHookMock = useAuthHook as jest.Mocked<typeof useAuthHook>;
+
+  return useAuthHookMock.default.mockReturnValue(mockReturn);
+};
+
+export default useAuthMock;