ajout test imagegallery

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

@@ -0,0 +1,130 @@
+import React from "react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import ImageDialog from "../../../components/ImageGallery/ImageGallery";
+import ApiService from "../../../services/ApiService";
+import { Images } from "../../../Types/Images";
+import { act } from "react";
+import "@testing-library/jest-dom";
+
+// Mock ApiService
+jest.mock("../../../services/ApiService");
+
+const mockImages: Images[] = [
+  { id: "1", file_name: "image1.jpg", mime_type: "image/jpeg", file_content: "mockBase64Content1" },
+  { id: "2", file_name: "image2.jpg", mime_type: "image/jpeg", file_content: "mockBase64Content2" },
+  { id: "3", file_name: "image3.jpg", mime_type: "image/jpeg", file_content: "mockBase64Content3" },
+];
+
+describe("ImageDialog Component", () => {
+    let setDialogOpenMock: jest.Mock;
+    let setImageLinksMock: jest.Mock;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    setDialogOpenMock = jest.fn();
+    setImageLinksMock = jest.fn();
+    jest.spyOn(ApiService, "getImages").mockResolvedValue({ images: mockImages, total: 6 });
+  });
+
+  test("renders the dialog when open", async () => {
+
+    await act(async () => {
+        render(
+          <ImageDialog
+            galleryOpen={true}
+            admin={false}
+            setDialogOpen={setDialogOpenMock}
+            setImageLinks={setImageLinksMock}
+          />
+        );
+      });
+
+    expect(screen.getByText("Images disponibles")).toBeInTheDocument();
+    await waitFor(() => expect(ApiService.getImages).toHaveBeenCalledWith(1, 3));
+    expect(screen.getAllByRole("img")).toHaveLength(mockImages.length);
+  });
+
+  test("closes the dialog when close button is clicked", async () => {
+
+    await act(async () => {
+        render(
+          <ImageDialog
+            galleryOpen={true}
+            admin={false}
+            setDialogOpen={setDialogOpenMock}
+            setImageLinks={setImageLinksMock}
+          />
+        );
+      });
+
+    fireEvent.click(screen.getByLabelText("close"));
+    expect(setDialogOpenMock).toHaveBeenCalledWith(false);
+  });
+
+  test("copies the image link when copy button is clicked", async () => {
+
+    //const setImageLinksMock = jest.fn();
+    await act(async () => {
+        render(
+          <ImageDialog
+            galleryOpen={true}
+            admin={false}
+            setDialogOpen={setDialogOpenMock}
+            setImageLinks={setImageLinksMock}
+          />
+        );
+      });
+
+    await act(async () => {
+        await waitFor(() => expect(screen.getAllByRole("img")).toHaveLength(mockImages.length));
+    });
+  
+    // Click the copy button
+    fireEvent.click(screen.getByTestId("copy-button-1")); 
+    // Check that "Copié!" appears
+    expect(screen.getByText("Copié!")).toBeInTheDocument();
+  });
+
+  test("shows edit field when admin clicks edit button", async () => {
+    await act(async () => {
+        render(
+          <ImageDialog
+            galleryOpen={true}
+            admin={true}
+            setDialogOpen={setDialogOpenMock}
+            setImageLinks={setImageLinksMock}
+          />
+        );
+      });
+
+    await waitFor(() => expect(ApiService.getImages).toHaveBeenCalled());
+
+    const editButton = screen.getByTestId("edit-button-1"); 
+    fireEvent.click(editButton);
+
+    expect(screen.getByDisplayValue("image1.jpg")).toBeInTheDocument();
+  });
+
+  test("navigates to next and previous page", async () => {
+    await act(async () => {
+        render(
+          <ImageDialog
+            galleryOpen={true}
+            admin={false}
+            setDialogOpen={setDialogOpenMock}
+            setImageLinks={setImageLinksMock}
+          />
+        );
+      });
+
+    await waitFor(() => expect(ApiService.getImages).toHaveBeenCalledWith(1, 3));
+
+    fireEvent.click(screen.getByText("Suivant"));
+
+    await waitFor(() => expect(ApiService.getImages).toHaveBeenCalledWith(2, 3));
+
+    fireEvent.click(screen.getByText("Précédent"));
+
+    await waitFor(() => expect(ApiService.getImages).toHaveBeenCalledWith(1, 3));
+  });
+});

client/src/components/ImageGallery/ImageGallery.tsx

