Testing for card component

.github/workflows/frontend-test.yml

@@ -0,0 +1,29 @@
+name: Test and Build
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  test:
+    name: Run Tests
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "18" # Specify your project's Node.js version
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run tests
+        run: npm test

.github/workflows/nextjs.yml

@@ -1,9 +1,10 @@
 name: Deploy to Docker Hub
 
 on:
-  push:
-    branches:
-      - master
+  workflow_run:
+    workflows: ["Run Tests"] # This ensures this workflow runs after the test workflow
+    types:
+      - completed
 
 jobs:
   build:

__tests__/Card.test.tsx

@@ -0,0 +1,101 @@
+import "@testing-library/jest-dom";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { Card } from "@/app/Component/Card";
+
+jest.mock("next/image", () => ({
+  __esModule: true,
+  default: (props: any) => {
+    return <img {...props} />;
+  },
+}));
+describe("Card Component", () => {
+  const mockProps = {
+    id: "1",
+    projectName: "Test Project",
+    imageUrl: "/test-image.jpg",
+    subImageUrl: "/test-logo.jpg",
+    url: "/test-project",
+    description: "This is a test project description.",
+  };
+
+  test("renders the Card component without crashing", () => {
+    render(<Card {...mockProps} />);
+    expect(screen.getByTestId("cardElement")).toBeInTheDocument();
+  });
+
+  test("displays project name", () => {
+    render(
+      <Card
+        id="1"
+        projectName="Test Project"
+        imageUrl="/path/to/image.jpg"
+        subImageUrl="/path/to/logo.jpg"
+        url="/projects/1"
+        description="This is a test project."
+      />
+    );
+    expect(screen.getByText("Test Project")).toBeInTheDocument();
+  });
+  test("renders main image correctly", () => {
+    render(
+      <Card
+        id="1"
+        projectName="Test Project"
+        imageUrl="/path/to/image.jpg"
+        subImageUrl="/path/to/logo.jpg"
+        url="/projects/1"
+        description="This is a test project."
+      />
+    );
+    const mainImage = screen.getByAltText("Test Project thumbnail");
+    expect(mainImage).toHaveAttribute("src");
+    expect(mainImage.getAttribute("src")).toContain("/path/to/image.jpg");
+  });
+
+  test("renders sub-image correctly", () => {
+    render(
+      <Card
+        id="1"
+        projectName="Test Project"
+        imageUrl="image"
+        subImageUrl="/path/to/logo.jpg"
+        url="/projects/1"
+        description="This is a test project."
+      />
+    );
+
+    const subImage = screen.getByAltText("Test Project logo");
+    expect(subImage).toHaveAttribute("src");
+    expect(subImage.getAttribute("src")).toContain("/path/to/logo.jpg");
+  });
+
+  test("navigates to correct link", () => {
+    render(
+      <Card
+        id="1"
+        projectName="Test Project"
+        imageUrl="/path/to/image.jpg"
+        subImageUrl="/path/to/logo.jpg"
+        url="/projects/1"
+        description="This is a test project."
+      />
+    );
+    const link = screen.getByRole("link");
+    expect(link).toHaveAttribute("href", "/projects/1");
+  });
+  test("applies hover styles", () => {
+    render(
+      <Card
+        id="1"
+        projectName="Test Project"
+        imageUrl="/path/to/image.jpg"
+        subImageUrl="/path/to/logo.jpg"
+        url="/projects/1"
+        description="This is a test project."
+      />
+    );
+    const card = screen.getByTestId("cardElement");
+    fireEvent.mouseOver(card);
+    expect(card).toHaveClass("hover:text-[#1A80E5]");
+  });
+});

jest.setup.ts

@@ -1 +1 @@
-import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/jest-dom";