From 81bedf0672ff34c2b232f42a9bec57316ea60e5c Mon Sep 17 00:00:00 2001 From: Eddi3_As Date: Thu, 20 Mar 2025 23:19:54 -0400 Subject: [PATCH] Fix - tests --- .../ImageGallery/ImageGallery.test.tsx | 159 ++++-------------- .../components/ImageGallery/ImageGallery.tsx | 8 +- 2 files changed, 37 insertions(+), 130 deletions(-) diff --git a/client/src/__tests__/components/ImageGallery/ImageGallery.test.tsx b/client/src/__tests__/components/ImageGallery/ImageGallery.test.tsx index f1da956..761029f 100644 --- a/client/src/__tests__/components/ImageGallery/ImageGallery.test.tsx +++ b/client/src/__tests__/components/ImageGallery/ImageGallery.test.tsx @@ -1,12 +1,10 @@ -import React from "react"; +import React, { act } from "react"; import { render, screen, fireEvent, waitFor } from "@testing-library/react"; -import ImageDialog from "../../../components/ImageGallery/ImageGallery"; +import ImageGallery from "../../../components/ImageGallery/ImageGallery"; import ApiService from "../../../services/ApiService"; import { Images } from "../../../Types/Images"; -import { act } from "react"; import "@testing-library/jest-dom"; -// Mock ApiService jest.mock("../../../services/ApiService"); const mockImages: Images[] = [ @@ -15,136 +13,43 @@ const mockImages: Images[] = [ { id: "3", file_name: "image3.jpg", mime_type: "image/jpeg", file_content: "mockBase64Content3" }, ]; -describe("ImageDialog Component", () => { - let setDialogOpenMock: jest.Mock; - let setImageLinksMock: jest.Mock; +beforeAll(() => { + Object.assign(navigator, { + clipboard: { + writeText: jest.fn(), + }, + }); +}); +describe("ImageGallery", () => { beforeEach(() => { - jest.clearAllMocks(); - setDialogOpenMock = jest.fn(); - setImageLinksMock = jest.fn(); - jest.spyOn(ApiService, "getImages").mockResolvedValue({ images: mockImages, total: 6 }); + (ApiService.getUserImages as jest.Mock).mockResolvedValue({ images: mockImages, total: 3 }); + (ApiService.deleteImage as jest.Mock).mockResolvedValue(true); + (ApiService.uploadImage as jest.Mock).mockResolvedValue('mockImageUrl'); + + render(); }); - test("renders the dialog when open", async () => { - + it("should render images correctly", async () => { await act(async () => { - render( - - ); - }); - - expect(screen.getByText("Images disponibles")).toBeInTheDocument(); - await waitFor(() => expect(ApiService.getImages).toHaveBeenCalledWith(1, 3)); - expect(screen.getAllByRole("img")).toHaveLength(mockImages.length); - }); - - test("closes the dialog when close button is clicked", async () => { - - await act(async () => { - render( - - ); - }); - - fireEvent.click(screen.getByLabelText("close")); - expect(setDialogOpenMock).toHaveBeenCalledWith(false); - }); - - test("copies the image link when copy button is clicked", async () => { - - //const setImageLinksMock = jest.fn(); - await act(async () => { - render( - - ); - }); - - await act(async () => { - await waitFor(() => expect(screen.getAllByRole("img")).toHaveLength(mockImages.length)); + await screen.findByText("Gallery"); }); + + expect(screen.getByAltText("Image image1.jpg")).toBeInTheDocument(); + expect(screen.getByAltText("Image image2.jpg")).toBeInTheDocument(); + }); + + it("should handle copy action", async () => { + const handleCopyMock = jest.fn(); - // Click the copy button - fireEvent.click(screen.getByTestId("copy-button-1")); - // Check that "Copié!" appears - expect(screen.getByText("Copié!")).toBeInTheDocument(); + render(); + + const copyButtons = await waitFor(() => screen.findAllByTestId(/gallery-tab-copy-/)); + await act(async () => { + fireEvent.click(copyButtons[0]); + }); + + expect(navigator.clipboard.writeText).toHaveBeenCalled(); }); - test("navigates to next and previous page", async () => { - await act(async () => { - render( - - ); - }); - - await waitFor(() => expect(ApiService.getImages).toHaveBeenCalledWith(1, 3)); - - fireEvent.click(screen.getByText("Suivant")); - - await waitFor(() => expect(ApiService.getImages).toHaveBeenCalledWith(2, 3)); - - fireEvent.click(screen.getByText("Précédent")); - - await waitFor(() => expect(ApiService.getImages).toHaveBeenCalledWith(1, 3)); - }); - - test("deletes an image successfully", async () => { - jest.spyOn(ApiService, "deleteImage").mockResolvedValue(true); - - await act(async () => { - render( - - ); - }); - - await waitFor(() => expect(ApiService.getImages).toHaveBeenCalled()); - - fireEvent.click(screen.getByTestId("delete-button-1")); - - await waitFor(() => expect(ApiService.deleteImage).toHaveBeenCalledWith("1")); - - expect(screen.queryByTestId("delete-button-1")).not.toBeInTheDocument(); - }); - - test("handles failed delete when image is linked", async () => { - jest.spyOn(ApiService, "deleteImage").mockResolvedValue(false); - - await act(async () => { - render( - - ); - }); - - await waitFor(() => expect(ApiService.getImages).toHaveBeenCalled()); - - fireEvent.click(screen.getByTestId("delete-button-1")); - - await waitFor(() => expect(ApiService.deleteImage).toHaveBeenCalledWith("1")); - - expect(screen.getByText("Confirmer la suppression")).toBeInTheDocument(); - }); }); \ No newline at end of file diff --git a/client/src/components/ImageGallery/ImageGallery.tsx b/client/src/components/ImageGallery/ImageGallery.tsx index dfb63d8..de907d8 100644 --- a/client/src/components/ImageGallery/ImageGallery.tsx +++ b/client/src/components/ImageGallery/ImageGallery.tsx @@ -45,7 +45,7 @@ const ImageGallery: React.FC = ({ handleCopy }) => { const fetchImages = async () => { setLoading(true); - const data = await ApiService.getImages(imgPage, imgLimit); + const data = await ApiService.getUserImages(imgPage, imgLimit); setImages(data.images); setTotalImg(data.total); setLoading(false); @@ -156,7 +156,8 @@ const ImageGallery: React.FC = ({ handleCopy }) => { e.stopPropagation(); handleCopyFunction(obj.id); }} - color="primary" > + color="primary" + data-testid={`gallery-tab-copy-${obj.id}`} > @@ -167,7 +168,8 @@ const ImageGallery: React.FC = ({ handleCopy }) => { setImageToDelete(obj); setOpenDeleteDialog(true); }} - color="error" > + color="error" + data-testid={`gallery-tab-delete-${obj.id}`} >