ajout tests

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-/));
+    const copyButtons = await waitFor(() => screen.findAllByTestId(/gallery-tab-copy-/));
-  await act(async () => {
+    await act(async () => {
-    fireEvent.click(copyButtons[0]);
+      fireEvent.click(copyButtons[0]);
-  });
+    });
   
     expect(navigator.clipboard.writeText).toHaveBeenCalled();
   });
 
-});
+  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();
+    });
+  });
+
+});

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>