fix: favorites page, add tests

Author: Simplereally

app/_server/actions/favorites.test.ts

@@ -0,0 +1,73 @@
+/**
+ * @vitest-environment node
+ *
+ * Tests for favorites server actions
+ * 
+ * Regression test: Ensures getConvexClerkToken is called OUTSIDE unstable_cache
+ * to avoid "headers() inside cache scope" runtime error.
+ * See: https://nextjs.org/docs/app/api-reference/functions/unstable_cache
+ */
+import { beforeEach, describe, expect, it, vi } from "vitest"
+
+// Mock the cache function
+const mockGetFavoritesPageCached = vi.fn()
+
+vi.mock("@/app/_server/cache/favorites", () => ({
+    getFavoritesPageCached: (...args: unknown[]) => mockGetFavoritesPageCached(...args),
+}))
+
+// Mock the auth helper
+const mockRequireUserId = vi.fn()
+
+vi.mock("../convex/client", () => ({
+    requireUserId: () => mockRequireUserId(),
+}))
+
+// Import after mocks
+import { loadFavoritesPage } from "./favorites"
+
+describe("favorites server actions", () => {
+    const mockPaginatedResult = {
+        page: [
+            { _id: "img1", url: "https://example.com/1.jpg" },
+            { _id: "img2", url: "https://example.com/2.jpg" },
+        ],
+        continueCursor: "cursor123",
+        isDone: false,
+    }
+
+    beforeEach(() => {
+        vi.clearAllMocks()
+        mockRequireUserId.mockResolvedValue("user_123")
+        mockGetFavoritesPageCached.mockResolvedValue(mockPaginatedResult)
+    })
+
+    describe("loadFavoritesPage", () => {
+        it("calls getFavoritesPageCached with userId and cursor", async () => {
+            const result = await loadFavoritesPage({ cursor: "abc123" })
+
+            expect(mockRequireUserId).toHaveBeenCalled()
+            expect(mockGetFavoritesPageCached).toHaveBeenCalledWith("user_123", "abc123", undefined)
+            expect(result).toEqual(mockPaginatedResult)
+        })
+
+        it("calls getFavoritesPageCached with null cursor for first page", async () => {
+            await loadFavoritesPage({ cursor: null })
+
+            expect(mockGetFavoritesPageCached).toHaveBeenCalledWith("user_123", null, undefined)
+        })
+
+        it("passes numItems when provided", async () => {
+            await loadFavoritesPage({ cursor: null, numItems: 50 })
+
+            expect(mockGetFavoritesPageCached).toHaveBeenCalledWith("user_123", null, 50)
+        })
+
+        it("throws error when user is not authenticated", async () => {
+            mockRequireUserId.mockRejectedValue(new Error("Authentication required"))
+
+            await expect(loadFavoritesPage({ cursor: null })).rejects.toThrow("Authentication required")
+            expect(mockGetFavoritesPageCached).not.toHaveBeenCalled()
+        })
+    })
+})

app/_server/actions/feed.test.ts

@@ -59,6 +59,24 @@ describe("feed server actions", () => {
 
             expect(mockGetPublicFeedPageCached).toHaveBeenCalledWith(null, 50, "blur")
         })
