@griddo/ax 1.69.9 → 1.72.1

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

@@ -0,0 +1,471 @@
+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 { mock } from "jest-mock-extended";
+import thunk from "redux-thunk";
+
+import { render, screen, cleanup, fireEvent } from "../../../../../config/jest/test-utils";
+
+import ImageField, { IImageFieldProps } from "@ax/components/Fields/ImageField";
+import { parseTheme } from "@ax/helpers";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(() => {
+  cleanup();
+});
+
+jest.mock("axios");
+const mockedAxios = axios as jest.MockedFunction<typeof axios>;
+
+const data = {
+  data: [],
+  status: 500,
+  statusText: "Internal Server Error",
+  headers: {},
+  config: {},
+};
+
+mockedAxios.mockResolvedValue(data);
+
+const defaultProps = mock<IImageFieldProps>();
+
+const initialStore = {
+  gallery: {
+    data: {
+      items: [],
+      isImageSelected: false,
+      imageSelected: null,
+      page: 1,
+      isFinished: false,
+    },
+    isLoading: {
+      init: false,
+      more: false,
+    },
+    isSaving: {
+      save: false,
+      saveAdd: false,
+      delete: false,
+    },
+    isUploading: false,
+    isSuccess: false,
+    isError: false,
+    errorMsg: "",
+  },
+};
+
+const middlewares = [thunk];
+const mockStore = configureStore(middlewares);
+
+const store = mockStore(initialStore);
+
+describe("ImageField component rendering", () => {
+  it("should render the component", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ImageField {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    expect(screen.getByTestId("fieldWrapper")).toBeTruthy();
+    expect(screen.getByTestId("previewDiv")).not.toBeVisible();
+  });
+
+  it("should render the component with linkableImage", () => {
+    defaultProps.value = {
+      id: 857,
+      name: ".png",
+      title: "",
+      description: "",
+      alt: "",
+      tags: [],
+      url: "kjkajsf",
+      thumb: "jasd",
+      publicId: "thesaurus",
+      damId: "screenshot",
+      published: new Date("2022-04-18T08:52:48.334Z"),
+      size: 1123589,
+      width: 1444,
+      height: 640,
+      orientation: "L",
+      site: "global",
+    };
+
+    defaultProps.selectedContent = {
+      component: "LinkableImage",
+      editorID: 7,
+      parentEditorID: 4,
+      title: "",
+      alt: "",
+      veil: 0,
+      file: {
+        id: 1001,
+        name: "Imagen_Interior_fullstack.png",
+        title: "",
+        description: "",
+        alt: "",
+        tags: [],
+        url: "https://images.dev.griddo.io/imagen-interior-fullstack",
+        thumb: "https://images.dev.griddo.io/w/215/h/161/imagen-interior-fullstack",
+        publicId: "thesaurus-dev/Imagen_Interior_fullstack_6c908d9f-b493-4c93-b4d2-a0439bc00820",
+        damId: "imagen-interior-fullstack",
+        published: "2022-06-30T07:06:54.352Z",
+        size: 55286,
+        width: 680,
+        height: 353,
+        orientation: "L",
+        site: 113,
+      },
+    };
+
+    defaultProps.cropPreview = true;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ImageField {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    expect(screen.getByTestId("fieldWrapper")).toBeTruthy();
+    expect(screen.getByTestId("imageDataWrapper")).toBeTruthy();
+    expect(screen.getByTestId("previewDiv")).toBeVisible();
+  });
+
+  it("should render the component with image with no url attr", () => {
+    defaultProps.value = "image.png";
+
+    defaultProps.selectedContent = {
+      component: "LinkableImage",
+      editorID: 7,
+      parentEditorID: 4,
+      title: "",
+      alt: "",
+      veil: 0,
+      file: {
+        id: 1001,
+        name: "Imagen_Interior_fullstack.png",
+        title: "",
+        description: "",
+        alt: "",
+        tags: [],
+        url: "https://images.dev.griddo.io/imagen-interior-fullstack",
+        thumb: "https://images.dev.griddo.io/w/215/h/161/imagen-interior-fullstack",
+        publicId: "thesaurus-dev/Imagen_Interior_fullstack_6c908d9f-b493-4c93-b4d2-a0439bc00820",
+        damId: "imagen-interior-fullstack",
+        published: "2022-06-30T07:06:54.352Z",
+        size: 55286,
+        width: 680,
+        height: 353,
+        orientation: "L",
+        site: 113,
+      },
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ImageField {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    expect(screen.getByTestId("fieldWrapper")).toBeTruthy();
+    expect(screen.queryByTestId("imageDataWrapper")).not.toBeTruthy();
+    expect(screen.getByTestId("previewDiv")).toBeVisible();
+  });
+
+  it("should render the component with no image", () => {
+    defaultProps.value = null;
+
+    defaultProps.selectedContent = {
+      component: "LinkableImage",
+      editorID: 7,
+      parentEditorID: 4,
+      title: "",
+      alt: "",
+      veil: 0,
+      file: {
+        id: 1001,
+        name: "Imagen_Interior_fullstack.png",
+        title: "",
+        description: "",
+        alt: "",
+        tags: [],
+        url: "https://images.dev.griddo.io/imagen-interior-fullstack",
+        thumb: "https://images.dev.griddo.io/w/215/h/161/imagen-interior-fullstack",
+        publicId: "thesaurus-dev/Imagen_Interior_fullstack_6c908d9f-b493-4c93-b4d2-a0439bc00820",
+        damId: "imagen-interior-fullstack",
+        published: "2022-06-30T07:06:54.352Z",
+        size: 55286,
+        width: 680,
+        height: 353,
+        orientation: "L",
+        site: 113,
+      },
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ImageField {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    expect(screen.getByTestId("fieldWrapper")).toBeTruthy();
+    expect(screen.queryByTestId("imageDataWrapper")).not.toBeTruthy();
+    expect(screen.getByTestId("previewDiv")).not.toBeVisible();
+  });
+
+  it("should render the component with image with undefined", () => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    defaultProps.value = undefined;
+
+    defaultProps.selectedContent = {
+      component: "LinkableImage",
+      editorID: 7,
+      parentEditorID: 4,
+      title: "",
+      alt: "",
+      veil: 0,
+      file: {
+        id: 1001,
+        name: "Imagen_Interior_fullstack.png",
+        title: "",
+        description: "",
+        alt: "",
+        tags: [],
+        url: "https://images.dev.griddo.io/imagen-interior-fullstack",
+        thumb: "https://images.dev.griddo.io/w/215/h/161/imagen-interior-fullstack",
+        publicId: "thesaurus-dev/Imagen_Interior_fullstack_6c908d9f-b493-4c93-b4d2-a0439bc00820",
+        damId: "imagen-interior-fullstack",
+        published: "2022-06-30T07:06:54.352Z",
+        size: 55286,
+        width: 680,
+        height: 353,
+        orientation: "L",
+        site: 113,
+      },
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ImageField {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    expect(screen.getByTestId("fieldWrapper")).toBeTruthy();
+    expect(screen.queryByTestId("imageDataWrapper")).not.toBeTruthy();
+    expect(screen.getByTestId("previewDiv")).not.toBeVisible();
+  });
+});
+
+describe("ImageField triggers", () => {
+  it("should handle the onClick", () => {
+    defaultProps.value = {
+      id: 857,
+      name: ".png",
+      title: "",
+      description: "",
+      alt: "",
+      tags: [],
+      url: "https://images.dev.griddo.io/screenshot-2022-04-13-at-164915",
+      thumb: "https://images.dev.griddo.io/w/215/h/161/screenshot-2022-04-13-at-164915",
+      publicId: "thesaurus-dev/Screenshot_2022-04-13_at_16.49.15_927293bf-d163-402f-b216-4dc8656ea8c1",
+      damId: "screenshot-2022-04-13-at-164915",
+      published: new Date("2022-04-18T08:52:48.334Z"),
+      size: 1123589,
+      width: 1444,
+      height: 640,
+      orientation: "L",
+      site: "global",
+    };
+
+    defaultProps.selectedContent = {
+      component: "LinkableImage",
+      editorID: 7,
+      parentEditorID: 4,
+      title: "",
+      alt: "",
+      veil: 0,
+      file: {
+        id: 1001,
+        name: "Imagen_Interior_fullstack.png",
+        title: "",
+        description: "",
+        alt: "",
+        tags: [],
+        url: "https://images.dev.griddo.io/imagen-interior-fullstack",
+        thumb: "https://images.dev.griddo.io/w/215/h/161/imagen-interior-fullstack",
+        publicId: "thesaurus-dev/Imagen_Interior_fullstack_6c908d9f-b493-4c93-b4d2-a0439bc00820",
+        damId: "imagen-interior-fullstack",
+        published: "2022-06-30T07:06:54.352Z",
+        size: 55286,
+        width: 680,
+        height: 353,
+        orientation: "L",
+        site: 113,
+      },
+    };
+    const setIsGalleryMock = defaultProps.setIsGalleryOpened as jest.MockedFunction<() => void>;
+    defaultProps.disabled = false;
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ImageField {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const fieldWrapperAction = screen.getByTestId("fieldWrapper");
+    expect(fieldWrapperAction).toBeTruthy();
+
+    fireEvent.click(fieldWrapperAction);
+    expect(setIsGalleryMock).toBeCalled();
+  });
+
+  it("should handle the delete action", () => {
+    defaultProps.value = {
+      id: 857,
+      name: ".png",
+      title: "",
+      description: "",
+      alt: "",
+      tags: [],
+      url: "https://images.dev.griddo.io/screenshot-2022-04-13-at-164915",
+      thumb: "https://images.dev.griddo.io/w/215/h/161/screenshot-2022-04-13-at-164915",
+      publicId: "thesaurus-dev/Screenshot_2022-04-13_at_16.49.15_927293bf-d163-402f-b216-4dc8656ea8c1",
+      damId: "screenshot-2022-04-13-at-164915",
+      published: new Date("2022-04-18T08:52:48.334Z"),
+      size: 1123589,
+      width: 1444,
+      height: 640,
+      orientation: "L",
+      site: "global",
+    };
+
+    defaultProps.selectedContent = {
+      component: "LinkableImage",
+      editorID: 7,
+      parentEditorID: 4,
+      title: "",
+      alt: "",
+      veil: 0,
+      file: {
+        id: 1001,
+        name: "Imagen_Interior_fullstack.png",
+        title: "",
+        description: "",
+        alt: "",
+        tags: [],
+        url: "https://images.dev.griddo.io/imagen-interior-fullstack",
+        thumb: "https://images.dev.griddo.io/w/215/h/161/imagen-interior-fullstack",
+        publicId: "thesaurus-dev/Imagen_Interior_fullstack_6c908d9f-b493-4c93-b4d2-a0439bc00820",
+        damId: "imagen-interior-fullstack",
+        published: "2022-06-30T07:06:54.352Z",
+        size: 55286,
+        width: 680,
+        height: 353,
+        orientation: "L",
+        site: 113,
+      },
+    };
+    const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: any) => void>;
+    defaultProps.disabled = false;
+    const { rerender } = render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ImageField {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const iconActions = screen.getAllByTestId("icon-action-component");
+    expect(iconActions).toHaveLength(2);
+
+    fireEvent.click(iconActions[1]);
+    expect(onChangeMock).toBeCalled();
+
+    rerender(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ImageField {...defaultProps} />
+      </ThemeProvider>
+    );
+    const fieldWrapperAction = screen.getByTestId("fieldWrapper");
+    const previewDiv = screen.getByTestId("previewDiv");
+    expect(fieldWrapperAction).toBeVisible();
+    expect(previewDiv).not.toBeVisible();
+  });
+
+  it("should handle the change action", () => {
+    defaultProps.value = {
+      id: 857,
+      name: ".png",
+      title: "",
+      description: "",
+      alt: "",
+      tags: [],
+      url: "https://images.dev.griddo.io/screenshot-2022-04-13-at-164915",
+      thumb: "https://images.dev.griddo.io/w/215/h/161/screenshot-2022-04-13-at-164915",
+      publicId: "thesaurus-dev/Screenshot_2022-04-13_at_16.49.15_927293bf-d163-402f-b216-4dc8656ea8c1",
+      damId: "screenshot-2022-04-13-at-164915",
+      published: new Date("2022-04-18T08:52:48.334Z"),
+      size: 1123589,
+      width: 1444,
+      height: 640,
+      orientation: "L",
+      site: "global",
+    };
+
+    defaultProps.selectedContent = {
+      component: "LinkableImage",
+      editorID: 7,
+      parentEditorID: 4,
+      title: "",
+      alt: "",
+      veil: 0,
+      file: {
+        id: 1001,
+        name: "Imagen_Interior_fullstack.png",
+        title: "",
+        description: "",
+        alt: "",
+        tags: [],
+        url: "https://images.dev.griddo.io/imagen-interior-fullstack",
+        thumb: "https://images.dev.griddo.io/w/215/h/161/imagen-interior-fullstack",
+        publicId: "thesaurus-dev/Imagen_Interior_fullstack_6c908d9f-b493-4c93-b4d2-a0439bc00820",
+        damId: "imagen-interior-fullstack",
+        published: "2022-06-30T07:06:54.352Z",
+        size: 55286,
+        width: 680,
+        height: 353,
+        orientation: "L",
+        site: 113,
+      },
+    };
+    const setIsGalleryMock = defaultProps.setIsGalleryOpened as jest.MockedFunction<() => void>;
+    defaultProps.disabled = false;
+    const { rerender } = render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ImageField {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const iconActions = screen.getAllByTestId("icon-action-component");
+    expect(iconActions).toHaveLength(2);
+
+    fireEvent.click(iconActions[0]);
+    expect(setIsGalleryMock).toBeCalled();
+
+    rerender(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ImageField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByTestId("previewDiv")).toBeVisible();
+  });
+});

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

@@ -1,12 +1,11 @@
 import React from "react";
 import { ThemeProvider } from "styled-components";
-import { parseTheme } from "@griddo/core";
+import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import { mock } from "jest-mock-extended";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
-import { ISite } from "@ax/types";
 
-import MultiCheckSelect from "@ax/components/Fields/MultiCheckSelect";
+import MultiCheckSelect, { IMultiCheckSelectProps } from "@ax/components/Fields/MultiCheckSelect";
 
 afterEach(cleanup);
 
@@ -55,16 +54,3 @@ describe("onClick events", () => {
     expect(screen.getByText("dimensionTwo")).toBeTruthy();
   });
 });
-
-interface IMultiCheckSelectProps {
-  value: (string | number)[];
-  onChange: (value: string | (string | number)[]) => void;
-  site?: ISite | null;
-  placeholder: string;
-  source?: string;
-  className?: string;
-  mandatory?: boolean;
-  options?: { name: string; value: string; title: string }[];
-  selectAllOption?: string;
-  floating?: boolean;
-}

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

@@ -1,7 +1,7 @@
 import React from "react";
 import Axios from "axios";
 import { ThemeProvider } from "styled-components";
-import { parseTheme } from "@griddo/core";
+import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import { mock } from "jest-mock-extended";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
@@ -101,7 +101,7 @@ describe("onChange events", () => {
 
     rerender(Component);
 
-    const checkFieldInputs = screen.getAllByTestId("checkFieldInput");
+    const checkFieldInputs = screen.getAllByTestId("check-field-input");
 
     await act(async () => {
       fireEvent.click(checkFieldInputs[0]);

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

@@ -1,7 +1,7 @@
 import * as React from "react";
-import NoteField from "@ax/components/Fields/NoteField";
+import NoteField, { INoteFieldProps } from "@ax/components/Fields/NoteField";
 import { ThemeProvider } from "styled-components";
-import { parseTheme } from "@griddo/core";
+import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import { render, screen, cleanup } from "@testing-library/react";
 import { mock } from "jest-mock-extended";
@@ -60,8 +60,3 @@ describe("NoteField component rendering", () => {
     expect(title).toBeTruthy();
   });
 });
-
-interface INoteFieldProps {
-  value: { title?: string; text: string | JSX.Element };
-  className?: string;
-}

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

@@ -1,7 +1,7 @@
 import React from "react";
-import NumberField from "@ax/components/Fields/NumberField";
+import NumberField, { INumberFieldProps } from "@ax/components/Fields/NumberField";
 import { ThemeProvider } from "styled-components";
-import { parseTheme } from "@griddo/core";
+import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import { mock } from "jest-mock-extended";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
@@ -94,16 +94,3 @@ describe("onChange events", () => {
     expect(handleValidation).toHaveBeenCalled();
   });
 });
-
-interface INumberFieldProps {
-  value?: number;
-  onChange: (value: number) => void;
-  name?: string;
-  error?: boolean;
-  minValue?: number;
-  maxValue?: number;
-  onClickIcon?: () => void;
-  onBlur?: (value: number) => void;
-  disabled?: boolean;
-  handleValidation?: (value: string, validators: Record<string, unknown>) => void;
-}

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

@@ -1,7 +1,7 @@
 import * as React from "react";
-import RadioField from "@ax/components/Fields/RadioField";
+import RadioField, { IRadioFieldProps } from "@ax/components/Fields/RadioField";
 import { ThemeProvider } from "styled-components";
-import { parseTheme } from "@griddo/core";
+import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
 import { mock } from "jest-mock-extended";
@@ -94,13 +94,3 @@ describe("onClick events", () => {
     expect(defaultProps.onChange).toHaveBeenCalledTimes(1);
   });
 });
-
-interface IRadioFieldProps {
-  name: string;
-  title: string;
-  value: string;
-  checked?: boolean;
-  error?: boolean;
-  disabled?: boolean;
-  onChange?: (value: string) => void;
-}