@griddo/ax 1.75.111 → 1.75.112

package/config/jest/componentsMock.js

@@ -2,7 +2,7 @@ module.exports = {
   SiteProvider: jest.fn(),
   schemas: {
     key: "schema definition",
-    all: {
+    all: {      
       HeroCard: {
         schemaType: "component",
         component: "HeroCard",
@@ -1501,5 +1501,126 @@ module.exports = {
         defaults: null,
       },
     },
+    templates: {
+      default: {
+        config: [
+          {
+            field: {
+              title: "Name",
+              key: "title",
+              type: "TextField",
+              mandatory: true,
+              modifiable: true,
+            }
+          },
+        ]
+      },
+      BasicTemplate: {
+        schemaType: "template",
+        displayName: "Basic Template",
+        component: "BasicTemplate",
+        dataPacks: null,
+        type: { label: "Static", value: "static" },
+        config: [
+          {
+            title: "Style",
+            key: "primaryLinkStyle",
+            type: "VisualUniqueSelection",
+            options: [
+              {
+                value: "primary",
+                img: 'img/themes/primaryStyle',
+              },
+              {
+                value: "secondary",
+                img: 'img/themes/primaryStyle',
+              },
+              {
+                value: "link",
+                img: 'img/themes/primaryStyle',
+              },
+            ],
+            columns: 3,
+          },
+        ],
+        content: [
+          {
+            title: "Hero Section",
+            type: "ComponentArray",
+            maxItems: 1,
+            whiteList: ["BasicContent"],
+            key: "heroSection",
+          },
+        ],
+        default: {
+          type: "template",
+          templateType: "BasicTemplate",
+          heroSection: {
+            component: "Section",
+            name: "Hero Section",
+            modules: [],
+            sectionPosition: 1,
+          },
+        },
+        thumbnails: {
+          "default-theme": {
+            "1x": "/thumbnails/HeroCard",
+            "2x": "/thumbnails/HeroCard@2x",
+          },
+          "griddo-alt-theme": {
+            "1x": "/thumbnails/HeroCard",
+            "2x": "/thumbnails/HeroCard@2x",
+          },
+        },      
+      },
+    }    
   },
+  moduleCategories: [
+    {
+        "label": "Developing",
+        "value": "developing",
+        "featured": true
+    },
+    {
+        "label": "Spacers",
+        "value": "spacers",
+        "featured": true
+    },
+    {
+        "label": "Interactive",
+        "value": "interactive"
+    },
+    {
+        "label": "Collections",
+        "value": "collections"
+    },
+    {
+        "label": "Articles And Events",
+        "value": "articlesAndEvents"
+    },
+    {
+        "label": "Content",
+        "value": "content"
+    },
+    {
+        "label": "Featured",
+        "value": "featured"
+    },
+    {
+        "label": "Studies",
+        "value": "studies"
+    },
+    {
+        "label": "People",
+        "value": "people"
+    },
+    {
+        "label": "Social",
+        "value": "social"
+    },
+    {
+        "label": "Iframe",
+        "value": "iframe"
+    }
+  ]
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.75.111",
+  "version": "1.75.112",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -230,5 +230,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "24761f41153335ee6834574396b72745588d0e62"
+  "gitHead": "fe8ce6bd77a4e4a9e19214e5e6e4020db1a25955"
 }

package/src/__tests__/components/Avatar/__snapshots__/Avatar.test.tsx.snap

@@ -2,11 +2,11 @@
 
 exports[`Avatar component rendering should render the component only with name 1`] = `
 <div
-  className="sc-gSAPjG jRkXjC"
+  className="sc-gScZFl gCBoym"
   data-testid="avatar-wrapper"
 >
   <div
-    className="sc-lbxAil fkodDH"
+    className="sc-lbVpMG hOAqbs"
     data-testid="avatar"
   />
 </div>
@@ -14,11 +14,11 @@ exports[`Avatar component rendering should render the component only with name 1
 
 exports[`Avatar component rendering should render the component with a wrong image url 1`] = `
 <div
-  className="sc-gSAPjG jRkXjC"
+  className="sc-gScZFl gCBoym"
   data-testid="avatar-wrapper"
 >
   <div
-    className="sc-lbxAil ejhcAS"
+    className="sc-lbVpMG kLnTvZ"
     data-testid="avatar"
   />
 </div>
@@ -26,11 +26,11 @@ exports[`Avatar component rendering should render the component with a wrong ima
 
 exports[`Avatar component rendering should render the component with an empty string as name 1`] = `
 <div
-  className="sc-gSAPjG jRkXjC"
+  className="sc-gScZFl gCBoym"
   data-testid="avatar-wrapper"
 >
   <div
-    className="sc-lbxAil hilXDA"
+    className="sc-lbVpMG dbQJiT"
     data-testid="avatar"
   />
 </div>
@@ -38,11 +38,11 @@ exports[`Avatar component rendering should render the component with an empty st
 
 exports[`Avatar component rendering should render the component with image null 1`] = `
 <div
-  className="sc-gSAPjG jRkXjC"
+  className="sc-gScZFl gCBoym"
   data-testid="avatar-wrapper"
 >
   <div
-    className="sc-lbxAil jDWEnq"
+    className="sc-lbVpMG jpmXvZ"
     data-testid="avatar"
   />
 </div>
@@ -50,11 +50,11 @@ exports[`Avatar component rendering should render the component with image null
 
 exports[`Avatar component rendering should render the component without name or image 1`] = `
 <div
-  className="sc-gSAPjG jRkXjC"
+  className="sc-gScZFl gCBoym"
   data-testid="avatar-wrapper"
 >
   <div
-    className="sc-lbxAil hilXDA"
+    className="sc-lbVpMG dbQJiT"
     data-testid="avatar"
   />
 </div>

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

@@ -0,0 +1,252 @@
+import * as React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen } 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 ConfigPanel, { IStateProps } from "@ax/components/ConfigPanel";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(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: {},
+  },
+  sites: {
+    currentSitePages: [
+      {
+        editorID: 1,
+      },
+    ],
+  },
+  app: {
+    lang: { locale: "es-ES", id: 0 },
+  },
+  dataPacks: {
+    templates: [],
+  },
+  menu: {
+    savedMenus: null,
+  },
+};
+const store = mockStore(initialStore);
+
+const defaultProps = mock<IStateProps>();
+defaultProps.schema = {
+  schemaType: "module",
+  displayName: "Header",
+  component: "Header",
+  type: "header",
+  defaultNavigation: true,
+  category: "header",
+  dataPacks: null,
+  configTabs: [
+    {
+      title: "content",
+      fields: [
+        {
+          title: "Name",
+          key: "title",
+          type: "TextField",
+          mandatory: true,
+        },
+      ],
+    },
+  ],
+};
+defaultProps.actions = { deleteModule: jest.fn() };
+defaultProps.breadcrumb = [
+  {
+    editorID: 0,
+    displayName: "Header",
+    component: "Header",
+  },
+];
+defaultProps.selectedParent = null;
+defaultProps.activatedModules = ["Accordion", "AddressCollection"];
+const setSelectedContentMock = defaultProps.setSelectedContent as jest.MockedFunction<(editorID: number) => void>;
+defaultProps.selectedTab = "content";
+const setSelectedTabMocked = defaultProps.setSelectedTab as jest.MockedFunction<(tab: string) => void>;
+defaultProps.isPage = false;
+defaultProps.isEditable = true;
+defaultProps.theme = "default-theme";
+
+describe("ConfigPanel component rendering", () => {
+  it("should render the component", () => {
+    defaultProps.isLoading = false;
+    defaultProps.isPage = true;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ConfigPanel {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    expect(screen.getByTestId("config-panel-wrapper")).toBeTruthy();
+    expect(screen.getByTestId("note-field-wrapper")).toBeTruthy();
+  });
+
+  it("should render the loading component", () => {
+    defaultProps.isLoading = true;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ConfigPanel {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    expect(screen.getByTestId("loading-wrapper")).toBeTruthy();
+  });
+
+  it("should render the previewForm", () => {
+    defaultProps.isLoading = false;
+    defaultProps.isPage = true;
+    defaultProps.isReadOnly = true;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ConfigPanel {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    expect(screen.getByTestId("config-panel-wrapper")).toBeTruthy();
+    expect(screen.getByTestId("preview-form-wrapper")).toBeTruthy();
+  });
+
+  it("should render the globalPageForm", () => {
+    defaultProps.isLoading = false;
+    defaultProps.isPage = true;
+    defaultProps.isGlobal = true;
+    defaultProps.isEditable = false;
+    defaultProps.isReadOnly = false;
+
+    defaultProps.schema = {
+      schemaType: "module",
+      displayName: "Header",
+      component: "Header",
+      type: "module",
+      defaultNavigation: true,
+      category: "header",
+      dataPacks: null,
+      configTabs: [
+        {
+          title: "content",
+          fields: [
+            {
+              title: "Name",
+              key: "title",
+              type: "TextField",
+              mandatory: true,
+            },
+          ],
+        },
+      ],
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ConfigPanel {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    expect(screen.getByTestId("config-panel-wrapper")).toBeTruthy();
+    expect(screen.getByTestId("global-page-section")).toBeTruthy();
+  });
+
+  it("should render the Form", () => {
+    defaultProps.isLoading = false;
+    defaultProps.isPage = false;
+    defaultProps.isGlobal = true;
+    defaultProps.isEditable = false;
+    defaultProps.isReadOnly = false;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ConfigPanel {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    expect(screen.getByTestId("config-panel-wrapper")).toBeTruthy();
+    expect(screen.getByTestId("form-section")).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,177 @@
+import * as React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen } 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 ConnectedField from "@ax/components/ConfigPanel/Form/ConnectedField";
+import globalTheme from "@ax/themes/theme.json";
+
+beforeEach(() => {
+  cleanup();
+});
+
+const middlewares: any = [thunk];
+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 restorePageNavigationActionMock = jest.fn();
+
+const defaultProps = {
+  field: {
+    title: "Name",
+    key: "title",
+    type: "TextField",
+    mandatory: true,
+  },
+  schema: {
+    title: "Header",
+    component: "Header",
+    type: "header",
+    configTabs: [
+      {
+        title: "content",
+        fields: [
+          {
+            title: "Name",
+            key: "title",
+            type: "TextField",
+            mandatory: true,
+          },
+        ],
+      },
+    ],
+    schemaType: "module",
+  },
+  isPage: true,
+  isGlobal: true,
+  actions: {
+    restorePageNavigationAction: restorePageNavigationActionMock,
+  },
+  selectedTab: "content",
+  theme: "default-theme",
+};
+
+describe("ConnectedField component rendering", () => {
+  it("should render PageConnectedField", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ConnectedField {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    // we passed a textField so if it's rendering this correctly,
+    // it has to be rendering a textField component
+    const textFieldContainer = screen.getByTestId("text-field-container");
+    expect(textFieldContainer).toBeTruthy();
+  });
+  it("should render NavConnectedField", () => {
+    defaultProps.isPage = false;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ConnectedField {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    // the NavConnectedField it's rendering the FieldsBehavior component
+    const fieldsBehaviorWrapper = screen.getByTestId("fields-behavior-wrapper");
+    expect(fieldsBehaviorWrapper).toBeTruthy();
+  });
+});