@griddo/ax 1.75.111 → 1.75.113

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

@@ -0,0 +1,518 @@
+import * as React from "react";
+import axios from "axios";
+
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen, fireEvent } from "../../../../../../../config/jest/test-utils";
+import configureStore from "redux-mock-store";
+import "@testing-library/jest-dom";
+import thunk from "redux-thunk";
+
+import { parseTheme } from "@ax/helpers";
+import PageConnectedField from "@ax/components/ConfigPanel/Form/ConnectedField/PageConnectedField";
+import globalTheme from "@ax/themes/theme.json";
+
+beforeEach(() => {
+  cleanup();
+});
+
+jest.mock("axios");
+const mockedAxios = axios as jest.MockedFunction<typeof axios>;
+
+const middlewares: any = [thunk];
+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 defaultProps = {
+  field: {
+    title: "Name",
+    key: "parent",
+    type: "TextField",
+    mandatory: true,
+    modifiable: true,
+    autoComplete: "a",
+    slugTo: "la",
+  },
+  schema: {
+    title: "Header",
+    component: "Header",
+    type: "header",
+    configTabs: [
+      {
+        title: "content",
+        fields: [
+          {
+            title: "Name",
+            key: "title",
+            type: "TextField",
+            mandatory: true,
+            autoComplete: "a",
+          },
+        ],
+      },
+    ],
+    schemaType: "module",
+  },
+  componentType: "page",
+  isPage: true,
+  isGlobal: true,
+  selectedTab: "content",
+  theme: "default-theme",
+};
+
+const templateProps = {
+  field: {
+    title: "Name",
+    key: "template",
+    type: "template",
+    modifiable: true,
+  },
+  schema: {
+    title: "Header",
+    component: "Header",
+    type: "header",
+    configTabs: [
+      {
+        title: "content",
+        fields: [
+          {
+            title: "Name",
+            key: "title",
+            type: "TextField",
+            mandatory: true,
+          },
+        ],
+      },
+    ],
+    schemaType: "template",
+  },
+  isPage: true,
+  isGlobal: true,
+  selectedTab: "config",
+  theme: "default-theme",
+};
+
+const data = {
+  data: [],
+  status: 200,
+  statusText: "Ok",
+  headers: {},
+  config: {},
+};
+
+mockedAxios.mockResolvedValue(data);
+
+describe("PageConnectedField component rendering", () => {
+  it("should render PageConnectedField", () => {
+    const store = mockStore(initialStore);
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <PageConnectedField {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    // It's loading Field -> FieldContainer with a TextField
+    const textFieldContainer = screen.getByTestId("text-field-container");
+    expect(textFieldContainer).toBeTruthy();
+  });
+
+  it("should render the TemplateManager", () => {
+    const store = mockStore(initialStore);
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <PageConnectedField {...templateProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const templateText = screen.getByText(/Template Options/i);
+    expect(templateText).toBeInTheDocument();
+  });
+
+  it("should call updateEditorContent and overWriteHeaderConfig if isOverride", () => {
+    const initialStore = {
+      pageEditor: {
+        selectedEditorID: 1,
+        selectedContent: {
+          type: "header",
+          isHome: true,
+          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,
+          },
+        },
+        editorContent: {
+          isHome: true,
+          setAsHome: true,
+          editorContent: {
+            headerConfig: {},
+          },
+        },
+        errors: [{}],
+      },
+      sites: {
+        currentSitePages: [
+          {
+            editorID: 1,
+          },
+        ],
+      },
+      app: {
+        lang: { locale: "es-ES", id: 0 },
+      },
+      dataPacks: {
+        templates: [{ id: "default" }, { id: "BasicTemplate" }],
+        activated: [],
+      },
+    };
+
+    const store = mockStore(initialStore);
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <PageConnectedField {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    expect(store.getActions()).toContainEqual({
+      payload: { editorContent: initialStore.pageEditor.editorContent },
+      type: "pageEditor/SET_EDITOR_CONTENT",
+    });
+  });
+
+  it("should call getPageBreadCrumb", () => {
+    defaultProps.field.key = "parent";
+    const initialStore = {
+      pageEditor: {
+        selectedEditorID: 1,
+        selectedContent: {
+          type: "TextField",
+          isHome: false,
+          component: "Image",
+        },
+        editorContent: {
+          isHome: false,
+          setAsHome: false,
+          editorContent: {
+            headerConfig: {},
+          },
+        },
+        errors: [{}],
+      },
+      sites: {
+        currentSitePages: [
+          {
+            editorID: 1,
+          },
+        ],
+      },
+      app: {
+        lang: { locale: "es-ES", id: 0 },
+      },
+      dataPacks: {
+        templates: [{ id: "default" }, { id: "BasicTemplate" }],
+        activated: [],
+      },
+    };
+
+    const store = mockStore(initialStore);
+    const component = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <PageConnectedField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    render(component, { store });
+
+    // It's loading Field -> FieldContainer with a TextField
+    const inputComponent = screen.getByTestId<HTMLInputElement>("input-component");
+    expect(inputComponent).toBeTruthy();
+    fireEvent.change(inputComponent, { target: { value: "value" } });
+    expect(store.getActions()).toContainEqual({
+      payload: { editorContent: initialStore.pageEditor.editorContent },
+      type: "pageEditor/SET_EDITOR_CONTENT",
+    });
+  });
+
+  it("should call updateEditorContent if key is setAsHome", () => {
+    defaultProps.field.key = "setAsHome";
+    const initialStore = {
+      pageEditor: {
+        selectedEditorID: 1,
+        selectedContent: {
+          type: "TextField",
+          isHome: false,
+          component: "Image",
+        },
+        editorContent: {
+          isHome: false,
+          setAsHome: false,
+          editorContent: {
+            headerConfig: {},
+          },
+        },
+        errors: [{}],
+      },
+      sites: {
+        currentSitePages: [
+          {
+            editorID: 1,
+          },
+        ],
+      },
+      app: {
+        lang: { locale: "es-ES", id: 0 },
+      },
+      dataPacks: {
+        templates: [{ id: "default" }, { id: "BasicTemplate" }],
+        activated: [],
+      },
+    };
+
+    const store = mockStore(initialStore);
+    const component = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <PageConnectedField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    render(component, { store });
+
+    // It's loading Field -> FieldContainer with a TextField
+    const inputComponent = screen.getByTestId<HTMLInputElement>("input-component");
+    expect(inputComponent).toBeTruthy();
+    fireEvent.change(inputComponent, { target: { value: "value" } });
+    expect(store.getActions()).toContainEqual({
+      payload: { editorContent: initialStore.pageEditor.editorContent },
+      type: "pageEditor/SET_EDITOR_CONTENT",
+    });
+  });
+
+  it("should call updateEditorContent if key is title and isPageTitle", () => {
+    defaultProps.field.key = "title";
+    const initialStore = {
+      pageEditor: {
+        selectedEditorID: 1,
+        selectedContent: {
+          type: "TextField",
+          isHome: false,
+          component: "Page",
+        },
+        editorContent: {
+          isHome: false,
+          setAsHome: false,
+          editorContent: {
+            headerConfig: {},
+          },
+        },
+        errors: [{}],
+      },
+      sites: {
+        currentSitePages: [
+          {
+            editorID: 1,
+          },
+        ],
+      },
+      app: {
+        lang: { locale: "es-ES", id: 0 },
+      },
+      dataPacks: {
+        templates: [{ id: "default" }, { id: "BasicTemplate" }],
+        activated: [],
+      },
+    };
+
+    const store = mockStore(initialStore);
+    const component = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <PageConnectedField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    render(component, { store });
+
+    // It's loading Field -> FieldContainer with a TextField
+    const inputComponent = screen.getByTestId<HTMLInputElement>("input-component");
+    expect(inputComponent).toBeTruthy();
+    fireEvent.change(inputComponent, { target: { value: "value" } });
+    expect(store.getActions()).toContainEqual({
+      payload: { editorContent: initialStore.pageEditor.editorContent },
+      type: "pageEditor/SET_EDITOR_CONTENT",
+    });
+  });
+
+  it("should call updateEditorContent if key is file and isComponentImage", () => {
+    defaultProps.field.key = "file";
+    const initialStore = {
+      pageEditor: {
+        selectedEditorID: 1,
+        selectedContent: {
+          type: "TextField",
+          isHome: false,
+          component: "Image",
+        },
+        editorContent: {
+          isHome: false,
+          setAsHome: false,
+          editorContent: {
+            headerConfig: {},
+          },
+        },
+        errors: [{}],
+      },
+      sites: {
+        currentSitePages: [
+          {
+            editorID: 1,
+          },
+        ],
+      },
+      app: {
+        lang: { locale: "es-ES", id: 0 },
+      },
+      dataPacks: {
+        templates: [{ id: "default" }, { id: "BasicTemplate" }],
+        activated: [],
+      },
+    };
+
+    const store = mockStore(initialStore);
+    const component = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <PageConnectedField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    render(component, { store });
+
+    // It's loading Field -> FieldContainer with a TextField
+    const inputComponent = screen.getByTestId<HTMLInputElement>("input-component");
+    expect(inputComponent).toBeTruthy();
+    fireEvent.change(inputComponent, { target: { value: "value" } });
+    expect(store.getActions()).toContainEqual({
+      payload: { editorContent: initialStore.pageEditor.editorContent },
+      type: "pageEditor/SET_EDITOR_CONTENT",
+    });
+  });
+
+  it("should call updateEditorContent if key is slugTo is present", () => {
+    defaultProps.field.key = "file";
+    defaultProps.field.slugTo = "value";
+
+    const initialStore = {
+      pageEditor: {
+        selectedEditorID: 1,
+        selectedContent: {
+          type: "TextField",
+          isHome: false,
+          component: "Image",
+        },
+        editorContent: {
+          isHome: false,
+          setAsHome: false,
+          editorContent: {
+            headerConfig: {},
+          },
+        },
+        errors: [{}],
+      },
+      sites: {
+        currentSitePages: [
+          {
+            editorID: 1,
+          },
+        ],
+      },
+      app: {
+        lang: { locale: "es-ES", id: 0 },
+      },
+      dataPacks: {
+        templates: [{ id: "default" }, { id: "BasicTemplate" }],
+        activated: [],
+      },
+    };
+
+    const store = mockStore(initialStore);
+    const component = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <PageConnectedField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    render(component, { store });
+
+    // It's loading Field -> FieldContainer with a TextField
+    const inputComponent = screen.getByTestId<HTMLInputElement>("input-component");
+    expect(inputComponent).toBeTruthy();
+    fireEvent.change(inputComponent, { target: { value: "value" } });
+    expect(store.getActions()).toContainEqual({
+      payload: { editorContent: initialStore.pageEditor.editorContent },
+      type: "pageEditor/SET_EDITOR_CONTENT",
+    });
+  });
+});

package/src/__tests__/components/ConfigPanel/Form/ConnectedField/PageConnectedField/TemplateManager/TemplateManager.test.tsx

@@ -0,0 +1,144 @@
+import * as React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen, fireEvent } from "../../../../../../../../config/jest/test-utils";
+import configureStore from "redux-mock-store";
+import "@testing-library/jest-dom";
+
+import { parseTheme } from "@ax/helpers";
+import TemplateManager from "@ax/components/ConfigPanel/Form/ConnectedField/PageConnectedField/TemplateManager";
+import globalTheme from "@ax/themes/theme.json";
+
+beforeEach(() => {
+  cleanup();
+});
+
+const middlewares: any = [];
+const mockStore = configureStore(middlewares);
+const updateValueMock = jest.fn();
+
+const defaultProps = {
+  template: {
+    schemaType: "template",
+    displayName: "Basic Template",
+    component: "BasicTemplate",
+    dataPacks: null,
+    type: {
+      label: "Static",
+      value: "static",
+    },
+    config: [
+      {
+        title: "Hero Section",
+        type: "TextField",
+        maxItems: 1,
+        whiteList: ["BasicContent", "CardCollection"],
+        key: "heroSection",
+        autoComplete: "a",
+      },
+    ],
+  },
+  updateValue: updateValueMock,
+  goTo: jest.fn(),
+  objKey: "template",
+  pages: [],
+  selectedTab: "config",
+  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,
+    },
+  },
+  actions: {},
+  activatedPacks: [],
+  isTemplateActivated: true,
+  deleteError: jest.fn(),
+  errors: [],
+  theme: "griddo-alt-theme",
+  moduleCopy: null,
+  availableDataPacks: [],
+};
+
+const initialStore = {
+  dataPacks: {
+    activated: [
+      {
+        id: "ARTICLES",
+        title: "Articles",
+        category: {
+          id: "ARTICLES",
+          label: "Articles",
+        },
+        description: "Allows you to hightlight articles",
+        image:
+          "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/data-packs-thumbnails/articles.png",
+        templates: [],
+        modules: [
+          {
+            id: "ArticlesDistributor",
+            title: "Articles Distributor",
+            category: "articlesAndEvents",
+            thumbnails: {
+              "1x": "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/thumbnails/ArticlesDistributor",
+              "2x": "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/thumbnails/ArticlesDistributor@2x",
+            },
+            dataPacks: ["ARTICLES"],
+            type: {},
+            sectionList: {
+              BasicTemplate: ["mainContent"],
+            },
+          },
+        ],
+        categories: [],
+        activated: true,
+        config: "config",
+      },
+    ],
+    available: [],
+    modules: [],
+  },
+};
+
+const store = mockStore(initialStore);
+
+describe("TemplateManager component rendering", () => {
+  it("should render the component", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TemplateManager {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    expect(screen.getByText(/Template Options/i)).toBeInTheDocument();
+  });
+
+  it("should trigger the handleUpdate", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TemplateManager {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    expect(screen.getByText(/Template Options/i)).toBeInTheDocument();
+    expect(screen.getByTestId("input-component")).toBeTruthy();
+    fireEvent.change(screen.getByTestId<HTMLInputElement>("input-component"), { target: { value: "test" } });
+    expect(updateValueMock).toBeCalled();
+  });
+});