@griddo/ax 1.75.111 → 1.75.113

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

@@ -0,0 +1,853 @@
+import * as React from "react";
+import axios, { AxiosResponse } from "axios";
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen, fireEvent, act } from "../../../../../../config/jest/test-utils";
+import { mock } from "jest-mock-extended";
+import configureStore from "redux-mock-store";
+import "@testing-library/jest-dom";
+import thunk from "redux-thunk";
+import { Router } from "react-router-dom";
+
+import { parseTheme } from "@ax/helpers";
+import { history } from "@ax/routes";
+import GalleryDetailPanel, { IDetailPanelProps, IDispatchProps } from "@ax/components/Gallery/GalleryPanel/DetailPanel";
+import globalTheme from "@ax/themes/theme.json";
+import { IImageForm } from "@ax/types";
+
+// for testing copy to clipboard
+Object.assign(navigator, {
+  clipboard: {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    writeText: () => {},
+  },
+});
+
+afterEach(() => {
+  cleanup();
+  jest.clearAllMocks();
+});
+
+const middlewares: any = [thunk];
+const mockStore = configureStore(middlewares);
+
+jest.mock("axios");
+const mockedAxios = axios as jest.MockedFunction<typeof axios>;
+
+const defaultDetailProps = mock<IDetailPanelProps>();
+const defaultDispatchProps = mock<IDispatchProps>();
+jest.useFakeTimers();
+
+describe("Gallery component rendering", () => {
+  it("should render the component", () => {
+    const initialStore = {
+      gallery: {
+        isSaving: {
+          save: false,
+          saveAdd: false,
+          delete: false,
+        },
+      },
+    };
+
+    const store = mockStore(initialStore);
+
+    defaultDetailProps.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",
+    };
+
+    const defaultProps = {
+      ...defaultDetailProps,
+      ...defaultDispatchProps,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <GalleryDetailPanel {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const detailPanelWrapper = screen.getByTestId("detail-panel-wrapper");
+    expect(detailPanelWrapper).toBeTruthy();
+    expect(screen.queryByText("Delete")).toBeInTheDocument();
+    expect(screen.queryByText("Save")).toBeInTheDocument();
+    expect(screen.queryByText("Save & Add")).toBeInTheDocument();
+  });
+
+  it("should render the component with ing options in buttons", () => {
+    const initialStore = {
+      gallery: {
+        isSaving: {
+          save: true,
+          saveAdd: true,
+          delete: true,
+        },
+      },
+    };
+
+    const store = mockStore(initialStore);
+
+    defaultDetailProps.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",
+    };
+
+    const defaultProps = {
+      ...defaultDetailProps,
+      ...defaultDispatchProps,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <GalleryDetailPanel {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const detailPanelWrapper = screen.getByTestId("detail-panel-wrapper");
+    expect(detailPanelWrapper).toBeTruthy();
+    expect(screen.queryByText("Deleting")).toBeInTheDocument();
+    expect(screen.queryAllByText("Saving")).toHaveLength(2);
+  });
+
+  it("should click the handleDelete and delete the image", async () => {
+    const responsePromise = Promise.resolve({
+      status: 200,
+      statusText: "ok",
+    } as AxiosResponse);
+
+    mockedAxios.mockResolvedValue(responsePromise);
+
+    const initialStore = {
+      gallery: {
+        isSaving: {
+          save: false,
+          saveAdd: false,
+          delete: false,
+        },
+      },
+    };
+
+    const store = mockStore(initialStore);
+
+    defaultDetailProps.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",
+    };
+
+    const refreshImagesMocked = defaultDetailProps.refreshImages as jest.MockedFunction<() => void>;
+    const deleteImageMocked = defaultDispatchProps.deleteImage as jest.MockedFunction<
+      (imageID: number) => Promise<boolean>
+    >;
+
+    const defaultProps = {
+      ...defaultDetailProps,
+      ...defaultDispatchProps,
+    };
+
+    const component = (
+      <Router history={history}>
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <GalleryDetailPanel {...defaultProps} />
+        </ThemeProvider>
+      </Router>
+    );
+
+    render(component, { store });
+
+    const buttonWrapper = screen.getByTestId("button-text");
+    expect(buttonWrapper).toBeTruthy();
+
+    await act(async () => {
+      fireEvent.click(buttonWrapper);
+    });
+    expect(screen.getByText(/1 image deleted/i)).toBeInTheDocument();
+    expect(refreshImagesMocked).toBeCalled();
+  });
+
+  it("should click the handleDelete and don't delete the image", async () => {
+    const responsePromise = Promise.resolve({
+      data: {
+        code: 500,
+        message: "error",
+      },
+    } as AxiosResponse);
+
+    mockedAxios.mockResolvedValue(responsePromise);
+
+    const initialStore = {
+      gallery: {
+        isSaving: {
+          save: false,
+          saveAdd: false,
+          delete: false,
+        },
+      },
+    };
+
+    const store = mockStore(initialStore);
+
+    defaultDetailProps.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",
+    };
+
+    const refreshImagesMocked = defaultDetailProps.refreshImages as jest.MockedFunction<() => void>;
+    const deleteImageMocked = defaultDispatchProps.deleteImage as jest.MockedFunction<
+      (imageID: number) => Promise<boolean>
+    >;
+
+    const defaultProps = {
+      ...defaultDetailProps,
+      ...defaultDispatchProps,
+    };
+
+    const component = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <GalleryDetailPanel {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    render(component, { store });
+
+    const buttonWrapper = screen.getByTestId("button-text");
+    expect(buttonWrapper).toBeTruthy();
+
+    await act(async () => {
+      fireEvent.click(buttonWrapper);
+    });
+
+    expect(screen.queryByText(/1 image deleted/i)).not.toBeInTheDocument();
+    expect(refreshImagesMocked).toBeCalled();
+  });
+
+  it("should click the handleDelete but not refresh images", async () => {
+    const responsePromise = Promise.resolve({
+      status: 500,
+      statusText: "error",
+    } as AxiosResponse);
+
+    mockedAxios.mockRejectedValue(responsePromise);
+
+    const initialStore = {
+      gallery: {
+        isSaving: {
+          save: false,
+          saveAdd: false,
+          delete: false,
+        },
+      },
+    };
+
+    const store = mockStore(initialStore);
+
+    defaultDetailProps.imageSelected = {
+      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",
+    };
+
+    const refreshImagesMocked = defaultDetailProps.refreshImages as jest.MockedFunction<() => void>;
+    const deleteImageMocked = defaultDispatchProps.deleteImage as jest.MockedFunction<
+      (imageID: number) => Promise<boolean>
+    >;
+
+    const defaultProps = {
+      ...defaultDetailProps,
+      ...defaultDispatchProps,
+    };
+
+    const component = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <GalleryDetailPanel {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    render(component, { store });
+
+    const buttonWrapper = screen.getByTestId("button-text");
+    expect(buttonWrapper).toBeTruthy();
+
+    await act(async () => {
+      fireEvent.click(buttonWrapper);
+    });
+
+    expect(screen.queryByText(/1 image deleted/i)).not.toBeInTheDocument();
+    expect(refreshImagesMocked).not.toBeCalled();
+  });
+
+  it("should click the handleSave and update the image", async () => {
+    const responsePromise = Promise.resolve({
+      status: 200,
+      statusText: "ok",
+    } as AxiosResponse);
+
+    mockedAxios.mockResolvedValue(responsePromise);
+
+    const initialStore = {
+      gallery: {
+        isSaving: {
+          save: false,
+          saveAdd: false,
+          delete: false,
+        },
+      },
+    };
+
+    const store = mockStore(initialStore);
+
+    defaultDetailProps.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",
+    };
+
+    const refreshImagesMocked = defaultDetailProps.refreshImages as jest.MockedFunction<() => void>;
+    const updateImageMock = defaultDispatchProps.updateImage as jest.MockedFunction<
+      (imageID: number, imageData: IImageForm, add?: boolean) => Promise<void>
+    >;
+
+    const defaultProps = {
+      ...defaultDetailProps,
+      ...defaultDispatchProps,
+    };
+
+    const component = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <GalleryDetailPanel {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    render(component, { store });
+
+    const buttonWrapper = screen.getAllByTestId("button-line-inverse");
+    expect(buttonWrapper).toBeTruthy();
+
+    await act(async () => {
+      fireEvent.click(buttonWrapper[1]);
+    });
+
+    expect(refreshImagesMocked).toBeCalled();
+  });
+
+  it("should click the handleSave and no update the image", async () => {
+    const responsePromise = Promise.resolve({
+      status: 200,
+      statusText: "ok",
+    } as AxiosResponse);
+
+    mockedAxios.mockResolvedValue(responsePromise);
+
+    const initialStore = {
+      gallery: {
+        isSaving: {
+          save: false,
+          saveAdd: false,
+          delete: false,
+        },
+      },
+    };
+
+    const store = mockStore(initialStore);
+
+    defaultDetailProps.imageSelected = {
+      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",
+    };
+
+    const refreshImagesMocked = defaultDetailProps.refreshImages as jest.MockedFunction<() => void>;
+    const updateImageMock = defaultDispatchProps.updateImage as jest.MockedFunction<
+      (imageID: number, imageData: IImageForm, add?: boolean) => Promise<void>
+    >;
+
+    const defaultProps = {
+      ...defaultDetailProps,
+      ...defaultDispatchProps,
+    };
+
+    const component = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <GalleryDetailPanel {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    render(component, { store });
+
+    const buttonWrapper = screen.getAllByTestId("button-line-inverse");
+    expect(buttonWrapper).toBeTruthy();
+
+    await act(async () => {
+      fireEvent.click(buttonWrapper[1]);
+    });
+
+    expect(refreshImagesMocked).not.toBeCalled();
+  });
+
+  it("should click the handleSaveAndAdd", async () => {
+    const responsePromise = Promise.resolve({
+      status: 200,
+      statusText: "ok",
+    } as AxiosResponse);
+
+    mockedAxios.mockResolvedValue(responsePromise);
+
+    const initialStore = {
+      gallery: {
+        isSaving: {
+          save: false,
+          saveAdd: false,
+          delete: false,
+        },
+      },
+    };
+
+    const store = mockStore(initialStore);
+
+    defaultDetailProps.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",
+    };
+
+    const setImageMock = defaultDetailProps.setImage as jest.MockedFunction<(imageData: any) => void>;
+
+    const defaultProps = {
+      ...defaultDetailProps,
+      ...defaultDispatchProps,
+    };
+
+    const component = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <GalleryDetailPanel {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    render(component, { store });
+
+    const buttonWrapper = screen.getByTestId("button-default");
+    expect(buttonWrapper).toBeTruthy();
+
+    await act(async () => {
+      fireEvent.click(buttonWrapper);
+    });
+
+    expect(setImageMock).toBeCalled();
+  });
+
+  it("should click the handleSave and no update the image", async () => {
+    const responsePromise = Promise.resolve({
+      status: 200,
+      statusText: "ok",
+    } as AxiosResponse);
+
+    mockedAxios.mockResolvedValue(responsePromise);
+
+    const initialStore = {
+      gallery: {
+        isSaving: {
+          save: false,
+          saveAdd: false,
+          delete: false,
+        },
+      },
+    };
+
+    const store = mockStore(initialStore);
+
+    defaultDetailProps.imageSelected = {
+      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",
+    };
+
+    const setImageMock = defaultDetailProps.setImage as jest.MockedFunction<(imageData: any) => void>;
+
+    const defaultProps = {
+      ...defaultDetailProps,
+      ...defaultDispatchProps,
+    };
+
+    const component = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <GalleryDetailPanel {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    render(component, { store });
+
+    const buttonWrapper = screen.getByTestId("button-default");
+    expect(buttonWrapper).toBeTruthy();
+
+    await act(async () => {
+      fireEvent.click(buttonWrapper);
+    });
+
+    expect(setImageMock).not.toBeCalled();
+  });
+
+  it("should render the AddToGlobal", async () => {
+    const initialStore = {
+      gallery: {
+        isSaving: {
+          save: false,
+          saveAdd: false,
+          delete: false,
+        },
+      },
+    };
+
+    const store = mockStore(initialStore);
+
+    defaultDetailProps.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",
+      file: new File([""], "darthvader.png"),
+    };
+
+    const defaultProps = {
+      ...defaultDetailProps,
+      ...defaultDispatchProps,
+    };
+
+    const component = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <GalleryDetailPanel {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    render(component, { store });
+
+    const addToGlobalWrapper = screen.getByTestId("add-to-global-wrapper");
+    expect(addToGlobalWrapper).toBeTruthy();
+  });
+
+  it("should click the handleCopyUrl", async () => {
+    jest.spyOn(navigator.clipboard, "writeText");
+
+    const initialStore = {
+      gallery: {
+        isSaving: {
+          save: false,
+          saveAdd: false,
+          delete: false,
+        },
+      },
+    };
+
+    const store = mockStore(initialStore);
+
+    defaultDetailProps.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",
+    };
+
+    const defaultProps = {
+      ...defaultDetailProps,
+      ...defaultDispatchProps,
+    };
+
+    const component = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <GalleryDetailPanel {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    render(component, { store });
+
+    const buttonWrapper = screen.getAllByTestId("button-line-inverse");
+    expect(buttonWrapper).toBeTruthy();
+
+    await act(async () => {
+      fireEvent.click(buttonWrapper[0]);
+    });
+
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
+      "https://images.dev.griddo.io/imagen-interior-fullstack"
+    );
+  });
+
+  it("should call window.open with the image url", async () => {
+    window.open = jest.fn();
+
+    const initialStore = {
+      gallery: {
+        isSaving: {
+          save: false,
+          saveAdd: false,
+          delete: false,
+        },
+      },
+    };
+
+    const store = mockStore(initialStore);
+
+    defaultDetailProps.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",
+    };
+
+    const defaultProps = {
+      ...defaultDetailProps,
+      ...defaultDispatchProps,
+    };
+
+    const component = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <GalleryDetailPanel {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    render(component, { store });
+
+    const buttonWrapper = screen.getByTestId("icon-action-component");
+    expect(buttonWrapper).toBeTruthy();
+
+    await act(async () => {
+      fireEvent.click(buttonWrapper);
+    });
+
+    expect(window.open).toHaveBeenCalledWith("https://images.dev.griddo.io/imagen-interior-fullstack", "_blank");
+  });
+
+  it("should call the onChange of the FieldBehaviors", () => {
+    const initialStore = {
+      gallery: {
+        isSaving: {
+          save: false,
+          saveAdd: false,
+          delete: false,
+        },
+      },
+    };
+
+    const store = mockStore(initialStore);
+
+    defaultDetailProps.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",
+    };
+
+    const defaultProps = {
+      ...defaultDetailProps,
+      ...defaultDispatchProps,
+    };
+
+    const component = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <GalleryDetailPanel {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const { rerender } = render(component, { store });
+
+    const inputComponent = screen.getAllByTestId("input-component");
+    expect(inputComponent).toBeTruthy();
+    act(() => {
+      fireEvent.change(inputComponent[0], { target: { value: "a title" } });
+      rerender(component);
+      jest.runAllTimers();
+    });
+
+    expect(screen.getByDisplayValue("a title")).toBeInTheDocument();
+
+    act(() => {
+      fireEvent.change(inputComponent[1], { target: { value: "a text" } });
+      rerender(component);
+      jest.runAllTimers();
+    });
+    expect(screen.getByDisplayValue("a text")).toBeInTheDocument();
+
+    const textAreaComponent = screen.getAllByTestId("text-area-component");
+    expect(textAreaComponent).toBeTruthy();
+    act(() => {
+      fireEvent.change(textAreaComponent[0], { target: { value: "a description" } });
+      rerender(component);
+      jest.runAllTimers();
+    });
+
+    expect(screen.getByDisplayValue("a description")).toBeInTheDocument();
+
+    const tagFieldInput = screen.getByTestId("tag-field-input");
+    expect(tagFieldInput).toBeTruthy();
+    fireEvent.change(tagFieldInput, { target: { value: "a tag" } });
+    expect(screen.getByDisplayValue("a tag")).toBeInTheDocument();
+    fireEvent.keyDown(tagFieldInput, { key: "Enter" });
+    expect(screen.queryByDisplayValue("a tag")).not.toBeInTheDocument();
+  });
+});