Add testing setup and Playwright smoke test

Author: cantpr09ram

e2e/smoke.spec.ts

@@ -0,0 +1,11 @@
+import { expect, test } from "@playwright/test";
+
+test("loads the scheduler", async ({ page }) => {
+  await page.goto("/");
+
+  await expect(
+    page.getByRole("heading", { name: "AZQUERYSUCKS" }),
+  ).toBeVisible();
+
+  await expect(page.getByRole("button", { name: "加入課程" })).toBeVisible();
+});

playwright.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./e2e",
+  fullyParallel: true,
+  use: {
+    baseURL: "http://localhost:4173/AZQUERYSUCKS/",
+    trace: "on-first-retry",
+  },
+  webServer: {
+    command:
+      "pnpm build && pnpm start -- --host 0.0.0.0 --port 4173 --strictPort",
+    url: "http://localhost:4173/AZQUERYSUCKS/",
+    timeout: 180000,
+    reuseExistingServer: !process.env.CI,
+  },
+});

src/components/__tests__/course-info-table.test.tsx

@@ -0,0 +1,66 @@
+/// <reference types="@testing-library/jest-dom" />
+
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import { CourseInfoTable } from "@/components/course-info-table";
+import type { ScheduledCourse } from "@/types/course";
+
+const courses: ScheduledCourse[] = [
+  {
+    source: "test",
+    dept_block: "AA.資訊工程",
+    grade: "1",
+    seq: "001",
+    code: "CS101",
+    major: null,
+    term_order: "1",
+    class: "A",
+    group_div: null,
+    required: "必",
+    credits: 3,
+    group: "1",
+    title: "Introduction to CS",
+    cap: 30,
+    teacher: "Ada",
+    times: ["一(1-2)"],
+    english_taught: false,
+  },
+  {
+    source: "test",
+    dept_block: "BB.數學系",
+    grade: "2",
+    seq: "002",
+    code: "MATH201",
+    major: null,
+    term_order: "1",
+    class: "B",
+    group_div: null,
+    required: "選",
+    credits: 2,
+    group: "1",
+    title: "高等數學",
+    cap: 40,
+    teacher: "Euler",
+    times: ["二(3-4)"],
+    english_taught: false,
+  },
+];
+
+describe("CourseInfoTable", () => {
+  it("filters by search term", async () => {
+    const user = userEvent.setup();
+    render(<CourseInfoTable courses={courses} />);
+
+    expect(screen.getByText("Introduction to CS")).toBeInTheDocument();
+
+    await user.type(
+      screen.getByPlaceholderText("課名、教師、地點、代號.."),
+      "數學",
+    );
+
+    await waitFor(() => {
+      expect(screen.queryByText("Introduction to CS")).not.toBeInTheDocument();
+    });
+  });
+});

src/test/setup.ts

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

vitest.config.ts

@@ -3,8 +3,9 @@ import { defineConfig } from "vitest/config";
 
 export default defineConfig({
   test: {
-    environment: "node",
-    include: ["src/**/*.test.ts"],
+    environment: "jsdom",
+    include: ["src/**/*.test.{ts,tsx}"],
+    setupFiles: ["src/test/setup.ts"],
     coverage: {
       provider: "v8",
       reporter: ["text", "lcov"],