@griddo/ax 1.67.9 → 1.68.1

package/src/__tests__/components/Fields/ComponentArray/MixableComponentArray/MixableComponentArray.test.tsx

@@ -0,0 +1,315 @@
+import * as React from "react";
+import MixableComponentArray from "@ax/components/Fields/ComponentArray/MixableComponentArray";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@griddo/core";
+import globalTheme from "@ax/themes/theme.json";
+import { IModule } from "@ax/types";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import { mock } from "jest-mock-extended";
+
+afterEach(cleanup);
+
+const mixableProps = mock<IMixableComponentArrayProps>();
+const mixableModule = mock<IModule>();
+const otherMixableModule = mock<IModule>();
+// default values for MixableComponentArray
+mixableModule.editorID = 1;
+mixableModule.component = "HeroCard";
+mixableModule.title = "Cards";
+mixableModule.modules = [];
+otherMixableModule.editorID = 2;
+otherMixableModule.component = "HeroCard";
+otherMixableModule.title = "Hero Section";
+otherMixableModule.modules = [];
+mixableProps.field = { type: "components" };
+const testModule = {
+  value: {
+    editorID: 1,
+    component: "HeroCard",
+    title: "Cards",
+    modules: [],
+  },
+};
+// test for old value prop (it wasn't an array)
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+mixableProps.value = testModule;
+mixableProps.activatedModules = ["HeroSection"];
+mixableProps.whiteList = [];
+mixableProps.moduleCopy = null;
+
+describe("ComponentArraySelector component rendering", () => {
+  test("should render the component with MixableComponentArray", () => {
+    mixableProps.disabled = true;
+    mixableProps.editorID = 1;
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <MixableComponentArray {...mixableProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.getAllByTestId("mixableComponentWrapper")).toBeTruthy();
+  });
+
+  test("should render the AddItemButton", () => {
+    otherMixableModule.editorID = 5;
+    otherMixableModule.component = "HeroCard";
+    otherMixableModule.title = "Hero Section";
+    otherMixableModule.modules = [];
+    mixableProps.value = [mixableModule, otherMixableModule];
+    mixableProps.field = { contentType: "modules" };
+    mixableProps.objKey = "elements";
+    mixableProps.disabled = false;
+    mixableProps.maxItems = 10;
+    mixableProps.actions = {
+      addModuleAction: jest.fn(),
+      addComponentAction: jest.fn(),
+      deleteModuleAction: jest.fn(),
+      replaceElementsInCollectionAction: jest.fn(),
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <MixableComponentArray {...mixableProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.getAllByTestId("iconActionComponent")).toBeTruthy();
+  });
+
+  // Test incompleto. Lo dejo por si lo podemos reaprovechar más adelante
+  /*
+  test("should render the SideModal", () => {
+    otherMixableModule.editorID = 5;
+    otherMixableModule.component = "HeroCard";
+    otherMixableModule.title = "Hero Section";
+    otherMixableModule.modules = [];
+    mixableProps.value = [];
+    mixableProps.field = { contentType: "modules" };
+    mixableProps.objKey = "elements";
+    mixableProps.disabled = false;
+    mixableProps.maxItems = 1;
+    mixableProps.actions = {
+      addModuleAction: jest.fn(),
+      addComponentAction: jest.fn(),
+      deleteModuleAction: jest.fn(),
+      replaceElementsInCollectionAction: jest.fn(),
+    };
+    mixableProps.whiteList = ["BasicContent", "CardCollection"];
+
+    const Component = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <MixableComponentArray {...mixableProps} />
+      </ThemeProvider>
+    );
+
+    const { rerender } = render(Component);
+    const addItemButton = screen.getAllByTestId<HTMLElement>("iconActionComponent");
+    expect(addItemButton).toBeTruthy();
+    fireEvent.click(addItemButton[0]);
+    rerender(Component);
+  });
+  */
+  test("should render with moduleCopy available", () => {
+    otherMixableModule.editorID = 5;
+    otherMixableModule.component = "HeroCard";
+    otherMixableModule.title = "Hero Section";
+    otherMixableModule.modules = [];
+    mixableProps.whiteList = [];
+    mixableProps.value = [mixableModule, otherMixableModule];
+    mixableProps.field = {
+      contentType: "modules",
+      key: "mainContent",
+    };
+    mixableProps.objKey = "elements";
+    mixableProps.disabled = false;
+    mixableProps.maxItems = 10;
+    mixableProps.actions = {
+      addModuleAction: jest.fn(),
+      addComponentAction: jest.fn(),
+      deleteModuleAction: jest.fn(),
+      replaceElementsInCollectionAction: jest.fn(),
+    };
+    mixableProps.template = { component: "BasicTemplate" };
+    mixableProps.availableDataPacks = [
+      {
+        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: [
+          {
+            id: "ArticlesList",
+            title: "Articles List",
+            thumbnails: {
+              "1x": "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/thumbnails/ArticlesList",
+              "2x": "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/thumbnails/ArticlesList@2x",
+            },
+            dataPacks: ["ARTICLES"],
+            type: {
+              label: "Articles",
+              value: "articles",
+              mode: "list",
+            },
+          },
+        ],
+        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"],
+              NewsDetail: ["closureContent"],
+              NewsList: ["relatedContent"],
+              SitemapTemplate: ["relatedContent", "closureContent"],
+              StoryDetail: ["mainContent", "relatedContent"],
+            },
+          },
+        ],
+        categories: [],
+        structuredData: [
+          {
+            id: "ARTICLES",
+            title: "Articles",
+            dataPacks: ["ARTICLES"],
+            local: false,
+            fromPage: false,
+            relatedCategories: [],
+          },
+        ],
+        activated: false,
+        config: null,
+      },
+    ];
+    const actualDate = new Date();
+    mixableProps.moduleCopy = {
+      date: actualDate.toISOString(),
+      element: {
+        component: "ArticlesDistributor",
+        anchorID: null,
+        verticalSpacing: "medium",
+        hasDistributorData: true,
+        data: {
+          mode: "auto",
+          source: ["ARTICLES"],
+          order: "alpha",
+          quantity: 2,
+        },
+        layout: "L001",
+        title: {
+          content: "Title",
+          tag: "h2",
+        },
+        subtitle: "subtitle",
+        detail: "detail",
+        primaryLinkStyle: "primary",
+        groupingLink: {
+          component: "Link",
+          text: "View all",
+          style: "secondary",
+          editorID: 40,
+          parentEditorID: 39,
+        },
+      },
+    };
+    mixableProps.mandatory = true;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <MixableComponentArray {...mixableProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.getAllByTestId("tooltipComponent")).toBeTruthy();
+  });
+});
+
+describe("ComponentArraySelector component events trigger", () => {
+  test("should handle the AddItemButton onClick", () => {
+    otherMixableModule.editorID = 5;
+    otherMixableModule.component = "HeroCard";
+    otherMixableModule.title = "Hero Section";
+    otherMixableModule.modules = [];
+    mixableProps.value = [mixableModule, otherMixableModule];
+    mixableProps.field = { contentType: "modules" };
+    mixableProps.objKey = "elements";
+    mixableProps.disabled = false;
+    mixableProps.maxItems = 10;
+    mixableProps.actions = {
+      addModuleAction: jest.fn(),
+      addComponentAction: jest.fn(),
+      deleteModuleAction: jest.fn(),
+      replaceElementsInCollectionAction: jest.fn(),
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <MixableComponentArray {...mixableProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.getAllByTestId("iconActionComponent")).toBeTruthy();
+    fireEvent.click(screen.getAllByTestId("iconActionComponent")[0]);
+    expect(mixableProps.actions.addModuleAction).toBeCalled();
+  });
+
+  test("should handle the PasteModuleButton onClick", () => {
+    mixableModule.editorID = 1;
+    mixableModule.component = "HeroCard";
+    mixableModule.title = "Cards";
+    mixableModule.modules = [];
+    otherMixableModule.editorID = 2;
+    otherMixableModule.component = "HeroCard";
+    otherMixableModule.title = "Hero Section";
+    otherMixableModule.modules = [];
+    mixableProps.field = { type: "components" };
+    mixableProps.value = [mixableModule];
+    mixableProps.activatedModules = ["HeroSection"];
+    mixableProps.whiteList = [];
+    mixableProps.moduleCopy = null;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <MixableComponentArray {...mixableProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.getAllByTestId("iconActionComponent")).toBeTruthy();
+    fireEvent.click(screen.getAllByTestId("iconActionComponent")[0]);
+    expect(mixableProps.actions.addComponentAction).toBeCalled();
+  });
+});
+
+export interface IMixableComponentArrayProps {
+  maxItems: number;
+  title: string;
+  whiteList: any[];
+  value: IModule[];
+  selectedContent: any;
+  editorID: number;
+  goTo: (editorID: string) => void;
+  actions: any;
+  categories?: any;
+  disabled?: boolean;
+  activatedModules: string[];
+  objKey: string;
+  field: any;
+  mandatory?: boolean;
+  theme: string;
+  moduleCopy: { date: string; element: Record<string, any> } | null;
+  availableDataPacks: Record<string, any>[];
+  template: any;
+  setHistoryPush?: (path: string, isEditor: boolean) => void;
+}

package/src/__tests__/components/Fields/ComponentArray/MixableComponentArray/PasteModuleButton/PasteModuleButton.test.tsx

@@ -0,0 +1,95 @@
+import * as React from "react";
+import PasteModuleButton from "@ax/components/Fields/ComponentArray/MixableComponentArray/PasteModuleButton";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@griddo/core";
+import "@testing-library/jest-dom";
+import globalTheme from "@ax/themes/theme.json";
+import { INotification } from "@ax/types";
+import { render, screen, cleanup, fireEvent, act } from "@testing-library/react";
+import { mock } from "jest-mock-extended";
+
+afterEach(cleanup);
+
+const defaultProps = mock<IProps>();
+
+const mockedFunction = defaultProps.pasteModule as jest.MockedFunction<
+  (value: number) => Promise<{ error?: INotification }>
+>;
+const mockedNotification = defaultProps.setNotification as jest.MockedFunction<(notification: INotification) => void>;
+defaultProps.editorID = 1;
+
+describe("ComponentArraySelector component rendering", () => {
+  test("should render the component", async () => {
+    defaultProps.isModuleCopyUnavailable = true;
+    defaultProps.setHistoryPush = jest.fn();
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <PasteModuleButton {...defaultProps} />
+      </ThemeProvider>
+    );
+    const iconButton = screen.getByTestId("iconActionComponent");
+    expect(iconButton).toBeTruthy();
+    await act(async () => {
+      fireEvent.click(iconButton);
+    });
+    expect(mockedNotification).toHaveBeenCalled();
+  });
+});
+
+describe("ComponentArraySelector trigger events", () => {
+  test("should trigger the onClick and resolve promise", async () => {
+    defaultProps.isModuleCopyUnavailable = false;
+    mockedFunction.mockResolvedValue({
+      error: {
+        type: "warning",
+        text: "This is a warning",
+      },
+    });
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <PasteModuleButton {...defaultProps} />
+      </ThemeProvider>
+    );
+    const iconButton = screen.getByTestId("iconActionComponent");
+    expect(iconButton).toBeTruthy();
+    await act(async () => {
+      fireEvent.click(iconButton);
+    });
+    await expect(mockedFunction).toHaveBeenCalled();
+    await expect(mockedFunction(1)).resolves.toEqual({
+      error: {
+        type: "warning",
+        text: "This is a warning",
+      },
+    });
+    expect(screen.getByTestId("toastMessage")).toHaveTextContent("Module pasted from clipboard");
+  });
+
+  test("should trigger the onClick and resolve promise without error", async () => {
+    defaultProps.isModuleCopyUnavailable = false;
+    mockedFunction.mockResolvedValue({ error: undefined });
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <PasteModuleButton {...defaultProps} />
+      </ThemeProvider>
+    );
+    const iconButton = screen.getByTestId("iconActionComponent");
+    expect(iconButton).toBeTruthy();
+    await act(async () => {
+      fireEvent.click(iconButton);
+    });
+    await expect(mockedFunction).toHaveBeenCalled();
+    await expect(mockedFunction(1)).resolves.toEqual({ error: undefined });
+    expect(screen.getByTestId("toastMessage")).toHaveTextContent("Module pasted from clipboard");
+  });
+});
+
+interface IProps {
+  pasteModule: (editorID: number) => Promise<{ error?: INotification }>;
+  setNotification?: (notification: INotification) => void;
+  setHistoryPush?: (path: string, isEditor: boolean) => void;
+  editorID: number;
+  isModuleCopyUnavailable: boolean;
+}

