From f055a47305e38334ee76b035ae8b1dc33d81cb81 Mon Sep 17 00:00:00 2001 From: Eddi3_As Date: Thu, 6 Mar 2025 20:33:57 -0500 Subject: [PATCH] ajout test imagegallery --- .../ImageGallery/ImageGallery.test.tsx | 130 ++++++++++++++++++ .../components/ImageGallery/ImageGallery.tsx | 23 +--- .../pages/Teacher/EditorQuiz/EditorQuiz.tsx | 7 - client/src/services/ApiService.tsx | 10 -- 4 files changed, 132 insertions(+), 38 deletions(-) create mode 100644 client/src/__tests__/components/ImageGallery/ImageGallery.test.tsx diff --git a/client/src/__tests__/components/ImageGallery/ImageGallery.test.tsx b/client/src/__tests__/components/ImageGallery/ImageGallery.test.tsx new file mode 100644 index 0000000..9604b35 --- /dev/null +++ b/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( + + ); + }); + + 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( + + ); + }); + + 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( + + ); + }); + + 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( + + ); + }); + + 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( + + ); + }); + + 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)); + }); +}); \ No newline at end of file diff --git a/client/src/components/ImageGallery/ImageGallery.tsx b/client/src/components/ImageGallery/ImageGallery.tsx index 6b4301b..53b181b 100644 --- a/client/src/components/ImageGallery/ImageGallery.tsx +++ b/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 = ({ galleryOpen, admin, setDialogOpen, setImageLinks }) => { const [copiedId, setCopiedId] = useState(null); - const [deleteId, setDeleteId] = useState(null); - /* const [editedFileNames, setEditedFileNames] = useState<{ [key: string]: string }>( - Object.fromEntries(images.map((img) => [img.id, img.file_name])) - ); - */ const [editingId, setEditingId] = useState(null); const [images, setImages] = useState([]); const [totalImg, setTotalImg] = useState(0); @@ -45,7 +39,6 @@ const ImageDialog: React.FC = ({ 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 = ({ 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 = ({ galleryOpen, admin, setDialogOpen, setIm {admin && editingId === obj.id ? ( handleFileNameChange(obj.id, e.target.value)} variant="outlined" size="small" style={{ maxWidth: 150 }} @@ -129,17 +113,14 @@ const ImageDialog: React.FC = ({ galleryOpen, admin, setDialogOpen, setIm {obj.id} - onCopy(obj.id)} size="small"> + onCopy(obj.id)} size="small" data-testid={`copy-button-${obj.id}`}> {admin && ( <> - handleEditClick(obj.id)} size="small" color="primary"> + handleEditClick(obj.id)} size="small" color="primary" data-testid={`edit-button-${obj.id}`}> - handleDeleteClick(obj.id)} size="small" color="primary"> - - )} {copiedId === obj.id && Copié!} diff --git a/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx b/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx index bafb1d9..6231892 100644 --- a/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx +++ b/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 (
diff --git a/client/src/services/ApiService.tsx b/client/src/services/ApiService.tsx index 22189e5..116765f 100644 --- a/client/src/services/ApiService.tsx +++ b/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()