@griddo/ax 1.67.10 → 1.68.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.67.10",
+  "version": "1.68.2",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -221,5 +221,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0036f6f3f22eb0d092654fe726253ef7323de09a"
+  "gitHead": "6a6e90c93a8dc31f77b2b67df24fbda20f16aadf"
 }

package/src/__mocks__/reducers/app.tsx

@@ -0,0 +1,10 @@
+import { AppActionsCreators } from "@ax/containers/App/interfaces";
+import { initialState } from "@ax/containers/App/reducer";
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export default (state = initialState, action: { type: AppActionsCreators }) => {
+  switch (action.type) {
+    default:
+      return state;
+  }
+};

package/src/__mocks__/reducers/sites.tsx

@@ -0,0 +1,10 @@
+import { initialState } from "@ax/containers/Sites/reducer";
+import { SitesActionsCreators } from "@ax/containers/Sites/interfaces";
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export default (state = initialState, action: { type: SitesActionsCreators }) => {
+  switch (action.type) {
+    default:
+      return state;
+  }
+};

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

@@ -1,14 +1,14 @@
 import React from "react";
 import "@testing-library/jest-dom";
-import AnalyticsField from "../components/Fields/AnalyticsField/index";
+import AnalyticsField from "@ax/components/Fields/AnalyticsField";
 import { IAnalytics } from "@ax/types";
 import { createStore, combineReducers } from "redux";
