Merge pull request #29 from Eric-Zhang-Developer/test/basic-unit-and-integration-tests

Test/basic unit and integration tests

Author: Eric-Zhang-Developer

package-lock.json

@@ -6,7 +6,9 @@
     "dev": "next dev --turbopack",
     "build": "next build --turbopack",
     "start": "next start",
-    "lint": "eslint"
+    "lint": "eslint",
+    "test": "vitest",
+    "test:watch": "vitest --watch"
   },
   "dependencies": {
     "@supabase/ssr": "^0.7.0",
@@ -21,12 +23,19 @@
   "devDependencies": {
     "@eslint/eslintrc": "^3",
     "@tailwindcss/postcss": "^4.1.14",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^5.1.0",
+    "@vitest/coverage-v8": "^4.0.4",
     "eslint": "^9",
     "eslint-config-next": "15.5.3",
+    "jsdom": "^27.0.1",
     "tailwindcss": "^4.1.14",
-    "typescript": "^5"
+    "typescript": "^5",
+    "vitest": "^4.0.4"
   }
 }

package.json

@@ -1,5 +1,7 @@
+import tailwindcssPostcss from "@tailwindcss/postcss";
+
 const config = {
-  plugins: ["@tailwindcss/postcss"],
+  plugins: [tailwindcssPostcss()],
 };
 
 export default config;

postcss.config.mjs

@@ -0,0 +1,29 @@
+import { vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import LandingPage from "../page";
+
+//mock next/font/google to fix "SyntaxError: [vite] The requested module '/node_modules/next/font/google/index.js' does not provide an export named 'Cinzel'"
+vi.mock("next/font/google", () => ({
+  Cinzel: () => ({
+    className: "mock-cinzel-font",
+    style: {},
+  }),
+}));
+
+describe("Landing Page Tests", () => {
+  it("should render the welcome heading on load", () => {
+    render(<LandingPage />);
+    expect(screen.getByText(/Welcome to/i)).toBeInTheDocument();
+  });
+
+  it("should render the Code Quest logo on load", () => {
+    render(<LandingPage />);
+    expect(screen.getByAltText("CodeQuest Logo")).toBeInTheDocument();
+  });
+
+  it("should render the start journey button on load", () => {
+    render(<LandingPage />);
+    expect(screen.getByRole("link", { name: /Start Your Journey/i })).toBeInTheDocument();
+  });
+});

src/app/__tests__/page.test.tsx

@@ -0,0 +1,62 @@
+import { vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, beforeEach } from "vitest";
+import DashboardPage from "../page";
+
+// Mock next/navigation to prevent redirect calls
+vi.mock("next/navigation", () => ({
+  redirect: vi.fn(),
+}));
+
+// Mock Supabase server client to return a fake authenticated user
+vi.mock("../../../lib/supabase/server", () => ({
+  createClient: vi.fn(async () => ({
+    auth: {
+      getUser: vi.fn(async () => ({
+        data: {
+          user: {
+            email: "[email protected]",
+            id: "test-user-id",
+          },
+        },
+      })),
+      signOut: vi.fn(),
+    },
+  })),
+}));
+
+describe("Dashboard Page Tests", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should render the dashboard heading", async () => {
+    const page = await DashboardPage();
+    render(page);
+    expect(screen.getByText("Dashboard")).toBeInTheDocument();
+  });
+
+  it("should display the user email", async () => {
+    const page = await DashboardPage();
+    render(page);
+    expect(screen.getByText("[email protected]")).toBeInTheDocument();
+  });
+
+  it("should render the home link", async () => {
+    const page = await DashboardPage();
+    render(page);
+    expect(screen.getByRole("link", { name: /Go home/i })).toBeInTheDocument();
+  });
+
+  it("should render the logout button", async () => {
+    const page = await DashboardPage();
+    render(page);
+    expect(screen.getByRole("button", { name: /Log out/i })).toBeInTheDocument();
+  });
+
+  it("should render the tutorial link", async () => {
+    const page = await DashboardPage();
+    render(page);
+    expect(screen.getByRole("link", { name: /Hello World Tutorial/i })).toBeInTheDocument();
+  });
+});

src/app/dashboard/__tests__/page.test.tsx

@@ -2,7 +2,6 @@
 
 import Link from "next/link";
 import Image from "next/image";
-import "./globals.css";
 import { Cinzel } from "next/font/google";
 
 //font for words
@@ -19,7 +18,6 @@ export default function LandingPage() {
                  bg-[url('/gemininight3.png')] bg-cover bg-center bg-no-repeat text-white overflow-hidden
                  "
     >
-
       {/*welcome text*/}
       <div className="relative z-10 max-w-xl text-center">
         <h1
@@ -42,7 +40,7 @@ export default function LandingPage() {
                 drop-shadow(0 0 10px #a5f3fc)
                 drop-shadow(0 0 20px #93c5fd)
                 drop-shadow(0 0 30px #60a5fa)
-              `
+              `,
             }}
           />
         </div>

src/app/page.tsx

@@ -0,0 +1,39 @@
+import { vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import TutorialHelloWorld from "../page";
+
+// Mock the BackToDashBoardLink component
+vi.mock("@/components/back-to-dashboard-link", () => ({
+  default: () => <div data-testid="back-to-dashboard-link">Back to Dashboard</div>,
+}));
+
+// Mock react-youtube
+vi.mock("react-youtube", () => ({
+  default: ({ videoId }: { videoId: string }) => (
+    <div data-testid="youtube-player" data-videoid={videoId}>
+      YouTube Player
+    </div>
+  ),
+}));
+
+describe("Tutorial Hello World Page Tests", () => {
+  it("should render the main quest heading", () => {
+    render(<TutorialHelloWorld />);
+    expect(
+      screen.getByRole("heading", { name: /Quest: The Oracle's First Greeting/i })
+    ).toBeInTheDocument();
+  });
+
+  it("should render the back to dashboard link", () => {
+    render(<TutorialHelloWorld />);
+    expect(screen.getByTestId("back-to-dashboard-link")).toBeInTheDocument();
+  });
+
+  it("should render the YouTube video component", () => {
+    render(<TutorialHelloWorld />);
+    const youtubePlayer = screen.getByTestId("youtube-player");
+    expect(youtubePlayer).toBeInTheDocument();
+    expect(youtubePlayer).toHaveAttribute("data-videoid", "hp4pYFASTrc");
+  });
+});

src/app/tutorial-hello-world/__tests__/page.test.tsx

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

src/setupTests.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: "jsdom",
+    setupFiles: "./src/setupTests.ts",
+    css: true,
+  },
+  resolve: {
+    alias: {
+      "@": "/src",
+    },
+  },
+});