@@ -17,7 +17,6 @@ import {
 } from "@mui/material";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import CloseIcon from "@mui/icons-material/Close";
-import DeleteIcon from "@mui/icons-material/Delete";
 import EditIcon from "@mui/icons-material/Edit";
 import { Images } from "../../Types/Images";
 import ApiService from '../../services/ApiService';
@@ -32,11 +31,6 @@ type Props = {
 const ImageDialog: React.FC<Props> = ({ galleryOpen, admin, setDialogOpen, setImageLinks }) => {
 
   const [copiedId, setCopiedId] = useState<string | null>(null);
-  const [deleteId, setDeleteId] = useState<string | null>(null);
-  /* const [editedFileNames, setEditedFileNames] = useState<{ [key: string]: string }>(
-    Object.fromEntries(images.map((img) => [img.id, img.file_name]))
-  );
-  */
   const [editingId, setEditingId] = useState<string | null>(null);
   const [images, setImages] = useState<Images[]>([]);
   const [totalImg, setTotalImg] = useState(0);
@@ -45,7 +39,6 @@ const ImageDialog: React.FC<Props> = ({ galleryOpen, admin, setDialogOpen, setIm
 
   const fetchImages = async (page: number, limit: number) => {
     const data = await ApiService.getImages(page, limit);
-    console.log(data);
     setImages(data.images);
     setTotalImg(data.total);
   };
@@ -54,18 +47,10 @@ const ImageDialog: React.FC<Props> = ({ galleryOpen, admin, setDialogOpen, setIm
     fetchImages(imgPage, imgLimit);
   }, [imgPage]); // Re-fetch images when page changes
 
-  const handleDeleteClick = (id: string) => {
-    setDeleteId(id);
-  };
-
   const handleEditClick = (id: string) => {
     setEditingId(id === editingId ? null : id);
   };
 
-  const handleFileNameChange = (id: string, newFileName: string) => {
-    //setEditedFileNames((prev) => ({ ...prev, [id]: newFileName }));
-  };
-
   const onCopy = (id: string) => {
     const escLink = 'http://localhost:4400/api/image/get/'+id;
     setCopiedId(id);
@@ -118,7 +103,6 @@ const ImageDialog: React.FC<Props> = ({ galleryOpen, admin, setDialogOpen, setIm
                     {admin && editingId === obj.id ? (
                       <TextField
                         value={obj.file_name}
-                        onChange={(e) => handleFileNameChange(obj.id, e.target.value)}
                         variant="outlined"
                         size="small"
                         style={{ maxWidth: 150 }}
@@ -129,17 +113,14 @@ const ImageDialog: React.FC<Props> = ({ galleryOpen, admin, setDialogOpen, setIm
                   </TableCell>
                   <TableCell  style={{ minWidth: 150 }}>
                     {obj.id}
-                    <IconButton onClick={() => onCopy(obj.id)} size="small">
+                    <IconButton onClick={() => onCopy(obj.id)} size="small" data-testid={`copy-button-${obj.id}`}>
                       <ContentCopyIcon fontSize="small" />
                     </IconButton>
                     {admin && (
                       <>
-                        <IconButton onClick={() => handleEditClick(obj.id)} size="small" color="primary">
+                        <IconButton onClick={() => handleEditClick(obj.id)} size="small" color="primary" data-testid={`edit-button-${obj.id}`}>
                           <EditIcon fontSize="small" />
                         </IconButton>
-                        <IconButton onClick={() => handleDeleteClick(obj.id)} size="small" color="primary">
-                          <DeleteIcon fontSize="small" />
-                        </IconButton>
                       </>
                     )}
                     {copiedId === obj.id && <span style={{ marginLeft: 8, color: "green" }}>Copié!</span>}

client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx

@@ -206,13 +206,6 @@ const QuizForm: React.FC = () => {
     const handleCopyToClipboard = async (link: string) => {
         navigator.clipboard.writeText(link);
     }
-    
-    const handleCopy = (imgId: string) => {
-        setImageLinks(prevLinks => [...prevLinks, imgId]);
-        console.log(imgId);
-    };
-
-    
 
     return (
         <div className='quizEditor'>

client/src/services/ApiService.tsx

@@ -66,16 +66,6 @@ class ApiService {
         return object.token;
     }
 
-    private getUserID(): string | null {
-        const objStr = localStorage.getItem("uid");
-
-        if (!objStr) {
-            return null;
-        }
-
-        return objStr;
-    }
-
     public isLoggedIn(): boolean {
         const token = this.getToken()