@griddo/ax 1.68.7 → 1.69.0

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

@@ -0,0 +1,532 @@
+import React from "react";
+import axios from "axios";
+import "@testing-library/jest-dom";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@griddo/core";
+import { mock } from "jest-mock-extended";
+import configureStore from "redux-mock-store";
+
+import ReferenceField, { IReferenceFieldProps } from "@ax/components/Fields/ReferenceField/index";
+import globalTheme from "@ax/themes/theme.json";
+
+import { render, cleanup, screen, act, fireEvent } from "../../../../../config/jest/test-utils";
+import {
+  articlesDistributorResponse,
+  storiesDistributorResponse,
+  articlesDataTitlesResponse,
+  storiesDataTitlesResponse,
+  structuredDataContentsResponse,
+  emptyArticlesDistributorResponse,
+} from "../../../../__mocks__/axios/ReferenceField";
+import { structuredDataMock, sitesMock, appMock } from "../../../../__mocks__/store/ReferenceField";
+
+afterEach(() => {
+  cleanup();
+  jest.resetAllMocks();
+});
+
+const defaultProps = mock<IReferenceFieldProps>();
+defaultProps.value = { source: ["ARTICLES"] };
+defaultProps.source = ["ARTICLES"];
+
+const initialStore = {
+  structuredData: structuredDataMock,
+  sites: sitesMock,
+  app: appMock,
+};
+
+const mockStore = configureStore();
+const store = mockStore(initialStore);
+
+jest.mock("axios");
+const mockedAxios = axios as jest.MockedFunction<typeof axios>;
+const mockApiCalls = () =>
+  mockedAxios.mockImplementation((request: any) => {
+    switch (request.url) {
+      case "undefined/structured_data/titles/ARTICLES":
+        return Promise.resolve(articlesDataTitlesResponse);
+      case "undefined/structured_data/titles/STORIES":
+        return Promise.resolve(storiesDataTitlesResponse);
+      case "undefined/site/85/distributor":
+        return Promise.resolve(articlesDistributorResponse);
+      case "undefined/site/85/structured_data_contents/ARTICLES?page=1&itemsPerPage=50&pagination=true&deleted=false&includeDraft=false":
+        return Promise.resolve(structuredDataContentsResponse);
+      default:
+        return Promise.reject(new Error("not found"));
+    }
+  });
+
+describe("ReferenceField component rendering", () => {
+  test("should render the component ReferenceField", async () => {
+    defaultProps.value = {
+      order: "alpha-DESC",
+    };
+    defaultProps.selectionType = ["automatic"];
+    const onChange = jest.fn();
+    const initialState = { ...initialStore, ...defaultProps };
+
+    mockApiCalls();
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <ReferenceField {...initialState} onChange={onChange} />
+        </ThemeProvider>,
+        { store }
+      );
+    });
+
+    expect(screen.getByTestId("reference-field-wrapper")).toBeTruthy();
+  });
+
+  test("should render the component ReferenceField with API response fail", async () => {
+    defaultProps.value = {
+      order: "other-DESC",
+    };
+    defaultProps.selectionType = undefined;
+    const initialState = { ...initialStore, ...defaultProps };
+
+    const responseFail = {
+      data: null,
+      status: 400,
+      statusText: "Fail",
+      headers: {},
+      config: {},
+    };
+
+    mockedAxios.mockImplementation((request: any) => {
+      switch (request.url) {
+        case "undefined/structured_data/titles/ARTICLES":
+          return Promise.resolve(responseFail);
+        default:
+          return Promise.reject(new Error("not found"));
+      }
+    });
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <ReferenceField {...initialState} />
+        </ThemeProvider>,
+        { store }
+      );
+    });
+
+    expect(screen.getByTestId("reference-field-wrapper")).toBeTruthy();
+  });
+
+  test("should render the component ReferenceField with value undefined", async () => {
+    defaultProps.value = undefined;
+    const initialState = { ...initialStore, ...defaultProps };
+
+    mockApiCalls();
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <ReferenceField {...initialState} />
+        </ThemeProvider>,
+        { store }
+      );
+    });
+
+    expect(screen.getByTestId("auto-data-wrapper")).toBeTruthy();
+  });
+
+  test("should render the component ReferenceField with fixed is empty", async () => {
+    defaultProps.source = ["ARTICLES"];
+    defaultProps.value = {
+      mode: "manual",
+      fixed: [],
+    };
+    const initialState = { ...initialStore, ...defaultProps };
+    const onChange = jest.fn();
+
+    mockedAxios.mockImplementation((request: any) => {
+      switch (request.url) {
+        case "undefined/structured_data/titles/ARTICLES":
+          return Promise.resolve(articlesDataTitlesResponse);
+        case "undefined/structured_data/titles/STORIES":
+          return Promise.resolve(storiesDataTitlesResponse);
+        case "undefined/site/85/distributor":
+          return Promise.resolve(emptyArticlesDistributorResponse);
+        case "undefined/site/85/structured_data_contents/ARTICLES?page=1&itemsPerPage=50&pagination=true&deleted=false&includeDraft=false":
+          return Promise.resolve(structuredDataContentsResponse);
+        default:
+          return Promise.reject(new Error("not found"));
+      }
+    });
+
+    const Component = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ReferenceField {...initialState} onChange={onChange} />
+      </ThemeProvider>
+    );
+
+    const { rerender } = render(Component, { store });
+
+    await act(async () => {
+      rerender(Component);
+    });
+
+    expect(screen.queryAllByTestId("reference-field-item")).toHaveLength(0);
+  });
+});
+
+describe("onChange events", () => {
+  test("should apply change in AutoPanel", async () => {
+    defaultProps.source = ["STORIES"];
+    defaultProps.value = {
+      source: ["STORIES"],
+      filter: [
+        {
+          id: 4418,
+          label: "Story Type 1",
+          source: "STORIES",
+        },
+        {
+          id: 4419,
+          label: "Story Type 2",
+          source: "STORIES",
+        },
+      ],
+      quantity: 1,
+    };
+    const initialState = { ...initialStore, ...defaultProps };
+    const onChange = jest.fn();
+
+    mockedAxios.mockImplementation((request: any) => {
+      switch (request.url) {
+        case "undefined/structured_data/titles/ARTICLES":
+          return Promise.resolve(articlesDataTitlesResponse);
+        case "undefined/structured_data/titles/STORIES":
+          return Promise.resolve(storiesDataTitlesResponse);
+        case "undefined/site/85/distributor":
+          return Promise.resolve(storiesDistributorResponse);
+        default:
+          return Promise.reject(new Error("not found"));
+      }
+    });
+
+    const Component = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ReferenceField {...initialState} onChange={onChange} />
+      </ThemeProvider>
+    );
+
+    const { rerender } = render(Component, { store });
+
+    let iconActionComponents = screen.getAllByTestId("iconActionComponent");
+
+    await act(async () => {
+      fireEvent.click(iconActionComponents[0]);
+    });
+
+    await act(async () => {
+      rerender(Component);
+    });
+
+    iconActionComponents = screen.getAllByTestId("iconActionComponent");
+
+    await act(async () => {
+      fireEvent.click(iconActionComponents[2]);
+    });
+
+    const radioFieldInputs = screen.getAllByTestId("radio-field-input");
+    await act(async () => {
+      fireEvent.click(radioFieldInputs[1]);
+      fireEvent.click(radioFieldInputs[4]);
+    });
+
+    const arrowUp = screen.getByTestId("arrow-up");
+    await act(async () => {
+      fireEvent.click(arrowUp);
+    });
+
+    expect(screen.getByTestId("auto-panel-wrapper")).toBeTruthy();
+    expect(screen.getByTestId("input")).toHaveValue(2);
+
+    await act(async () => {
+      fireEvent.click(radioFieldInputs[5]);
+
+      const buttonDefault = screen.getByTestId("buttonDefault");
+      fireEvent.click(buttonDefault);
+    });
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  test("should add item in manual mode", async () => {
+    defaultProps.source = ["ARTICLES"];
+    defaultProps.value = {
+      mode: "manual",
+      fixed: [4492, 4493],
+    };
+    const initialState = { ...initialStore, ...defaultProps };
+    const onChange = jest.fn();
+
+    mockApiCalls();
+
+    const Component = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ReferenceField {...initialState} onChange={onChange} />
+      </ThemeProvider>
+    );
+
+    const { rerender } = render(Component, { store });
+
+    await act(async () => {
+      rerender(Component);
+    });
+
+    let referenceFieldItems = screen.getAllByTestId("reference-field-item");
+    expect(referenceFieldItems.length).toBe(2);
+
+    const iconActionComponents = screen.getAllByTestId("iconActionComponent");
+
+    await act(async () => {
+      fireEvent.click(iconActionComponents[0]);
+    });
+
+    await act(async () => {
+      rerender(Component);
+    });
+
+    const manualPanelItem = screen.getAllByTestId("manual-panel-item");
+    expect(manualPanelItem.length).toBe(8);
+
+    await act(async () => {
+      fireEvent.click(manualPanelItem[4]);
+      fireEvent.click(screen.getByTestId("buttonDefault"));
+    });
+
+    await act(async () => {
+      rerender(Component);
+    });
+
+    referenceFieldItems = screen.getAllByTestId("reference-field-item");
+    expect(referenceFieldItems.length).toBe(3);
+  });
+
+  test("should remove item in manual mode", async () => {
+    defaultProps.source = ["ARTICLES"];
+    defaultProps.value = {
+      mode: "manual",
+      fixed: [4492, 4493],
+    };
+    defaultProps.maxItems = 3;
+    const initialState = { ...initialStore, ...defaultProps };
+    const onChange = jest.fn();
+
+    mockApiCalls();
+
+    const Component = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ReferenceField {...initialState} onChange={onChange} />
+      </ThemeProvider>
+    );
+
+    const { rerender } = render(Component, { store });
+
+    await act(async () => {
+      rerender(Component);
+    });
+
+    let referenceFieldItems = screen.getAllByTestId("reference-field-item");
+    expect(referenceFieldItems.length).toBe(2);
+
+    const iconActionComponents = screen.getAllByTestId("iconActionComponent");
+
+    await act(async () => {
+      fireEvent.click(iconActionComponents[0]);
+    });
+
+    await act(async () => {
+      rerender(Component);
+    });
+
+    const manualPanelItem = screen.getAllByTestId("manual-panel-item");
+    expect(manualPanelItem.length).toBe(8);
+
+    await act(async () => {
+      fireEvent.click(manualPanelItem[0]);
+      fireEvent.click(manualPanelItem[6]);
+      fireEvent.click(screen.getByTestId("buttonDefault"));
+    });
+
+    await act(async () => {
+      rerender(Component);
+    });
+
+    referenceFieldItems = screen.getAllByTestId("reference-field-item");
+    expect(referenceFieldItems.length).toBe(1);
+  });
+
+  test("should delete filter tags", async () => {
+    defaultProps.source = ["STORIES"];
+    defaultProps.value = {
+      source: ["STORIES"],
+      filter: [
+        {
+          id: 4418,
+          label: "Story Type 1",
+          source: "STORIES",
+        },
+        {
+          id: 4419,
+          label: "Story Type 2",
+          source: "STORIES",
+        },
+      ],
+    };
+    const initialState = { ...initialStore, ...defaultProps };
+    const onChange = jest.fn();
+
+    mockedAxios.mockImplementation((request: any) => {
+      switch (request.url) {
+        case "undefined/structured_data/titles/ARTICLES":
+          return Promise.resolve(articlesDataTitlesResponse);
+        case "undefined/structured_data/titles/STORIES":
+          return Promise.resolve(storiesDataTitlesResponse);
+        case "undefined/site/85/distributor":
+          return Promise.resolve(storiesDistributorResponse);
+        default:
+          return Promise.reject(new Error("not found"));
+      }
+    });
+
+    const Component = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ReferenceField {...initialState} onChange={onChange} />
+      </ThemeProvider>
+    );
+
+    const { rerender } = render(Component, { store });
+
+    const iconActionComponents = screen.getAllByTestId("iconActionComponent");
+
+    await act(async () => {
+      fireEvent.click(iconActionComponents[0]);
+    });
+
+    await act(async () => {
+      rerender(Component);
+    });
+
+    let tagComponent = screen.getAllByTestId("tagComponent");
+
+    expect(tagComponent.length).toBe(2);
+
+    await act(async () => {
+      fireEvent.click(tagComponent[1]);
+    });
+
+    await act(async () => {
+      rerender(Component);
+    });
+
+    tagComponent = screen.getAllByTestId("tagComponent");
+
+    expect(tagComponent.length).toBe(1);
+  });
+
+  test("should reorder items", async () => {
+    defaultProps.source = ["ARTICLES"];
+    defaultProps.value = {
+      mode: "manual",
+      fixed: [4492, 4493],
+    };
+    const initialState = { ...initialStore, ...defaultProps };
+    const onChange = jest.fn();
+
+    mockApiCalls();
+
+    const Component = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ReferenceField {...initialState} onChange={onChange} />
+      </ThemeProvider>
+    );
+
+    const { rerender } = render(Component, { store });
+
+    await act(async () => {
+      rerender(Component);
+    });
+
+    let iconActionComponents = screen.getAllByTestId("iconActionComponent");
+
+    await act(async () => {
+      fireEvent.click(iconActionComponents[1]);
+    });
+
+    await act(async () => {
+      rerender(Component);
+    });
+
+    let referenceFieldItems = screen.getAllByTestId("reference-field-item");
+    expect(referenceFieldItems[0]).toHaveTextContent("Article 03");
+
+    iconActionComponents = screen.getAllByTestId("iconActionComponent");
+
+    await act(async () => {
+      fireEvent.click(iconActionComponents[3]);
+    });
+
+    await act(async () => {
+      rerender(Component);
+    });
+
+    referenceFieldItems = screen.getAllByTestId("reference-field-item");
+    expect(referenceFieldItems[0]).toHaveTextContent("Article 02");
+  });
+
+  test("should delete items", async () => {
+    defaultProps.source = ["ARTICLES"];
+    defaultProps.value = {
+      mode: "manual",
+      fixed: [4492, 4493],
+    };
+    const initialState = { ...initialStore, ...defaultProps };
+    const onChange = jest.fn();
+
+    mockApiCalls();
+
+    const Component = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ReferenceField {...initialState} onChange={onChange} />
+      </ThemeProvider>
+    );
+
+    const { rerender } = render(Component, { store });
+
+    await act(async () => {
+      rerender(Component);
+    });
+
+    let referenceFieldItems = screen.getAllByTestId("reference-field-item");
+    expect(referenceFieldItems.length).toBe(2);
+
+    const iconActionComponents = screen.getAllByTestId("iconActionComponent");
+
+    await act(async () => {
+      fireEvent.click(iconActionComponents[2]);
+    });
+
+    await act(async () => {
+      rerender(Component);
+    });
+
+    const actionMenuItem = screen.getByTestId("action-menu-item");
+
+    await act(async () => {
+      fireEvent.click(actionMenuItem);
+    });
+
+    await act(async () => {
+      rerender(Component);
+    });
+
+    referenceFieldItems = screen.getAllByTestId("reference-field-item");
+    expect(referenceFieldItems.length).toBe(1);
+  });
+});

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

