From cab5c477590bcf92b9b0e91c913a1709f95c2a76 Mon Sep 17 00:00:00 2001 From: Asger Geel Weirsoee Date: Sun, 1 Mar 2026 12:45:32 +0000 Subject: [PATCH 1/6] feat(spa): wire join/start round in Angular API client for lobby flow --- frontend/src/api/angular-client.ts | 45 ++++++++++++++-- frontend/tests/angular-api-client.test.ts | 65 ++++++++++++++++++++--- 2 files changed, 97 insertions(+), 13 deletions(-) diff --git a/frontend/src/api/angular-client.ts b/frontend/src/api/angular-client.ts index add41c1..6befb53 100644 --- a/frontend/src/api/angular-client.ts +++ b/frontend/src/api/angular-client.ts @@ -1,4 +1,13 @@ -import type { ApiFailure, ApiResult, HealthResponse, SessionDetailResponse } from './types'; +import type { + ApiFailure, + ApiResult, + HealthResponse, + JoinSessionRequest, + JoinSessionResponse, + SessionDetailResponse, + StartRoundRequest, + StartRoundResponse +} from './types'; export interface AngularHttpError { status?: number; @@ -8,11 +17,14 @@ export interface AngularHttpError { export interface AngularHttpClientLike { get(url: string, options?: { withCredentials?: boolean }): Promise; + post(url: string, body: unknown, options?: { withCredentials?: boolean }): Promise; } export interface AngularApiClient { health(): Promise>; getSession(code: string): Promise>; + joinSession(payload: JoinSessionRequest): Promise>; + startRound(code: string, payload: StartRoundRequest): Promise>; } function toFailure(error: unknown): ApiFailure { @@ -40,23 +52,46 @@ function normalizeCode(code: string): string { return code.trim().toUpperCase(); } -async function wrapGet(call: () => Promise): Promise> { +async function wrap(call: () => Promise): Promise> { try { const data = await call(); return { ok: true, status: 200, data }; } catch (error: unknown) { - return { ok: false, status: typeof (error as AngularHttpError)?.status === 'number' ? (error as AngularHttpError).status! : 0, error: toFailure(error) }; + return { + ok: false, + status: typeof (error as AngularHttpError)?.status === 'number' ? (error as AngularHttpError).status! : 0, + error: toFailure(error) + }; } } export function createAngularApiClient(http: AngularHttpClientLike, baseUrl = ''): AngularApiClient { return { - health: () => wrapGet(() => http.get(`${baseUrl}/healthz`, { withCredentials: true })), + health: () => wrap(() => http.get(`${baseUrl}/healthz`, { withCredentials: true })), getSession: (code: string) => - wrapGet(() => + wrap(() => http.get(`${baseUrl}/lobby/sessions/${encodeURIComponent(normalizeCode(code))}`, { withCredentials: true }) + ), + joinSession: (payload: JoinSessionRequest) => + wrap(() => + http.post( + `${baseUrl}/lobby/sessions/join`, + { + code: normalizeCode(payload.code), + nickname: payload.nickname.trim() + }, + { withCredentials: true } + ) + ), + startRound: (code: string, payload: StartRoundRequest) => + wrap(() => + http.post( + `${baseUrl}/lobby/sessions/${encodeURIComponent(normalizeCode(code))}/rounds/start`, + payload, + { withCredentials: true } + ) ) }; } diff --git a/frontend/tests/angular-api-client.test.ts b/frontend/tests/angular-api-client.test.ts index 1020362..1cc7fc7 100644 --- a/frontend/tests/angular-api-client.test.ts +++ b/frontend/tests/angular-api-client.test.ts @@ -49,7 +49,27 @@ describe('createAngularApiClient', () => { throw { status: 404, error: { error: 'Not found' } }; }); - const http = { get }; + const post = vi.fn(async (url: string, body: unknown) => { + if (url === '/lobby/sessions/join') { + expect(body).toEqual({ code: 'ABCD12', nickname: 'Maja' }); + return { + player: { id: 9, nickname: 'Maja', session_token: 'token-1', score: 0 }, + session: { code: 'ABCD12', status: 'lobby' } + } as T; + } + + if (url === '/lobby/sessions/ABCD12/rounds/start') { + expect(body).toEqual({ category_slug: 'history' }); + return { + session: { code: 'ABCD12', status: 'lie', current_round: 1 }, + round: { number: 1, category: { slug: 'history', name: 'History' } } + } as T; + } + + throw { status: 404, error: { error: 'Not found' } }; + }); + + const http = { get, post }; const client = createAngularApiClient(http as AngularHttpClientLike); const health = await client.health(); @@ -67,26 +87,55 @@ describe('createAngularApiClient', () => { expect(session.data.phase_view_model.host.can_start_round).toBe(true); } + const join = await client.joinSession({ code: ' abcd12 ', nickname: ' Maja ' }); + expect(join.ok).toBe(true); + + const start = await client.startRound(' abcd12 ', { category_slug: 'history' }); + expect(start.ok).toBe(true); + expect(get).toHaveBeenNthCalledWith(1, '/healthz', { withCredentials: true }); expect(get).toHaveBeenNthCalledWith(2, '/lobby/sessions/ABCD12', { withCredentials: true }); + expect(post).toHaveBeenNthCalledWith( + 1, + '/lobby/sessions/join', + { code: 'ABCD12', nickname: 'Maja' }, + { withCredentials: true } + ); + expect(post).toHaveBeenNthCalledWith( + 2, + '/lobby/sessions/ABCD12/rounds/start', + { category_slug: 'history' }, + { withCredentials: true } + ); }); it('maps HttpErrorResponse-style failures to ApiResult errors', async () => { const http = { get: vi.fn(async () => { throw { status: 503, message: 'Service unavailable', error: { error: 'maintenance' } }; + }), + post: vi.fn(async () => { + throw { status: 403, message: 'Forbidden', error: { error: 'Only host can start round' } }; }) }; const client = createAngularApiClient(http as AngularHttpClientLike); - const result = await client.health(); + const health = await client.health(); - expect(result.ok).toBe(false); - if (!result.ok) { - expect(result.status).toBe(503); - expect(result.error.kind).toBe('http'); - expect(result.error.payload).toEqual({ error: 'maintenance' }); - expect(result.error.message).toContain('Service unavailable'); + expect(health.ok).toBe(false); + if (!health.ok) { + expect(health.status).toBe(503); + expect(health.error.kind).toBe('http'); + expect(health.error.payload).toEqual({ error: 'maintenance' }); + expect(health.error.message).toContain('Service unavailable'); + } + + const start = await client.startRound('ABCD12', { category_slug: 'history' }); + expect(start.ok).toBe(false); + if (!start.ok) { + expect(start.status).toBe(403); + expect(start.error.kind).toBe('http'); + expect(start.error.payload).toEqual({ error: 'Only host can start round' }); } }); }); From 538368de9937e543de8007b1d98d72ea82e5da45 Mon Sep 17 00:00:00 2001 From: Asger Geel Weirsoee Date: Sun, 1 Mar 2026 12:50:29 +0000 Subject: [PATCH 2/6] fix(frontend): restore session context behavior in vertical slice --- frontend/src/spa/vertical-slice.ts | 91 ++++++++++++++------------- frontend/tests/vertical-slice.test.ts | 72 ++++++++++++--------- 2 files changed, 92 insertions(+), 71 deletions(-) diff --git a/frontend/src/spa/vertical-slice.ts b/frontend/src/spa/vertical-slice.ts index a93e60d..86d4301 100644 --- a/frontend/src/spa/vertical-slice.ts +++ b/frontend/src/spa/vertical-slice.ts @@ -1,13 +1,22 @@ import type { ApiClient } from '../api/client'; import type { SessionDetailResponse } from '../api/types'; -import { createSessionContextStore, type SessionContext, type SessionContextStore } from './session-context-store'; export type AsyncState = 'idle' | 'loading' | 'success' | 'error'; +export interface SessionContext { + sessionCode: string; + playerToken: string; + nickname: string; +} + +export interface SessionContextStore { + get(): SessionContext | null; + set(context: SessionContext): void; +} + export interface VerticalSliceState { sessionCode: string; session: SessionDetailResponse | null; - context: SessionContext | null; joinState: AsyncState; startRoundState: AsyncState; loadingSession: boolean; @@ -21,14 +30,20 @@ export interface VerticalSliceController { startRound(sessionCode: string, categorySlug: string): Promise; } +const NOOP_SESSION_CONTEXT_STORE: SessionContextStore = { + get: () => null, + set: () => undefined +}; + export function createVerticalSliceController( api: ApiClient, - sessionContextStore: SessionContextStore = createSessionContextStore() + sessionContextStore: SessionContextStore = NOOP_SESSION_CONTEXT_STORE ): VerticalSliceController { + const persistedContext = sessionContextStore.get(); + const state: VerticalSliceState = { - sessionCode: '', + sessionCode: persistedContext?.sessionCode ?? '', session: null, - context: sessionContextStore.get(), joinState: 'idle', startRoundState: 'idle', loadingSession: false, @@ -37,31 +52,14 @@ export function createVerticalSliceController( const normalizeCode = (value: string): string => value.trim().toUpperCase(); - function syncContext(): void { - state.context = sessionContextStore.get(); - } - - function resolveSessionCode(inputCode: string): string { - const normalizedInput = normalizeCode(inputCode); - if (normalizedInput) { - return normalizedInput; - } - - return state.context?.sessionCode ?? ''; - } - async function hydrateLobby(sessionCode: string): Promise { state.loadingSession = true; state.errorMessage = null; - const resolvedCode = resolveSessionCode(sessionCode); - if (!resolvedCode) { - state.loadingSession = false; - state.errorMessage = 'Session-kode mangler.'; - return { ...state }; - } + const normalizedRequestedCode = normalizeCode(sessionCode); + const fallbackCode = normalizeCode(state.sessionCode || persistedContext?.sessionCode || ''); + state.sessionCode = normalizedRequestedCode || fallbackCode; - state.sessionCode = resolvedCode; const result = await api.getSession(state.sessionCode); state.loadingSession = false; @@ -71,7 +69,12 @@ export function createVerticalSliceController( } state.session = result.data; - syncContext(); + state.sessionCode = normalizeCode(result.data.session.code); + + if (persistedContext && state.sessionCode === normalizeCode(persistedContext.sessionCode)) { + sessionContextStore.set({ ...persistedContext, sessionCode: state.sessionCode }); + } + return { ...state }; } @@ -79,36 +82,38 @@ export function createVerticalSliceController( state.joinState = 'loading'; state.errorMessage = null; - const join = await api.joinSession({ code: sessionCode, nickname }); + const normalizedRequestedCode = normalizeCode(sessionCode); + const fallbackCode = normalizeCode(state.sessionCode || persistedContext?.sessionCode || ''); + const requestCode = normalizedRequestedCode || fallbackCode; + + const join = await api.joinSession({ code: requestCode, nickname }); if (!join.ok) { state.joinState = 'error'; state.errorMessage = 'Join fejlede. Tjek kode eller nickname og prøv igen.'; return { ...state }; } - sessionContextStore.set({ - sessionCode: join.data.session.code, - playerId: join.data.player.id, - token: join.data.player.session_token - }); - syncContext(); - state.joinState = 'success'; - return hydrateLobby(join.data.session.code); + state.sessionCode = normalizeCode(join.data.session.code || requestCode); + + sessionContextStore.set({ + sessionCode: state.sessionCode, + playerToken: join.data.player.session_token, + nickname: join.data.player.nickname + }); + + return hydrateLobby(state.sessionCode); } async function startRound(sessionCode: string, categorySlug: string): Promise { state.startRoundState = 'loading'; state.errorMessage = null; - const resolvedCode = resolveSessionCode(sessionCode); - if (!resolvedCode) { - state.startRoundState = 'error'; - state.errorMessage = 'Session-kode mangler.'; - return { ...state }; - } + const normalizedRequestedCode = normalizeCode(sessionCode); + const fallbackCode = normalizeCode(state.sessionCode || persistedContext?.sessionCode || ''); + const codeToUse = normalizedRequestedCode || fallbackCode; - const start = await api.startRound(resolvedCode, { category_slug: categorySlug }); + const start = await api.startRound(codeToUse, { category_slug: categorySlug }); if (!start.ok) { state.startRoundState = 'error'; state.errorMessage = 'Kunne ikke starte runden. Opdatér lobbyen og prøv igen.'; @@ -116,7 +121,7 @@ export function createVerticalSliceController( } state.startRoundState = 'success'; - return hydrateLobby(resolvedCode); + return hydrateLobby(codeToUse); } return { diff --git a/frontend/tests/vertical-slice.test.ts b/frontend/tests/vertical-slice.test.ts index ae81175..d48904a 100644 --- a/frontend/tests/vertical-slice.test.ts +++ b/frontend/tests/vertical-slice.test.ts @@ -1,6 +1,9 @@ import { describe, expect, it, vi } from 'vitest'; -import { createVerticalSliceController } from '../src/spa/vertical-slice'; -import { createSessionContextStore, type StorageLike } from '../src/spa/session-context-store'; +import { + createVerticalSliceController, + type SessionContext, + type SessionContextStore +} from '../src/spa/vertical-slice'; import type { ApiClient } from '../src/api/client'; function makeApiMock(overrides?: Partial): ApiClient { @@ -59,24 +62,20 @@ function makeApiMock(overrides?: Partial): ApiClient { return { ...base, ...overrides }; } -function makeMemoryStorage(): StorageLike { - const memory = new Map(); +function makeSessionContextStore(initial: SessionContext | null = null): SessionContextStore { + let value = initial; return { - getItem: (key: string) => memory.get(key) ?? null, - setItem: (key: string, value: string) => { - memory.set(key, value); - }, - removeItem: (key: string) => { - memory.delete(key); - } + get: vi.fn(() => value), + set: vi.fn((next: SessionContext) => { + value = next; + }) }; } describe('vertical slice controller: lobby -> join -> start round', () => { - it('tracks loading and success state for join + start flow and stores session context', async () => { + it('tracks loading and success state for join + start flow', async () => { const api = makeApiMock(); - const store = createSessionContextStore(makeMemoryStorage()); - const controller = createVerticalSliceController(api, store); + const controller = createVerticalSliceController(api); const beforeJoinPromise = controller.joinLobby('abcd12', 'Maja'); expect(controller.getState().joinState).toBe('loading'); @@ -85,15 +84,43 @@ describe('vertical slice controller: lobby -> join -> start round', () => { const postJoin = controller.getState(); expect(postJoin.joinState).toBe('success'); expect(postJoin.session?.session.code).toBe('ABCD12'); - expect(postJoin.context).toEqual({ sessionCode: 'ABCD12', playerId: 9, token: 'token-1' }); - const beforeStartPromise = controller.startRound('', 'history'); + const beforeStartPromise = controller.startRound('abcd12', 'history'); expect(controller.getState().startRoundState).toBe('loading'); await beforeStartPromise; const postStart = controller.getState(); expect(postStart.startRoundState).toBe('success'); - expect(api.startRound).toHaveBeenCalledWith('ABCD12', { category_slug: 'history' }); + }); + + it('persists session context after join and syncs normalized session code', async () => { + const api = makeApiMock(); + const sessionContextStore = makeSessionContextStore(); + const controller = createVerticalSliceController(api, sessionContextStore); + + await controller.joinLobby('abcd12', 'Maja'); + + expect(sessionContextStore.set).toHaveBeenCalledWith({ + sessionCode: 'ABCD12', + playerToken: 'token-1', + nickname: 'Maja' + }); + expect(controller.getState().sessionCode).toBe('ABCD12'); + }); + + it('uses stored session code as fallback for join + hydrate flow when input code is empty', async () => { + const api = makeApiMock(); + const sessionContextStore = makeSessionContextStore({ + sessionCode: 'wxyz99', + playerToken: 'token-old', + nickname: 'Maja' + }); + const controller = createVerticalSliceController(api, sessionContextStore); + + await controller.joinLobby(' ', 'Maja'); + + expect(api.joinSession).toHaveBeenCalledWith({ code: 'WXYZ99', nickname: 'Maja' }); + expect(api.getSession).toHaveBeenCalledWith('ABCD12'); }); it('surfaces a friendly error when join fails', async () => { @@ -129,15 +156,4 @@ describe('vertical slice controller: lobby -> join -> start round', () => { expect(state.startRoundState).toBe('error'); expect(state.errorMessage).toContain('Kunne ikke starte runden'); }); - - it('returns explicit error when hydrate has no session code in input or context', async () => { - const api = makeApiMock(); - const controller = createVerticalSliceController(api); - - await controller.hydrateLobby(' '); - - const state = controller.getState(); - expect(state.errorMessage).toContain('Session-kode mangler'); - expect(api.getSession).not.toHaveBeenCalled(); - }); }); From b52896d137646c9bf7d34f448fe2e7fb50741f0d Mon Sep 17 00:00:00 2001 From: Asger Geel Weirsoee Date: Sun, 1 Mar 2026 13:17:38 +0000 Subject: [PATCH 3/6] test(spa): cover lobby->start-round flow without reload (#169) --- frontend/tests/vertical-slice.test.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/frontend/tests/vertical-slice.test.ts b/frontend/tests/vertical-slice.test.ts index d48904a..fd588b4 100644 --- a/frontend/tests/vertical-slice.test.ts +++ b/frontend/tests/vertical-slice.test.ts @@ -156,4 +156,15 @@ describe('vertical slice controller: lobby -> join -> start round', () => { expect(state.startRoundState).toBe('error'); expect(state.errorMessage).toContain('Kunne ikke starte runden'); }); + + it('uses joined session code when starting round without a reload', async () => { + const api = makeApiMock(); + const controller = createVerticalSliceController(api); + + await controller.joinLobby(' abcd12 ', 'Maja'); + await controller.startRound('', 'history'); + + expect(api.startRound).toHaveBeenCalledWith('ABCD12', { category_slug: 'history' }); + expect(controller.getState().sessionCode).toBe('ABCD12'); + }); }); From 85e970b90cba2da323c3abe35ad8f6804b274bc2 Mon Sep 17 00:00:00 2001 From: Asger Geel Weirsoee Date: Sun, 1 Mar 2026 13:24:46 +0000 Subject: [PATCH 4/6] fix(frontend): restore default session context store in vertical slice --- frontend/src/spa/vertical-slice.ts | 35 ++++++++++------------- frontend/tests/vertical-slice.test.ts | 40 ++++++++++++++++++++++++--- 2 files changed, 51 insertions(+), 24 deletions(-) diff --git a/frontend/src/spa/vertical-slice.ts b/frontend/src/spa/vertical-slice.ts index 86d4301..f951e06 100644 --- a/frontend/src/spa/vertical-slice.ts +++ b/frontend/src/spa/vertical-slice.ts @@ -1,18 +1,15 @@ import type { ApiClient } from '../api/client'; import type { SessionDetailResponse } from '../api/types'; +import { + createSessionContextStore, + type SessionContext, + type SessionContextInput, + type SessionContextStore as PersistedSessionContextStore +} from './session-context-store'; export type AsyncState = 'idle' | 'loading' | 'success' | 'error'; -export interface SessionContext { - sessionCode: string; - playerToken: string; - nickname: string; -} - -export interface SessionContextStore { - get(): SessionContext | null; - set(context: SessionContext): void; -} +export type SessionContextStore = Pick; export interface VerticalSliceState { sessionCode: string; @@ -30,14 +27,9 @@ export interface VerticalSliceController { startRound(sessionCode: string, categorySlug: string): Promise; } -const NOOP_SESSION_CONTEXT_STORE: SessionContextStore = { - get: () => null, - set: () => undefined -}; - export function createVerticalSliceController( api: ApiClient, - sessionContextStore: SessionContextStore = NOOP_SESSION_CONTEXT_STORE + sessionContextStore: SessionContextStore = createSessionContextStore() ): VerticalSliceController { const persistedContext = sessionContextStore.get(); @@ -96,11 +88,12 @@ export function createVerticalSliceController( state.joinState = 'success'; state.sessionCode = normalizeCode(join.data.session.code || requestCode); - sessionContextStore.set({ + const nextContext: SessionContextInput = { sessionCode: state.sessionCode, - playerToken: join.data.player.session_token, - nickname: join.data.player.nickname - }); + playerId: join.data.player.id, + token: join.data.player.session_token + }; + sessionContextStore.set(nextContext); return hydrateLobby(state.sessionCode); } @@ -131,3 +124,5 @@ export function createVerticalSliceController( startRound }; } + +export type { SessionContext }; diff --git a/frontend/tests/vertical-slice.test.ts b/frontend/tests/vertical-slice.test.ts index fd588b4..a8a256d 100644 --- a/frontend/tests/vertical-slice.test.ts +++ b/frontend/tests/vertical-slice.test.ts @@ -68,11 +68,43 @@ function makeSessionContextStore(initial: SessionContext | null = null): Session get: vi.fn(() => value), set: vi.fn((next: SessionContext) => { value = next; + return next; }) }; } describe('vertical slice controller: lobby -> join -> start round', () => { + it('uses createSessionContextStore by default (no manual injection)', async () => { + vi.resetModules(); + const defaultStore = { + get: vi.fn(() => null), + set: vi.fn((next: SessionContext) => next), + clear: vi.fn() + }; + + vi.doMock('../src/spa/session-context-store', async () => { + const actual = await vi.importActual('../src/spa/session-context-store'); + return { + ...actual, + createSessionContextStore: vi.fn(() => defaultStore) + }; + }); + + const { createVerticalSliceController: createControllerWithMock } = await import('../src/spa/vertical-slice'); + const api = makeApiMock(); + const controller = createControllerWithMock(api); + + await controller.joinLobby('ABCD12', 'Maja'); + + expect(defaultStore.set).toHaveBeenCalledWith({ + sessionCode: 'ABCD12', + playerId: 9, + token: 'token-1' + }); + + vi.doUnmock('../src/spa/session-context-store'); + vi.resetModules(); + }); it('tracks loading and success state for join + start flow', async () => { const api = makeApiMock(); const controller = createVerticalSliceController(api); @@ -102,8 +134,8 @@ describe('vertical slice controller: lobby -> join -> start round', () => { expect(sessionContextStore.set).toHaveBeenCalledWith({ sessionCode: 'ABCD12', - playerToken: 'token-1', - nickname: 'Maja' + playerId: 9, + token: 'token-1' }); expect(controller.getState().sessionCode).toBe('ABCD12'); }); @@ -112,8 +144,8 @@ describe('vertical slice controller: lobby -> join -> start round', () => { const api = makeApiMock(); const sessionContextStore = makeSessionContextStore({ sessionCode: 'wxyz99', - playerToken: 'token-old', - nickname: 'Maja' + playerId: 5, + token: 'token-old' }); const controller = createVerticalSliceController(api, sessionContextStore); From 749997a8fb94ac1c0b41c1baa9bd0bd43fe484df Mon Sep 17 00:00:00 2001 From: Asger Geel Weirsoee Date: Sun, 1 Mar 2026 13:32:17 +0000 Subject: [PATCH 5/6] fix(spa): guard empty session code before hydrate/start --- frontend/src/spa/vertical-slice.ts | 12 ++++++++++++ frontend/tests/vertical-slice.test.ts | 24 ++++++++++++++++++++++++ 2 files changed, 36 insertions(+) diff --git a/frontend/src/spa/vertical-slice.ts b/frontend/src/spa/vertical-slice.ts index f951e06..9e901f3 100644 --- a/frontend/src/spa/vertical-slice.ts +++ b/frontend/src/spa/vertical-slice.ts @@ -52,6 +52,12 @@ export function createVerticalSliceController( const fallbackCode = normalizeCode(state.sessionCode || persistedContext?.sessionCode || ''); state.sessionCode = normalizedRequestedCode || fallbackCode; + if (!state.sessionCode) { + state.loadingSession = false; + state.errorMessage = 'Session-kode mangler.'; + return { ...state }; + } + const result = await api.getSession(state.sessionCode); state.loadingSession = false; @@ -106,6 +112,12 @@ export function createVerticalSliceController( const fallbackCode = normalizeCode(state.sessionCode || persistedContext?.sessionCode || ''); const codeToUse = normalizedRequestedCode || fallbackCode; + if (!codeToUse) { + state.startRoundState = 'error'; + state.errorMessage = 'Session-kode mangler.'; + return { ...state }; + } + const start = await api.startRound(codeToUse, { category_slug: categorySlug }); if (!start.ok) { state.startRoundState = 'error'; diff --git a/frontend/tests/vertical-slice.test.ts b/frontend/tests/vertical-slice.test.ts index a8a256d..7c4c521 100644 --- a/frontend/tests/vertical-slice.test.ts +++ b/frontend/tests/vertical-slice.test.ts @@ -189,6 +189,30 @@ describe('vertical slice controller: lobby -> join -> start round', () => { expect(state.errorMessage).toContain('Kunne ikke starte runden'); }); + it('shows local validation error and avoids API call when hydrating without any session code', async () => { + const api = makeApiMock(); + const controller = createVerticalSliceController(api, makeSessionContextStore(null)); + + await controller.hydrateLobby(' '); + + const state = controller.getState(); + expect(state.errorMessage).toBe('Session-kode mangler.'); + expect(state.loadingSession).toBe(false); + expect(api.getSession).not.toHaveBeenCalled(); + }); + + it('shows local validation error and avoids API call when starting round without any session code', async () => { + const api = makeApiMock(); + const controller = createVerticalSliceController(api, makeSessionContextStore(null)); + + await controller.startRound(' ', 'history'); + + const state = controller.getState(); + expect(state.startRoundState).toBe('error'); + expect(state.errorMessage).toBe('Session-kode mangler.'); + expect(api.startRound).not.toHaveBeenCalled(); + }); + it('uses joined session code when starting round without a reload', async () => { const api = makeApiMock(); const controller = createVerticalSliceController(api); From 58f7f02af359a2db21920d95d469676984aadbac Mon Sep 17 00:00:00 2001 From: DEV-bot Date: Sun, 1 Mar 2026 13:52:32 +0000 Subject: [PATCH 6/6] fix(spa): normalize angular api client base URL for django endpoints --- frontend/src/api/angular-client.ts | 16 +++-- frontend/tests/angular-api-client.test.ts | 80 +++++++++++++++++++++++ 2 files changed, 92 insertions(+), 4 deletions(-) diff --git a/frontend/src/api/angular-client.ts b/frontend/src/api/angular-client.ts index 6befb53..7c43c26 100644 --- a/frontend/src/api/angular-client.ts +++ b/frontend/src/api/angular-client.ts @@ -52,6 +52,14 @@ function normalizeCode(code: string): string { return code.trim().toUpperCase(); } +function normalizeBaseUrl(baseUrl: string): string { + return baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl; +} + +function buildUrl(baseUrl: string, path: string): string { + return `${normalizeBaseUrl(baseUrl)}${path}`; +} + async function wrap(call: () => Promise): Promise> { try { const data = await call(); @@ -67,17 +75,17 @@ async function wrap(call: () => Promise): Promise> { export function createAngularApiClient(http: AngularHttpClientLike, baseUrl = ''): AngularApiClient { return { - health: () => wrap(() => http.get(`${baseUrl}/healthz`, { withCredentials: true })), + health: () => wrap(() => http.get(buildUrl(baseUrl, '/healthz'), { withCredentials: true })), getSession: (code: string) => wrap(() => - http.get(`${baseUrl}/lobby/sessions/${encodeURIComponent(normalizeCode(code))}`, { + http.get(buildUrl(baseUrl, `/lobby/sessions/${encodeURIComponent(normalizeCode(code))}`), { withCredentials: true }) ), joinSession: (payload: JoinSessionRequest) => wrap(() => http.post( - `${baseUrl}/lobby/sessions/join`, + buildUrl(baseUrl, '/lobby/sessions/join'), { code: normalizeCode(payload.code), nickname: payload.nickname.trim() @@ -88,7 +96,7 @@ export function createAngularApiClient(http: AngularHttpClientLike, baseUrl = '' startRound: (code: string, payload: StartRoundRequest) => wrap(() => http.post( - `${baseUrl}/lobby/sessions/${encodeURIComponent(normalizeCode(code))}/rounds/start`, + buildUrl(baseUrl, `/lobby/sessions/${encodeURIComponent(normalizeCode(code))}/rounds/start`), payload, { withCredentials: true } ) diff --git a/frontend/tests/angular-api-client.test.ts b/frontend/tests/angular-api-client.test.ts index 1cc7fc7..20f0bac 100644 --- a/frontend/tests/angular-api-client.test.ts +++ b/frontend/tests/angular-api-client.test.ts @@ -109,6 +109,86 @@ describe('createAngularApiClient', () => { ); }); + it('normalizes baseUrl with trailing slash to keep Django endpoint paths canonical', async () => { + const get = vi.fn(async (url: string) => { + if (url === '/api/healthz') { + return { ok: true, service: 'partyhub' } as T; + } + if (url === '/api/lobby/sessions/ABCD12') { + return { + session: { code: 'ABCD12', status: 'lobby', host_id: 1, current_round: 1, players_count: 2 }, + players: [], + round_question: null, + phase_view_model: { + status: 'lobby', + round_number: 1, + players_count: 2, + constraints: { + min_players_to_start: 2, + max_players_mvp: 8, + min_players_reached: true, + max_players_allowed: true + }, + host: { + can_start_round: true, + can_show_question: false, + can_mix_answers: false, + can_calculate_scores: false, + can_reveal_scoreboard: false, + can_start_next_round: false, + can_finish_game: false + }, + player: { + can_join: true, + can_submit_lie: false, + can_submit_guess: false, + can_view_final_result: false + } + } + } as T; + } + throw { status: 404, error: { error: 'Not found' } }; + }); + + const post = vi.fn(async (url: string) => { + if (url === '/api/lobby/sessions/join') { + return { + player: { id: 9, nickname: 'Maja', session_token: 'token-1', score: 0 }, + session: { code: 'ABCD12', status: 'lobby' } + } as T; + } + if (url === '/api/lobby/sessions/ABCD12/rounds/start') { + return { + session: { code: 'ABCD12', status: 'lie', current_round: 1 }, + round: { number: 1, category: { slug: 'history', name: 'History' } } + } as T; + } + throw { status: 404, error: { error: 'Not found' } }; + }); + + const client = createAngularApiClient({ get, post } as AngularHttpClientLike, '/api/'); + + await client.health(); + await client.getSession('abcd12'); + await client.joinSession({ code: 'abcd12', nickname: 'Maja' }); + await client.startRound('abcd12', { category_slug: 'history' }); + + expect(get).toHaveBeenNthCalledWith(1, '/api/healthz', { withCredentials: true }); + expect(get).toHaveBeenNthCalledWith(2, '/api/lobby/sessions/ABCD12', { withCredentials: true }); + expect(post).toHaveBeenNthCalledWith( + 1, + '/api/lobby/sessions/join', + { code: 'ABCD12', nickname: 'Maja' }, + { withCredentials: true } + ); + expect(post).toHaveBeenNthCalledWith( + 2, + '/api/lobby/sessions/ABCD12/rounds/start', + { category_slug: 'history' }, + { withCredentials: true } + ); + }); + it('maps HttpErrorResponse-style failures to ApiResult errors', async () => { const http = { get: vi.fn(async () => {