@griddo/ax 1.69.8 → 1.72.0

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

@@ -0,0 +1,164 @@
+import * as React from "react";
+import { ThemeProvider } from "styled-components";
+import { CalledWithMock, mock } from "jest-mock-extended";
+
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import TypeFilter, { ITypeFilterProps } from "@ax/components/TableFilters/TypeFilter";
+import globalTheme from "@ax/themes/theme.json";
+import { parseTheme } from "@ax/helpers";
+
+afterEach(cleanup);
+
+const defaultProps = mock<ITypeFilterProps>();
+describe("TypeFilter component rendering", () => {
+  it("should render type filter", () => {
+    defaultProps.filters = [
+      {
+        name: "all",
+        value: "all",
+        title: "All content",
+      },
+      {
+        name: "unique",
+        value: "unique",
+        title: "Basic templates",
+      },
+      {
+        name: "structuredData",
+        value: "structuredData",
+        title: "Content types",
+      },
+    ];
+    defaultProps.pointer = "type";
+    defaultProps.filterItems = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TypeFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const typeFilter = screen.getByTestId("floating-menu");
+    expect(typeFilter).toBeTruthy();
+    expect(typeFilter.textContent).toEqual("Types");
+  });
+});
+
+describe("TypeFilter events", () => {
+  it("should render check group on click", () => {
+    defaultProps.filters = [
+      {
+        name: "all",
+        value: "all",
+        title: "All content",
+      },
+      {
+        name: "unique",
+        value: "unique",
+        title: "Basic templates",
+      },
+      {
+        name: "structuredData",
+        value: "structuredData",
+        title: "Content types",
+      },
+    ];
+    defaultProps.pointer = "type";
+    defaultProps.filterItems = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TypeFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const typeFilterButton = screen.getByTestId("floating-menu-button");
+    expect(typeFilterButton).toBeTruthy();
+    fireEvent.click(typeFilterButton);
+    const floatingMenu = screen.getByTestId("floating-menu");
+    expect(floatingMenu).toBeTruthy();
+    const checkGroupFieldGroup = screen.getByTestId("check-group-field-group");
+    expect(checkGroupFieldGroup).toBeTruthy();
+    const checkFieldLabels = screen.getAllByTestId("check-field-label");
+    expect(checkFieldLabels).toHaveLength(3);
+  });
+
+  it("should check option on click", () => {
+    defaultProps.filters = [
+      {
+        name: "all",
+        value: "all",
+        title: "All content",
+      },
+      {
+        name: "unique",
+        value: "unique",
+        title: "Basic templates",
+      },
+      {
+        name: "structuredData",
+        value: "structuredData",
+        title: "Content types",
+      },
+    ];
+    defaultProps.pointer = "type";
+    const onChangeMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+    defaultProps.filterItems = onChangeMock;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TypeFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const typeFilterButton = screen.getByTestId("floating-menu-button");
+    expect(typeFilterButton).toBeTruthy();
+    fireEvent.click(typeFilterButton);
+    const floatingMenu = screen.getByTestId("floating-menu");
+    expect(floatingMenu).toBeTruthy();
+    const checkGroupFieldGroup = screen.getByTestId("check-group-field-group");
+    expect(checkGroupFieldGroup).toBeTruthy();
+    const checkFieldInputs = screen.getAllByTestId<HTMLInputElement>("check-field-input");
+    expect(checkFieldInputs).toHaveLength(3);
+    fireEvent.change(checkFieldInputs[1], { target: { checked: true, value: "unique" } });
+    expect(checkFieldInputs[1].checked).toBe(true);
+  });
+
+  it("should call filterItems action on change", async () => {
+    defaultProps.filters = [
+      {
+        name: "all",
+        value: "all",
+        title: "All content",
+      },
+      {
+        name: "unique",
+        value: "unique",
+        title: "Basic templates",
+      },
+      {
+        name: "structuredData",
+        value: "structuredData",
+        title: "Content types",
+      },
+    ];
+    defaultProps.pointer = "type";
+    const onChangeMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+    defaultProps.filterItems = onChangeMock;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TypeFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const typeFilterButton = screen.getByTestId("floating-menu-button");
+
+    expect(typeFilterButton).toBeTruthy();
+    fireEvent.click(typeFilterButton);
+    const checkFieldInputs = screen.queryAllByTestId("check-field-input");
+    fireEvent.click(checkFieldInputs[1]);
+    expect(onChangeMock).toHaveBeenCalledTimes(1);
+    expect(onChangeMock).toBeCalledWith("type", "unique");
+  });
+});

