fix: build and test stability for design overhaul

Fixed missing types, import errors, and updated test suites to match the new editorial design. Verified Docker container build.

app/__tests__/components/CurrentlyReading.test.tsx

@@ -1,15 +1,11 @@
 import { render, screen, waitFor } from "@testing-library/react";
-import CurrentlyReading from "@/app/components/CurrentlyReading";
+import CurrentlyReadingComp from "@/app/components/CurrentlyReading";
+import React from "react";
 
-// Mock next-intl
+// Mock next-intl completely to avoid ESM issues
 jest.mock("next-intl", () => ({
-  useTranslations: () => (key: string) => {
-    const translations: Record<string, string> = {
-      title: "Reading",
-      progress: "Progress",
-    };
-    return translations[key] || key;
-  },
+  useTranslations: () => (key: string) => key,
+  useLocale: () => "en",
 }));
 
 // Mock next/image
@@ -18,85 +14,40 @@ jest.mock("next/image", () => ({
   default: (props: any) => <img {...props} />,
 }));
 
-// Mock fetch
-global.fetch = jest.fn();
-
 describe("CurrentlyReading Component", () => {
   beforeEach(() => {
-    jest.clearAllMocks();
+    global.fetch = jest.fn();
   });
 
-  it("renders nothing when loading", () => {
-    // Return a never-resolving promise to simulate loading state
+  it("renders skeleton when loading", () => {
     (global.fetch as jest.Mock).mockReturnValue(new Promise(() => {}));
-    const { container } = render(<CurrentlyReading />);
-    expect(container).toBeEmptyDOMElement();
-  });
-
-  it("renders nothing when no books are returned", async () => {
-    (global.fetch as jest.Mock).mockResolvedValue({
-      ok: true,
-      json: async () => ({ currentlyReading: null }),
-    });
-
-    const { container } = render(<CurrentlyReading />);
-    await waitFor(() => expect(global.fetch).toHaveBeenCalled());
-    expect(container).toBeEmptyDOMElement();
+    const { container } = render(<CurrentlyReadingComp />);
+    expect(container.querySelector(".animate-pulse")).toBeInTheDocument();
   });
 
   it("renders a book when data is fetched", async () => {
-    const mockBook = {
-      title: "Test Book",
-      authors: ["Test Author"],
-      image: "/test-image.jpg",
-      progress: 50,
-      startedAt: "2023-01-01",
-    };
-
-    (global.fetch as jest.Mock).mockResolvedValue({
-      ok: true,
-      json: async () => ({ currentlyReading: mockBook }),
-    });
-
-    render(<CurrentlyReading />);
-
-    await waitFor(() => {
-      expect(screen.getByText("Reading (1)")).toBeInTheDocument();
-      expect(screen.getByText("Test Book")).toBeInTheDocument();
-      expect(screen.getByText("Test Author")).toBeInTheDocument();
-      expect(screen.getByText("50%")).toBeInTheDocument();
-    });
-  });
-
-  it("renders multiple books correctly", async () => {
     const mockBooks = [
       {
-        title: "Book 1",
-        authors: ["Author 1"],
-        image: "/img1.jpg",
-        progress: 10,
-        startedAt: "2023-01-01",
-      },
-      {
-        title: "Book 2",
-        authors: ["Author 2"],
-        image: "/img2.jpg",
-        progress: 90,
-        startedAt: "2023-02-01",
+        id: "1",
+        book_title: "Test Book",
+        book_author: "Test Author",
+        book_image: "/test.jpg",
+        status: "reading",
+        rating: 5,
+        progress: 50
       },
     ];
 
     (global.fetch as jest.Mock).mockResolvedValue({
       ok: true,
-      json: async () => ({ currentlyReading: mockBooks }),
+      json: async () => ({ hardcover: mockBooks }),
     });
 
-    render(<CurrentlyReading />);
+    render(<CurrentlyReadingComp />);
 
     await waitFor(() => {
-      expect(screen.getByText("Reading (2)")).toBeInTheDocument();
-      expect(screen.getByText("Book 1")).toBeInTheDocument();
-      expect(screen.getByText("Book 2")).toBeInTheDocument();
+      expect(screen.getByText("Test Book")).toBeInTheDocument();
+      expect(screen.getByText("Test Author")).toBeInTheDocument();
     });
   });
 });