nextjs-hackathon-stack 0.1.10 → 0.1.12

package/template/src/features/chat/__tests__/chat-ui.test.tsx

@@ -3,29 +3,119 @@ import { describe, it, expect, vi } from "vitest";
 
 import { ChatUi } from "../components/chat-ui";
 
+const mockUseChat = vi.fn(() => ({
+  messages: [] as { id: string; role: string; content: string }[],
+  input: "",
+  handleInputChange: vi.fn(),
+  handleSubmit: vi.fn(),
+  status: "idle",
+}));
+
 vi.mock("@ai-sdk/react", () => ({
-  useChat: vi.fn(() => ({
-    messages: [],
-    input: "",
-    handleInputChange: vi.fn(),
-    handleSubmit: vi.fn(),
-    isLoading: false,
-  })),
+  useChat: (...args: unknown[]) => mockUseChat(...args),
 }));
 
 describe("ChatUi", () => {
   it("renders chat input", () => {
+    // Arrange + Act
     render(<ChatUi />);
+
+    // Assert
     expect(screen.getByTestId("chat-input")).toBeInTheDocument();
   });
 
   it("renders send button", () => {
+    // Arrange + Act
     render(<ChatUi />);
+
+    // Assert
     expect(screen.getByRole("button", { name: /send/i })).toBeInTheDocument();
   });
 
   it("renders messages list area", () => {
+    // Arrange + Act
     render(<ChatUi />);
+
+    // Assert
     expect(screen.getByTestId("chat-ui")).toBeInTheDocument();
   });
+
+  it("renders user and assistant messages", () => {
+    // Arrange
+    mockUseChat.mockReturnValueOnce({
+      messages: [
+        { id: "1", role: "user", content: "Hello" },
+        { id: "2", role: "assistant", content: "Hi there!" },
+      ],
+      input: "",
+      handleInputChange: vi.fn(),
+      handleSubmit: vi.fn(),
+      status: "idle",
+    });
+
+    // Act
+    render(<ChatUi />);
+
+    // Assert
+    expect(screen.getByText("Hello")).toBeInTheDocument();
+    expect(screen.getByText("Hi there!")).toBeInTheDocument();
+  });
+
+  it("shows loading indicator when status is streaming", () => {
+    // Arrange
+    mockUseChat.mockReturnValueOnce({
+      messages: [],
+      input: "",
+      handleInputChange: vi.fn(),
+      handleSubmit: vi.fn(),
+      status: "streaming",
+    });
+
+    // Act
+    render(<ChatUi />);
+
+    // Assert
+    expect(screen.getByText(/thinking/i)).toBeInTheDocument();
+  });
+
+  it("shows loading indicator when status is submitted", () => {
+    // Arrange
+    mockUseChat.mockReturnValueOnce({
+      messages: [],
+      input: "",
+      handleInputChange: vi.fn(),
+      handleSubmit: vi.fn(),
+      status: "submitted",
+    });
+
+    // Act
+    render(<ChatUi />);
+
+    // Assert
+    expect(screen.getByText(/thinking/i)).toBeInTheDocument();
+  });
+
+  it("strips <think> tags from message content", () => {
+    // Arrange
+    mockUseChat.mockReturnValueOnce({
+      messages: [
+        {
+          id: "1",
+          role: "assistant",
+          content: "<think>internal reasoning</think>Visible answer",
+        },
+      ],
+      input: "",
+      handleInputChange: vi.fn(),
+      handleSubmit: vi.fn(),
+      status: "idle",
+    });
+
+    // Act
+    render(<ChatUi />);
+
+    // Assert
+    expect(screen.getByText("Visible answer")).toBeInTheDocument();
+    expect(screen.queryByText(/internal reasoning/)).not.toBeInTheDocument();
+  });
 });

package/template/src/features/chat/__tests__/route.test.ts

@@ -1,8 +1,13 @@
 import { describe, it, expect, vi } from "vitest";
 
+let capturedGetErrorMessage: ((error: unknown) => string) | undefined;
+
 vi.mock("ai", () => ({
   streamText: vi.fn(() => ({
-    toDataStreamResponse: vi.fn(() => new Response("data: done\n\n")),
+    toDataStreamResponse: vi.fn((opts?: { getErrorMessage?: (e: unknown) => string }) => {
+      capturedGetErrorMessage = opts?.getErrorMessage;
+      return new Response("data: done\n\n");
+    }),
   })),
 }));
 
