From 1a7dc7fec21165d8a3fc7f64249978517f7792f7 Mon Sep 17 00:00:00 2001
From: Eddi3_As <AQ43820@etsmtl.net>
Date: Fri, 21 Mar 2025 15:24:21 -0400
Subject: [PATCH] ajout tests

---
 .../ImageGallery/ImageGallery.test.tsx        | 48 ++++++++++++++++---
 .../components/ImageGallery/ImageGallery.tsx  | 14 ++++--
 2 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/client/src/__tests__/components/ImageGallery/ImageGallery.test.tsx b/client/src/__tests__/components/ImageGallery/ImageGallery.test.tsx
index 761029f..2fdb583 100644
--- a/client/src/__tests__/components/ImageGallery/ImageGallery.test.tsx
+++ b/client/src/__tests__/components/ImageGallery/ImageGallery.test.tsx
@@ -22,10 +22,13 @@ beforeAll(() => {
 });
 
 describe("ImageGallery", () => {
+
+  let mockHandleDelete: jest.Mock;
   beforeEach(() => {
     (ApiService.getUserImages as jest.Mock).mockResolvedValue({ images: mockImages, total: 3 });
     (ApiService.deleteImage as jest.Mock).mockResolvedValue(true); 
     (ApiService.uploadImage as jest.Mock).mockResolvedValue('mockImageUrl'); 
+    mockHandleDelete = jest.fn();
 
     render(<ImageGallery />);
   });
@@ -43,13 +46,46 @@ describe("ImageGallery", () => {
     const handleCopyMock = jest.fn();
   
     render(<ImageGallery handleCopy={handleCopyMock} />);
-  
-  const copyButtons = await waitFor(() => screen.findAllByTestId(/gallery-tab-copy-/));
-  await act(async () => {
-    fireEvent.click(copyButtons[0]);
-  });
+
+    const copyButtons = await waitFor(() => screen.findAllByTestId(/gallery-tab-copy-/));
+    await act(async () => {
+      fireEvent.click(copyButtons[0]);
+    });
   
     expect(navigator.clipboard.writeText).toHaveBeenCalled();
   });
 
-});
\ No newline at end of file
+  it("should delete an image and update the gallery", async () => {
+    const fetchImagesMock = jest.fn().mockResolvedValue({ images: mockImages.filter((image) => image.id !== "1"), total: 2 });
+
+    (ApiService.getUserImages as jest.Mock).mockImplementation(fetchImagesMock);
+
+    render(<ImageGallery handleDelete={mockHandleDelete} />);
+
+    await act(async () => {
+      await screen.findByAltText("Image image1.jpg");
+    });
+
+    const deleteButtons = await waitFor(() => screen.findAllByTestId(/gallery-tab-delete-/));
+    fireEvent.click(deleteButtons[0]);
+    
+    await waitFor(() => {
+      expect(screen.getByText("Voulez-vous supprimer cette image?")).toBeInTheDocument();
+    });
+
+    const confirmDeleteButton = screen.getByText("Delete");  
+    await act(async () => {
+      fireEvent.click(confirmDeleteButton);
+    });
+
+    await waitFor(() => {
+      expect(ApiService.deleteImage).toHaveBeenCalledWith("1");
+    });
+
+    await waitFor(() => {
+      expect(screen.queryByAltText("Image image1.jpg")).toBeNull();
+      expect(screen.getByText("Image supprimée avec succès !")).toBeInTheDocument();
+    });
+  });
+
+});
diff --git a/client/src/components/ImageGallery/ImageGallery.tsx b/client/src/components/ImageGallery/ImageGallery.tsx
index de907d8..1bed68e 100644
--- a/client/src/components/ImageGallery/ImageGallery.tsx
+++ b/client/src/components/ImageGallery/ImageGallery.tsx
@@ -25,9 +25,10 @@ import { Upload } from "@mui/icons-material";
 
 interface ImagesProps {
   handleCopy?: (id: string) => void;
+  handleDelete?: (id: string) => void;
 }
 
-const ImageGallery: React.FC<ImagesProps> = ({ handleCopy }) => {
+const ImageGallery: React.FC<ImagesProps> = ({ handleCopy, handleDelete }) => {
   const [images, setImages] = useState<ImageType[]>([]);
   const [totalImg, setTotalImg] = useState(0);
   const [imgPage, setImgPage] = useState(1);
@@ -55,14 +56,16 @@ const ImageGallery: React.FC<ImagesProps> = ({ handleCopy }) => {
     fetchImages();
   }, [imgPage]);
 
-  const handleDelete = async () => {
+  const defaultHandleDelete = async (id: string) => {
     if (imageToDelete) {
       setLoading(true);
-      const isDeleted = await ApiService.deleteImage(imageToDelete.id);
+      const isDeleted = await ApiService.deleteImage(id);
       setLoading(false);
 
       if (isDeleted) {
-        setImages(images.filter((image) => image.id !== imageToDelete.id));
+        //setImages(images.filter((image) => image.id !== id));
+        setImgPage(1);
+        fetchImages();
         setSnackbarMessage("Image supprimée avec succès !");
         setSnackbarSeverity("success");
       } else {
@@ -84,6 +87,7 @@ const ImageGallery: React.FC<ImagesProps> = ({ handleCopy }) => {
   };
 
   const handleCopyFunction = handleCopy || defaultHandleCopy;
+  const handleDeleteFunction = handleDelete || defaultHandleDelete;
 
   const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files ? event.target.files[0] : null;
@@ -264,7 +268,7 @@ const ImageGallery: React.FC<ImagesProps> = ({ handleCopy }) => {
           <Button onClick={() => setOpenDeleteDialog(false)} color="primary">
             Annuler
           </Button>
-          <Button onClick={handleDelete} color="error">
+          <Button onClick={() => imageToDelete && handleDeleteFunction(imageToDelete.id)} color="error">
             Delete
           </Button>
         </DialogActions>