malpercio.dev / atbb
WIP! A BB-style forum, on the ATmosphere! We're still working... we'll be back soon when we have something to show off!
node typescript hono htmx atproto
fork atom

test: settings route GET and POST integration tests

malpercio.dev a20b4f77 9c07dc55

+417
+417
apps/web/src/routes/__tests__/settings.test.tsx
··· 1 + import { describe, it, expect, vi, beforeEach, afterEach } from "vitest"; 2 + 3 + const mockFetch = vi.fn(); 4 + 5 + describe("createSettingsRoutes — GET /settings and POST /settings/appearance", () => { 6 + beforeEach(() => { 7 + vi.stubGlobal("fetch", mockFetch); 8 + vi.stubEnv("APPVIEW_URL", "http://localhost:3000"); 9 + vi.resetModules(); 10 + }); 11 + 12 + afterEach(() => { 13 + vi.unstubAllGlobals(); 14 + vi.unstubAllEnvs(); 15 + mockFetch.mockReset(); 16 + }); 17 + 18 + function mockResponse(body: unknown, ok = true, status = 200) { 19 + return { 20 + ok, 21 + status, 22 + statusText: ok ? "OK" : "Error", 23 + json: () => Promise.resolve(body), 24 + }; 25 + } 26 + 27 + /** 28 + * Sets up the fetch mock sequence for an authenticated session on GET /settings. 29 + * Fetch order (no theme middleware in route factories): 30 + * 1. GET /settings handler: GET /api/auth/session 31 + * 2. GET /settings handler: GET /api/theme-policy 32 + * 3. GET /settings handler: GET /api/themes 33 + */ 34 + function setupAuthenticatedSessionGet( 35 + allowUserChoice: boolean = true, 36 + defaultLightThemeUri: string | null = "at://did:plc:forum/space.atbb.forum.theme/3lbllight", 37 + defaultDarkThemeUri: string | null = "at://did:plc:forum/space.atbb.forum.theme/3lbldark" 38 + ) { 39 + const policyResponse = { 40 + allowUserChoice, 41 + defaultLightThemeUri, 42 + defaultDarkThemeUri, 43 + availableThemes: [ 44 + { uri: "at://did:plc:forum/space.atbb.forum.theme/3lbllight" }, 45 + { uri: "at://did:plc:forum/space.atbb.forum.theme/3lbldark" }, 46 + ], 47 + }; 48 + const themesResponse = { 49 + themes: [ 50 + { 51 + uri: "at://did:plc:forum/space.atbb.forum.theme/3lbllight", 52 + name: "Clean Light", 53 + colorScheme: "light", 54 + }, 55 + { 56 + uri: "at://did:plc:forum/space.atbb.forum.theme/3lbldark", 57 + name: "Neobrutal Dark", 58 + colorScheme: "dark", 59 + }, 60 + ], 61 + }; 62 + // GET /settings handler fetches 63 + mockFetch.mockResolvedValueOnce( 64 + mockResponse({ authenticated: true, did: "did:plc:user", handle: "alice.bsky.social" }) 65 + ); 66 + mockFetch.mockResolvedValueOnce(mockResponse(policyResponse)); 67 + mockFetch.mockResolvedValueOnce(mockResponse(themesResponse)); 68 + } 69 + 70 + /** 71 + * Sets up the fetch mock sequence for an authenticated session on POST /settings/appearance. 72 + * Fetch order (no theme middleware in route factories): 73 + * 1. POST /settings/appearance handler: GET /api/auth/session 74 + * 2. POST /settings/appearance handler: GET /api/theme-policy 75 + */ 76 + function setupAuthenticatedSessionPost( 77 + allowUserChoice: boolean = true, 78 + availableThemeUris: string[] = [ 79 + "at://did:plc:forum/space.atbb.forum.theme/3lbllight", 80 + "at://did:plc:forum/space.atbb.forum.theme/3lbldark", 81 + ] 82 + ) { 83 + const policyResponse = { 84 + allowUserChoice, 85 + availableThemes: availableThemeUris.map((uri) => ({ uri })), 86 + }; 87 + // POST handler fetches 88 + mockFetch.mockResolvedValueOnce( 89 + mockResponse({ authenticated: true, did: "did:plc:user", handle: "alice.bsky.social" }) 90 + ); 91 + mockFetch.mockResolvedValueOnce(mockResponse(policyResponse)); 92 + } 93 + 94 + async function loadSettingsRoutes() { 95 + const { createSettingsRoutes } = await import("../settings.js"); 96 + return createSettingsRoutes("http://localhost:3000"); 97 + } 98 + 99 + // ── GET /settings — Unauthenticated ────────────────────────────────── 100 + 101 + it("GET /settings redirects unauthenticated users to /login", async () => { 102 + // No cookie in request → getSession returns unauthenticated immediately without fetch 103 + // So no mocks needed 104 + const routes = await loadSettingsRoutes(); 105 + const res = await routes.request("/settings"); 106 + expect(res.status).toBe(302); 107 + expect(res.headers.get("location")).toBe("/login"); 108 + }); 109 + 110 + // ── GET /settings — Policy fetch failure ───────────────────────────── 111 + 112 + it("GET /settings shows error banner when policy fetch returns non-ok", async () => { 113 + // Fetch order: 114 + // 1. GET /settings handler: GET /api/auth/session 115 + // 2. GET /settings handler: GET /api/theme-policy (fails) 116 + mockFetch.mockResolvedValueOnce( 117 + // GET /settings: auth succeeds 118 + mockResponse({ authenticated: true, did: "did:plc:user", handle: "alice.bsky.social" }) 119 + ); 120 + mockFetch.mockResolvedValueOnce( 121 + // GET /settings: policy fails 122 + mockResponse({}, false, 500) 123 + ); 124 + const routes = await loadSettingsRoutes(); 125 + const res = await routes.request("/settings", { 126 + headers: { cookie: "atbb_session=token" }, 127 + }); 128 + expect(res.status).toBe(200); 129 + const html = await res.text(); 130 + expect(html).toContain("Theme settings are temporarily unavailable"); 131 + expect(html).not.toContain("<select"); 132 + }); 133 + 134 + // ── GET /settings — allowUserChoice: false ─────────────────────────── 135 + 136 + it("GET /settings shows informational banner when allowUserChoice: false", async () => { 137 + setupAuthenticatedSessionGet(false); 138 + const routes = await loadSettingsRoutes(); 139 + const res = await routes.request("/settings", { 140 + headers: { cookie: "atbb_session=token" }, 141 + }); 142 + expect(res.status).toBe(200); 143 + const html = await res.text(); 144 + expect(html).toContain("Theme selection is managed by the forum administrator"); 145 + expect(html).not.toContain("id=\"lightThemeUri\""); 146 + expect(html).not.toContain("id=\"darkThemeUri\""); 147 + }); 148 + 149 + // ── GET /settings — Happy path ─────────────────────────────────────── 150 + 151 + it("GET /settings renders form with light/dark theme selects when allowUserChoice: true", async () => { 152 + setupAuthenticatedSessionGet(); 153 + const routes = await loadSettingsRoutes(); 154 + const res = await routes.request("/settings", { 155 + headers: { cookie: "atbb_session=token" }, 156 + }); 157 + expect(res.status).toBe(200); 158 + const html = await res.text(); 159 + expect(html).toContain("id=\"lightThemeUri\""); 160 + expect(html).toContain("id=\"darkThemeUri\""); 161 + expect(html).toContain("Clean Light"); 162 + expect(html).toContain("Neobrutal Dark"); 163 + }); 164 + 165 + it("GET /settings with ?saved=1 shows success banner", async () => { 166 + setupAuthenticatedSessionGet(); 167 + const routes = await loadSettingsRoutes(); 168 + const res = await routes.request("/settings?saved=1", { 169 + headers: { cookie: "atbb_session=token" }, 170 + }); 171 + expect(res.status).toBe(200); 172 + const html = await res.text(); 173 + expect(html).toContain("Preferences saved"); 174 + }); 175 + 176 + it("GET /settings pre-selects current preference cookie value in dropdown", async () => { 177 + setupAuthenticatedSessionGet(); 178 + const routes = await loadSettingsRoutes(); 179 + const res = await routes.request("/settings", { 180 + headers: { 181 + cookie: 182 + "atbb_session=token; atbb-light-theme=at://did:plc:forum/space.atbb.forum.theme/3lbllight", 183 + }, 184 + }); 185 + expect(res.status).toBe(200); 186 + const html = await res.text(); 187 + // Find the option with the URI and check it has selected attribute 188 + expect(html).toContain( 189 + 'value="at://did:plc:forum/space.atbb.forum.theme/3lbllight" selected' 190 + ); 191 + }); 192 + 193 + it("GET /settings with ?error=invalid-theme shows error banner", async () => { 194 + setupAuthenticatedSessionGet(); 195 + const routes = await loadSettingsRoutes(); 196 + const res = await routes.request("/settings?error=invalid-theme", { 197 + headers: { cookie: "atbb_session=token" }, 198 + }); 199 + expect(res.status).toBe(200); 200 + const html = await res.text(); 201 + expect(html).toContain("invalid-theme"); 202 + }); 203 + 204 + // ── POST /settings/appearance — Unauthenticated ────────────────────── 205 + 206 + it("POST /settings/appearance redirects unauthenticated users to /login", async () => { 207 + mockFetch.mockResolvedValueOnce( 208 + mockResponse({ authenticated: false }, false, 401) 209 + ); 210 + const routes = await loadSettingsRoutes(); 211 + const res = await routes.request("/settings/appearance", { 212 + method: "POST", 213 + headers: { "content-type": "application/x-www-form-urlencoded" }, 214 + body: new URLSearchParams({ 215 + lightThemeUri: "at://did:plc:forum/space.atbb.forum.theme/3lbllight", 216 + darkThemeUri: "at://did:plc:forum/space.atbb.forum.theme/3lbldark", 217 + }).toString(), 218 + }); 219 + expect(res.status).toBe(302); 220 + expect(res.headers.get("location")).toBe("/login"); 221 + // No cookie header means getSession returns unauthenticated 222 + // which triggers the redirect immediately without body parsing 223 + }); 224 + 225 + // ── POST /settings/appearance — Validation failures ─────────────────── 226 + 227 + it("POST /settings/appearance rejects empty body with ?error=invalid", async () => { 228 + mockFetch.mockResolvedValueOnce( 229 + mockResponse({ authenticated: true, did: "did:plc:user", handle: "alice.bsky.social" }) 230 + ); 231 + const routes = await loadSettingsRoutes(); 232 + const res = await routes.request("/settings/appearance", { 233 + method: "POST", 234 + headers: { cookie: "atbb_session=token", "content-type": "application/x-www-form-urlencoded" }, 235 + body: "", 236 + }); 237 + expect(res.status).toBe(302); 238 + expect(res.headers.get("location")).toBe("/settings?error=invalid"); 239 + }); 240 + 241 + it("POST /settings/appearance rejects missing lightThemeUri with ?error=invalid", async () => { 242 + mockFetch.mockResolvedValueOnce( 243 + mockResponse({ authenticated: true, did: "did:plc:user", handle: "alice.bsky.social" }) 244 + ); 245 + const routes = await loadSettingsRoutes(); 246 + const res = await routes.request("/settings/appearance", { 247 + method: "POST", 248 + headers: { cookie: "atbb_session=token", "content-type": "application/x-www-form-urlencoded" }, 249 + body: new URLSearchParams({ 250 + darkThemeUri: "at://did:plc:forum/space.atbb.forum.theme/3lbldark", 251 + }).toString(), 252 + }); 253 + expect(res.status).toBe(302); 254 + expect(res.headers.get("location")).toBe("/settings?error=invalid"); 255 + }); 256 + 257 + it("POST /settings/appearance rejects missing darkThemeUri with ?error=invalid", async () => { 258 + mockFetch.mockResolvedValueOnce( 259 + mockResponse({ authenticated: true, did: "did:plc:user", handle: "alice.bsky.social" }) 260 + ); 261 + const routes = await loadSettingsRoutes(); 262 + const res = await routes.request("/settings/appearance", { 263 + method: "POST", 264 + headers: { cookie: "atbb_session=token", "content-type": "application/x-www-form-urlencoded" }, 265 + body: new URLSearchParams({ 266 + lightThemeUri: "at://did:plc:forum/space.atbb.forum.theme/3lbllight", 267 + }).toString(), 268 + }); 269 + expect(res.status).toBe(302); 270 + expect(res.headers.get("location")).toBe("/settings?error=invalid"); 271 + }); 272 + 273 + it("POST /settings/appearance rejects invalid light theme URI with ?error=invalid-theme", async () => { 274 + setupAuthenticatedSessionPost(); 275 + const routes = await loadSettingsRoutes(); 276 + const res = await routes.request("/settings/appearance", { 277 + method: "POST", 278 + headers: { cookie: "atbb_session=token", "content-type": "application/x-www-form-urlencoded" }, 279 + body: new URLSearchParams({ 280 + lightThemeUri: "at://did:plc:forum/space.atbb.forum.theme/invalid", 281 + darkThemeUri: "at://did:plc:forum/space.atbb.forum.theme/3lbldark", 282 + }).toString(), 283 + }); 284 + expect(res.status).toBe(302); 285 + expect(res.headers.get("location")).toBe("/settings?error=invalid-theme"); 286 + }); 287 + 288 + it("POST /settings/appearance rejects invalid dark theme URI with ?error=invalid-theme", async () => { 289 + setupAuthenticatedSessionPost(); 290 + const routes = await loadSettingsRoutes(); 291 + const res = await routes.request("/settings/appearance", { 292 + method: "POST", 293 + headers: { cookie: "atbb_session=token", "content-type": "application/x-www-form-urlencoded" }, 294 + body: new URLSearchParams({ 295 + lightThemeUri: "at://did:plc:forum/space.atbb.forum.theme/3lbllight", 296 + darkThemeUri: "at://did:plc:forum/space.atbb.forum.theme/invalid", 297 + }).toString(), 298 + }); 299 + expect(res.status).toBe(302); 300 + expect(res.headers.get("location")).toBe("/settings?error=invalid-theme"); 301 + }); 302 + 303 + // ── POST /settings/appearance — Policy fetch failure ────────────────── 304 + 305 + it("POST /settings/appearance rejects when policy fetch fails with ?error=unavailable", async () => { 306 + // Fetch order: 307 + // 1. POST handler: GET /api/auth/session 308 + // 2. POST handler: GET /api/theme-policy (fails) 309 + mockFetch.mockResolvedValueOnce( 310 + mockResponse({ authenticated: true, did: "did:plc:user", handle: "alice.bsky.social" }) 311 + ); 312 + mockFetch.mockResolvedValueOnce(mockResponse({}, false, 500)); // policy fetch fails 313 + const routes = await loadSettingsRoutes(); 314 + const res = await routes.request("/settings/appearance", { 315 + method: "POST", 316 + headers: { cookie: "atbb_session=token", "content-type": "application/x-www-form-urlencoded" }, 317 + body: new URLSearchParams({ 318 + lightThemeUri: "at://did:plc:forum/space.atbb.forum.theme/3lbllight", 319 + darkThemeUri: "at://did:plc:forum/space.atbb.forum.theme/3lbldark", 320 + }).toString(), 321 + }); 322 + expect(res.status).toBe(302); 323 + expect(res.headers.get("location")).toBe("/settings?error=unavailable"); 324 + // Verify no cookies are set 325 + const cookies = res.headers.getSetCookie?.() ?? []; 326 + expect(cookies.length).toBe(0); 327 + }); 328 + 329 + // ── POST /settings/appearance — allowUserChoice: false ──────────────── 330 + 331 + it("POST /settings/appearance rejects when allowUserChoice: false with ?error=not-allowed", async () => { 332 + setupAuthenticatedSessionPost(false); 333 + const routes = await loadSettingsRoutes(); 334 + const res = await routes.request("/settings/appearance", { 335 + method: "POST", 336 + headers: { cookie: "atbb_session=token", "content-type": "application/x-www-form-urlencoded" }, 337 + body: new URLSearchParams({ 338 + lightThemeUri: "at://did:plc:forum/space.atbb.forum.theme/3lbllight", 339 + darkThemeUri: "at://did:plc:forum/space.atbb.forum.theme/3lbldark", 340 + }).toString(), 341 + }); 342 + expect(res.status).toBe(302); 343 + expect(res.headers.get("location")).toBe("/settings?error=not-allowed"); 344 + }); 345 + 346 + // ── POST /settings/appearance — Happy path ────────────────────────── 347 + 348 + it("POST /settings/appearance sets theme cookies and redirects to /settings?saved=1", async () => { 349 + setupAuthenticatedSessionPost(); 350 + const routes = await loadSettingsRoutes(); 351 + const res = await routes.request("/settings/appearance", { 352 + method: "POST", 353 + headers: { cookie: "atbb_session=token", "content-type": "application/x-www-form-urlencoded" }, 354 + body: new URLSearchParams({ 355 + lightThemeUri: "at://did:plc:forum/space.atbb.forum.theme/3lbllight", 356 + darkThemeUri: "at://did:plc:forum/space.atbb.forum.theme/3lbldark", 357 + }).toString(), 358 + }); 359 + expect(res.status).toBe(302); 360 + expect(res.headers.get("location")).toBe("/settings?saved=1"); 361 + 362 + // Verify both cookies are set 363 + const cookies = res.headers.getSetCookie?.() ?? []; 364 + expect(cookies.some((c) => c.startsWith("atbb-light-theme="))).toBe(true); 365 + expect(cookies.some((c) => c.startsWith("atbb-dark-theme="))).toBe(true); 366 + 367 + // Verify cookie values match 368 + expect(cookies.some((c) => 369 + c.startsWith( 370 + "atbb-light-theme=at://did:plc:forum/space.atbb.forum.theme/3lbllight" 371 + ) 372 + )).toBe(true); 373 + expect(cookies.some((c) => 374 + c.startsWith("atbb-dark-theme=at://did:plc:forum/space.atbb.forum.theme/3lbldark") 375 + )).toBe(true); 376 + 377 + // Verify cookie attributes 378 + const lightCookie = cookies.find((c) => c.startsWith("atbb-light-theme=")); 379 + expect(lightCookie).toContain("Path=/"); 380 + expect(lightCookie).toContain("Max-Age=31536000"); 381 + expect(lightCookie).toContain("SameSite=Lax"); 382 + }); 383 + 384 + it("POST /settings/appearance accepts valid URIs both in availableThemes", async () => { 385 + setupAuthenticatedSessionPost(); 386 + const routes = await loadSettingsRoutes(); 387 + const res = await routes.request("/settings/appearance", { 388 + method: "POST", 389 + headers: { cookie: "atbb_session=token", "content-type": "application/x-www-form-urlencoded" }, 390 + body: new URLSearchParams({ 391 + lightThemeUri: "at://did:plc:forum/space.atbb.forum.theme/3lbllight", 392 + darkThemeUri: "at://did:plc:forum/space.atbb.forum.theme/3lbldark", 393 + }).toString(), 394 + }); 395 + expect(res.status).toBe(302); 396 + }); 397 + 398 + it("POST /settings/appearance does not set cookies when policy fetch fails", async () => { 399 + // Same as the unavailable test - just verifying no cookies are set 400 + mockFetch.mockResolvedValueOnce( 401 + mockResponse({ authenticated: true, did: "did:plc:user", handle: "alice.bsky.social" }) 402 + ); 403 + mockFetch.mockResolvedValueOnce(mockResponse({}, false, 500)); 404 + const routes = await loadSettingsRoutes(); 405 + const res = await routes.request("/settings/appearance", { 406 + method: "POST", 407 + headers: { cookie: "atbb_session=token", "content-type": "application/x-www-form-urlencoded" }, 408 + body: new URLSearchParams({ 409 + lightThemeUri: "at://did:plc:forum/space.atbb.forum.theme/3lbllight", 410 + darkThemeUri: "at://did:plc:forum/space.atbb.forum.theme/3lbldark", 411 + }).toString(), 412 + }); 413 + expect(res.status).toBe(302); 414 + const cookies = res.headers.getSetCookie?.() ?? []; 415 + expect(cookies.length).toBe(0); 416 + }); 417 + });