@griddo/ax 1.75.111 → 1.75.113

package/src/__tests__/components/ConfigPanel/Form/Form.test.tsx

@@ -0,0 +1,235 @@
+import * as React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen, fireEvent } from "../../../../../config/jest/test-utils";
+import { mock } from "jest-mock-extended";
+import configureStore from "redux-mock-store";
+import "@testing-library/jest-dom";
+
+import { parseTheme } from "@ax/helpers";
+import Form, { IFormProps } from "@ax/components/ConfigPanel/Form";
+import globalTheme from "@ax/themes/theme.json";
+
+beforeEach(() => {
+  cleanup();
+});
+
+const middlewares: any = [];
+const mockStore = configureStore(middlewares);
+const initialStore = {
+  navigation: {
+    currentDefaultsContent: [
+      {
+        component: "Header",
+        type: "header",
+        title: "Header name",
+        note01: {
+          title: "",
+          text: "To configure social links go to settings/general/social. To activate search feature go to settings/actionables",
+        },
+        showTopNavigation: true,
+        topNavigationContent: ["showSocialMedia", "showSearchFeature"],
+        school: "GRIDDO_BIG",
+        primaryLink: {
+          component: "Link",
+          parentEditorID: 0,
+        },
+        secondaryLink: {
+          component: "Link",
+          parentEditorID: 0,
+        },
+        setAsDefault: false,
+        topMenu: null,
+        mainMenu: null,
+        sticky: true,
+        navigationBannerIcon: null,
+        navigationBanner: false,
+        navigationBannerText: "lorem ipsum",
+        navigationBannerLink: {
+          component: "Link",
+          parentEditorID: 0,
+        },
+        navigationBannerBGColor: "#50ABFF",
+        parentEditorID: null,
+        id: 181,
+        thumbnail: {
+          id: 1005,
+          name: "navigation-thumbnail.png",
+          title: "Thumbnail for Header name",
+          description: "",
+          alt: "",
+          tags: [],
+          url: "https://images.dev.griddo.io/navigation-thumbnail_71",
+          thumb: "https://images.dev.griddo.io/w/215/h/161/navigation-thumbnail_71",
+          publicId: "thesaurus-dev/navigation-thumbnail_f8d25cc6-daa0-4ea9-b08a-d68670a50a41",
+          damId: "navigation-thumbnail_71",
+          published: "2022-07-06T14:27:23.553Z",
+          size: 4236,
+          width: 773,
+          height: 92,
+          orientation: "L",
+          site: 85,
+        },
+        isDefault: false,
+        navigationLanguages: [
+          {
+            navigationId: 181,
+            languageId: 4,
+            locale: "en_GB",
+            language: "English",
+          },
+        ],
+        site: 85,
+        language: 4,
+        entity: "73c91b2f-caca-4732-be7e-56fc1b640774",
+        deleted: false,
+      },
+    ],
+  },
+  pageEditor: {
+    selectedContent: { component: "Page" },
+    errors: [{}],
+  },
+  sites: {
+    currentSitePages: [
+      {
+        editorID: 1,
+      },
+    ],
+  },
+  app: {
+    lang: { locale: "es-ES", id: 0 },
+  },
+  dataPacks: {
+    templates: [],
+  },
+  menu: {
+    savedMenus: null,
+  },
+};
+const store = mockStore(initialStore);
+
+const defaultProps = mock<IFormProps>();
+
+defaultProps.schema = {
+  title: "Header",
+  component: "Header",
+  type: "header",
+  configTabs: [
+    {
+      title: "content",
+      fields: [
+        {
+          title: "Name",
+          key: "title",
+          type: "TextField",
+          mandatory: true,
+        },
+      ],
+    },
+  ],
+  schemaType: "module",
+};
+const restorePageNavigationActionMock = jest.fn();
+defaultProps.actions = {
+  restorePageNavigationAction: restorePageNavigationActionMock,
+};
+const setSelectedContentMock = defaultProps.setSelectedContent as jest.MockedFunction<(editorID: number) => void>;
+const setSelectedTabMocked = defaultProps.setSelectedTab as jest.MockedFunction<(tab: string) => void>;
+const setHistoryPushMocked = defaultProps.setHistoryPush as jest.MockedFunction<
+  (path: string, isEditor: boolean) => void
+>;
+defaultProps.selectedTab = "content";
+defaultProps.isPage = false;
+defaultProps.isGlobal = false;
+defaultProps.theme = "default-theme";
+
+describe("Form component rendering", () => {
+  it("should render the component", () => {
+    defaultProps.isPage = true;
+    defaultProps.isGlobal = true;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Form {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+    expect(screen.getByTestId("form-section")).toBeTruthy();
+  });
+
+  it("should render the component with no header warning text", () => {
+    defaultProps.isPage = false;
+    defaultProps.isGlobal = false;
+    defaultProps.header = 0;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Form {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+    expect(screen.getByText(/This page doesn\'t have a header. Click/i)).toBeInTheDocument();
+    expect(screen.getByTestId("form-section")).toBeTruthy();
+  });
+
+  it("should call the function to restore the header", () => {
+    defaultProps.header = 0;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Form {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    expect(screen.getByText(/This page doesn\'t have a header. Click/i)).toBeInTheDocument();
+    const headerLink = screen.getByTestId("header-link");
+    fireEvent.click(headerLink);
+    expect(restorePageNavigationActionMock).toBeCalled();
+    expect(restorePageNavigationActionMock).toBeCalledWith("header");
+  });
+
+  it("should render the component with no footer warning text", () => {
+    defaultProps.footer = 0;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Form {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+    expect(screen.getByText(/This page doesn\'t have a footer. Click/i)).toBeInTheDocument();
+    expect(screen.getByTestId("form-section")).toBeTruthy();
+  });
+
+  it("should call the function to restore the header", () => {
+    defaultProps.header = 0;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Form {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    expect(screen.getByText(/This page doesn\'t have a header. Click/i)).toBeInTheDocument();
+    const footerLink = screen.getByTestId("footer-link");
+    fireEvent.click(footerLink);
+    expect(restorePageNavigationActionMock).toBeCalled();
+    expect(restorePageNavigationActionMock).toBeCalledWith("footer");
+  });
+
+  it("should render the tabs", () => {
+    defaultProps.isPage = true;
+    defaultProps.isGlobal = true;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Form {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+    expect(screen.getByTestId("form-section")).toBeTruthy();
+  });
+});

package/src/__tests__/components/ConfigPanel/GlobalPageForm/GlobalPageForm.test.tsx

@@ -0,0 +1,196 @@
+import * as React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen, fireEvent } from "../../../../../config/jest/test-utils";
+import { mock } from "jest-mock-extended";
+import configureStore from "redux-mock-store";
+import "@testing-library/jest-dom";
+
+import { parseTheme } from "@ax/helpers";
+import GlobalPageForm, { IGlobalPageFormProps } from "@ax/components/ConfigPanel/GlobalPageForm";
+import globalTheme from "@ax/themes/theme.json";
+
+beforeEach(() => {
+  cleanup();
+});
+
+const middlewares: any = [];
+const mockStore = configureStore(middlewares);
+const updateEditorContentMock = jest.fn();
+const initialStore = {
+  pageEditor: {
+    selectedContent: {
+      title: {
+        component: "Page",
+        templateType: "default",
+      },
+      template: {
+        type: "template",
+        templateType: "BasicTemplate",
+        heroSection: {
+          component: "Section",
+          name: "Hero Section",
+          modules: [],
+          sectionPosition: 1,
+          editorID: 2,
+          parentEditorID: 1,
+          key: "heroSection",
+        },
+        editorID: 1,
+        parentEditorID: 0,
+      },
+    },
+    errors: [{}],
+  },
+  sites: {
+    currentSitePages: [
+      {
+        editorID: 1,
+      },
+    ],
+  },
+  app: {
+    lang: { locale: "es-ES", id: 0 },
+  },
+  dataPacks: {
+    templates: [{ id: "default" }, { id: "BasicTemplate" }],
+    activated: [],
+  },
+  menu: {
+    savedMenus: null,
+  },
+  navigationActions: {
+    updateEditorContent: updateEditorContentMock,
+  },
+};
+
+const store = mockStore(initialStore);
+
+const defaultProps = mock<IGlobalPageFormProps>();
+
+describe("GlobalPageForm component rendering", () => {
+  it("should render PageConnectedField", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <GlobalPageForm {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const globalPageSection = screen.getByTestId("global-page-section");
+    expect(globalPageSection).toBeTruthy();
+  });
+
+  it("should call the function to restore the header", () => {
+    defaultProps.selectedTab = "content";
+    defaultProps.header = 0;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <GlobalPageForm {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    expect(screen.getByText(/This page doesn\'t have a header. Click/i)).toBeInTheDocument();
+  });
+
+  it("should render the component with no footer warning text", () => {
+    defaultProps.selectedTab = "content";
+    defaultProps.footer = 0;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <GlobalPageForm {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+    expect(screen.getByText(/This page doesn\'t have a footer. Click/i)).toBeInTheDocument();
+  });
+
+  it("should render the connectedField component", () => {
+    defaultProps.selectedTab = "config";
+    defaultProps.schema = {
+      schemaType: "module",
+      type: "Header",
+      title: "Header",
+      component: "header",
+      configTabs: [],
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <GlobalPageForm {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const fieldsBehaviorWrapper = screen.getByTestId("fields-behavior-wrapper");
+    expect(fieldsBehaviorWrapper).toBeTruthy();
+  });
+});
+
+describe("GlobalPageForm component rendering", () => {
+  it("should trigger handleClick", () => {
+    defaultProps.selectedTab = "content";
+    const getGlobalFromLocalPageActionMock = jest.fn();
+    const saveCurrentSiteInfoActionMock = jest.fn();
+    defaultProps.actions.saveCurrentSiteInfoAction = saveCurrentSiteInfoActionMock;
+    defaultProps.actions.getGlobalFromLocalPageAction = getGlobalFromLocalPageActionMock;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <GlobalPageForm {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const globalPageSection = screen.getByTestId("global-page-section");
+    expect(globalPageSection).toBeTruthy();
+    const editButton = screen.getByText<HTMLButtonElement>("Edit");
+    expect(editButton).toBeTruthy();
+    fireEvent.click(editButton);
+    expect(getGlobalFromLocalPageActionMock).toBeCalled();
+    expect(saveCurrentSiteInfoActionMock).toBeCalled();
+  });
+
+  it("should trigger handleRestoreHeader", () => {
+    defaultProps.selectedTab = "content";
+    defaultProps.header = 0;
+    const restorePageNavigationActionMock = jest.fn();
+    defaultProps.actions.restorePageNavigationAction = restorePageNavigationActionMock;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <GlobalPageForm {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    expect(screen.getByText(/This page doesn\'t have a header. Click/i)).toBeInTheDocument();
+    const headerLink = screen.getByTestId("header-link");
+    expect(headerLink).toBeTruthy();
+    fireEvent.click(headerLink);
+    expect(restorePageNavigationActionMock).toBeCalled();
+  });
+
+  it("should trigger handleRestoreFooter", () => {
+    defaultProps.selectedTab = "content";
+    defaultProps.footer = 0;
+    const restorePageNavigationActionMock = jest.fn();
+    defaultProps.actions.restorePageNavigationAction = restorePageNavigationActionMock;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <GlobalPageForm {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    expect(screen.getByText(/This page doesn\'t have a footer. Click/i)).toBeInTheDocument();
+    const footerLink = screen.getByTestId("footer-link");
+    expect(footerLink).toBeTruthy();
+    fireEvent.click(footerLink);
+    expect(restorePageNavigationActionMock).toBeCalled();
+  });
+});

package/src/__tests__/components/ConfigPanel/Header/Header.test.tsx

@@ -0,0 +1,152 @@
+import * as React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen, fireEvent } from "../../../../../config/jest/test-utils";
+import { mock } from "jest-mock-extended";
+import configureStore from "redux-mock-store";
+import "@testing-library/jest-dom";
+
+import { parseTheme } from "@ax/helpers";
+import Header, { IHeaderProps } from "@ax/components/ConfigPanel/Header";
+import globalTheme from "@ax/themes/theme.json";
+
+beforeEach(() => {
+  cleanup();
+});
+
+const middlewares: any = [];
+const mockStore = configureStore(middlewares);
+const updateEditorContentMock = jest.fn();
+const initialStore = {
+  pageEditor: {
+    selectedContent: {
+      title: {
+        component: "Page",
+        templateType: "default",
+      },
+      template: {
+        type: "template",
+        templateType: "BasicTemplate",
+        heroSection: {
+          component: "Section",
+          name: "Hero Section",
+          modules: [],
+          sectionPosition: 1,
+          editorID: 2,
+          parentEditorID: 1,
+          key: "heroSection",
+        },
+        editorID: 1,
+        parentEditorID: 0,
+      },
+    },
+    errors: [{}],
+  },
+  sites: {
+    currentSitePages: [
+      {
+        editorID: 1,
+      },
+    ],
+  },
+  app: {
+    lang: { locale: "es-ES", id: 0 },
+  },
+  dataPacks: {
+    templates: [{ id: "default" }, { id: "BasicTemplate" }],
+    activated: [],
+  },
+  menu: {
+    savedMenus: null,
+  },
+  navigationActions: {
+    updateEditorContent: updateEditorContentMock,
+  },
+};
+
+const store = mockStore(initialStore);
+
+const defaultProps = mock<IHeaderProps>();
+defaultProps.actions = {
+  duplicateModuleAction: jest.fn(),
+  deleteModuleAction: jest.fn(),
+  copyModuleAction: jest.fn(),
+};
+const setSelectedContentMock = defaultProps.setSelectedContent as jest.MockedFunction<(editorID: number) => void>;
+
+defaultProps.schema = {
+  title: "Header",
+  component: "Header",
+  type: "header",
+  configTabs: [
+    {
+      title: "content",
+      fields: [
+        {
+          title: "Name",
+          key: "title",
+          type: "TextField",
+          mandatory: true,
+        },
+      ],
+    },
+  ],
+  schemaType: "module",
+};
+
+defaultProps.breadcrumb = [
+  {
+    editorID: 0,
+    component: "TextField",
+    displayName: "Texto",
+  },
+];
+
+defaultProps.activatedModules = ["TextField"];
+
+describe("Header component rendering", () => {
+  it("should render component", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Header {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const headerConfigWrapper = screen.getByTestId("header-config-wrapper");
+    expect(headerConfigWrapper).toBeTruthy();
+    expect(screen.getByText(/Texto/i)).toBeInTheDocument();
+  });
+
+  it("should render the actions menu when clicking the more info button", () => {
+    defaultProps.selectedParent = [];
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Header {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+    expect(screen.getByTestId("action-menu-wrapper")).toBeTruthy();
+    const moreInfo = screen.getByTestId("more-info-button");
+    fireEvent.click(moreInfo);
+    const listItem = screen.getAllByTestId("action-menu-item");
+    expect(listItem).toHaveLength(3);
+  });
+
+  it("should trigger the duplicate action", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Header {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+    expect(screen.getByTestId("action-menu-wrapper")).toBeTruthy();
+    const moreInfo = screen.getByTestId("more-info-button");
+    fireEvent.click(moreInfo);
+    const listItem = screen.getAllByTestId("action-menu-item");
+    expect(listItem).toHaveLength(3);
+    fireEvent.click(listItem[0]);
+    expect(setSelectedContentMock).toBeCalled();
+  });
+});

package/src/__tests__/components/ConfigPanel/NavigationForm/Field/Field.test.tsx

@@ -0,0 +1,106 @@
+import * as React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen, fireEvent } from "../../../../../../config/jest/test-utils";
+import { mock } from "jest-mock-extended";
+import configureStore from "redux-mock-store";
+import "@testing-library/jest-dom";
+import thunk from "redux-thunk";
+
+import { parseTheme } from "@ax/helpers";
+import Field, { IField, IStateProps, IDispatchProps } from "@ax/components/ConfigPanel/NavigationForm/Field";
+import globalTheme from "@ax/themes/theme.json";
+
+beforeEach(() => {
+  cleanup();
+});
+
+const middlewares: any = [thunk];
+const mockStore = configureStore(middlewares);
+
+const initialStore = {
+  pageEditor: {
+    selectedContent: {
+      editorID: 0,
+      title: "selected content field",
+      id: 1,
+      component: "module",
+    },
+    editorContent: {
+      module: 0,
+      editorID: 0,
+      parentEditorID: null,
+      setAsHome: false,
+      headerConfig: "{}",
+      footerConfig: "{}",
+    },
+  },
+  navigation: {
+    currentDefaultsContent: [
+      {
+        type: "module",
+        id: 2,
+      },
+    ],
+  },
+};
+
+const store = mockStore(initialStore);
+
+const defaultFieldProps = mock<IField>();
+const defaultStateProps = mock<IStateProps>();
+const defaultDispatchProps = mock<IDispatchProps>();
+
+defaultFieldProps.type = "module";
+
+const defaultProps = { ...defaultFieldProps, ...defaultStateProps, ...defaultDispatchProps };
+
+describe("Field component rendering", () => {
+  it("should render component", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Field {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const componentWrapper = screen.getByText(/selected content field/i);
+    expect(componentWrapper).toBeInTheDocument();
+  });
+
+  it("should render SideModal because has multiple options", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Field {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const moreInfo = screen.getByTestId("more-info-button");
+    fireEvent.click(moreInfo);
+    const listItem = screen.getAllByTestId("action-menu-item");
+    expect(listItem).toHaveLength(2);
+    fireEvent.click(listItem[0]);
+    const sideModalWrapper = screen.getByTestId("side-modal");
+    expect(sideModalWrapper).toBeTruthy();
+  });
+
+  it("should trigger the handleRemove action", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Field {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const moreInfo = screen.getByTestId("more-info-button");
+    fireEvent.click(moreInfo);
+    const listItem = screen.getAllByTestId("action-menu-item");
+    expect(listItem).toHaveLength(2);
+    fireEvent.click(listItem[1]);
+    expect(store.getActions()).toContainEqual({
+      payload: { editorContent: initialStore.pageEditor.editorContent },
+      type: "pageEditor/SET_EDITOR_CONTENT",
+    });
+  });
+});