mirror of
https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir.git
synced 2025-08-11 21:23:54 -04:00
Fix - tests
This commit is contained in:
parent
c50cd3e6e7
commit
81bedf0672
2 changed files with 37 additions and 130 deletions
|
|
@ -1,12 +1,10 @@
|
||||||
import React from "react";
|
import React, { act } from "react";
|
||||||
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
|
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
|
||||||
import ImageDialog from "../../../components/ImageGallery/ImageGallery";
|
import ImageGallery from "../../../components/ImageGallery/ImageGallery";
|
||||||
import ApiService from "../../../services/ApiService";
|
import ApiService from "../../../services/ApiService";
|
||||||
import { Images } from "../../../Types/Images";
|
import { Images } from "../../../Types/Images";
|
||||||
import { act } from "react";
|
|
||||||
import "@testing-library/jest-dom";
|
import "@testing-library/jest-dom";
|
||||||
|
|
||||||
// Mock ApiService
|
|
||||||
jest.mock("../../../services/ApiService");
|
jest.mock("../../../services/ApiService");
|
||||||
|
|
||||||
const mockImages: Images[] = [
|
const mockImages: Images[] = [
|
||||||
|
|
@ -15,136 +13,43 @@ const mockImages: Images[] = [
|
||||||
{ id: "3", file_name: "image3.jpg", mime_type: "image/jpeg", file_content: "mockBase64Content3" },
|
{ id: "3", file_name: "image3.jpg", mime_type: "image/jpeg", file_content: "mockBase64Content3" },
|
||||||
];
|
];
|
||||||
|
|
||||||
describe("ImageDialog Component", () => {
|
beforeAll(() => {
|
||||||
let setDialogOpenMock: jest.Mock;
|
Object.assign(navigator, {
|
||||||
let setImageLinksMock: jest.Mock;
|
clipboard: {
|
||||||
|
writeText: jest.fn(),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("ImageGallery", () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
jest.clearAllMocks();
|
(ApiService.getUserImages as jest.Mock).mockResolvedValue({ images: mockImages, total: 3 });
|
||||||
setDialogOpenMock = jest.fn();
|
(ApiService.deleteImage as jest.Mock).mockResolvedValue(true);
|
||||||
setImageLinksMock = jest.fn();
|
(ApiService.uploadImage as jest.Mock).mockResolvedValue('mockImageUrl');
|
||||||
jest.spyOn(ApiService, "getImages").mockResolvedValue({ images: mockImages, total: 6 });
|
|
||||||
|
render(<ImageGallery />);
|
||||||
});
|
});
|
||||||
|
|
||||||
test("renders the dialog when open", async () => {
|
it("should render images correctly", async () => {
|
||||||
|
|
||||||
await act(async () => {
|
await act(async () => {
|
||||||
render(
|
await screen.findByText("Gallery");
|
||||||
<ImageDialog
|
|
||||||
galleryOpen={true}
|
|
||||||
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}
|
|
||||||
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}
|
|
||||||
setDialogOpen={setDialogOpenMock}
|
|
||||||
setImageLinks={setImageLinksMock}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
await act(async () => {
|
|
||||||
await waitFor(() => expect(screen.getAllByRole("img")).toHaveLength(mockImages.length));
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
expect(screen.getByAltText("Image image1.jpg")).toBeInTheDocument();
|
||||||
|
expect(screen.getByAltText("Image image2.jpg")).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should handle copy action", async () => {
|
||||||
|
const handleCopyMock = jest.fn();
|
||||||
|
|
||||||
// Click the copy button
|
render(<ImageGallery handleCopy={handleCopyMock} />);
|
||||||
fireEvent.click(screen.getByTestId("copy-button-1"));
|
|
||||||
// Check that "Copié!" appears
|
const copyButtons = await waitFor(() => screen.findAllByTestId(/gallery-tab-copy-/));
|
||||||
expect(screen.getByText("Copié!")).toBeInTheDocument();
|
await act(async () => {
|
||||||
|
fireEvent.click(copyButtons[0]);
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(navigator.clipboard.writeText).toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
|
|
||||||
test("navigates to next and previous page", async () => {
|
|
||||||
await act(async () => {
|
|
||||||
render(
|
|
||||||
<ImageDialog
|
|
||||||
galleryOpen={true}
|
|
||||||
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));
|
|
||||||
});
|
|
||||||
|
|
||||||
test("deletes an image successfully", async () => {
|
|
||||||
jest.spyOn(ApiService, "deleteImage").mockResolvedValue(true);
|
|
||||||
|
|
||||||
await act(async () => {
|
|
||||||
render(
|
|
||||||
<ImageDialog
|
|
||||||
galleryOpen={true}
|
|
||||||
setDialogOpen={setDialogOpenMock}
|
|
||||||
setImageLinks={setImageLinksMock}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
await waitFor(() => expect(ApiService.getImages).toHaveBeenCalled());
|
|
||||||
|
|
||||||
fireEvent.click(screen.getByTestId("delete-button-1"));
|
|
||||||
|
|
||||||
await waitFor(() => expect(ApiService.deleteImage).toHaveBeenCalledWith("1"));
|
|
||||||
|
|
||||||
expect(screen.queryByTestId("delete-button-1")).not.toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
test("handles failed delete when image is linked", async () => {
|
|
||||||
jest.spyOn(ApiService, "deleteImage").mockResolvedValue(false);
|
|
||||||
|
|
||||||
await act(async () => {
|
|
||||||
render(
|
|
||||||
<ImageDialog
|
|
||||||
galleryOpen={true}
|
|
||||||
setDialogOpen={setDialogOpenMock}
|
|
||||||
setImageLinks={setImageLinksMock}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
await waitFor(() => expect(ApiService.getImages).toHaveBeenCalled());
|
|
||||||
|
|
||||||
fireEvent.click(screen.getByTestId("delete-button-1"));
|
|
||||||
|
|
||||||
await waitFor(() => expect(ApiService.deleteImage).toHaveBeenCalledWith("1"));
|
|
||||||
|
|
||||||
expect(screen.getByText("Confirmer la suppression")).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
@ -45,7 +45,7 @@ const ImageGallery: React.FC<ImagesProps> = ({ handleCopy }) => {
|
||||||
|
|
||||||
const fetchImages = async () => {
|
const fetchImages = async () => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
const data = await ApiService.getImages(imgPage, imgLimit);
|
const data = await ApiService.getUserImages(imgPage, imgLimit);
|
||||||
setImages(data.images);
|
setImages(data.images);
|
||||||
setTotalImg(data.total);
|
setTotalImg(data.total);
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
|
|
@ -156,7 +156,8 @@ const ImageGallery: React.FC<ImagesProps> = ({ handleCopy }) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
handleCopyFunction(obj.id);
|
handleCopyFunction(obj.id);
|
||||||
}}
|
}}
|
||||||
color="primary" >
|
color="primary"
|
||||||
|
data-testid={`gallery-tab-copy-${obj.id}`} >
|
||||||
|
|
||||||
<ContentCopyIcon sx={{ fontSize: 18 }} />
|
<ContentCopyIcon sx={{ fontSize: 18 }} />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
|
|
@ -167,7 +168,8 @@ const ImageGallery: React.FC<ImagesProps> = ({ handleCopy }) => {
|
||||||
setImageToDelete(obj);
|
setImageToDelete(obj);
|
||||||
setOpenDeleteDialog(true);
|
setOpenDeleteDialog(true);
|
||||||
}}
|
}}
|
||||||
color="error" >
|
color="error"
|
||||||
|
data-testid={`gallery-tab-delete-${obj.id}`} >
|
||||||
|
|
||||||
<DeleteIcon sx={{ fontSize: 18 }} />
|
<DeleteIcon sx={{ fontSize: 18 }} />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue