diff --git a/__tests__/Project.test.tsx b/__tests__/Project.test.tsx new file mode 100644 index 0000000..d8ba711 --- /dev/null +++ b/__tests__/Project.test.tsx @@ -0,0 +1,98 @@ +import { render, screen, fireEvent } from "@testing-library/react"; +import Project from "@/app/projects/[id]/page"; +import { useParams } from "next/navigation"; +import "@testing-library/jest-dom"; + +jest.mock("next/image", () => ({ + __esModule: true, + default: (props: any) => { + return ; + }, +})); +// Mocking the data.json import +jest.mock("../src/data.json", () => [ + { + id: "1", + projectName: "Project 1", + subImageUrl: "/path/to/image1.jpg", + description: "Description 1", + url: "http://example.com", + }, + { + id: "2", + projectName: "Project 2", + subImageUrl: "/path/to/image2.jpg", + description: "Description 2", + url: "http://example2.com", + }, +]); + +// Mocking useParams hook to simulate dynamic routing +jest.mock("next/navigation", () => ({ + useParams: jest.fn(), +})); + +describe("Project Page", () => { + beforeEach(() => { + // TypeScript needs the correct type for the return value, so specify `id` as a string. + (useParams as jest.Mock).mockReturnValue({ id: "1" }); // Simulating that the ID from the URL is 1 + }); + + it("renders the correct project based on the id from the URL", () => { + render(); + + const projectName = screen.getByText("Project 1"); + const projectDescription = screen.getByText("Description 1"); + expect(projectName).toBeInTheDocument(); + expect(projectDescription).toBeInTheDocument(); + + const image = screen.getByAltText("Project Thumbnail"); + expect(image).toHaveAttribute("src", "/path/to/image1.jpg"); + }); + + it("renders the similar projects section with the correct current project id", () => { + render(); + + // Test that the SimilarProjects component is rendered + const similarProject = screen.getByText("You may also like"); + expect(similarProject).toBeInTheDocument(); + + // Ensure SimilarProjects is rendered with the correct currentProjectId + const project1Card = screen.getByText("Project 1"); + expect(project1Card).toBeInTheDocument(); + }); + + it("renders the Visit button and links correctly", () => { + render(); + + // Target the Visit button for the screen size you're testing + const visitButton = screen.getAllByRole("button", { name: /visit/i }); + + expect(visitButton[1]).toBeInTheDocument(); + fireEvent.click(visitButton[1]); + + expect(visitButton[0]).toBeInTheDocument(); + fireEvent.click(visitButton[0]); + + // Ensure that the correct URL is opened. (You may want to adjust this to simulate a navigation or an external link click) + expect(visitButton[0].closest("a")).toHaveAttribute( + "href", + "http://example.com" + ); + }); + + it("displays the correct images for the project", () => { + render(); + + // Check that the project image and screenshots are rendered correctly + const projectImage = screen.getByAltText("Project Thumbnail"); + expect(projectImage).toHaveAttribute("src", "/path/to/image1.jpg"); + + const screenshotImages = screen.getAllByAltText("Screenshot"); + expect(screenshotImages).toHaveLength(2); // We have two screenshot images in the mock project + expect(screenshotImages[0]).toHaveAttribute( + "src", + "/images/screenshot1.png" + ); + }); +}); diff --git a/__tests__/SimilarProjects.test.tsx b/__tests__/SimilarProjects.test.tsx index eca05a3..6545b98 100644 --- a/__tests__/SimilarProjects.test.tsx +++ b/__tests__/SimilarProjects.test.tsx @@ -1,6 +1,5 @@ import { render, screen } from "@testing-library/react"; import SimilarProjects from "@/app/Component/SimilarProjects"; -import data from "../src/data.json"; import "@testing-library/jest-dom"; // Mock the data import