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 }) => {
)}
- setSnackbarOpen(false)}>
- setSnackbarOpen(false)} severity={snackbarSeverity} sx={{ width: "100%" }}>
+
+
{snackbarMessage}