ajout dernier tests

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(<ImageGallery />);
+    });
     mockHandleDelete = jest.fn();
-
-    render(<ImageGallery />);
   });
 
   it("should render images correctly", async () => {
@@ -44,8 +47,9 @@ describe("ImageGallery", () => {
 
   it("should handle copy action", async () => {
     const handleCopyMock = jest.fn();
-  
+    await act(async () => {
-    render(<ImageGallery handleCopy={handleCopyMock} />);
+      render(<ImageGallery handleCopy={handleCopyMock} />);
+    });
 
     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(<ImageGallery handleDelete={mockHandleDelete} />);
+    await act(async () => {
+      render(<ImageGallery handleDelete={mockHandleDelete} />);
+    });
 
     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();
+    });
+  });
+
 });

client/src/components/ImageGallery/ImageGallery.tsx

@@ -101,7 +101,7 @@ const ImageGallery: React.FC<ImagesProps> = ({ 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<ImagesProps> = ({ handleCopy, handleDelete }) => {
     }
   };
 
+  const handleCloseSnackbar = () => {
+    setSnackbarOpen(false);
+  };
+
   return (
     <Box p={3}>
       <Tabs value={tabValue} onChange={(_, newValue) => setTabValue(newValue)}>
@@ -224,9 +228,11 @@ const ImageGallery: React.FC<ImagesProps> = ({ handleCopy, handleDelete }) => {
           <Box display="flex" flexDirection="row" alignItems="center" width="100%" maxWidth={400}>
             <TextField
               type="file"
+              data-testid="file-input"
               onChange={handleImageUpload}  
               slotProps={{
                 htmlInput: {
+                  "data-testid": "file-input",
                   accept: "image/*",
                 },
               }}
@@ -244,7 +250,8 @@ const ImageGallery: React.FC<ImagesProps> = ({ handleCopy, handleDelete }) => {
         </Box>
       )}
       <Dialog open={!!selectedImage} onClose={() => setSelectedImage(null)} maxWidth="md">
-        <IconButton color="primary" onClick={() => setSelectedImage(null)} sx={{ position: "absolute", right: 8, top: 8, zIndex: 1 }}>
+        <IconButton color="primary" onClick={() => setSelectedImage(null)} sx={{ position: "absolute", right: 8, top: 8, zIndex: 1 }}
+          data-testid="close-button">
           <CloseIcon />
         </IconButton>
         <DialogContent>
@@ -274,8 +281,15 @@ const ImageGallery: React.FC<ImagesProps> = ({ handleCopy, handleDelete }) => {
         </DialogActions>
       </Dialog>
 
-      <Snackbar open={snackbarOpen} autoHideDuration={4000} onClose={() => setSnackbarOpen(false)}>
+      <Snackbar 
-        <Alert onClose={() => setSnackbarOpen(false)} severity={snackbarSeverity} sx={{ width: "100%" }}>
+        open={snackbarOpen}
+        autoHideDuration={4000} 
+        onClose={handleCloseSnackbar}
+        >
+        <Alert 
+          onClose={handleCloseSnackbar}
+          severity={snackbarSeverity}
+          sx={{ width: "100%" }}>
           {snackbarMessage}
         </Alert>
       </Snackbar>