-import analyticsReducer from "../__mocks__/reducers/analyticsState";
-import pageEditorReducer from "../__mocks__/reducers/pageEditor";
+import analyticsReducer from "../../../../__mocks__/reducers/analyticsState";
+import pageEditorReducer from "../../../../__mocks__/reducers/pageEditor";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@griddo/core";
-import globalTheme from "../themes/theme.json";
-import { render, cleanup } from "../../config/jest/test-utils";
+import globalTheme from "@ax/themes/theme.json";
+import { render, cleanup } from "../../../../../config/jest/test-utils";
 
 const valuesMock = {
   contentSelect: "",

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

@@ -1,10 +1,10 @@
 import React from "react";
 import "@testing-library/jest-dom";
-import PageAnalytics from "../components/Fields/AnalyticsField/PageAnalytics";
+import PageAnalytics from "@ax/components/Fields/AnalyticsField/PageAnalytics";
 import { IAnalytics } from "@ax/types";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@griddo/core";
-import globalTheme from "../themes/theme.json";
+import globalTheme from "@ax/themes/theme.json";
 import { render, cleanup } from "@testing-library/react";
 
 const valuesMock = {

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

@@ -1,10 +1,10 @@
 import React from "react";
 import "@testing-library/jest-dom";
-import StructuredDataAnalytics from "../components/Fields/AnalyticsField/StructuredDataAnalytics/index";
+import StructuredDataAnalytics from "@ax/components/Fields/AnalyticsField/StructuredDataAnalytics";
 import { IAnalytics } from "@ax/types";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@griddo/core";
-import globalTheme from "../themes/theme.json";
+import globalTheme from "@ax/themes/theme.json";
 import { render, cleanup } from "@testing-library/react";
 
 const valuesMock = {

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

@@ -1,8 +1,8 @@
 import React from "react";
-import ArrayFieldGroup from "../components/Fields/ArrayFieldGroup/index";
+import ArrayFieldGroup from "@ax/components/Fields/ArrayFieldGroup";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@griddo/core";
-import globalTheme from "../themes/theme.json";
+import globalTheme from "@ax/themes/theme.json";
 import { render, screen, fireEvent, cleanup, act } from "@testing-library/react";
 import { mock } from "jest-mock-extended";
 import FieldsBehavior from "@ax/components/FieldsBehavior";

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

@@ -1,9 +1,9 @@
 import React from "react";
 import axios from "axios";
-import AsyncCheckGroup from "../components/Fields/AsyncCheckGroup/index";
+import AsyncCheckGroup from "@ax/components/Fields/AsyncCheckGroup";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@griddo/core";
-import globalTheme from "../themes/theme.json";
+import globalTheme from "@ax/themes/theme.json";
 import { render, screen, cleanup, act } from "@testing-library/react";
 import { ISite } from "@ax/types";
 import { mock } from "jest-mock-extended";

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

@@ -1,10 +1,10 @@
 import React from "react";
 import axios from "axios";
 import "@testing-library/jest-dom";
-import AsyncSelect from "../components/Fields/AsyncSelect/index";
+import AsyncSelect from "@ax/components/Fields/AsyncSelect";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@griddo/core";
-import globalTheme from "../themes/theme.json";
+import globalTheme from "@ax/themes/theme.json";
 import { render, screen, cleanup, act } from "@testing-library/react";
 import { ISite } from "@ax/types";
 import { mock } from "jest-mock-extended";

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

@@ -1,8 +1,8 @@
 import React from "react";
-import CheckField from "../components/Fields/CheckField/index";
+import CheckField from "@ax/components/Fields/CheckField";
 import { ThemeProvider } from "styled-components";
 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__/{CheckGroup.test.tsx → components/Fields/CheckGroup/CheckGroup.test.tsx}

@@ -1,8 +1,8 @@
 import React from "react";
-import CheckGroup from "../components/Fields/CheckGroup/index";
+import CheckGroup from "@ax/components/Fields/CheckGroup";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@griddo/core";
-import globalTheme from "../themes/theme.json";
+import globalTheme from "@ax/themes/theme.json";
 import "@testing-library/jest-dom";
 import { Simulate } from "react-dom/test-utils";
 import { render, cleanup, fireEvent, screen } from "@testing-library/react";

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

@@ -0,0 +1,195 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import ColorPicker from "@ax/components/Fields/ColorPicker";
+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";
+
+afterEach(cleanup);
+
+const defaultProps = mock<IProps>();
+
+describe("AsyncSelect component rendering", () => {
+  test("should render the component AsyncSelect", () => {
+    defaultProps.value = "#000000";
+    defaultProps.theme = parseTheme(globalTheme);
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ColorPicker {...defaultProps} />
+      </ThemeProvider>
+    );
+    expect(screen.getByTestId("colorPickerWrapper")).toBeTruthy();
+  });
+
+  test("should render the Picker", () => {
+    defaultProps.value = "#000000";
+    defaultProps.theme = parseTheme(globalTheme);
+    defaultProps.error = true;
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ColorPicker {...defaultProps} />
+      </ThemeProvider>
+    );
+    const inputActionComponent = screen.getByTestId("iconActionComponent");
+    expect(inputActionComponent).toBeTruthy();
+    fireEvent.click(inputActionComponent);
+    expect(screen.findByTestId("pickerWrapper")).toBeTruthy();
+  });
+});
+
+describe("AsyncSelect events", () => {
+  test("should trigger the onChange", () => {
+    defaultProps.value = "#000000";
+    defaultProps.theme = parseTheme(globalTheme);
+    const onChangeMock = defaultProps.onChange as jest.MockedFunction<(newColor: string) => void>;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ColorPicker {...defaultProps} />
+      </ThemeProvider>
+    );
+    const inputComponent = screen.getByTestId("inputPickerWrapper");
+    expect(inputComponent).toBeTruthy();
+    fireEvent.change(inputComponent, { target: { value: 555 } });
+    expect(onChangeMock).not.toBeCalled();
+    fireEvent.change(inputComponent, { target: { value: "#ffffff" } });
+    expect(onChangeMock).toBeCalledWith("#ffffff");
+    fireEvent.change(inputComponent, { target: { value: "#fff" } });
+    expect(onChangeMock).toBeCalledWith("#ffffff");
+  });
+
+  test("should trigger the onChange", () => {
+    defaultProps.value = "#000000";
+    defaultProps.theme = parseTheme(globalTheme);
+    const handleValidationMock = defaultProps.handleValidation as jest.MockedFunction<
+      (value: string, validators: Record<string, unknown>) => void
+    >;
+    defaultProps.error = true;
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ColorPicker {...defaultProps} />
+      </ThemeProvider>
+    );
+    const inputComponent = screen.getByTestId("inputPickerWrapper");
+    expect(inputComponent).toBeTruthy();
+    fireEvent.change(inputComponent, { target: { value: "#fff" } });
+    expect(handleValidationMock).toBeCalled();
+  });
+
+  test("should trigger the onChange of the Picker", async () => {
+    defaultProps.value = "#000000";
+    defaultProps.theme = parseTheme(globalTheme);
+    defaultProps.error = true;
+    const onChangeMock = defaultProps.onChange as jest.MockedFunction<(newColor: string) => void>;
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ColorPicker {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const inputActionComponent = screen.getByTestId("iconActionComponent");
+    expect(inputActionComponent).toBeTruthy();
+    fireEvent.click(inputActionComponent);
+    const inputPicker = await screen.findByTestId("inputPicker");
+    expect(inputPicker).toBeTruthy();
+    fireEvent.change(inputPicker, { target: { value: "#fff" } });
+    expect(onChangeMock).toBeCalled();
+  });
+
+  test("should trigger the onChange of the Picker with color", async () => {
+    defaultProps.value = "#000000";
+    defaultProps.theme = parseTheme(globalTheme);
+    defaultProps.error = true;
+    defaultProps.colors = ["#fff", "#000"];
+    const onChangeMock = defaultProps.onChange as jest.MockedFunction<(newColor: string) => void>;
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ColorPicker {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const inputActionComponent = screen.getByTestId("iconActionComponent");
+    expect(inputActionComponent).toBeTruthy();
+    fireEvent.click(inputActionComponent);
+    const inputPicker = await screen.findByTestId("inputPicker");
+    expect(inputPicker).toBeTruthy();
+    fireEvent.change(inputPicker, { target: { value: "#fff" } });
+    expect(onChangeMock).toBeCalled();
+  });
+
+  test("should not pass colors to picker", async () => {
+    defaultProps.value = "#000000";
+    defaultProps.theme = "default";
+    defaultProps.error = true;
+    defaultProps.colors = [
+      { color: "#f0f0f0", theme: "default" },
+      { color: "#fff", theme: "cms-default" },
+    ];
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ColorPicker {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const inputActionComponent = screen.getByTestId("iconActionComponent");
+    expect(inputActionComponent).toBeTruthy();
+    fireEvent.click(inputActionComponent);
+    const gridItem = await screen.findAllByTestId("gridItem");
+    // is getting the default colors
+    expect(gridItem).toHaveLength(9);
+  });
+
+  test("should pass colors to picker", async () => {
+    defaultProps.value = "#000000";
+    defaultProps.theme = "default";
+    defaultProps.error = true;
+    defaultProps.colors = [
+      { options: ["#f0f0f0"], theme: "default" },
+      { color: "#fff", theme: "cms-default" },
+    ];
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ColorPicker {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const inputActionComponent = screen.getByTestId("iconActionComponent");
+    expect(inputActionComponent).toBeTruthy();
+    fireEvent.click(inputActionComponent);
+    const gridItem = await screen.findAllByTestId("gridItem");
+    // it's getting the color passed
+    expect(gridItem).toHaveLength(1);
+  });
+
+  test("should trigger the handleOnBlur", async () => {
+    defaultProps.value = "#000000";
+    defaultProps.theme = parseTheme(globalTheme);
+    const handleValidationMock = defaultProps.handleValidation as jest.MockedFunction<
+      (value: string, validators: Record<string, unknown>) => void
+    >;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ColorPicker {...defaultProps} />
+      </ThemeProvider>
+    );
+    const inputComponent = screen.getByTestId("inputPickerWrapper");
+    expect(inputComponent).toBeTruthy();
+    fireEvent.blur(inputComponent, { target: { value: "#fff" } });
+    expect(handleValidationMock).toBeCalled();
+  });
+});
+
+export interface IProps {
+  value: string;
+  error?: boolean;
+  colors?: string[] | Record<string, unknown>[];
+  onChange: (newColor: string) => void;
+  handleValidation?: (value: string, validators: Record<string, unknown>) => void;
+  theme: string;
+}

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

@@ -0,0 +1,184 @@
+import * as React from "react";
+import ComponentArraySelector from "@ax/components/Fields/ComponentArray";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@griddo/core";
+import globalTheme from "@ax/themes/theme.json";
+import { IModule } from "@ax/types";
+import { ISameComponentArrayProps } from "@ax/components/Fields/ComponentArray/SameComponentArray";
+import { render, screen, cleanup } from "@testing-library/react";
+import { mock } from "jest-mock-extended";
+
+afterEach(cleanup);
+
+const mixableProps = mock<ISameComponentArrayProps & 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" };
+mixableProps.value = [mixableModule];
+mixableProps.activatedModules = ["HeroSection"];
+mixableProps.whiteList = [];
+mixableProps.moduleCopy = null;
+
+const sameProps = mock<ISameComponentArrayProps & IMixableComponentArrayProps>();
+const sameModule = 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;
+
+describe("ComponentArraySelector component rendering", () => {
+  test("should render the component with MixableComponentArray", () => {
+    mixableProps.disabled = true;
+    mixableProps.editorID = 1;
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ComponentArraySelector {...mixableProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.getAllByTestId("mixableComponentWrapper")).toBeTruthy();
+  });
+
+  test("should render the component with SameComponentArray", () => {
+    sameProps.field = { type: "components" };
+    sameProps.objKey = "elements";
+    sameProps.disabled = false;
+    sameProps.maxItems = 10;
+    sameProps.actions = {
+      addModuleAction: jest.fn(),
+      addComponentAction: jest.fn(),
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ComponentArraySelector {...sameProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.getAllByTestId("sameComponentWrapper")).toBeTruthy();
+  });
+});
+
+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;
+}