@griddo/ax 1.69.7 → 1.71.0

package/src/__tests__/components/Fields/VisualUniqueSelection/ImageSelection/ImageSelection.test.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import ImageSelection from "@ax/components/Fields/VisualUniqueSelection/ImageSelection";
+import ImageSelection, { IImageSelectionProps } from "@ax/components/Fields/VisualUniqueSelection/ImageSelection";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@griddo/core";
 import globalTheme from "@ax/themes/theme.json";
@@ -85,15 +85,3 @@ describe("VisualUniqueSelection component events", () => {
     expect(onChangeMock).toHaveBeenCalled();
   });
 });
-
-interface IImageSelectionProps {
-  value: string;
-  title: string;
-  onChange: (value: string) => void;
-  options: any;
-  name: string;
-  objKey: string;
-  columns: number;
-  disabled?: boolean;
-  theme: string;
-}

package/src/__tests__/components/Fields/VisualUniqueSelection/ScrollableSelection/ScrollableSelection.test.tsx

@@ -1,5 +1,7 @@
 import * as React from "react";
-import ScrollableSelection from "@ax/components/Fields/VisualUniqueSelection/ScrollableSelection";
+import ScrollableSelection, {
+  IScrollableSelectionProps,
+} from "@ax/components/Fields/VisualUniqueSelection/ScrollableSelection";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@griddo/core";
 import globalTheme from "@ax/themes/theme.json";
@@ -158,19 +160,3 @@ describe("ScrollableSelection component events", () => {
     expect(onChangeMock).toHaveBeenCalled();
   });
 });
-
-interface IScrollableSelectionProps {
-  value: string;
-  title: string;
-  onChange: (value: string) => void;
-  options: any[];
-  name: string;
-  objKey: string;
-  columns: number;
-  disabled?: boolean;
-  actions: any;
-  selectedContent: any;
-  reference?: string;
-  theme: string;
-  elementUniqueSelection: boolean;
-}

package/src/__tests__/components/Fields/VisualUniqueSelection/VisualUniqueSelection.test.tsx

@@ -1,5 +1,7 @@
 import * as React from "react";
 import VisualUniqueSelection from "@ax/components/Fields/VisualUniqueSelection";
+import { IImageSelectionProps } from "@ax/components/Fields/VisualUniqueSelection/ImageSelection";
+import { IScrollableSelectionProps } from "@ax/components/Fields/VisualUniqueSelection/ScrollableSelection";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@griddo/core";
 import globalTheme from "@ax/themes/theme.json";
@@ -48,31 +50,3 @@ describe("VisualUniqueSelection component rendering", () => {
     expect(screen.getByTestId("scrollableSelectionComponent")).toBeTruthy();
   });
 });
-
-interface IImageSelectionProps {
-  value: string;
-  title: string;
-  onChange: (value: string) => void;
-  options: any;
-  name: string;
-  objKey: string;
-  columns: number;
-  disabled?: boolean;
-  theme: string;
-  elementUniqueSelection: boolean;
-}
-
-interface IScrollableSelectionProps {
-  value: string;
-  title: string;
-  onChange: (value: string) => void;
-  options: any[];
-  name: string;
-  objKey: string;
-  columns: number;
-  disabled?: boolean;
-  actions: any;
-  selectedContent: any;
-  reference?: string;
-  theme: string;
-}

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 "@griddo/core";
+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,202 @@
+import * as React from "react";
+import Tabs, { ITabsProps } from "@ax/components/Tabs";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@griddo/core";
+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 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 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 call set selected tab action on click icon tab", 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();
+  });
+
+  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");
+  });
+
+  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);
+  });
+});

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

@@ -0,0 +1,138 @@
+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 "@griddo/core";
+
+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();
+  });
+
+  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)");
+  });
+});

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

@@ -0,0 +1,100 @@
+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 "@griddo/core";
+
+import Toast, { IToastProps } from "@ax/components/Toast";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+const defaultProps = mock<IToastProps>();
+
+describe("Toast component rendering", () => {
+  jest.useFakeTimers();
+  jest.spyOn(global, "setTimeout");
+
+  it("should render the component", () => {
+    defaultProps.message = "1 module copied to clipboard";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Toast {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const toastWrapper = screen.getByTestId("toast-wrapper");
+    expect(toastWrapper).toBeTruthy();
+  });
+
+  it("should render the component's message", () => {
+    defaultProps.message = "1 module copied to clipboard";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Toast {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const toastMessage = screen.getByTestId("toast-message");
+    expect(toastMessage.textContent).toEqual("1 module copied to clipboard");
+  });
+
+  it("should not render the undo button when no action", () => {
+    defaultProps.message = "1 module copied to clipboard";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Toast {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const button = screen.queryByTestId("button-line-inverse");
+    expect(button).toBeFalsy();
+  });
+
+  it("should render the undo button when action", () => {
+    defaultProps.message = "1 module copied to clipboard";
+    defaultProps.action = jest.fn();
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Toast {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const button = screen.getByTestId("button-line-inverse");
+    expect(button).toBeTruthy();
+  });
+
+  it("should change visibility after 5000 ms", async () => {
+    defaultProps.message = "1 module copied to clipboard";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Toast {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    expect(setTimeout).toHaveBeenCalled();
+    expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 5000);
+  });
+
+  it("should contain closing animation class on click close button", async () => {
+    defaultProps.message = "1 module copied to clipboard";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Toast {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const toastWrapper = screen.getByTestId("toast-wrapper");
+    const closeButton = screen.getByTestId("iconActionComponent");
+    expect(closeButton).toBeTruthy();
+    fireEvent.click(closeButton);
+    expect(toastWrapper.classList.contains("close-animation")).toBeTruthy();
+  });
+});

package/src/api/navigation.tsx

@@ -105,7 +105,7 @@ const updateNavigation = (navID: number, data: any) => {
 
   SERVICES.UPDATE_NAVIGATION.dynamicUrl = `${host}${endpoint}${navID}`;
 
-  return sendRequest(SERVICES.UPDATE_NAVIGATION, { ...data });
+  return sendRequest(SERVICES.UPDATE_NAVIGATION, data);
 };
 
 const deleteNavigation = (navID: number) => {

package/src/components/Browser/index.tsx

@@ -136,7 +136,7 @@ const Browser = (props: IBrowserProps): JSX.Element => {
           <iframe title="Preview" width={getWidth(resolution)} height="100%" src={urlPreview} loading="lazy" />
         </S.FrameWrapper>
       ) : (
-        <S.Wrapper ref={(ref: any) => ((window as any).browserRef = ref)}>
+        <S.Wrapper ref={(ref: any) => ((window as any).browserRef = ref)} className="browser-content">
           <BrowserContent
             cloudinaryName={cloudinaryName}
             theme={theme}