package/src/__tests__/components/Fields/ComponentArray/SameComponentArray/SameComponentArray.test.tsx

@@ -0,0 +1,225 @@
+import * as React from "react";
+import SameComponentArray from "@ax/components/Fields/ComponentArray/SameComponentArray";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@griddo/core";
+import globalTheme from "@ax/themes/theme.json";
+import { IModule } from "@ax/types";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import { mock } from "jest-mock-extended";
+
+afterEach(cleanup);
+
+const sameProps = mock<ISameComponentArrayProps>();
+const sameModule = mock<IModule>();
+const otherSameModule = mock<IModule>();
+// default values for SameComponentArray
+sameModule.editorID = 4;
+sameModule.component = "HeroCard";
+sameModule.title = "Hero Section";
+sameModule.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"],
+      NewsDetail: ["closureContent"],
+      NewsList: ["relatedContent"],
+      SitemapTemplate: ["relatedContent", "closureContent"],
+      StoryDetail: ["mainContent", "relatedContent"],
+    },
+  },
+];
+sameProps.value = [sameModule];
+sameProps.activatedModules = ["HeroSection"];
+sameProps.whiteList = [];
+sameProps.selectedContent = {
+  anchorID: null,
+  verticalSpacing: "medium",
+  component: "CardCollection",
+  kind: "BasicCard",
+  title: {
+    content: "Title",
+    tag: "h2",
+  },
+  subtitle: "Subtitle",
+  detail: "Detail",
+  elements: [
+    {
+      component: "BasicCard",
+      title: {
+        content: "Title",
+        tag: "h4",
+      },
+      subtitle: "Lorem Ipsum",
+      description:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dignissim ut nibh eget porttitor. Nunc eleifend mollis arcu. ",
+      auxInfo: "Auxiliar Information",
+      link: {
+        component: "Link",
+        text: "Link",
+        url: {
+          url: "",
+          linkTo: null,
+          newTab: false,
+          noFollow: false,
+          size: null,
+          icon: null,
+          linkContainer: null,
+        },
+        style: "link",
+        editorID: 6,
+        parentEditorID: 5,
+      },
+      link2: {
+        component: "Link",
+        editorID: 7,
+        parentEditorID: 5,
+      },
+      media: {
+        image: {
+          component: "LinkableImage",
+          editorID: 8,
+          parentEditorID: 5,
+        },
+        video: {
+          component: "Video",
+          editorID: 9,
+          parentEditorID: 5,
+        },
+      },
+      editorID: 5,
+      parentEditorID: 4,
+    },
+  ],
+  groupingLink: {
+    component: "Link",
+    editorID: 20,
+    parentEditorID: 4,
+  },
+  layout: "L002",
+  theme: "default",
+  editorID: 4,
+  parentEditorID: 3,
+};
+sameProps.elementUniqueSelection = true;
+sameProps.mandatory = true;
+
+describe("ComponentArraySelector component rendering", () => {
+  test("should render the component with SameComponentArray", () => {
+    sameProps.field = { type: "components" };
+    sameProps.objKey = "elements";
+    sameProps.disabled = false;
+    sameProps.maxItems = 10;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SameComponentArray {...sameProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.getAllByTestId("sameComponentWrapper")).toBeTruthy();
+  });
+
+  test("should render the AddItemButton in the SameComponentArray", () => {
+    otherSameModule.editorID = 5;
+    otherSameModule.component = "HeroCard";
+    otherSameModule.title = "Hero Section";
+    otherSameModule.modules = [];
+    sameProps.value = [sameModule, otherSameModule];
+    sameProps.field = { contentType: "modules" };
+    sameProps.objKey = "elements";
+    sameProps.disabled = false;
+    sameProps.maxItems = 10;
+    sameProps.actions = {
+      addModuleAction: jest.fn(),
+      addComponentAction: jest.fn(),
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SameComponentArray {...sameProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.getAllByTestId("sameComponentWrapper")).toBeTruthy();
+  });
+});
+describe("ComponentArraySelector component events trigger", () => {
+  test("should trigger the onClick button with addModuleAction", () => {
+    otherSameModule.editorID = 5;
+    otherSameModule.component = "HeroCard";
+    otherSameModule.title = "Hero Section";
+    otherSameModule.modules = [];
+    sameProps.value = [sameModule, otherSameModule];
+    sameProps.field = { contentType: "modules" };
+    sameProps.objKey = "elements";
+    sameProps.disabled = false;
+    sameProps.maxItems = 10;
+    sameProps.actions = {
+      addModuleAction: jest.fn(),
+      addComponentAction: jest.fn(),
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SameComponentArray {...sameProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.getAllByTestId("iconActionComponent")).toBeTruthy();
+    fireEvent.click(screen.getAllByTestId("iconActionComponent")[0]);
+    expect(sameProps.actions.addModuleAction).toBeCalled();
+  });
+
+  test("should trigger the onClick button with addComponentAction", () => {
+    sameProps.field = { type: "components" };
+    sameProps.objKey = "elements";
+    sameProps.disabled = false;
+    sameProps.maxItems = 10;
+    otherSameModule.editorID = 5;
+    otherSameModule.component = "HeroCard";
+    otherSameModule.title = "Hero Section";
+    otherSameModule.modules = [];
+    sameProps.value = [sameModule, otherSameModule];
+    sameProps.actions = {
+      addModuleAction: jest.fn(),
+      addComponentAction: jest.fn(),
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SameComponentArray {...sameProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.getAllByTestId("iconActionComponent")).toBeTruthy();
+    fireEvent.click(screen.getAllByTestId("iconActionComponent")[0]);
+    expect(sameProps.actions.addComponentAction).toBeCalled();
+  });
+});
+
+export interface ISameComponentArrayProps {
+  maxItems: number;
+  title: string;
+  whiteList: string[];
+  value: IModule[];
+  elementUniqueSelection: boolean;
+  selectedContent: any;
+  editorID: number;
+  goTo: (editorID: string) => void;
+  actions: any;
+  categories?: any;
+  disabled?: boolean;
+  activatedModules: string[];
+  objKey: string;
+  field: any;
+  mandatory?: boolean;
+  theme: string;
+}

package/src/__tests__/{FieldGroup.test.tsx → components/Fields/FieldGroup/FieldGroup.test.tsx}

@@ -1,9 +1,9 @@
 import React from "react";
-import FieldGroup from "../components/Fields/FieldGroup/index";
+import FieldGroup from "@ax/components/Fields/FieldGroup";
 import { ThemeProvider } from "styled-components";
 import "@testing-library/jest-dom";
 import { parseTheme } from "@griddo/core";
-import globalTheme from "../themes/theme.json";
+import globalTheme from "@ax/themes/theme.json";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
 
 afterEach(cleanup);

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

@@ -0,0 +1,24 @@
+import * as React from "react";
+import FieldsDivider from "@ax/components/Fields/FieldsDivider";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@griddo/core";
+import globalTheme from "@ax/themes/theme.json";
+import { render, screen, cleanup } from "@testing-library/react";
+
+afterEach(cleanup);
+
+const content = {
+  title: "Titulo",
+  text: "Contenido",
+};
+
+describe("FieldsDivider component rendering", () => {
+  test("should render the component", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <FieldsDivider data={content} />
+      </ThemeProvider>
+    );
+    expect(screen.getAllByText("Contenido")).toBeTruthy();
+  });
+});