package/src/__tests__/components/TableList/TableList.test.tsx

@@ -0,0 +1,119 @@
+import * as React from "react";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@ax/helpers";
+import { mock } from "jest-mock-extended";
+import configureStore from "redux-mock-store";
+
+import globalTheme from "@ax/themes/theme.json";
+import TableList, { ITableListProps } from "@ax/components/TableList";
+import { render, cleanup, screen } from "../../../../config/jest/test-utils";
+
+afterEach(() => {
+  cleanup();
+  jest.resetAllMocks();
+});
+
+const initialStore = {
+  app: {
+    isLoading: false,
+  },
+};
+
+const mockStore = configureStore();
+const defaultProps = mock<ITableListProps>();
+const setPage = jest.fn();
+
+const pagination = { currPage: 1, itemsPerPage: 50, setPage: setPage, totalItems: 3 };
+
+describe("TableList", () => {
+  it("should render the component", async () => {
+    defaultProps.pagination = pagination;
+    const initialState = { ...initialStore, ...defaultProps };
+    const store = mockStore(initialStore);
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TableList {...initialState} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const tableList = screen.getByTestId("table-list");
+
+    expect(tableList).toBeTruthy();
+  });
+
+  it("should have sticky style when header is fixed", async () => {
+    defaultProps.pagination = pagination;
+    defaultProps.hasFixedHeader = true;
+    const initialState = { ...initialStore, ...defaultProps };
+    const store = mockStore(initialStore);
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TableList {...initialState} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const tableListHeader = screen.getByTestId("table-list-header");
+    expect(tableListHeader).toBeTruthy();
+    const styles = getComputedStyle(tableListHeader);
+    expect(styles.position).toEqual("sticky");
+  });
+
+  it("should display loader if it's loading", async () => {
+    defaultProps.pagination = pagination;
+    defaultProps.hasFixedHeader = true;
+    const initialState = { ...initialStore, ...defaultProps };
+    const store = mockStore({ app: { isLoading: true } });
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TableList {...initialState} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const loader = screen.getByTestId("loading-wrapper");
+    const tableBody = screen.queryByTestId("table-body");
+    expect(loader).toBeTruthy();
+    expect(tableBody).toBeFalsy();
+  });
+
+  it("should display table body if isLoading is false", async () => {
+    defaultProps.pagination = pagination;
+    defaultProps.hasFixedHeader = true;
+    const store = mockStore(initialStore);
+    const initialState = { ...initialStore, ...defaultProps };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TableList {...initialState} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const loader = screen.queryByTestId("loading-wrapper");
+    const tableBody = screen.getByTestId("table-body");
+    expect(tableBody).toBeTruthy();
+    expect(loader).toBeFalsy();
+  });
+
+  it("should display paginator when totalItems is greater than itemsPerPage", async () => {
+    defaultProps.pagination = { currPage: 1, itemsPerPage: 50, setPage: setPage, totalItems: 60 };
+    defaultProps.hasFixedHeader = true;
+    const store = mockStore(initialStore);
+    const initialState = { ...initialStore, ...defaultProps };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TableList {...initialState} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const pagination = screen.getByTestId("table-body");
+    expect(pagination).toBeTruthy();
+  });
+});

package/src/__tests__/components/Tabs/Tabs.test.tsx

