Merge 81bedf0672 into ee7a7a0544

client/src/__tests__/components/ImageGallery/ImageGallery.test.tsx

@@ -22,13 +22,10 @@ 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 />);
   });
@@ -46,46 +43,13 @@ 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();
   });
 
-  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,10 +25,9 @@ import { Upload } from "@mui/icons-material";
 
 interface ImagesProps {
   handleCopy?: (id: string) => void;
-  handleDelete?: (id: string) => void;
 }
 
-const ImageGallery: React.FC<ImagesProps> = ({ handleCopy, handleDelete }) => {
+const ImageGallery: React.FC<ImagesProps> = ({ handleCopy }) => {
   const [images, setImages] = useState<ImageType[]>([]);
   const [totalImg, setTotalImg] = useState(0);
   const [imgPage, setImgPage] = useState(1);
@@ -56,16 +55,14 @@ const ImageGallery: React.FC<ImagesProps> = ({ handleCopy, handleDelete }) => {
     fetchImages();
   }, [imgPage]);
 
-  const defaultHandleDelete = async (id: string) => {
+  const handleDelete = async () => {
     if (imageToDelete) {
       setLoading(true);
-      const isDeleted = await ApiService.deleteImage(id);
+      const isDeleted = await ApiService.deleteImage(imageToDelete.id);
       setLoading(false);
 
       if (isDeleted) {
-        //setImages(images.filter((image) => image.id !== id));
-        setImgPage(1);
-        fetchImages();
+        setImages(images.filter((image) => image.id !== imageToDelete.id));
         setSnackbarMessage("Image supprimée avec succès !");
         setSnackbarSeverity("success");
       } else {
@@ -87,7 +84,6 @@ const ImageGallery: React.FC<ImagesProps> = ({ handleCopy, handleDelete }) => {
   };
 
   const handleCopyFunction = handleCopy || defaultHandleCopy;
-  const handleDeleteFunction = handleDelete || defaultHandleDelete;
 
   const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files ? event.target.files[0] : null;
@@ -268,7 +264,7 @@ const ImageGallery: React.FC<ImagesProps> = ({ handleCopy, handleDelete }) => {
           <Button onClick={() => setOpenDeleteDialog(false)} color="primary">
             Annuler
           </Button>
-          <Button onClick={() => imageToDelete && handleDeleteFunction(imageToDelete.id)} color="error">
+          <Button onClick={handleDelete} color="error">
             Delete
           </Button>
         </DialogActions>