@@ -11,9 +16,67 @@ vi.mock("@/shared/lib/ai", () => ({
 }));
 
 describe("chat route", () => {
-  it("module is importable", async () => {
-    const mod = await import("../api/route");
+  it("exports runtime as edge and POST handler", async () => {
+    // Arrange + Act
+    const mod = await import("../../../app/api/chat/route");
+
+    // Assert
     expect(mod.runtime).toBe("edge");
     expect(typeof mod.POST).toBe("function");
   });
+
+  it("calls streamText and returns a response", async () => {
+    // Arrange
+    const mod = await import("../../../app/api/chat/route");
+    const req = new Request("http://localhost/api/chat", {
+      method: "POST",
+      body: JSON.stringify({ messages: [{ role: "user", content: "hello" }] }),
+    });
+
+    // Act
+    const response = await mod.POST(req);
+
+    // Assert
+    expect(response).toBeInstanceOf(Response);
+  });
+
+  it("getErrorMessage returns error.message for Error instances", async () => {
+    // Arrange
+    const mod = await import("../../../app/api/chat/route");
+    const req = new Request("http://localhost/api/chat", {
+      method: "POST",
+      body: JSON.stringify({ messages: [] }),
+    });
+    await mod.POST(req);
+
+    // Act + Assert
+    expect(capturedGetErrorMessage).toBeDefined();
+    expect(capturedGetErrorMessage!(new Error("boom"))).toBe("boom");
+  });
+
+  it("getErrorMessage returns JSON for plain objects", async () => {
+    // Arrange
+    const mod = await import("../../../app/api/chat/route");
+    const req = new Request("http://localhost/api/chat", {
+      method: "POST",
+      body: JSON.stringify({ messages: [] }),
+    });
+    await mod.POST(req);
+
+    // Act + Assert
+    expect(capturedGetErrorMessage!({ code: 42 })).toBe('{"code":42}');
+  });
+
+  it("getErrorMessage returns String() for primitives", async () => {
+    // Arrange
+    const mod = await import("../../../app/api/chat/route");
+    const req = new Request("http://localhost/api/chat", {
+      method: "POST",
+      body: JSON.stringify({ messages: [] }),
+    });
+    await mod.POST(req);
+
+    // Act + Assert
+    expect(capturedGetErrorMessage!("plain string")).toBe("plain string");
+  });
 });

package/template/src/features/chat/__tests__/use-chat.test.ts

@@ -0,0 +1,15 @@
+import { describe, it, expect, vi } from "vitest";
+
+vi.mock("@ai-sdk/react", () => ({
+  useChat: vi.fn(() => ({ messages: [], input: "" })),
+}));
+
+describe("use-chat re-export", () => {
+  it("re-exports useChat from @ai-sdk/react", async () => {
+    // Arrange + Act
+    const mod = await import("../hooks/use-chat");
+
+    // Assert
+    expect(typeof mod.useChat).toBe("function");
+  });
+});

package/template/src/features/chat/components/chat-ui.tsx

@@ -18,7 +18,7 @@ export function ChatUi() {
               message.role === "user" ? "bg-primary/10 ml-8" : "bg-muted mr-8"
             }`}
           >
-            <p className="text-sm">{message.content}</p>
+            <p className="text-sm">{message.content.replace(/<think>[\s\S]*?<\/think>\s*/g, "")}</p>
           </div>
         ))}
         {isLoading && (

package/template/src/features/tts/__tests__/route.test.ts

@@ -1,13 +1,88 @@
-import { describe, it, expect, vi } from "vitest";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+const mockSynthesizeSpeech = vi.fn();
 
 vi.mock("@/shared/lib/minimax-media", () => ({
-  synthesizeSpeech: vi.fn().mockResolvedValue("https://example.com/audio.mp3"),
+  synthesizeSpeech: (...args: unknown[]) => mockSynthesizeSpeech(...args),
 }));
 
 describe("tts route", () => {
-  it("module is importable", async () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("exports runtime as edge and POST handler", async () => {
+    // Arrange + Act
     const mod = await import("../api/route");
+
+    // Assert
     expect(mod.runtime).toBe("edge");
     expect(typeof mod.POST).toBe("function");
   });
+
+  it("returns 400 when text is missing", async () => {
+    // Arrange
+    const mod = await import("../api/route");
+    const req = new Request("http://localhost/api/tts", {
+      method: "POST",
+      body: JSON.stringify({}),
+    });
+
+    // Act
+    const response = await mod.POST(req);
+
+    // Assert
+    expect(response.status).toBe(400);
+    const body = await response.json() as { error: string };
+    expect(body.error).toBe("text is required");
+  });
+
+  it("returns 400 when text is not a string", async () => {
+    // Arrange
+    const mod = await import("../api/route");
+    const req = new Request("http://localhost/api/tts", {
+      method: "POST",
+      body: JSON.stringify({ text: 123 }),
+    });
+
+    // Act
+    const response = await mod.POST(req);
+
+    // Assert
+    expect(response.status).toBe(400);
+  });
+
+  it("returns audioFile on success", async () => {
+    // Arrange
+    mockSynthesizeSpeech.mockResolvedValue("base64audiodata");
+    const mod = await import("../api/route");
+    const req = new Request("http://localhost/api/tts", {
+      method: "POST",
+      body: JSON.stringify({ text: "Hello world" }),
+    });
+
+    // Act
+    const response = await mod.POST(req);
+
+    // Assert
+    expect(response.status).toBe(200);
+    const body = await response.json() as { audioFile: string };
+    expect(body.audioFile).toBe("base64audiodata");
+  });
+
+  it("passes voiceId to synthesizeSpeech when provided", async () => {
+    // Arrange
+    mockSynthesizeSpeech.mockResolvedValue("audio");
+    const mod = await import("../api/route");
+    const req = new Request("http://localhost/api/tts", {
+      method: "POST",
+      body: JSON.stringify({ text: "Hello", voiceId: "custom-voice" }),
+    });
+
+    // Act
+    await mod.POST(req);
+
+    // Assert
+    expect(mockSynthesizeSpeech).toHaveBeenCalledWith("Hello", "custom-voice");
+  });
 });

package/template/src/features/tts/__tests__/tts-player.test.tsx

@@ -1,21 +1,83 @@
-import { render, screen } from "@testing-library/react";
-import { describe, it, expect } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect, vi, beforeEach } from "vitest";
 
 import { TtsPlayer } from "../components/tts-player";
 
 describe("TtsPlayer", () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+
   it("renders text input", () => {
+    // Arrange + Act
     render(<TtsPlayer />);
+
+    // Assert
     expect(screen.getByPlaceholderText(/enter text to speak/i)).toBeInTheDocument();
   });
 
   it("renders speak button", () => {
+    // Arrange + Act
     render(<TtsPlayer />);
+
+    // Assert
     expect(screen.getByRole("button", { name: /speak/i })).toBeInTheDocument();
   });
 
-  it("button disabled when input empty", () => {
+  it("button is disabled when input is empty", () => {
+    // Arrange + Act
     render(<TtsPlayer />);
+
+    // Assert
     expect(screen.getByRole("button", { name: /speak/i })).toBeDisabled();
   });
+
+  it("button is enabled when text has content", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(<TtsPlayer />);
+
+    // Act
+    await user.type(screen.getByPlaceholderText(/enter text to speak/i), "Hello world");
+
+    // Assert
+    expect(screen.getByRole("button", { name: /speak/i })).not.toBeDisabled();
+  });
+
+  it("shows audio player after successful synthesis", async () => {
+    // Arrange
+    vi.spyOn(global, "fetch").mockResolvedValue(
+      new Response(JSON.stringify({ audioFile: "data:audio/mp3;base64,abc" }), { status: 200 })
+    );
+    const user = userEvent.setup();
+    render(<TtsPlayer />);
+
+    // Act
+    await user.type(screen.getByPlaceholderText(/enter text to speak/i), "Say something");
+    await user.click(screen.getByRole("button", { name: /speak/i }));
+
+    // Assert
+    await waitFor(() => {
+      expect(screen.getByTestId("tts-player").querySelector("audio")).toBeInTheDocument();
+    });
+  });
+
+  it("shows error message when synthesis fails", async () => {
+    // Arrange
+    vi.spyOn(global, "fetch").mockResolvedValue(
+      new Response(null, { status: 500 })
+    );
+    const user = userEvent.setup();
+    render(<TtsPlayer />);
+
+    // Act
+    await user.type(screen.getByPlaceholderText(/enter text to speak/i), "Say something");
+    await user.click(screen.getByRole("button", { name: /speak/i }));
+
+    // Assert
+    await waitFor(() => {
+      expect(screen.getByText(/failed to synthesize speech/i)).toBeInTheDocument();
+    });
+  });
 });

package/template/src/features/video/__tests__/route.test.ts

@@ -1,13 +1,88 @@
-import { describe, it, expect, vi } from "vitest";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+const mockGenerateVideo = vi.fn();
 
 vi.mock("@/shared/lib/minimax-media", () => ({
-  generateVideo: vi.fn().mockResolvedValue("task-abc"),
+  generateVideo: (...args: unknown[]) => mockGenerateVideo(...args),
 }));
 
 describe("video route", () => {
-  it("module is importable", async () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("exports runtime as edge and POST handler", async () => {
+    // Arrange + Act
     const mod = await import("../api/route");
+
+    // Assert
     expect(mod.runtime).toBe("edge");
     expect(typeof mod.POST).toBe("function");
   });
+
+  it("returns 400 when prompt is missing", async () => {
+    // Arrange
+    const mod = await import("../api/route");
+    const req = new Request("http://localhost/api/video", {
+      method: "POST",
+      body: JSON.stringify({}),
+    });
+
+    // Act
+    const response = await mod.POST(req);
+
+    // Assert
+    expect(response.status).toBe(400);
+    const body = await response.json() as { error: string };
+    expect(body.error).toBe("prompt is required");
+  });
+
+  it("returns 400 when prompt is not a string", async () => {
+    // Arrange
+    const mod = await import("../api/route");
+    const req = new Request("http://localhost/api/video", {
+      method: "POST",
+      body: JSON.stringify({ prompt: 42 }),
+    });
+
+    // Act
+    const response = await mod.POST(req);
+
+    // Assert
+    expect(response.status).toBe(400);
+  });
+
+  it("returns taskId on success", async () => {
+    // Arrange
+    mockGenerateVideo.mockResolvedValue("task-123");
+    const mod = await import("../api/route");
+    const req = new Request("http://localhost/api/video", {
+      method: "POST",
+      body: JSON.stringify({ prompt: "A sunset over the ocean" }),
+    });
+
+    // Act
+    const response = await mod.POST(req);
+
+    // Assert
+    expect(response.status).toBe(200);
+    const body = await response.json() as { taskId: string };
+    expect(body.taskId).toBe("task-123");
+  });
+
+  it("passes prompt to generateVideo", async () => {
+    // Arrange
+    mockGenerateVideo.mockResolvedValue("task-abc");
+    const mod = await import("../api/route");
+    const req = new Request("http://localhost/api/video", {
+      method: "POST",
+      body: JSON.stringify({ prompt: "Dancing robots" }),
+    });
+
+    // Act
+    await mod.POST(req);
+
+    // Assert
+    expect(mockGenerateVideo).toHaveBeenCalledWith("Dancing robots");
+  });
 });

package/template/src/features/video/__tests__/video-generator.test.tsx

@@ -1,21 +1,83 @@
-import { render, screen } from "@testing-library/react";
-import { describe, it, expect } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect, vi, beforeEach } from "vitest";
 
 import { VideoGenerator } from "../components/video-generator";
 
 describe("VideoGenerator", () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+
   it("renders prompt input", () => {
+    // Arrange + Act
     render(<VideoGenerator />);
+
+    // Assert
     expect(screen.getByPlaceholderText(/describe a video/i)).toBeInTheDocument();
   });
 
   it("renders generate button", () => {
+    // Arrange + Act
     render(<VideoGenerator />);
+
+    // Assert
     expect(screen.getByRole("button", { name: /generate/i })).toBeInTheDocument();
   });
 
-  it("button disabled when input empty", () => {
+  it("button is disabled when input is empty", () => {
+    // Arrange + Act
     render(<VideoGenerator />);
+
+    // Assert
     expect(screen.getByRole("button", { name: /generate/i })).toBeDisabled();
   });
+
+  it("button is enabled when prompt has content", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(<VideoGenerator />);
+
+    // Act
+    await user.type(screen.getByPlaceholderText(/describe a video/i), "A sunset");
+
+    // Assert
+    expect(screen.getByRole("button", { name: /generate/i })).not.toBeDisabled();
+  });
+
+  it("shows task ID after successful generation", async () => {
+    // Arrange
+    vi.spyOn(global, "fetch").mockResolvedValue(
+      new Response(JSON.stringify({ taskId: "task-xyz" }), { status: 200 })
+    );
+    const user = userEvent.setup();
+    render(<VideoGenerator />);
+
+    // Act
+    await user.type(screen.getByPlaceholderText(/describe a video/i), "A dancing robot");
+    await user.click(screen.getByRole("button", { name: /generate/i }));
+
+    // Assert
+    await waitFor(() => {
+      expect(screen.getByText(/task id: task-xyz/i)).toBeInTheDocument();
+    });
+  });
+
+  it("shows error message when fetch fails", async () => {
+    // Arrange
+    vi.spyOn(global, "fetch").mockResolvedValue(
+      new Response(null, { status: 500 })
+    );
+    const user = userEvent.setup();
+    render(<VideoGenerator />);
+
+    // Act
+    await user.type(screen.getByPlaceholderText(/describe a video/i), "Something");
+    await user.click(screen.getByRole("button", { name: /generate/i }));
+
+    // Assert
+    await waitFor(() => {
+      expect(screen.getByText(/failed to generate video/i)).toBeInTheDocument();
+    });
+  });
 });

package/template/src/shared/__tests__/middleware.test.ts

@@ -0,0 +1,34 @@
+import { describe, it, expect, vi } from "vitest";
+import { NextRequest } from "next/server";
+
+const mockUpdateSession = vi.fn();
+
+vi.mock("@/shared/lib/supabase/middleware", () => ({
+  updateSession: (...args: unknown[]) => mockUpdateSession(...args),
+}));
+
+describe("middleware", () => {
+  it("delegates to updateSession", async () => {
+    // Arrange
+    const mockResponse = new Response(null, { status: 200 });
+    mockUpdateSession.mockResolvedValue(mockResponse);
+    const { middleware } = await import("../../middleware");
+    const req = new NextRequest("http://localhost/dashboard");
+
+    // Act
+    const response = await middleware(req);
+
+    // Assert
+    expect(mockUpdateSession).toHaveBeenCalledWith(req);
+    expect(response).toBe(mockResponse);
+  });
+
+  it("exports a matcher config", async () => {
+    // Arrange + Act
+    const { config } = await import("../../middleware");
+
+    // Assert
+    expect(config.matcher).toBeDefined();
+    expect(Array.isArray(config.matcher)).toBe(true);
+  });
+});

package/template/src/shared/__tests__/schema.test.ts

@@ -4,16 +4,29 @@ import { insertProfileSchema, selectProfileSchema } from "../db/schema";
 
 describe("profiles schema", () => {
   it("insertProfileSchema validates required fields", () => {
-    const result = insertProfileSchema.safeParse({ id: "uuid", email: "test@example.com" });
+    // Arrange + Act
+    const result = insertProfileSchema.safeParse({
+      id: "123e4567-e89b-12d3-a456-426614174000",
+      email: "test@example.com",
+    });
+
+    // Assert
     expect(result.success).toBe(true);
   });
 
-  it("insertProfileSchema rejects invalid email", () => {
-    const result = insertProfileSchema.safeParse({ id: "uuid", email: "not-email" });
+  it("insertProfileSchema rejects invalid uuid", () => {
+    // Arrange + Act
+    const result = insertProfileSchema.safeParse({
+      id: "not-a-uuid",
+      email: "test@example.com",
+    });
+
+    // Assert
     expect(result.success).toBe(false);
   });
 
   it("selectProfileSchema is defined", () => {
+    // Arrange + Act + Assert
     expect(selectProfileSchema).toBeDefined();
   });
 });