@@ -0,0 +1,205 @@
+import * as React from "react";
+import Tabs, { ITabsProps } from "@ax/components/Tabs";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@ax/helpers";
+import globalTheme from "@ax/themes/theme.json";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import { mock } from "jest-mock-extended";
+import "jest-styled-components";
+
+afterEach(cleanup);
+
+const defaultProps = mock<ITabsProps>();
+
+describe("Tabs component rendering", () => {
+  it("should render tabs", () => {
+    defaultProps.tabs = ["tab1", "tab2"];
+    defaultProps.active = "tab1";
+    const setSelectedTabAction = jest.fn();
+    defaultProps.setSelectedTab = setSelectedTabAction;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Tabs {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const tabsRow = screen.getByTestId("tabs-row");
+    const tabs = screen.getAllByTestId("tab");
+
+    expect(tabsRow).toBeTruthy();
+    expect(tabs.length).toEqual(2);
+  });
+
+  it("should render an empty tabs row when no tabs or icons", () => {
+    defaultProps.tabs = undefined;
+    defaultProps.icons = undefined;
+    defaultProps.active = "tab1";
+    const setSelectedTabAction = jest.fn();
+    defaultProps.setSelectedTab = setSelectedTabAction;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Tabs {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const emptyTabsRow = screen.getByTestId("empty-tabs-row");
+
+    expect(emptyTabsRow).toBeTruthy();
+  });
+
+  it("should call set selected tab action on click", async () => {
+    defaultProps.tabs = ["tab1", "tab2"];
+    defaultProps.active = "tab1";
+    const setSelectedTabAction = jest.fn();
+    defaultProps.setSelectedTab = setSelectedTabAction;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Tabs {...defaultProps} />
+      </ThemeProvider>
+    );
+    const tabs = screen.getAllByTestId("tab");
+    fireEvent.click(tabs[1]);
+    expect(setSelectedTabAction).toBeCalled();
+  });
+
+  it("should render tabs row with icons if icons available", async () => {
+    defaultProps.tabs = undefined;
+    defaultProps.icons = [
+      { name: "edit", text: "Edit mode" },
+      { name: "view", text: "Preview mode" },
+    ];
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Tabs {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const iconTabsRow = screen.getByTestId("icons-tabs-row");
+    expect(iconTabsRow).toBeTruthy();
+  });
+
+  it("should render tabs row with icons if icons available", async () => {
+    defaultProps.tabs = undefined;
+    defaultProps.icons = [
+      { name: "edit", text: "Edit mode" },
+      { name: "view", text: "Preview mode" },
+    ];
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Tabs {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const iconTabsRow = screen.getByTestId("icons-tabs-row");
+    const tabs = screen.getAllByTestId("icon-tab");
+    expect(iconTabsRow).toBeTruthy();
+    expect(tabs.length).toEqual(2);
+  });
+
+  it("should render tooltip with icon's text", async () => {
+    defaultProps.tabs = undefined;
+    defaultProps.icons = [
+      { name: "edit", text: "Edit mode" },
+      { name: "view", text: "Preview mode" },
+    ];
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Tabs {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const tooltips = screen.getAllByTestId("tooltip-component");
+    expect(tooltips[0]).toBeTruthy();
+    expect(tooltips[0].textContent).toBe("Edit mode");
+    expect(tooltips[1]).toBeTruthy();
+    expect(tooltips[1].textContent).toBe("Preview mode");
+  });
+
+  it("should not display icon if doesn't exist", async () => {
+    defaultProps.icons = [
+      { name: "failed-icon", text: "Edit mode" },
+      { name: "view", text: "Preview mode" },
+    ];
+    defaultProps.active = "edit";
+    const setSelectedTabAction = jest.fn();
+    defaultProps.setSelectedTab = setSelectedTabAction;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Tabs {...defaultProps} />
+      </ThemeProvider>
+    );
+    const tooltips = screen.getAllByTestId("tooltip-component");
+    expect(tooltips[0]).toBeTruthy();
+    expect(tooltips[1]).toBeTruthy();
+    const tooltipIcons = screen.getAllByTestId("icon-component");
+    expect(tooltipIcons.length).toEqual(1);
+  });
+});
+
+describe("Tabs component events", () => {
+  it("should set tab as active on click", async () => {
+    defaultProps.tabs = ["tab1", "tab2"];
+    defaultProps.active = "tab1";
+    const setSelectedTabAction = jest.fn();
+    defaultProps.setSelectedTab = setSelectedTabAction;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Tabs {...defaultProps} />
+      </ThemeProvider>
+    );
+    const tabs = screen.getAllByTestId("tab");
+    fireEvent.click(tabs[1]);
+    expect(setSelectedTabAction).toBeCalled();
+    expect(tabs[0]).toHaveStyleRule("cursor", "initial");
+    expect(tabs[1]).toHaveStyleRule("cursor", "pointer");
+  });
+
+  it("should call set selected tab action on click icon tab", async () => {
+    defaultProps.tabs = undefined;
+    defaultProps.icons = [
+      { name: "edit", text: "Edit mode" },
+      { name: "view", text: "Preview mode" },
+    ];
+    defaultProps.active = "edit";
+    const setSelectedTabAction = jest.fn();
+    defaultProps.setSelectedTab = setSelectedTabAction;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Tabs {...defaultProps} />
+      </ThemeProvider>
+    );
+    const tabs = screen.getAllByTestId("icon-tab");
+    fireEvent.click(tabs[1]);
+    expect(setSelectedTabAction).toBeCalled();
+  });
+
+  it("should set icon tab as active on click", async () => {
+    defaultProps.icons = [
+      { name: "edit", text: "Edit mode" },
+      { name: "view", text: "Preview mode" },
+    ];
+    defaultProps.active = "edit";
+    const setSelectedTabAction = jest.fn();
+    defaultProps.setSelectedTab = setSelectedTabAction;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Tabs {...defaultProps} />
+      </ThemeProvider>
+    );
+    const tabs = screen.getAllByTestId("icon-tab");
+    fireEvent.click(tabs[1]);
+    expect(setSelectedTabAction).toBeCalled();
+    expect(tabs[0]).toHaveStyleRule("cursor", "initial");
+    expect(tabs[1]).toHaveStyleRule("cursor", "pointer");
+  });
+});

