@griddo/ax 1.75.111 → 1.75.113

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

@@ -0,0 +1,613 @@
+import React from "react";
+
+import axios, { AxiosResponse } from "axios";
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen, fireEvent, act, waitFor } from "../../../../config/jest/test-utils";
+import { mock } from "jest-mock-extended";
+import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import "@testing-library/jest-dom";
+
+import { parseTheme } from "@ax/helpers";
+import Gallery, { IGalleryProps, IDispatchProps } from "@ax/components/Gallery";
+import globalTheme from "@ax/themes/theme.json";
+import { IGetSiteImages, ISite } from "@ax/types";
+import * as galleryUtils from "@ax/components/Gallery/utils";
+import * as galleryHooks from "@ax/components/Gallery/hooks";
+
+afterEach(() => {
+  cleanup();
+  jest.resetAllMocks();
+});
+
+jest.mock("axios");
+const mockedAxios = axios as jest.MockedFunction<typeof axios>;
+
+const defaultSiteProps = mock<ISite>();
+const defaultDataProps = {
+  items: [
+    {
+      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: new Date("2022-06-30T07:06:54.352Z"),
+      size: 55286,
+      width: 680,
+      height: 353,
+      orientation: "L",
+      site: "Global",
+    },
+    {
+      id: 1002,
+      name: "Imagen_Interior_fullstack_2.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: new Date("2022-06-30T07:06:54.352Z"),
+      size: 55286,
+      width: 680,
+      height: 353,
+      orientation: "L",
+      site: "Global",
+    },
+  ],
+  isImageSelected: true,
+  imageSelected: {
+    alt: "",
+    damId: "imagen-interior-fullstack_2",
+    description: "",
+    height: 353,
+    id: 1002,
+    name: "Imagen_Interior_fullstack.png",
+    orientation: "L",
+    publicId: "thesaurus-dev/Imagen_Interior_fullstack_6c908d9f-b493-4c93-b4d2-a0439bc00820",
+    published: new Date("2022-06-30T07:06:54.352Z"),
+    site: "Global",
+    size: 55286,
+    tags: [],
+    thumb: "https://images.dev.griddo.io/w/215/h/161/imagen-interior-fullstack",
+    title: "",
+    url: "https://images.dev.griddo.io/imagen-interior-fullstack",
+    width: 680,
+  },
+  page: 1,
+  isFinished: false,
+};
+
+const initialStore = {
+  gallery: {
+    isLoading: {
+      init: false,
+      more: false,
+    },
+    isSaving: {
+      save: false,
+      saveAdd: false,
+      delete: false,
+    },
+    data: defaultDataProps,
+    isUploading: false,
+    isSuccess: false,
+    isError: false,
+    errorMsg: "error",
+  },
+};
+
+const middlewares: any = [thunk];
+const mockStore = configureStore(middlewares);
+
+const store = mockStore(initialStore);
+
+describe("Gallery component rendering", () => {
+  it("should render the component", () => {
+    const defaultGalleryProps = mock<IGalleryProps>();
+    const defaultDispatchProps = mock<IDispatchProps>();
+
+    const responsePromise = Promise.resolve({
+      status: 200,
+      statusText: "ok",
+      data: {
+        items: [],
+      },
+    } as AxiosResponse);
+
+    mockedAxios.mockResolvedValue(responsePromise);
+
+    defaultGalleryProps.data = defaultDataProps;
+    defaultGalleryProps.site = defaultSiteProps;
+    defaultGalleryProps.isLoading = {
+      init: false,
+      more: false,
+    };
+
+    const defaultProps = {
+      ...defaultGalleryProps,
+      ...defaultDispatchProps,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Gallery {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    expect(screen.getByTestId("gallery-wrapper")).toBeTruthy();
+    expect(screen.getByTestId("grid-wrapper")).toBeTruthy();
+    expect(screen.queryAllByTestId("grid-item")).toHaveLength(2);
+  });
+
+  it("should activate the handleClick with an image", () => {
+    const defaultGalleryProps = mock<IGalleryProps>();
+    const defaultDispatchProps = mock<IDispatchProps>();
+
+    const dataProps = {
+      items: [
+        {
+          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: new Date("2022-06-30T07:06:54.352Z"),
+          size: 55286,
+          width: 680,
+          height: 353,
+          orientation: "L",
+          site: "Global",
+        },
+        {
+          id: 1002,
+          name: "Imagen_Interior_fullstack_2.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: new Date("2022-06-30T07:06:54.352Z"),
+          size: 55286,
+          width: 680,
+          height: 353,
+          orientation: "L",
+          site: "Global",
+        },
+      ],
+      isImageSelected: true,
+      imageSelected: {
+        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: new Date("2022-06-30T07:06:54.352Z"),
+        size: 55286,
+        width: 680,
+        height: 353,
+        orientation: "L",
+        site: "Global",
+      },
+      page: 1,
+      isFinished: false,
+    };
+
+    const responsePromise = Promise.resolve({
+      status: 200,
+      statusText: "ok",
+      data: {
+        items: [],
+      },
+    } as AxiosResponse);
+
+    mockedAxios.mockResolvedValue(responsePromise);
+
+    defaultGalleryProps.data = defaultDataProps;
+    defaultGalleryProps.site = defaultSiteProps;
+    defaultGalleryProps.isLoading = {
+      init: false,
+      more: false,
+    };
+
+    const defaultProps = {
+      ...defaultGalleryProps,
+      ...defaultDispatchProps,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Gallery {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+    store.clearActions();
+
+    const images = screen.queryAllByTestId("image-item");
+    expect(screen.queryAllByTestId("image-item")).toHaveLength(2);
+
+    act(() => {
+      fireEvent.click(images[0]);
+    });
+
+    expect(store.getActions()).toContainEqual({
+      payload: { data: dataProps },
+      type: "gallery/SET_DATA",
+    });
+  });
+
+  it("should activate the setImage action", async () => {
+    const defaultGalleryProps = mock<IGalleryProps>();
+    const defaultDispatchProps = mock<IDispatchProps>();
+
+    const responsePromise = Promise.resolve({
+      status: 200,
+      statusText: "ok",
+      data: {
+        items: [],
+      },
+    } as AxiosResponse);
+
+    mockedAxios.mockResolvedValue(responsePromise);
+
+    const getImageSelectedMocked = defaultGalleryProps.getImageSelected as jest.MockedFunction<(img: null) => void>;
+    const toggleModalMock = defaultGalleryProps.toggleModal as jest.MockedFunction<() => void>;
+
+    const defaultDataProps = {
+      items: [
+        {
+          id: 1002,
+          name: "Imagen_Interior_fullstack_2.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: new Date("2022-06-30T07:06:54.352Z"),
+          size: 55286,
+          width: 680,
+          height: 353,
+          orientation: "L",
+          site: "Global",
+        },
+      ],
+      isImageSelected: true,
+      imageSelected: {
+        id: 1002,
+        name: "Imagen_Interior_fullstack_2.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: new Date("2022-06-30T07:06:54.352Z"),
+        size: 55286,
+        width: 680,
+        height: 353,
+        orientation: "L",
+        site: "Global",
+      },
+      page: 1,
+      isFinished: false,
+    };
+
+    const initialStore = {
+      gallery: {
+        isLoading: {
+          init: false,
+          more: false,
+        },
+        isSaving: {
+          save: false,
+          saveAdd: false,
+          delete: false,
+        },
+        data: defaultDataProps,
+        isUploading: false,
+        isSuccess: false,
+        isError: false,
+        errorMsg: "error",
+      },
+    };
+
+    defaultGalleryProps.data = defaultDataProps;
+    defaultGalleryProps.site = defaultSiteProps;
+    defaultGalleryProps.isLoading = {
+      init: false,
+      more: false,
+    };
+
+    const store = mockStore(initialStore);
+
+    const defaultProps = {
+      ...defaultGalleryProps,
+      ...defaultDispatchProps,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Gallery {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const buttonDetailPanel = screen.getByTestId("button-default");
+
+    act(() => {
+      fireEvent.click(buttonDetailPanel);
+    });
+    await waitFor(() => expect(getImageSelectedMocked).toBeCalled());
+    expect(toggleModalMock).toBeCalled();
+  });
+
+  it("should activate the refreshImages action", async () => {
+    const defaultGalleryProps = mock<IGalleryProps>();
+    const defaultDispatchProps = mock<IDispatchProps>();
+
+    const responsePromise = Promise.resolve({
+      status: 200,
+      statusText: "ok",
+      data: {
+        items: [
+          {
+            id: 1002,
+            name: "Imagen_Interior_fullstack_2.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: new Date("2022-06-30T07:06:54.352Z"),
+            size: 55286,
+            width: 680,
+            height: 353,
+            orientation: "L",
+            site: "Global",
+          },
+        ],
+      },
+    } as AxiosResponse);
+
+    mockedAxios.mockResolvedValue(responsePromise);
+
+    const getSiteImagesMock = defaultDispatchProps.getSiteImages as jest.MockedFunction<
+      (params: IGetSiteImages) => Promise<void>
+    >;
+
+    const defaultDataProps = {
+      items: [
+        {
+          id: 1002,
+          name: "Imagen_Interior_fullstack_2.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: new Date("2022-06-30T07:06:54.352Z"),
+          size: 55286,
+          width: 680,
+          height: 353,
+          orientation: "L",
+          site: "Global",
+        },
+      ],
+      isImageSelected: true,
+      imageSelected: {
+        id: 1002,
+        name: "Imagen_Interior_fullstack_2.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: new Date("2022-06-30T07:06:54.352Z"),
+        size: 55286,
+        width: 680,
+        height: 353,
+        orientation: "L",
+        site: "Global",
+      },
+      page: 2,
+      isFinished: false,
+    };
+
+    const initialStore = {
+      gallery: {
+        isLoading: {
+          init: false,
+          more: false,
+        },
+        isSaving: {
+          save: false,
+          saveAdd: false,
+          delete: false,
+        },
+        data: defaultDataProps,
+        isUploading: true,
+        isSuccess: false,
+        isError: false,
+        errorMsg: "error",
+      },
+    };
+
+    const dataProps = {
+      imageSelected: {
+        alt: "",
+        damId: "imagen-interior-fullstack",
+        description: "",
+        height: 353,
+        id: 1002,
+        name: "Imagen_Interior_fullstack_2.png",
+        orientation: "L",
+        publicId: "thesaurus-dev/Imagen_Interior_fullstack_6c908d9f-b493-4c93-b4d2-a0439bc00820",
+        published: new Date("2022-06-30T07:06:54.352Z"),
+        site: "Global",
+        size: 55286,
+        tags: [],
+        thumb: "https://images.dev.griddo.io/w/215/h/161/imagen-interior-fullstack",
+        title: "",
+        url: "https://images.dev.griddo.io/imagen-interior-fullstack",
+        width: 680,
+      },
+      isFinished: true,
+      isImageSelected: true,
+      items: [
+        {
+          alt: "",
+          damId: "imagen-interior-fullstack",
+          description: "",
+          height: 353,
+          id: 1002,
+          name: "Imagen_Interior_fullstack_2.png",
+          orientation: "L",
+          publicId: "thesaurus-dev/Imagen_Interior_fullstack_6c908d9f-b493-4c93-b4d2-a0439bc00820",
+          published: new Date("2022-06-30T07:06:54.352Z"),
+          site: "Global",
+          size: 55286,
+          tags: [],
+          thumb: "https://images.dev.griddo.io/w/215/h/161/imagen-interior-fullstack",
+          title: "",
+          url: "https://images.dev.griddo.io/imagen-interior-fullstack",
+          width: 680,
+        },
+        {
+          alt: "",
+          damId: "imagen-interior-fullstack",
+          description: "",
+          height: 353,
+          id: 1002,
+          name: "Imagen_Interior_fullstack_2.png",
+          orientation: "L",
+          publicId: "thesaurus-dev/Imagen_Interior_fullstack_6c908d9f-b493-4c93-b4d2-a0439bc00820",
+          published: new Date("2022-06-30T07:06:54.352Z"),
+          site: "Global",
+          size: 55286,
+          tags: [],
+          thumb: "https://images.dev.griddo.io/w/215/h/161/imagen-interior-fullstack",
+          title: "",
+          url: "https://images.dev.griddo.io/imagen-interior-fullstack",
+          width: 680,
+        },
+      ],
+      page: 2,
+    };
+
+    defaultGalleryProps.data = defaultDataProps;
+    defaultGalleryProps.site = defaultSiteProps;
+    defaultGalleryProps.isLoading = {
+      init: false,
+      more: false,
+    };
+
+    const store = mockStore(initialStore);
+
+    const defaultProps = {
+      ...defaultGalleryProps,
+      ...defaultDispatchProps,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Gallery {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const buttonDetailPanel = screen.getAllByTestId("button-line-inverse");
+
+    await act(() => {
+      fireEvent.click(buttonDetailPanel[2]);
+    });
+
+    expect(store.getActions()).toContainEqual({
+      payload: { data: dataProps },
+      type: "gallery/SET_DATA",
+    });
+  });
+
+  it("should call the sortBy actions", () => {
+    const defaultGalleryProps = mock<IGalleryProps>();
+    const defaultDispatchProps = mock<IDispatchProps>();
+
+    const responsePromise = Promise.resolve({
+      status: 200,
+      statusText: "ok",
+      data: {
+        items: [],
+      },
+    } as AxiosResponse);
+
+    mockedAxios.mockResolvedValue(responsePromise);
+
+    defaultGalleryProps.data = defaultDataProps;
+    defaultGalleryProps.site = defaultSiteProps;
+    defaultGalleryProps.isLoading = {
+      init: false,
+      more: false,
+    };
+
+    const defaultProps = {
+      ...defaultGalleryProps,
+      ...defaultDispatchProps,
+    };
+
+    const getSortedListStatusMock = jest.spyOn(galleryUtils, "getSortedListStatus");
+    const useFilterQueryMock = jest.spyOn(galleryHooks, "useFilterQuery");
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Gallery {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const orientationWrapper = screen.getByTestId("sortby-wrapper");
+    expect(orientationWrapper).toBeTruthy();
+    fireEvent.click(orientationWrapper);
+
+    const listItem = screen.getAllByTestId("list-item");
+    expect(listItem).toHaveLength(6);
+    fireEvent.click(listItem[0]);
+
+    expect(getSortedListStatusMock).toBeCalled();
+    expect(useFilterQueryMock).toBeCalled();
+  });
+});

package/src/__tests__/components/Gallery/GalleryFilters/Orientation/Orientation.test.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen, fireEvent } from "@testing-library/react";
+import { mock } from "jest-mock-extended";
+import "@testing-library/jest-dom";
+
+import { parseTheme } from "@ax/helpers";
+import Orientation, { IOrientationProps } from "@ax/components/Gallery/GalleryFilters/Orientation";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(() => {
+  cleanup();
+});
+
+const defaultProps = mock<IOrientationProps>();
+const filterItemsMock = defaultProps.filterItems as jest.MockedFunction<(pointer: string, filter: string) => void>;
+
+describe("OrderBy filter component rendering", () => {
+  it("should render the component", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Orientation {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const orientationWrapper = screen.getByTestId("orientation-wrapper");
+    expect(orientationWrapper).toBeTruthy();
+    fireEvent.click(orientationWrapper);
+
+    const listItem = screen.getAllByTestId("list-item");
+    expect(listItem).toHaveLength(4);
+  });
+
+  it("should call the list item", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Orientation {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const orientationWrapper = screen.getByTestId("orientation-wrapper");
+    expect(orientationWrapper).toBeTruthy();
+    fireEvent.click(orientationWrapper);
+
+    const listItem = screen.getAllByTestId("list-item");
+    expect(listItem).toHaveLength(4);
+    fireEvent.click(listItem[1]);
+
+    expect(filterItemsMock).toBeCalledWith("orientation", "landscape");
+  });
+});