+
+        it("passes filterPreference 'block' when provided", async () => {
+            await loadPublicFeedPage({ cursor: null, filterPreference: "block" })
+
+            expect(mockGetPublicFeedPageCached).toHaveBeenCalledWith(null, undefined, "block")
+        })
+
+        it("passes filterPreference 'allow' when provided", async () => {
+            await loadPublicFeedPage({ cursor: null, filterPreference: "allow" })
+
+            expect(mockGetPublicFeedPageCached).toHaveBeenCalledWith(null, undefined, "allow")
+        })
+
+        it("passes all parameters together correctly", async () => {
+            await loadPublicFeedPage({ cursor: "cursor_xyz", numItems: 25, filterPreference: "block" })
+
+            expect(mockGetPublicFeedPageCached).toHaveBeenCalledWith("cursor_xyz", 25, "block")
+        })
     })
 
     describe("loadFollowingFeedPage", () => {

app/_server/cache/config.test.ts

@@ -0,0 +1,43 @@
+
+import { describe, expect, it, vi } from "vitest"
+
+// Mock server-only
+vi.mock("server-only", () => ({}))
+
+import { CACHE_TAGS, CACHE_TTL, PAGE_SIZES } from "./config"
+
+describe("cache config", () => {
+    describe("CACHE_TTL", () => {
+        it("defines TTLs for feed pages", () => {
+            expect(CACHE_TTL.FEED_PUBLIC_FIRST_PAGE).toBe(60)
+            expect(CACHE_TTL.FEED_PUBLIC_LATER_PAGES).toBe(21600) // 6 hours
+        })
+
+        it("defines TTLs for history pages", () => {
+            expect(CACHE_TTL.HISTORY_FIRST_PAGE).toBe(30)
+            expect(CACHE_TTL.HISTORY_LATER_PAGES).toBe(43200) // 12 hours
+        })
+    })
+
+    describe("CACHE_TAGS", () => {
+        it("defines static tags", () => {
+            expect(CACHE_TAGS.FEED_PUBLIC).toBe("feed:public")
+        })
+
+        it("generates correct user tags", () => {
+            expect(CACHE_TAGS.HISTORY_USER("123")).toBe("history:user:123")
+            expect(CACHE_TAGS.FAVORITES_USER("123")).toBe("favorites:user:123")
+            expect(CACHE_TAGS.FEED_FOLLOWING_USER("123")).toBe("feed:following:123")
+        })
+    })
+
+    describe("PAGE_SIZES", () => {
+        it("defines consistent page sizes", () => {
+            expect(PAGE_SIZES.DEFAULT).toBe(20)
+            expect(PAGE_SIZES.STUDIO_GALLERY).toBe(20)
+            expect(PAGE_SIZES.HISTORY).toBe(20)
+            expect(PAGE_SIZES.FAVORITES).toBe(20)
+            expect(PAGE_SIZES.FEED).toBe(20)
+        })
+    })
+})

app/_server/cache/favorites.test.ts

@@ -0,0 +1,130 @@
+/**
+ * @vitest-environment node
+ *
+ * Tests for favorites cache functions
+ * 
+ * REGRESSION TEST: This test suite specifically validates that getConvexClerkToken
+ * is called OUTSIDE the unstable_cache callback to prevent the runtime error:
+ * "Route used headers() inside a function cached with unstable_cache()"
+ * 
+ * Root cause: Clerk's auth() uses headers() which is dynamic data.
+ * Dynamic data cannot be accessed inside unstable_cache scope.
+ * 
+ * Fix: Call getConvexClerkToken() BEFORE unstable_cache() and capture token in closure.
+ */
+import { beforeEach, describe, expect, it, vi } from "vitest"
+
+// Mock server-only to allow testing
+vi.mock("server-only", () => ({}))
+
+// Track when getConvexClerkToken and unstable_cache are called
+const callOrder: string[] = []
+
+// Mock getConvexClerkToken to track call order
+const mockGetConvexClerkToken = vi.fn().mockImplementation(async () => {
+    callOrder.push("getConvexClerkToken")
+    return "mock-token"
+})
+
+vi.mock("../convex/client", () => ({
+    getConvexClerkToken: () => mockGetConvexClerkToken(),
+}))
+
+// Mock fetchQuery
+const mockFetchQuery = vi.fn().mockResolvedValue({
+    page: [],
+    continueCursor: null,
+    isDone: true,
+})
+
+vi.mock("convex/nextjs", () => ({
+    fetchQuery: (...args: unknown[]) => mockFetchQuery(...args),
+}))
+
+// Mock unstable_cache to track when its callback is executed
+vi.mock("next/cache", () => ({
+    unstable_cache: (fn: () => Promise<unknown>, _keys: string[], _opts: unknown) => {
+        // Return a function that, when called, executes the cached function
+        return async () => {
+            callOrder.push("unstable_cache_callback_start")
+            const result = await fn()
+            callOrder.push("unstable_cache_callback_end")
+            return result
+        }
+    },
+}))
+
+// Mock API
+vi.mock("@/convex/_generated/api", () => ({
+    api: {
+        favorites: {
+            list: "favorites:list",
+        },
+    },
+}))
+
+// Mock config
+vi.mock("./config", () => ({
+    CACHE_TTL: {
+        FAVORITES_FIRST_PAGE: 30,
+        FAVORITES_LATER_PAGES: 120,
+    },
+    CACHE_TAGS: {
+        FAVORITES_USER: (userId: string) => `favorites:${userId}`,
+    },
+    PAGE_SIZES: {
+        FAVORITES: 20,
+    },
+}))
+
+// Import after mocks
+import { getFavoritesPageCached } from "./favorites"
+
+describe("favorites cache", () => {
+    beforeEach(() => {
+        vi.clearAllMocks()
+        callOrder.length = 0 // Clear array
+    })
+
+    describe("getFavoritesPageCached", () => {
+        it("calls getConvexClerkToken BEFORE unstable_cache callback", async () => {
+            await getFavoritesPageCached("user_123", null, 20)
+
+            // This is the critical assertion for the regression fix.
+            // getConvexClerkToken MUST be called BEFORE the unstable_cache callback starts.
+            // Otherwise, we get: "Route used headers() inside unstable_cache()"
+            const tokenCallIndex = callOrder.indexOf("getConvexClerkToken")
+            const cacheCallbackIndex = callOrder.indexOf("unstable_cache_callback_start")
+
+            expect(tokenCallIndex).toBeGreaterThan(-1)
+            expect(cacheCallbackIndex).toBeGreaterThan(-1)
+            expect(tokenCallIndex).toBeLessThan(cacheCallbackIndex)
+        })
+
+        it("passes token to fetchQuery inside cache callback", async () => {
+            await getFavoritesPageCached("user_123", null, 20)
+
+            expect(mockFetchQuery).toHaveBeenCalledWith(
+                "favorites:list",
+                { paginationOpts: { numItems: 20, cursor: null } },
+                { token: "mock-token" }
+            )
+        })
+
+        it("uses correct cache configuration for first page", async () => {
+            await getFavoritesPageCached("user_123", null, 20)
+
+            expect(mockFetchQuery).toHaveBeenCalled()
+        })
+
+        it("uses correct cache configuration for later pages", async () => {
+            await getFavoritesPageCached("user_123", "cursor_abc", 20)
+
+            expect(mockFetchQuery).toHaveBeenCalledWith(
+                "favorites:list",
+                { paginationOpts: { numItems: 20, cursor: "cursor_abc" } },
+                { token: "mock-token" }
+            )
+        })
+    })
+})

app/_server/cache/favorites.ts

@@ -10,17 +10,20 @@ type Cursor = string | null
 /**
  * Cached user favorites page query.
  * Cache is per-user, keyed by userId.
+ * 
+ * Note: Token is captured in closure but NOT part of cache key.
+ * userId provides stable cache key isolation.
  */
 export async function getFavoritesPageCached(
     userId: string,
     cursor: Cursor,
     numItems: number = PAGE_SIZES.FAVORITES
 ) {
+    const token = await getConvexClerkToken()
     const isFirstPage = cursor === null
 
     return unstable_cache(
         async () => {
-            const token = await getConvexClerkToken()
             return fetchQuery(
                 api.favorites.list,
                 { paginationOpts: { numItems, cursor } },