@griddo/ax 1.65.12 → 1.65.15

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.65.12",
+  "version": "1.65.15",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -171,6 +171,7 @@
     "eslint-plugin-react": "7.14.3",
     "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^27.5.1",
+    "jest-mock-extended": "^2.0.5",
     "jest-styled-components": "^7.0.8",
     "prettier": "^2.3.0",
     "react-test-render": "1.1.2",
@@ -220,5 +221,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5b4a284eedba36d038835f1d3812d76b6c5d0195"
+  "gitHead": "9b983396fedb02687f1b4db58b5def37b289bc21"
 }

package/src/api/structuredData.tsx

@@ -104,11 +104,22 @@ const getDataContent = (dataContentId: number, langID: number | null) => {
 
 const getDataContents = (params: IGetStructuredDataParams, siteID?: number | null) => {
   const { host, endpoint } = SERVICES.GET_DATA_CONTENTS;
-  const { dataID, page, itemsPerPage, pagination, deleted, include_draft, query, filterQuery } = params;
+  const {
+    dataID,
+    page,
+    itemsPerPage,
+    pagination,
+    deleted,
+    include_draft,
+    query,
+    filterQuery,
+    relatedFields = false,
+  } = params;
 
   const url = siteID ? `${host}/site/${siteID}${endpoint}` : `${host}${endpoint}`;
 
-  SERVICES.GET_DATA_CONTENTS.dynamicUrl = `${url}${dataID}?page=${page}&itemsPerPage=${itemsPerPage}&pagination=${pagination}&deleted=${deleted}&includeDraft=${include_draft}&relatedFields=true`;
+  SERVICES.GET_DATA_CONTENTS.dynamicUrl = `${url}${dataID}?page=${page}&itemsPerPage=${itemsPerPage}&pagination=${pagination}&deleted=${deleted}&includeDraft=${include_draft}`;
+  if (relatedFields) SERVICES.GET_DATA_CONTENTS.dynamicUrl += `&relatedFields=true`;
   if (query && query.trim() !== "") SERVICES.GET_DATA_CONTENTS.dynamicUrl += `&query=${query}`;
   if (filterQuery) SERVICES.GET_DATA_CONTENTS.dynamicUrl += filterQuery;
 

package/src/components/Button/index.tsx

@@ -35,7 +35,13 @@ const Button = ({ children, type, disabled, icon, buttonStyle, onClick, classNam
   switch (buttonStyle) {
     case buttonStyles.TEXT:
       return (
-        <S.TextButton className={className} type={type} disabled={disabled} onClick={handleOnClick}>
+        <S.TextButton
+          data-testid="buttonText"
+          className={className}
+          type={type}
+          disabled={disabled}
+          onClick={handleOnClick}
+        >
           {buttonContent}
         </S.TextButton>
       );
@@ -43,6 +49,7 @@ const Button = ({ children, type, disabled, icon, buttonStyle, onClick, classNam
     case buttonStyles.INVERSE:
       return (
         <S.LineButton
+          data-testid="buttonLineInverse"
           className={className}
           type={type}
           disabled={disabled}
@@ -54,7 +61,13 @@ const Button = ({ children, type, disabled, icon, buttonStyle, onClick, classNam
       );
     default:
       return (
-        <S.Button className={className} type={type} disabled={disabled} onClick={handleOnClick}>
+        <S.Button
+          data-testid="buttonDefault"
+          className={className}
+          type={type}
+          disabled={disabled}
+          onClick={handleOnClick}
+        >
           {buttonContent}
         </S.Button>
       );

package/src/components/Fields/AnalyticsField/PageAnalytics/index.test.tsx

@@ -0,0 +1,204 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import PageAnalytics from "./index";
+import { IAnalytics } from "@ax/types";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@griddo/core";
+import globalTheme from "../../../../themes/theme.json";
+import { render, cleanup } from "@testing-library/react";
+
+const valuesMock = {
+  contentSelect: "",
+  groupSelect: "",
+  dimensionsSelect: ["BasicTemplate", "NewsDetail"],
+  values: { key: "", value: "" },
+};
+
+const analyticsMock = {
+  scriptCode: "",
+  siteScriptCodeExists: false,
+  dimensions: [],
+  groups: [],
+};
+
+afterEach(cleanup);
+
+describe("PageAnalytics component rendering", () => {
+  test("should render the component PageAnalytics", () => {
+    const props = {
+      value: valuesMock,
+      template: "BasicTemplate",
+      onChange: jest.fn(),
+      analytics: analyticsMock,
+    };
+
+    const { getByText } = render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <PageAnalytics {...props} />
+      </ThemeProvider>
+    );
+    expect(getByText(/based on the page content/i)).toBeInTheDocument();
+    expect(getByText(/Select Dimensions Options/i)).toBeInTheDocument();
+  });
+
+  test("should render the component PageAnalytics whith group", () => {
+    const analyticsMockFilled = {
+      scriptCode: "",
+      siteScriptCodeExists: false,
+      dimensions: [
+        {
+          name: "BasicTemplate",
+          values: "BasicTemplate",
+        },
+        {
+          name: "NewsDetail",
+          values: "NewsDetail",
+        },
+      ],
+      groups: [
+        {
+          name: "grupo",
+          dimensions: "BasicTemplate",
+          templates: "BasicTemplate",
+        },
+        {
+          name: "grupo2",
+          dimensions: "NewsDetail",
+          templates: "NewsDetail",
+        },
+      ],
+    };
+
+    const valuesMock = {
+      contentSelect: "group",
+      groupSelect: "grupo",
+      dimensionsSelect: ["valores"],
+      values: { key: "", value: "" },
+    };
+
+    const props = {
+      value: valuesMock,
+      template: "BasicTemplate",
+      onChange: jest.fn(),
+      analytics: analyticsMockFilled,
+    };
+
+    const { getAllByText, getByText } = render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <PageAnalytics {...props} />
+      </ThemeProvider>
+    );
+    expect(getAllByText(/Select variable/i)).toHaveLength(1);
+    expect(getByText(/Select Group/i)).toBeInTheDocument();
+  });
+
+  test("should render the component PageAnalytics null value", () => {
+    const valuesMock = {
+      contentSelect: "individual",
+      groupSelect: "",
+      dimensionsSelect: ["valores"],
+      values: { key: "", value: "" },
+    };
+
+    const analyticsMockFilled = {
+      scriptCode: "",
+      siteScriptCodeExists: false,
+      dimensions: [
+        {
+          name: "valores",
+          values: "null",
+        },
+      ],
+      groups: [
+        {
+          name: "grupo",
+          dimensions: "BasicTemplate",
+          templates: "BasicTemplate",
+        },
+        {
+          name: "grupo2",
+          dimensions: "NewsDetail",
+          templates: "NewsDetail",
+        },
+      ],
+    };
+
+    const props = {
+      value: valuesMock,
+      template: "BasicTemplate",
+      onChange: jest.fn(),
+      analytics: analyticsMockFilled,
+    };
+
+    const { getByPlaceholderText } = render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <PageAnalytics {...props} />
+      </ThemeProvider>
+    );
+    expect(getByPlaceholderText(/Type a variable/i)).toBeInTheDocument();
+  });
+
+  test("should render the component PageAnalytics null value", () => {
+    const valuesMock = {
+      contentSelect: "individual",
+      groupSelect: "",
+      dimensionsSelect: ["valores"],
+      values: { key: "", value: "" },
+    };
+
+    const analyticsMockFilled = {
+      scriptCode: "",
+      siteScriptCodeExists: false,
+      dimensions: [
+        {
+          name: "BasicTemplate",
+          values: "BasicTemplate",
+        },
+        {
+          name: "NewsDetail",
+          values: "NewsDetail",
+        },
+      ],
+      groups: [
+        {
+          name: "grupo",
+          dimensions: "BasicTemplate",
+          templates: "BasicTemplate",
+        },
+        {
+          name: "grupo2",
+          dimensions: "NewsDetail",
+          templates: "NewsDetail",
+        },
+      ],
+    };
+
+    const props = {
+      value: valuesMock,
+      template: "BasicTemplate",
+      onChange: jest.fn(),
+      analytics: analyticsMockFilled,
+    };
+
+    const { getAllByText } = render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <PageAnalytics {...props} />
+      </ThemeProvider>
+    );
+    expect(getAllByText(/Select Dimensions/i)).toHaveLength(2);
+  });
+});
+
+export interface IAnalyticsFieldProps {
+  value: IState;
+  template: string;
+  onChange: (value: IState) => void;
+  analytics: IAnalytics;
+}
+
+export interface IState {
+  contentSelect: string;
+  groupSelect: string;
+  dimensionsSelect: string[];
+  values: Record<string, string>;
+}

package/src/components/Fields/AnalyticsField/StructuredDataAnalytics/atoms.tsx

@@ -50,6 +50,7 @@ const DimensionValue = (props: {
 }) => {
   const { dimension, setDimension, values } = props;
   const dimensionValues = splitAndTrim(dimension?.values, ";");
+
   const options = dimensionValues.map((option) => ({ label: option, value: option }));
   const handleOnChange = (value: string) => {
     dimension && setDimension({ [dimension.name]: value });

package/src/components/Fields/AnalyticsField/StructuredDataAnalytics/index.test.tsx

@@ -0,0 +1,146 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import StructuredDataAnalytics from "./index";
+import { IAnalytics } from "@ax/types";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@griddo/core";
+import globalTheme from "../../../../themes/theme.json";
+import { render, cleanup, fireEvent } from "@testing-library/react";
+
+const valuesMock = {
+  contentSelect: "",
+  groupSelect: "",
+  dimensionsSelect: ["BasicTemplate", "NewsDetail"],
+  values: { key: "", value: "" },
+};
+
+const analyticsMock = {
+  scriptCode: "",
+  siteScriptCodeExists: false,
+  dimensions: [],
+  groups: [],
+};
+
+afterEach(cleanup);
+
+describe("StructuredDataAnalytics component rendering", () => {
+  test("should render the component StructuredDataAnalytics", () => {
+    const props = {
+      value: valuesMock,
+      template: "BasicTemplate",
+      onChange: jest.fn(),
+      analytics: analyticsMock,
+    };
+
+    const { container } = render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <StructuredDataAnalytics {...props} />
+      </ThemeProvider>
+    );
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  test("should render the component StructuredDataAnalytics with templateDimensions", () => {
+    const analyticsMockFilled = {
+      scriptCode: "",
+      siteScriptCodeExists: false,
+      dimensions: [
+        {
+          name: "BasicTemplate",
+          values: "BasicTemplate",
+        },
+        {
+          name: "NewsDetail",
+          values: "NewsDetail",
+        },
+      ],
+      groups: [
+        {
+          name: "grupo",
+          dimensions: "BasicTemplate",
+          templates: "BasicTemplate",
+        },
+        {
+          name: "grupo2",
+          dimensions: "NewsDetail",
+          templates: "NewsDetail",
+        },
+      ],
+    };
+
+    const props = {
+      value: valuesMock,
+      template: "BasicTemplate",
+      onChange: jest.fn(),
+      analytics: analyticsMockFilled,
+    };
+
+    const { getAllByText, getByText } = render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <StructuredDataAnalytics {...props} />
+      </ThemeProvider>
+    );
+    expect(getAllByText(/Select variable/i)).toHaveLength(3);
+    expect(getByText(/Select Dimensions/i)).toBeInTheDocument();
+  });
+
+  test("should render the component StructuredDataAnalytics with null value", () => {
+    const valuesMock = {
+      contentSelect: "",
+      groupSelect: "",
+      dimensionsSelect: ["valores"],
+      values: { key: "", value: "" },
+    };
+
+    const analyticsMockFilled = {
+      scriptCode: "",
+      siteScriptCodeExists: false,
+      dimensions: [
+        {
+          name: "valores",
+          values: "null",
+        },
+      ],
+      groups: [
+        {
+          name: "grupo",
+          dimensions: "BasicTemplate",
+          templates: "BasicTemplate",
+        },
+        {
+          name: "grupo2",
+          dimensions: "NewsDetail",
+          templates: "NewsDetail",
+        },
+      ],
+    };
+
+    const props = {
+      value: valuesMock,
+      template: "BasicTemplate",
+      onChange: jest.fn(),
+      analytics: analyticsMockFilled,
+    };
+
+    const { getByPlaceholderText } = render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <StructuredDataAnalytics {...props} />
+      </ThemeProvider>
+    );
+    expect(getByPlaceholderText(/Type a variable/i)).toBeInTheDocument();
+  });
+});
+
+export interface IAnalyticsFieldProps {
+  value: IState;
+  template: string;
+  onChange: (value: IState) => void;
+  analytics: IAnalytics;
+}
+
+export interface IState {
+  contentSelect: string;
+  groupSelect: string;
+  dimensionsSelect: string[];
+  values: Record<string, string>;
+}

package/src/components/Fields/ArrayFieldGroup/ArrayFieldInline/index.tsx

@@ -12,6 +12,7 @@ const ArrayFieldInline = (props: IProps): JSX.Element => {
   const getFields = (fields: any[]): any[] => {
     return fields.map((field: any) => {
       const key = field.props.objKey;
+
       const handleChange = (newValue: any) => onChange({ [key]: newValue });
 
       const innerFields = field.props.innerFields ? getFields(field.props.innerFields) : undefined;
@@ -25,7 +26,7 @@ const ArrayFieldInline = (props: IProps): JSX.Element => {
   };
 
   return (
-    <S.Wrapper>
+    <S.Wrapper data-testid="arrayFieldInline">
       <S.Content>
         <S.IconWrapper>
           <IconAction icon="delete" onClick={deleteItem} size="s" />

package/src/components/Fields/ArrayFieldGroup/ArrayFieldItem/index.tsx

@@ -42,7 +42,7 @@ const ArrayFieldItem = (props: IProps): JSX.Element => {
   };
 
   return (
-    <S.Wrapper isOpen={isOpen === index}>
+    <S.Wrapper data-testid="arrayFieldItem" isOpen={isOpen === index}>
       <S.Title onClick={handleClick} isOpen={isOpen === index}>
         {getItemTitle(fields)}
         <S.StyledActionMenu icon="more" options={menuOptions} />