package/src/__tests__/components/Tag/Tag.test.tsx

@@ -0,0 +1,140 @@
+import * as React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { mock } from "jest-mock-extended";
+
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import { parseTheme } from "@ax/helpers";
+
+import globalTheme from "@ax/themes/theme.json";
+import Tag, { ITagProps } from "@ax/components/Tag";
+
+afterEach(cleanup);
+
+const defaultProps = mock<ITagProps>();
+
+describe("Tag component rendering", () => {
+  it("should render status tag when type is defined as 'status'", () => {
+    defaultProps.type = "status";
+    defaultProps.text = "Modules";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Tag {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const tagStatus = screen.getByTestId("tag-status");
+    expect(tagStatus).toBeTruthy();
+  });
+
+  it("should render fixed tag when type is defined as 'fixed'", () => {
+    defaultProps.type = "fixed";
+    defaultProps.text = "Modules";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Tag {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const tagFixed = screen.getByTestId("tag-fixed");
+    expect(tagFixed).toBeTruthy();
+  });
+
+  it("should render square tag when type is defined as 'square'", () => {
+    defaultProps.type = "square";
+    defaultProps.text = "Modules";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Tag {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const tagSquare = screen.getByTestId("tag-square");
+    expect(tagSquare).toBeTruthy();
+  });
+
+  it("should render fixed tag when type is not defined", () => {
+    defaultProps.text = "Modules";
+    defaultProps.type = undefined;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Tag {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const tagFixed = screen.getByTestId("tag-fixed");
+    expect(tagFixed).toBeTruthy();
+  });
+
+  it("should render text", () => {
+    defaultProps.type = "fixed";
+    defaultProps.text = "Modules";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Tag {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const tagFixedTitle = screen.getByTestId("tag-fixed-title");
+    expect(tagFixedTitle).toBeTruthy();
+    expect(tagFixedTitle.textContent).toEqual("Modules");
+  });
+
+  it("should render delete icon when onDeleteAction is defined", () => {
+    defaultProps.type = "fixed";
+    defaultProps.text = "Modules";
+    const deleteAction = jest.fn();
+    defaultProps.onDeleteAction = deleteAction;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Tag {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const deleteIconWrapper = screen.getByTestId("delete-icon-wrapper");
+    expect(deleteIconWrapper).toBeTruthy();
+  });
+});
+
+describe("Tag component events", () => {
+  it("should called deleteAction when click delete button", () => {
+    defaultProps.type = "fixed";
+    defaultProps.text = "Modules";
+    const deleteAction = jest.fn();
+    defaultProps.onDeleteAction = deleteAction;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Tag {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const deleteIconWrapper = screen.getByTestId("delete-icon-wrapper");
+    expect(deleteIconWrapper).toBeTruthy();
+    fireEvent.click(deleteIconWrapper);
+    expect(deleteAction).toBeCalled();
+  });
+
+  it("should set background color when color is defined", () => {
+    defaultProps.type = "fixed";
+    defaultProps.text = "Modules";
+    defaultProps.color = "rgba(80, 87, 255, 0.16)";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Tag {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const tagFixed = screen.getByTestId("tag-fixed");
+    expect(tagFixed).toBeTruthy();
+    const styles = getComputedStyle(tagFixed);
+    expect(styles.backgroundColor).toEqual("rgba(80, 87, 255, 0.16)");
+  });
+});