@@ -113,7 +113,6 @@ describe("onClick from buttons", () => {
     const backgroundIconComponent = screen.getByTestId("backgroundIconComponent");
     expect(backgroundIconComponent).toBeTruthy();
 
-    // onClick called with simulate method
     fireEvent.click(backgroundIconComponent);
     expect(onClickIconMock).toBeCalledTimes(1);
   });

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

@@ -1,17 +1,21 @@
 import React from "react";
 import axios from "axios";
 import "@testing-library/jest-dom";
+import configureStore from "redux-mock-store";
 import { ThemeProvider } from "styled-components";
-import { parseTheme } from "@griddo/core";
 import { mock } from "jest-mock-extended";
-import { createStore, combineReducers, Reducer, Action } from "redux";
 
+import { render, cleanup, screen, act, fireEvent } from "../../../../../config/jest/test-utils";
+import {
+  pageResponse,
+  pageResponseWithTabs,
+  sitePagesResponse,
+  structuredDataResponse,
+} from "../../../../__mocks__/mockedAxios";
+
+import { parseTheme } from "@griddo/core";
 import UrlField, { IUrlFieldProps } from "@ax/components/Fields/UrlField/index";
 import globalTheme from "@ax/themes/theme.json";
-import sitesReducer from "../../../../__mocks__/reducers/sites";
-import appReducer from "../../../../__mocks__/reducers/app";
-import { render, cleanup, screen, act, fireEvent } from "../../../../../config/jest/test-utils";
-import { pageResponse, pageResponseWithTabs, sitePagesResponse, structuredDataResponse } from "./mockedAxios";
 
 afterEach(() => {
   cleanup();
@@ -101,13 +105,10 @@ const initialStore = {
   app: appMock,
 };
 
-const store = createStore(
-  combineReducers({
-    sites: sitesReducer as Reducer<any, Action<any>>,
-    app: appReducer as Reducer<any, Action<any>>,
-  }),
-  initialStore
-);
+const middlewares: any = [];
+const mockStore = configureStore(middlewares);
+
+const store = mockStore(initialStore);
 
 jest.mock("axios");
 const mockedAxios = axios as jest.MockedFunction<typeof axios>;

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

@@ -0,0 +1,121 @@
+import * as React from "react";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@griddo/core";
+import { mock } from "jest-mock-extended";
+import configureStore from "redux-mock-store";
+
+import globalTheme from "@ax/themes/theme.json";
+import Wysiwyg, { IWysiwygProps } from "@ax/components/Fields/Wysiwyg";
+import { render, cleanup, screen } from "../../../../../config/jest/test-utils";
+
+afterEach(() => {
+  cleanup();
+  jest.resetAllMocks();
+});
+
+const initialStore = {
+  app: {
+    token:
+      "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwidXNlcm5hbWUiOiJhZG1pbiIsImVtYWlsIjoiYWRtaW5Ac2VjdW95YXMuY29tIiwiY2hlY2siOnRydWUsImlhdCI6MTY1NzExMjAxM30.1SDgrPDXU6ToFT8dtzEIxzaBevhmdBI4idKtSrd7vxQ",
+  },
+};
+
+const mockStore = configureStore();
+
+const store = mockStore(initialStore);
+
+const defaultProps = mock<IWysiwygProps>();
+
+describe("Wysiwyg component rendering", () => {
+  it("should render the component in global", async () => {
+    defaultProps.value = "This is the text";
+
+    const initialState = { ...initialStore, ...defaultProps };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Wysiwyg {...initialState} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const wysiwygWrapper = screen.getByTestId("wysiwyg-wrapper");
+
+    expect(wysiwygWrapper).toBeTruthy();
+    expect(await screen.findByText("This is the text")).toBeTruthy();
+  });
+
+  it("should render the component in site", async () => {
+    defaultProps.value = "This is the text";
+    defaultProps.full = false;
+    defaultProps.site = {
+      id: 85,
+      name: "The Best Site",
+      theme: "default-theme",
+      author: "2",
+      pages: [],
+      published: "2021-11-03T16:54:14.000Z",
+      thumbnail: "http://images.dev.griddo.io/lil-bub-gato-11dd1482-476a-416d-88cf-3b9fb38d6f4d",
+      timezone: "Europe/Madrid",
+      favicon: "",
+      bigAvatar: "",
+      smallAvatar: "",
+      isPublished: true,
+      updated: true,
+      defaultLanguage: 4,
+      path: "",
+      domain: 1,
+    };
+
+    const initialState = { ...initialStore, ...defaultProps };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Wysiwyg {...initialState} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const wysiwygWrapper = screen.getByTestId("wysiwyg-wrapper");
+
+    expect(wysiwygWrapper).toBeTruthy();
+    expect(await screen.findByText("This is the text")).toBeTruthy();
+  });
+
+  it("should render when disabled", async () => {
+    defaultProps.value = "This is the text";
+    defaultProps.disabled = true;
+    defaultProps.placeholder = "The placeholder";
+
+    const initialState = { ...initialStore, ...defaultProps };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Wysiwyg {...initialState} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const wysiwygWrapper = screen.getByTestId("wysiwyg-wrapper");
+
+    expect(wysiwygWrapper).toBeTruthy();
+    expect(await screen.findByText("This is the text")).toBeTruthy();
+  });
+
+  it("should render when empty string", async () => {
+    defaultProps.value = "";
+    defaultProps.error = true;
+
+    const initialState = { ...initialStore, ...defaultProps };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Wysiwyg {...initialState} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const textarea = screen.getByRole("textbox", { hidden: true });
+    expect(textarea).toBeTruthy();
+  });
+});