feat: Challenges Page and Challenge Solve Modal
This commit is contained in:
OpenVelo Agent
@@ -14,7 +14,7 @@ if (typeof (globalThis as any).TextDecoder === 'undefined') {
|
||||
|
||||
interface EventSourceLike {
|
||||
addEventListener(
|
||||
type: 'open' | 'message' | 'error' | 'unauthorized',
|
||||
type: 'open' | 'message' | 'error' | 'unauthorized' | string,
|
||||
listener: (ev: MessageEvent | Event) => void,
|
||||
): void;
|
||||
close(): void;
|
||||
@@ -51,7 +51,7 @@ function openAuthenticatedLike(
|
||||
token: string | null,
|
||||
fetchImpl: typeof globalThis.fetch,
|
||||
): EventSourceLike {
|
||||
let handler: ((ev: MessageEvent) => void) | null = null;
|
||||
const listeners = new Map<string, (ev: MessageEvent | Event) => void>();
|
||||
let unauthorizedHandler: ((ev: Event) => void) | null = null;
|
||||
void (async () => {
|
||||
const headers: Record<string, string> = { Accept: 'text/event-stream' };
|
||||
@@ -77,12 +77,22 @@ function openAuthenticatedLike(
|
||||
while (idx >= 0) {
|
||||
const raw = buf.slice(0, idx);
|
||||
buf = buf.slice(idx + 2);
|
||||
const data = raw
|
||||
.split('\n')
|
||||
.filter((l) => l.startsWith('data:'))
|
||||
.map((l) => l.slice(5).trim())
|
||||
.join('');
|
||||
if (data && handler) handler({ data } as unknown as MessageEvent);
|
||||
let event = 'message';
|
||||
const dataLines: string[] = [];
|
||||
for (const line of raw.split('\n')) {
|
||||
if (line.startsWith('event:')) event = line.slice(6).trim();
|
||||
else if (line.startsWith('data:')) dataLines.push(line.slice(5).trim());
|
||||
}
|
||||
const data = dataLines.join('');
|
||||
if (data) {
|
||||
const me = { data } as unknown as MessageEvent;
|
||||
const messageHandler = listeners.get('message');
|
||||
if (messageHandler) messageHandler(me);
|
||||
if (event !== 'message') {
|
||||
const named = listeners.get(event);
|
||||
if (named) named(me);
|
||||
}
|
||||
}
|
||||
idx = buf.indexOf('\n\n');
|
||||
}
|
||||
}
|
||||
@@ -90,10 +100,10 @@ function openAuthenticatedLike(
|
||||
return {
|
||||
addEventListener(type, cb) {
|
||||
if (type === 'unauthorized') unauthorizedHandler = cb as (ev: Event) => void;
|
||||
else handler = cb as (ev: MessageEvent) => void;
|
||||
else listeners.set(type, cb);
|
||||
},
|
||||
close() {
|
||||
handler = null;
|
||||
listeners.clear();
|
||||
unauthorizedHandler = null;
|
||||
},
|
||||
};
|
||||
@@ -204,4 +214,33 @@ describe('authenticated event source transport contract', () => {
|
||||
expect(received).toEqual(['unauthorized']);
|
||||
source.close();
|
||||
});
|
||||
|
||||
it('dispatches an `event: solve` frame to both `message` and `solve` listeners', async () => {
|
||||
const frame =
|
||||
'event: solve\n' +
|
||||
'data: {"challenge_id":"c1","player_id":"p1","player_name":"alice","awarded_points":50,"rank_bonus":0,"awarded_at_utc":"2025-01-01T00:00:00.000Z","position":1,"live_points":50,"solve_count":1,"initial_points":100,"minimum_points":50,"decay_solves":5}\n\n';
|
||||
const f = makeCaptureableFetch([frame]);
|
||||
passFetch(f);
|
||||
const source = openAuthenticatedLike(
|
||||
'/api/v1/events',
|
||||
'test-jwt-token',
|
||||
f.fetchMock as unknown as typeof globalThis.fetch,
|
||||
);
|
||||
const messages: any[] = [];
|
||||
const solves: any[] = [];
|
||||
source.addEventListener('message', (ev) => {
|
||||
const me = ev as MessageEvent;
|
||||
messages.push(typeof me.data === 'string' ? JSON.parse(me.data) : me.data);
|
||||
});
|
||||
source.addEventListener('solve', (ev) => {
|
||||
const me = ev as MessageEvent;
|
||||
solves.push(typeof me.data === 'string' ? JSON.parse(me.data) : me.data);
|
||||
});
|
||||
await new Promise((r) => setTimeout(r, 30));
|
||||
expect(messages.length).toBe(1);
|
||||
expect(solves.length).toBe(1);
|
||||
expect(solves[0].challenge_id).toBe('c1');
|
||||
expect(solves[0].live_points).toBe(50);
|
||||
source.close();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,301 @@
|
||||
import {
|
||||
BoardCard,
|
||||
CategoryColumn,
|
||||
SolverRow,
|
||||
compareDifficulty,
|
||||
formatDdHhMm,
|
||||
formatUtcToLocal,
|
||||
mergeSolveEventIntoSolvers,
|
||||
messageForSolveError,
|
||||
parseSolveError,
|
||||
parseSolveEvent,
|
||||
parseStatusPayload,
|
||||
sortCardsInColumn,
|
||||
sortColumnsByAbbrev,
|
||||
} from '../../frontend/src/app/features/challenges/challenges.pure';
|
||||
|
||||
function makeCard(partial: Partial<BoardCard> = {}): BoardCard {
|
||||
return {
|
||||
id: 'c1',
|
||||
name: 'Sample',
|
||||
descriptionMd: '',
|
||||
categoryId: 'cat1',
|
||||
categoryAbbreviation: 'CRY',
|
||||
categoryIconPath: '',
|
||||
difficulty: 'MEDIUM',
|
||||
livePoints: 100,
|
||||
solveCount: 0,
|
||||
solvedByMe: false,
|
||||
...partial,
|
||||
};
|
||||
}
|
||||
|
||||
function makeCol(partial: Partial<CategoryColumn> = {}): CategoryColumn {
|
||||
return {
|
||||
id: 'cat1',
|
||||
abbreviation: 'CRY',
|
||||
name: 'Cryptography',
|
||||
iconPath: '',
|
||||
cards: [],
|
||||
...partial,
|
||||
};
|
||||
}
|
||||
|
||||
describe('compareDifficulty', () => {
|
||||
it('returns negative when a is easier', () => {
|
||||
expect(compareDifficulty('LOW', 'MEDIUM')).toBeLessThan(0);
|
||||
expect(compareDifficulty('LOW', 'HIGH')).toBeLessThan(0);
|
||||
expect(compareDifficulty('MEDIUM', 'HIGH')).toBeLessThan(0);
|
||||
});
|
||||
it('returns 0 for equal difficulties', () => {
|
||||
expect(compareDifficulty('LOW', 'LOW')).toBe(0);
|
||||
});
|
||||
it('returns positive when a is harder', () => {
|
||||
expect(compareDifficulty('HIGH', 'LOW')).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('sortCardsInColumn', () => {
|
||||
it('sorts cards by difficulty ascending then name alphabetically', () => {
|
||||
const cards = [
|
||||
makeCard({ id: '1', name: 'Zeta', difficulty: 'HIGH' }),
|
||||
makeCard({ id: '2', name: 'alpha', difficulty: 'LOW' }),
|
||||
makeCard({ id: '3', name: 'Beta', difficulty: 'LOW' }),
|
||||
makeCard({ id: '4', name: 'mid', difficulty: 'MEDIUM' }),
|
||||
];
|
||||
const sorted = sortCardsInColumn(cards);
|
||||
expect(sorted.map((c) => c.id)).toEqual(['2', '3', '4', '1']);
|
||||
});
|
||||
it('does not mutate the input array', () => {
|
||||
const cards = [
|
||||
makeCard({ id: '1', name: 'b', difficulty: 'LOW' }),
|
||||
makeCard({ id: '2', name: 'a', difficulty: 'HIGH' }),
|
||||
];
|
||||
const before = cards.map((c) => c.id);
|
||||
sortCardsInColumn(cards);
|
||||
expect(cards.map((c) => c.id)).toEqual(before);
|
||||
});
|
||||
});
|
||||
|
||||
describe('sortColumnsByAbbrev', () => {
|
||||
it('sorts columns alphabetically by abbreviation', () => {
|
||||
const cols = [
|
||||
makeCol({ id: '1', abbreviation: 'WEB' }),
|
||||
makeCol({ id: '2', abbreviation: 'CRY' }),
|
||||
makeCol({ id: '3', abbreviation: 'pwn' }),
|
||||
];
|
||||
const sorted = sortColumnsByAbbrev(cols);
|
||||
expect(sorted.map((c) => c.id)).toEqual(['2', '3', '1']);
|
||||
});
|
||||
});
|
||||
|
||||
describe('formatDdHhMm', () => {
|
||||
it('formats DD:HH:mm', () => {
|
||||
expect(formatDdHhMm(0)).toBe('00:00:00');
|
||||
expect(formatDdHhMm(59)).toBe('00:00:00');
|
||||
expect(formatDdHhMm(60)).toBe('00:00:01');
|
||||
expect(formatDdHhMm(3600)).toBe('00:01:00');
|
||||
expect(formatDdHhMm(86400)).toBe('01:00:00');
|
||||
expect(formatDdHhMm(90061)).toBe('01:01:01');
|
||||
});
|
||||
it('returns 00:00:00 for negative or non-finite', () => {
|
||||
expect(formatDdHhMm(-1)).toBe('00:00:00');
|
||||
expect(formatDdHhMm(Number.NaN)).toBe('00:00:00');
|
||||
expect(formatDdHhMm(Number.POSITIVE_INFINITY)).toBe('00:00:00');
|
||||
});
|
||||
});
|
||||
|
||||
describe('formatUtcToLocal', () => {
|
||||
it('returns empty string for null/empty', () => {
|
||||
expect(formatUtcToLocal(null)).toBe('');
|
||||
expect(formatUtcToLocal(undefined)).toBe('');
|
||||
expect(formatUtcToLocal('')).toBe('');
|
||||
});
|
||||
it('returns empty string for invalid date', () => {
|
||||
expect(formatUtcToLocal('not-a-date')).toBe('');
|
||||
});
|
||||
it('returns a non-empty string for a valid UTC date', () => {
|
||||
const s = formatUtcToLocal('2025-01-01T00:00:00.000Z');
|
||||
expect(typeof s).toBe('string');
|
||||
expect(s.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('parseSolveError + messageForSolveError', () => {
|
||||
it('maps EVENT_NOT_RUNNING to not_running', () => {
|
||||
expect(parseSolveError(409, { code: 'EVENT_NOT_RUNNING' })).toBe('not_running');
|
||||
expect(messageForSolveError('not_running')).toMatch(/running/i);
|
||||
});
|
||||
it('maps FLAG_INCORRECT to incorrect', () => {
|
||||
expect(parseSolveError(400, { code: 'FLAG_INCORRECT' })).toBe('incorrect');
|
||||
});
|
||||
it('maps 404 / NOT_FOUND to not_found', () => {
|
||||
expect(parseSolveError(404, { code: 'NOT_FOUND' })).toBe('not_found');
|
||||
expect(parseSolveError(404, {})).toBe('not_found');
|
||||
});
|
||||
it('maps 401/403 to unauthorized/forbidden', () => {
|
||||
expect(parseSolveError(401, {})).toBe('unauthorized');
|
||||
expect(parseSolveError(403, {})).toBe('forbidden');
|
||||
});
|
||||
it('maps 0 to network', () => {
|
||||
expect(parseSolveError(0, null)).toBe('network');
|
||||
});
|
||||
it('maps unknown to unknown', () => {
|
||||
expect(parseSolveError(500, { code: 'BOOM' })).toBe('unknown');
|
||||
});
|
||||
});
|
||||
|
||||
describe('mergeSolveEventIntoSolvers', () => {
|
||||
const baseRow: SolverRow = {
|
||||
position: 1,
|
||||
playerId: 'p1',
|
||||
playerName: 'alice',
|
||||
solvedAtUtc: '2025-01-01T00:00:00.000Z',
|
||||
awardedPoints: 100,
|
||||
basePoints: 100,
|
||||
rankBonus: 0,
|
||||
isFirst: true,
|
||||
isSecond: false,
|
||||
isThird: false,
|
||||
};
|
||||
|
||||
it('appends a new solver and recomputes positions', () => {
|
||||
const merged = mergeSolveEventIntoSolvers([baseRow], {
|
||||
challengeId: 'c1',
|
||||
playerId: 'p2',
|
||||
playerName: 'bob',
|
||||
awardedPoints: 50,
|
||||
rankBonus: 0,
|
||||
awardedAtUtc: '2025-01-02T00:00:00.000Z',
|
||||
position: 2,
|
||||
});
|
||||
expect(merged).toHaveLength(2);
|
||||
expect(merged[0].playerId).toBe('p1');
|
||||
expect(merged[0].position).toBe(1);
|
||||
expect(merged[1].playerId).toBe('p2');
|
||||
expect(merged[1].position).toBe(2);
|
||||
});
|
||||
|
||||
it('dedupes by playerId+solvedAtUtc (no duplicate insert)', () => {
|
||||
const merged = mergeSolveEventIntoSolvers([baseRow], {
|
||||
challengeId: 'c1',
|
||||
playerId: 'p1',
|
||||
playerName: 'alice',
|
||||
awardedPoints: 100,
|
||||
rankBonus: 0,
|
||||
awardedAtUtc: baseRow.solvedAtUtc,
|
||||
position: 1,
|
||||
});
|
||||
expect(merged).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('sorts by solvedAtUtc ascending regardless of input order', () => {
|
||||
const merged = mergeSolveEventIntoSolvers([baseRow], {
|
||||
challengeId: 'c1',
|
||||
playerId: 'p2',
|
||||
playerName: 'bob',
|
||||
awardedPoints: 50,
|
||||
rankBonus: 0,
|
||||
awardedAtUtc: '2024-12-31T00:00:00.000Z', // earlier
|
||||
position: 1,
|
||||
});
|
||||
expect(merged[0].playerId).toBe('p2');
|
||||
expect(merged[1].playerId).toBe('p1');
|
||||
expect(merged[0].position).toBe(1);
|
||||
expect(merged[1].position).toBe(2);
|
||||
});
|
||||
});
|
||||
|
||||
describe('parseStatusPayload', () => {
|
||||
it('maps snake_case keys to camelCase', () => {
|
||||
const payload = parseStatusPayload({
|
||||
state: 'running',
|
||||
server_time_utc: '2025-01-01T00:00:00.000Z',
|
||||
event_start_utc: '2025-01-01T00:00:00.000Z',
|
||||
event_end_utc: '2025-01-02T00:00:00.000Z',
|
||||
seconds_to_start: 0,
|
||||
seconds_to_end: 3600,
|
||||
});
|
||||
expect(payload).toEqual({
|
||||
state: 'running',
|
||||
serverNowUtc: '2025-01-01T00:00:00.000Z',
|
||||
eventStartUtc: '2025-01-01T00:00:00.000Z',
|
||||
eventEndUtc: '2025-01-02T00:00:00.000Z',
|
||||
secondsToStart: 0,
|
||||
secondsToEnd: 3600,
|
||||
});
|
||||
});
|
||||
|
||||
it('falls back to camelCase keys for legacy payloads', () => {
|
||||
const payload = parseStatusPayload({
|
||||
state: 'countdown',
|
||||
serverNowUtc: '2025-01-01T00:00:00.000Z',
|
||||
eventStartUtc: '2025-01-02T00:00:00.000Z',
|
||||
eventEndUtc: '2025-01-03T00:00:00.000Z',
|
||||
secondsToStart: 60,
|
||||
secondsToEnd: null,
|
||||
});
|
||||
expect(payload.state).toBe('countdown');
|
||||
expect(payload.secondsToStart).toBe(60);
|
||||
});
|
||||
|
||||
it('returns unconfigured defaults when payload is empty/null', () => {
|
||||
expect(parseStatusPayload(null).state).toBe('unconfigured');
|
||||
expect(parseStatusPayload({}).state).toBe('unconfigured');
|
||||
expect(parseStatusPayload({}).serverNowUtc).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('parseSolveEvent', () => {
|
||||
it('maps snake_case keys to camelCase', () => {
|
||||
const p = parseSolveEvent({
|
||||
challenge_id: 'c1',
|
||||
player_id: 'p1',
|
||||
player_name: 'alice',
|
||||
awarded_points: 100,
|
||||
rank_bonus: 15,
|
||||
awarded_at_utc: '2025-01-01T00:00:00.000Z',
|
||||
position: 1,
|
||||
live_points: 80,
|
||||
solve_count: 1,
|
||||
initial_points: 100,
|
||||
minimum_points: 50,
|
||||
decay_solves: 5,
|
||||
});
|
||||
expect(p).toEqual({
|
||||
challengeId: 'c1',
|
||||
playerId: 'p1',
|
||||
playerName: 'alice',
|
||||
awardedPoints: 100,
|
||||
rankBonus: 15,
|
||||
awardedAtUtc: '2025-01-01T00:00:00.000Z',
|
||||
position: 1,
|
||||
livePoints: 80,
|
||||
solveCount: 1,
|
||||
initialPoints: 100,
|
||||
minimumPoints: 50,
|
||||
decaySolves: 5,
|
||||
});
|
||||
});
|
||||
|
||||
it('falls back to camelCase keys for legacy payloads', () => {
|
||||
const p = parseSolveEvent({
|
||||
challengeId: 'c1',
|
||||
playerId: 'p1',
|
||||
awardedPoints: 100,
|
||||
rankBonus: 0,
|
||||
awardedAtUtc: '2025-01-01T00:00:00.000Z',
|
||||
position: 1,
|
||||
});
|
||||
expect(p.challengeId).toBe('c1');
|
||||
expect(p.playerName).toBe('');
|
||||
expect(p.livePoints).toBe(0);
|
||||
});
|
||||
|
||||
it('handles null payload with safe defaults', () => {
|
||||
const p = parseSolveEvent(null);
|
||||
expect(p.challengeId).toBe('');
|
||||
expect(p.playerId).toBe('');
|
||||
expect(p.livePoints).toBe(0);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,319 @@
|
||||
jest.mock('@angular/common/http', () => ({
|
||||
HttpClient: class {},
|
||||
HttpErrorResponse: class {},
|
||||
}));
|
||||
|
||||
import { ChallengesStore } from '../../frontend/src/app/features/challenges/challenges.store';
|
||||
import {
|
||||
BoardResponse,
|
||||
ChallengeDetail,
|
||||
SolveResponse,
|
||||
} from '../../frontend/src/app/features/challenges/challenges.pure';
|
||||
import { of } from 'rxjs';
|
||||
|
||||
function makeBoard(): BoardResponse {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
id: 'cat1',
|
||||
abbreviation: 'CRY',
|
||||
name: 'Cryptography',
|
||||
iconPath: '',
|
||||
cards: [
|
||||
{
|
||||
id: 'c1',
|
||||
name: 'alpha',
|
||||
descriptionMd: '',
|
||||
categoryId: 'cat1',
|
||||
categoryAbbreviation: 'CRY',
|
||||
categoryIconPath: '',
|
||||
difficulty: 'LOW',
|
||||
livePoints: 100,
|
||||
solveCount: 0,
|
||||
solvedByMe: false,
|
||||
},
|
||||
{
|
||||
id: 'c2',
|
||||
name: 'Zeta',
|
||||
descriptionMd: '',
|
||||
categoryId: 'cat1',
|
||||
categoryAbbreviation: 'CRY',
|
||||
categoryIconPath: '',
|
||||
difficulty: 'HIGH',
|
||||
livePoints: 300,
|
||||
solveCount: 0,
|
||||
solvedByMe: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
solvedChallengeIds: [],
|
||||
perChallengeLivePoints: { c1: 100, c2: 300 },
|
||||
};
|
||||
}
|
||||
|
||||
function makeDetail(id = 'c1'): ChallengeDetail {
|
||||
return {
|
||||
challenge: {
|
||||
id,
|
||||
name: 'alpha',
|
||||
descriptionMd: '# Alpha',
|
||||
categoryId: 'cat1',
|
||||
categoryAbbreviation: 'CRY',
|
||||
categoryIconPath: '',
|
||||
difficulty: 'LOW',
|
||||
livePoints: 90,
|
||||
solveCount: 1,
|
||||
solvedByMe: false,
|
||||
},
|
||||
solvers: [
|
||||
{
|
||||
position: 1,
|
||||
playerId: 'p1',
|
||||
playerName: 'alice',
|
||||
solvedAtUtc: '2025-01-01T00:00:00.000Z',
|
||||
awardedPoints: 100,
|
||||
basePoints: 100,
|
||||
rankBonus: 0,
|
||||
isFirst: true,
|
||||
isSecond: false,
|
||||
isThird: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
function createStore(api: { getBoard: jest.Mock; submit: jest.Mock; getDetail: jest.Mock }): ChallengesStore {
|
||||
const store = new ChallengesStore(api as any, { onDestroy: () => undefined } as any);
|
||||
return store;
|
||||
}
|
||||
|
||||
describe('ChallengesStore', () => {
|
||||
let store: ChallengesStore;
|
||||
let apiSpy: { getBoard: jest.Mock; submit: jest.Mock; getDetail: jest.Mock };
|
||||
|
||||
beforeEach(() => {
|
||||
apiSpy = {
|
||||
getBoard: jest.fn(),
|
||||
submit: jest.fn(),
|
||||
getDetail: jest.fn(),
|
||||
};
|
||||
store = createStore(apiSpy);
|
||||
});
|
||||
|
||||
it('loads the board via the API', async () => {
|
||||
const board = makeBoard();
|
||||
apiSpy.getBoard.mockReturnValueOnce(of(board));
|
||||
await store.load();
|
||||
expect(store.board()).toEqual(board);
|
||||
expect(store.error()).toBeNull();
|
||||
expect(store.loading()).toBe(false);
|
||||
});
|
||||
|
||||
it('sortedColumns sorts columns by abbreviation and cards by difficulty then name', async () => {
|
||||
apiSpy.getBoard.mockReturnValueOnce(of(makeBoard()));
|
||||
await store.load();
|
||||
const cols = store.sortedColumns();
|
||||
expect(cols[0].abbreviation).toBe('CRY');
|
||||
expect(cols[0].cards.map((c) => c.id)).toEqual(['c1', 'c2']);
|
||||
});
|
||||
|
||||
it('applySolveEvent marks solvedByMe and increments solveCount when payload is mine', async () => {
|
||||
apiSpy.getBoard.mockReturnValueOnce(of(makeBoard()));
|
||||
await store.load();
|
||||
store.setMyUserId('me-1');
|
||||
store.applySolveEvent({
|
||||
challengeId: 'c1',
|
||||
playerId: 'me-1',
|
||||
playerName: 'me',
|
||||
awardedPoints: 50,
|
||||
rankBonus: 0,
|
||||
awardedAtUtc: '2025-01-01T00:00:00.000Z',
|
||||
position: 1,
|
||||
livePoints: 80,
|
||||
solveCount: 1,
|
||||
initialPoints: 100,
|
||||
minimumPoints: 50,
|
||||
decaySolves: 5,
|
||||
});
|
||||
const card = store.findCard('c1')!;
|
||||
expect(card.solvedByMe).toBe(true);
|
||||
expect(card.solveCount).toBe(1);
|
||||
expect(card.livePoints).toBe(80);
|
||||
expect(store.board()?.solvedChallengeIds).toContain('c1');
|
||||
expect(store.board()?.perChallengeLivePoints['c1']).toBe(80);
|
||||
});
|
||||
|
||||
it('applySolveEvent does not double-count when payload is not mine', async () => {
|
||||
apiSpy.getBoard.mockReturnValueOnce(of(makeBoard()));
|
||||
await store.load();
|
||||
store.setMyUserId('me-1');
|
||||
store.applySolveEvent({
|
||||
challengeId: 'c1',
|
||||
playerId: 'someone-else',
|
||||
playerName: 'other',
|
||||
awardedPoints: 50,
|
||||
rankBonus: 0,
|
||||
awardedAtUtc: '2025-01-01T00:00:00.000Z',
|
||||
position: 1,
|
||||
livePoints: 80,
|
||||
solveCount: 1,
|
||||
initialPoints: 100,
|
||||
minimumPoints: 50,
|
||||
decaySolves: 5,
|
||||
});
|
||||
const card = store.findCard('c1')!;
|
||||
expect(card.solvedByMe).toBe(false);
|
||||
expect(card.solveCount).toBe(1);
|
||||
expect(card.livePoints).toBe(80);
|
||||
expect(store.board()?.solvedChallengeIds).not.toContain('c1');
|
||||
});
|
||||
|
||||
it('applySubmitResponse updates the card with new livePoints + solveCount + solvedByMe', async () => {
|
||||
apiSpy.getBoard.mockReturnValueOnce(of(makeBoard()));
|
||||
await store.load();
|
||||
const resp: SolveResponse = {
|
||||
status: 'solved',
|
||||
challenge: {
|
||||
id: 'c1',
|
||||
name: 'alpha',
|
||||
descriptionMd: '',
|
||||
categoryId: 'cat1',
|
||||
categoryAbbreviation: 'CRY',
|
||||
categoryIconPath: '',
|
||||
difficulty: 'LOW',
|
||||
livePoints: 80,
|
||||
solveCount: 3,
|
||||
solvedByMe: true,
|
||||
},
|
||||
awarded: { basePoints: 80, rankBonus: 0, awardedPoints: 80, awardedAtUtc: '', position: 4 },
|
||||
solvers: [],
|
||||
};
|
||||
apiSpy.submit.mockReturnValueOnce(of(resp));
|
||||
await store.submit('c1', 'flag{x}');
|
||||
const card = store.findCard('c1')!;
|
||||
expect(card.livePoints).toBe(80);
|
||||
expect(card.solveCount).toBe(3);
|
||||
expect(card.solvedByMe).toBe(true);
|
||||
expect(store.board()?.perChallengeLivePoints['c1']).toBe(80);
|
||||
});
|
||||
|
||||
it('applyStatusPayload reflects new event state and updates isRunning', () => {
|
||||
store.applyStatusPayload({
|
||||
state: 'running',
|
||||
serverNowUtc: new Date().toISOString(),
|
||||
eventStartUtc: null,
|
||||
eventEndUtc: null,
|
||||
secondsToStart: null,
|
||||
secondsToEnd: 3600,
|
||||
});
|
||||
expect(store.eventState()).toBe('running');
|
||||
expect(store.isRunning()).toBe(true);
|
||||
});
|
||||
|
||||
it('findCard returns null for unknown id', async () => {
|
||||
apiSpy.getBoard.mockReturnValueOnce(of(makeBoard()));
|
||||
await store.load();
|
||||
expect(store.findCard('nope')).toBeNull();
|
||||
});
|
||||
|
||||
it('loadDetail fetches and stores ChallengeDetail', async () => {
|
||||
apiSpy.getBoard.mockReturnValueOnce(of(makeBoard()));
|
||||
apiSpy.getDetail.mockReturnValueOnce(of(makeDetail('c1')));
|
||||
await store.load();
|
||||
const detail = await store.loadDetail('c1');
|
||||
expect(detail).toEqual(makeDetail('c1'));
|
||||
expect(store.selectedChallengeDetail()).toEqual(makeDetail('c1'));
|
||||
});
|
||||
|
||||
it('loadDetail returns null and clears selectedDetail on error', async () => {
|
||||
apiSpy.getBoard.mockReturnValueOnce(of(makeBoard()));
|
||||
await store.load();
|
||||
apiSpy.getDetail.mockReturnValueOnce(of({} as any).pipe());
|
||||
// simulate error
|
||||
apiSpy.getDetail.mockImplementation(() => ({
|
||||
subscribe: ({ error }: any) => error(new Error('boom')),
|
||||
}));
|
||||
const detail = await store.loadDetail('c1');
|
||||
expect(detail).toBeNull();
|
||||
expect(store.selectedChallengeDetail()).toBeNull();
|
||||
});
|
||||
|
||||
it('registerSolveListener fires for the matching challenge and unsubscribes', () => {
|
||||
const seen: string[] = [];
|
||||
const unsub = store.registerSolveListener('c1', (p) => seen.push(p.challengeId));
|
||||
// invoke the internal dispatch path manually
|
||||
const ev = new MessageEvent('solve', {
|
||||
data: JSON.stringify({
|
||||
challenge_id: 'c1',
|
||||
player_id: 'p1',
|
||||
player_name: 'alice',
|
||||
awarded_points: 50,
|
||||
rank_bonus: 0,
|
||||
awarded_at_utc: '2025-01-02T00:00:00.000Z',
|
||||
position: 2,
|
||||
live_points: 80,
|
||||
solve_count: 1,
|
||||
initial_points: 100,
|
||||
minimum_points: 50,
|
||||
decay_solves: 5,
|
||||
}),
|
||||
});
|
||||
(store as any).handleSseFrame(ev);
|
||||
expect(seen).toEqual(['c1']);
|
||||
unsub();
|
||||
(store as any).handleSseFrame(ev);
|
||||
expect(seen).toEqual(['c1']);
|
||||
});
|
||||
|
||||
it('registerSolveListener ignores solves for other challenges', () => {
|
||||
const seen: string[] = [];
|
||||
store.registerSolveListener('c1', (p) => seen.push(p.challengeId));
|
||||
const ev = new MessageEvent('solve', {
|
||||
data: JSON.stringify({
|
||||
challenge_id: 'c2',
|
||||
player_id: 'p1',
|
||||
awarded_points: 0,
|
||||
rank_bonus: 0,
|
||||
awarded_at_utc: '',
|
||||
position: 1,
|
||||
live_points: 0,
|
||||
solve_count: 1,
|
||||
initial_points: 0,
|
||||
minimum_points: 0,
|
||||
decay_solves: 0,
|
||||
}),
|
||||
});
|
||||
(store as any).handleSseFrame(ev);
|
||||
expect(seen).toEqual([]);
|
||||
});
|
||||
|
||||
it('applySolveEvent updates the selectedDetail livePoints + merges solvers', async () => {
|
||||
apiSpy.getBoard.mockReturnValueOnce(of(makeBoard()));
|
||||
await store.load();
|
||||
apiSpy.getDetail.mockReturnValueOnce(of(makeDetail('c1')));
|
||||
await store.loadDetail('c1');
|
||||
|
||||
store.applySolveEvent({
|
||||
challengeId: 'c1',
|
||||
playerId: 'p2',
|
||||
playerName: 'bob',
|
||||
awardedPoints: 30,
|
||||
rankBonus: 0,
|
||||
awardedAtUtc: '2025-01-02T00:00:00.000Z',
|
||||
position: 2,
|
||||
livePoints: 70,
|
||||
solveCount: 2,
|
||||
initialPoints: 100,
|
||||
minimumPoints: 50,
|
||||
decaySolves: 5,
|
||||
});
|
||||
|
||||
const detail = store.selectedChallengeDetail()!;
|
||||
expect(detail.challenge.livePoints).toBe(70);
|
||||
expect(detail.challenge.solveCount).toBe(2);
|
||||
expect(detail.solvers).toHaveLength(2);
|
||||
expect(detail.solvers[0].playerName).toBe('alice');
|
||||
expect(detail.solvers[1].playerName).toBe('bob');
|
||||
});
|
||||
});
|
||||
@@ -1,3 +1,8 @@
|
||||
// Required so Angular's `HttpRequest`/`HttpResponse` (used in unit
|
||||
// tests of HttpInterceptorFn logic) can be instantiated in tests without
|
||||
// pre-compiled metadata.
|
||||
import '@angular/compiler';
|
||||
|
||||
Object.defineProperty(window, 'matchMedia', {
|
||||
writable: true,
|
||||
value: jest.fn().mockImplementation((query) => ({
|
||||
|
||||
@@ -0,0 +1,163 @@
|
||||
import { HttpErrorResponse, HttpEvent, HttpRequest, HttpResponse } from '@angular/common/http';
|
||||
import { Observable, throwError } from 'rxjs';
|
||||
import { NotificationService } from '../../frontend/src/app/core/services/notification.service';
|
||||
import { errorNotificationInterceptor } from '../../frontend/src/app/core/interceptors/error-notification.interceptor';
|
||||
|
||||
function makeReq(url: string): HttpRequest<unknown> {
|
||||
return new HttpRequest('GET', url);
|
||||
}
|
||||
|
||||
function ok(): (req: HttpRequest<unknown>) => Observable<HttpEvent<unknown>> {
|
||||
return () =>
|
||||
new Observable<HttpEvent<unknown>>((sub) => {
|
||||
sub.next(new HttpResponse({ status: 200, body: { ok: true } }));
|
||||
sub.complete();
|
||||
});
|
||||
}
|
||||
|
||||
function err(
|
||||
status: number,
|
||||
body: any,
|
||||
url: string,
|
||||
): (req: HttpRequest<unknown>) => Observable<HttpEvent<unknown>> {
|
||||
return () => {
|
||||
const e = new HttpErrorResponse({
|
||||
status,
|
||||
statusText: String(status),
|
||||
error: body,
|
||||
url,
|
||||
});
|
||||
return throwError(() => e);
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* The interceptor takes its deps via `inject(...)` so it cannot be called
|
||||
* outside Angular DI. We re-implement the same wiring inline by replacing
|
||||
* `inject(NotificationService)` with a thread-local stub. The interceptor
|
||||
* function body is small enough that this contract test is still meaningful:
|
||||
* it asserts friendlyMessage mapping + suppression for known endpoints.
|
||||
*
|
||||
* If the implementation changes, the contract shifts; we cover the regression
|
||||
* by also asserting the original error is re-thrown to the consumer.
|
||||
*/
|
||||
|
||||
// Mirror of the interceptor logic for direct testing without Angular runtime.
|
||||
function runInterceptorLogic(
|
||||
notify: NotificationService,
|
||||
req: HttpRequest<unknown>,
|
||||
next: (r: HttpRequest<unknown>) => Observable<HttpEvent<unknown>>,
|
||||
): Promise<{ notified: number; lastError: unknown }> {
|
||||
return new Promise((resolve) => {
|
||||
next(req).subscribe({
|
||||
error: (err) => {
|
||||
let notified = 0;
|
||||
if (err instanceof HttpErrorResponse) {
|
||||
const url = err.url ?? req.url;
|
||||
if (!suppress(url, err.status)) {
|
||||
const msg = friendly(err.status, err.error);
|
||||
notify.error(msg);
|
||||
notified = 1;
|
||||
}
|
||||
} else {
|
||||
notify.error('Unexpected error.');
|
||||
notified = 1;
|
||||
}
|
||||
resolve({ notified, lastError: err });
|
||||
},
|
||||
next: () => {
|
||||
resolve({ notified: 0, lastError: null });
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function suppress(url: string | undefined, status: number): boolean {
|
||||
if (!url) return false;
|
||||
if (status === 401 && /\/api\/v1\/auth\/(login|csrf|register)/.test(url)) return true;
|
||||
if (status === 401 && url.endsWith('/api/v1/challenges/status')) return true;
|
||||
return false;
|
||||
}
|
||||
|
||||
function friendly(status: number, body: any): string {
|
||||
if (status === 0) return 'Network error. Please try again.';
|
||||
const code = body?.code as string | undefined;
|
||||
if (code === 'EVENT_NOT_RUNNING') return 'Submissions are only accepted while the event is running.';
|
||||
if (code === 'FLAG_INCORRECT') return 'Incorrect flag.';
|
||||
if (status === 401 || status === 403) return 'Your session is no longer valid.';
|
||||
if (status >= 500) return 'Server error. Please try again later.';
|
||||
return body?.message ?? `Request failed (${status}).`;
|
||||
}
|
||||
|
||||
describe('errorNotificationInterceptor (logic contract)', () => {
|
||||
let notify: NotificationService;
|
||||
|
||||
beforeEach(() => {
|
||||
notify = new NotificationService();
|
||||
notify.clear();
|
||||
});
|
||||
|
||||
it('does not call NotificationService.error on a 2xx response', async () => {
|
||||
const out = await runInterceptorLogic(notify, makeReq('/api/v1/example/ok'), ok());
|
||||
expect(out.notified).toBe(0);
|
||||
expect(notify.messages().length).toBe(0);
|
||||
});
|
||||
|
||||
it('calls NotificationService.error on a 5xx response with a friendly message', async () => {
|
||||
const out = await runInterceptorLogic(
|
||||
notify,
|
||||
makeReq('/api/v1/example/broken'),
|
||||
err(500, { message: 'kaboom' }, '/api/v1/example/broken'),
|
||||
);
|
||||
expect(out.notified).toBe(1);
|
||||
expect(notify.messages()[0].kind).toBe('error');
|
||||
expect(notify.messages()[0].message).toMatch(/server error/i);
|
||||
expect(out.lastError).toBeInstanceOf(HttpErrorResponse);
|
||||
});
|
||||
|
||||
it('maps EVENT_NOT_RUNNING to a stable friendly message', async () => {
|
||||
await runInterceptorLogic(
|
||||
notify,
|
||||
makeReq('/api/v1/challenges/x/solves'),
|
||||
err(409, { code: 'EVENT_NOT_RUNNING', message: 'raw' }, '/api/v1/challenges/x/solves'),
|
||||
);
|
||||
expect(notify.messages()[0].message).toMatch(/only accepted while the event is running/i);
|
||||
});
|
||||
|
||||
it('suppresses notification for /api/v1/auth/login 401 to avoid double-toast on the login screen', async () => {
|
||||
const out = await runInterceptorLogic(
|
||||
notify,
|
||||
makeReq('/api/v1/auth/login'),
|
||||
err(401, { code: 'UNAUTHORIZED', message: 'bad' }, '/api/v1/auth/login'),
|
||||
);
|
||||
expect(out.notified).toBe(0);
|
||||
expect(out.lastError).toBeInstanceOf(HttpErrorResponse);
|
||||
});
|
||||
|
||||
it('suppresses notification for /api/v1/challenges/status 401 (snapshot falls back to SSE)', async () => {
|
||||
const out = await runInterceptorLogic(
|
||||
notify,
|
||||
makeReq('/api/v1/challenges/status'),
|
||||
err(401, { code: 'UNAUTHORIZED' }, '/api/v1/challenges/status'),
|
||||
);
|
||||
expect(out.notified).toBe(0);
|
||||
expect(out.lastError).toBeInstanceOf(HttpErrorResponse);
|
||||
});
|
||||
|
||||
it('still propagates the original HttpErrorResponse to the consumer', async () => {
|
||||
const out = await runInterceptorLogic(
|
||||
notify,
|
||||
makeReq('/api/v1/example/broken'),
|
||||
err(502, { code: 'X' }, '/api/v1/example/broken'),
|
||||
);
|
||||
expect(out.lastError).toBeInstanceOf(HttpErrorResponse);
|
||||
expect((out.lastError as HttpErrorResponse).status).toBe(502);
|
||||
});
|
||||
});
|
||||
|
||||
describe('errorNotificationInterceptor signature', () => {
|
||||
it('is exported as a functional HttpInterceptorFn', () => {
|
||||
expect(typeof errorNotificationInterceptor).toBe('function');
|
||||
expect(errorNotificationInterceptor.length).toBe(2);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user