diff --git a/client/src/__tests__/components/ImageGallery/ImageGallery.test.tsx b/client/src/__tests__/components/ImageGallery/ImageGallery.test.tsx index 2fdb583..d60a0c9 100644 --- a/client/src/__tests__/components/ImageGallery/ImageGallery.test.tsx +++ b/client/src/__tests__/components/ImageGallery/ImageGallery.test.tsx @@ -1,9 +1,10 @@ import React, { act } from "react"; +import "@testing-library/jest-dom"; import { render, screen, fireEvent, waitFor } from "@testing-library/react"; import ImageGallery from "../../../components/ImageGallery/ImageGallery"; import ApiService from "../../../services/ApiService"; import { Images } from "../../../Types/Images"; -import "@testing-library/jest-dom"; +import userEvent from "@testing-library/user-event"; jest.mock("../../../services/ApiService"); @@ -14,6 +15,7 @@ const mockImages: Images[] = [ ]; beforeAll(() => { + global.URL.createObjectURL = jest.fn(() => 'mockedObjectUrl'); Object.assign(navigator, { clipboard: { writeText: jest.fn(), @@ -22,15 +24,16 @@ beforeAll(() => { }); describe("ImageGallery", () => { - let mockHandleDelete: jest.Mock; - beforeEach(() => { + + beforeEach(async () => { (ApiService.getUserImages as jest.Mock).mockResolvedValue({ images: mockImages, total: 3 }); (ApiService.deleteImage as jest.Mock).mockResolvedValue(true); (ApiService.uploadImage as jest.Mock).mockResolvedValue('mockImageUrl'); + await act(async () => { + render(); + }); mockHandleDelete = jest.fn(); - - render(); }); it("should render images correctly", async () => { @@ -44,8 +47,9 @@ describe("ImageGallery", () => { it("should handle copy action", async () => { const handleCopyMock = jest.fn(); - - render(); + await act(async () => { + render(); + }); const copyButtons = await waitFor(() => screen.findAllByTestId(/gallery-tab-copy-/)); await act(async () => { @@ -60,7 +64,9 @@ describe("ImageGallery", () => { (ApiService.getUserImages as jest.Mock).mockImplementation(fetchImagesMock); - render(); + await act(async () => { + render(); + }); await act(async () => { await screen.findByAltText("Image image1.jpg"); @@ -88,4 +94,54 @@ describe("ImageGallery", () => { }); }); + it("should upload an image and display success message", async () => { + const importTab = screen.getByRole("tab", { name: /import/i }); + fireEvent.click(importTab); + + const fileInputs = await screen.findAllByTestId("file-input"); + const fileInput = fileInputs[1]; + + expect(fileInput).toBeInTheDocument(); + + const file = new File(["image"], "image.jpg", { type: "image/jpeg" }); + await userEvent.upload(fileInput, file); + + + await waitFor(() => screen.getByAltText("Preview")); + const previewImage = screen.getByAltText("Preview"); + + expect(previewImage).toBeInTheDocument(); + + const uploadButton = screen.getByRole('button', { name: /téléverser/i }); + fireEvent.click(uploadButton); + const successMessage = await screen.findByText(/téléversée avec succès/i); + expect(successMessage).toBeInTheDocument(); + }); + + it("should close the image preview dialog when close button is clicked", async () => { + const imageCard = screen.getByAltText("Image image1.jpg"); + fireEvent.click(imageCard); + + const dialogImage = await screen.findByAltText("Enlarged view"); + expect(dialogImage).toBeInTheDocument(); + + const closeButton = screen.getByTestId("close-button"); + fireEvent.click(closeButton); + + await waitFor(() => { + expect(screen.queryByAltText("Enlarged view")).not.toBeInTheDocument(); + }); + }); + + it("should show an error message when no file is selected", async () => { + const importTab = screen.getByRole("tab", { name: /import/i }); + fireEvent.click(importTab); + const uploadButton = screen.getByRole('button', { name: /téléverser/i }); + fireEvent.click(uploadButton); + + await waitFor(() => { + expect(screen.getByText("Veuillez choisir une image à téléverser.")).toBeInTheDocument(); + }); + }); + }); diff --git a/client/src/components/ImageGallery/ImageGallery.tsx b/client/src/components/ImageGallery/ImageGallery.tsx index 1bed68e..f404b91 100644 --- a/client/src/components/ImageGallery/ImageGallery.tsx +++ b/client/src/components/ImageGallery/ImageGallery.tsx @@ -101,7 +101,7 @@ const ImageGallery: React.FC = ({ handleCopy, handleDelete }) => { const handleSaveImage = async () => { try { if (!importedImage) { - setSnackbarMessage("Veuillez d'abord choisir une image à téléverser."); + setSnackbarMessage("Veuillez choisir une image à téléverser."); setSnackbarSeverity("error"); setSnackbarOpen(true); return; @@ -131,6 +131,10 @@ const ImageGallery: React.FC = ({ handleCopy, handleDelete }) => { } }; + const handleCloseSnackbar = () => { + setSnackbarOpen(false); + }; + return ( setTabValue(newValue)}> @@ -224,9 +228,11 @@ const ImageGallery: React.FC = ({ handleCopy, handleDelete }) => { = ({ handleCopy, handleDelete }) => { )} setSelectedImage(null)} maxWidth="md"> - setSelectedImage(null)} sx={{ position: "absolute", right: 8, top: 8, zIndex: 1 }}> + setSelectedImage(null)} sx={{ position: "absolute", right: 8, top: 8, zIndex: 1 }} + data-testid="close-button"> @@ -274,8 +281,15 @@ const ImageGallery: React.FC = ({ handleCopy, handleDelete }) => { - setSnackbarOpen(false)}> - setSnackbarOpen(false)} severity={snackbarSeverity} sx={{ width: "100%" }}> + + {snackbarMessage}