Files
electric-cherry/tests/client/bank-page.test.ts
T
2026-10-13 11:50:26 -04:00

218 lines
8.7 KiB
TypeScript

import { afterEach, beforeEach, expect, it, vi } from 'vitest';
import { flushSync, mount, tick, unmount } from 'svelte';
import { fromStore, writable } from 'svelte/store';
import BankPage from '../../src/routes/bank/+page.svelte';
import { readBankQuery, type BankOverview } from '../../src/lib/bank.js';
const navigation = vi.hoisted(() => ({ goto: vi.fn(), before: [] as (() => void)[] }));
const currentPage = writable({ url: new URL('http://localhost/bank'), data: { user: null } });
vi.mock('$app/stores', () => ({
page: {
subscribe: (run: Parameters<typeof currentPage.subscribe>[0]) => currentPage.subscribe(run)
},
navigating: writable(null)
}));
vi.mock('$app/navigation', () => ({
goto: navigation.goto,
beforeNavigate: (fn: () => void) => navigation.before.push(fn),
afterNavigate: vi.fn()
}));
vi.mock('../../src/lib/ui/poll.js', () => ({ pollVisible: () => () => {} }));
let component: ReturnType<typeof mount> | undefined;
beforeEach(() => {
navigation.goto.mockReset().mockResolvedValue(undefined);
navigation.before.length = 0;
});
afterEach(async () => {
if (component) await unmount(component);
component = undefined;
document.body.replaceChildren();
vi.unstubAllGlobals();
});
const account = {
guid: '18446744073709551615',
name: 'Dempsey',
balance: 2000,
available: 1500,
pendingOperation: 'withdraw' as const,
pendingAmount: 500,
lastActivity: '2026-10-13T11:00:00.000Z',
lastAmount: 2000
};
const transfer = {
id: 1,
guid: account.guid,
name: account.name,
amount: 2000,
balance: 2000,
server: 't5_zombie_theater_1',
game: 't5',
matchId: 17,
matchAvailable: 1,
createdAt: account.lastActivity
};
function report(search = ''): BankOverview {
const query = readBankQuery(new URLSearchParams(search));
return {
query,
maximum: 250000,
checkedAt: '2026-10-13T12:00:00.000Z',
summary: { totalBanked: 2000, fundedAccounts: 1, transfers24h: 1, pending: 1 },
servers: [transfer.server],
accounts: { entries: [account], total: 1, offset: 0 },
transactions: { entries: [transfer], total: 1, offset: 0 },
pending: {
entries: [{ ...transfer, requestId: 'pending-id', amount: 500, operation: 'withdraw' }],
total: 1,
offset: 0
},
detail: query.player
? {
account,
pending: null,
history: { entries: [transfer], total: 30, offset: query.historyOffset }
}
: null
};
}
function show(initial = report()) {
const data = writable({ report: initial, user: null, setupRequired: false });
const state = fromStore(data);
currentPage.set({
url: new URL(
`http://localhost/bank?${new URLSearchParams(Object.entries(initial.query).map(([key, value]) => [key, String(value)]))}`
),
data: { user: null }
});
component = mount(BankPage, {
target: document.body,
props: {
get data() {
return state.current;
}
}
});
flushSync();
return (next: BankOverview) => {
currentPage.set({
url: new URL(
`http://localhost/bank?${new URLSearchParams(Object.entries(next.query).map(([key, value]) => [key, String(value)]))}`
),
data: { user: null }
});
data.set({ report: next, user: null, setupRequired: false });
flushSync();
};
}
const button = (label: string) =>
[...document.querySelectorAll('button')].find((node) => node.textContent?.trim() === label)!;
const lastNavigation = () => new URL(navigation.goto.mock.calls.at(-1)![0], 'http://localhost');
it('opens player details without losing list filters and restores the list when closed', async () => {
const update = show(report('q=Dempsey&sort=recent&offset=25'));
button('Dempsey').click();
expect(lastNavigation().searchParams.get('player')).toBe(account.guid);
expect(lastNavigation().searchParams.get('q')).toBe('Dempsey');
expect(lastNavigation().searchParams.get('offset')).toBe('25');
update(report(`q=Dempsey&sort=recent&offset=25&player=${account.guid}`));
await tick();
expect(document.querySelector('dialog')?.open).toBe(true);
expect(document.querySelector('dialog')?.textContent).toContain('1,500 pts');
const profile = [...document.querySelectorAll('dialog a')].find((link) =>
link.textContent?.includes('View player profile')
)!;
const target = new URL(profile.getAttribute('href')!, 'http://localhost');
expect(target.searchParams.get('returnTo')).toContain(`player=${account.guid}`);
button('Next').click();
expect(lastNavigation().searchParams.get('historyOffset')).toBe('25');
expect(lastNavigation().searchParams.get('offset')).toBe('25');
button('Close').click();
expect(lastNavigation().searchParams.has('player')).toBe(false);
expect(lastNavigation().searchParams.get('sort')).toBe('recent');
});
it('applies accessible transfer filters and resets pagination while preserving player detail', () => {
show(report(`view=transactions&offset=25&player=${account.guid}`));
const search = document.querySelector<HTMLInputElement>('input[name="q"]')!;
search.value = 'Nikolai';
search.dispatchEvent(new Event('input', { bubbles: true }));
const game = document.querySelector<HTMLSelectElement>('select[name="game"]')!;
// happy-dom's :checked selector only matches inputs, not selected options.
const selectQuery = game.querySelector.bind(game);
game.querySelector = ((selector: string) =>
selector === ':checked'
? (game.selectedOptions[0] ?? null)
: selectQuery(selector)) as typeof game.querySelector;
game.value = 't6';
game.dispatchEvent(new Event('change', { bubbles: true }));
flushSync();
document
.querySelector('form')!
.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
expect(lastNavigation().searchParams.get('q')).toBe('Nikolai');
expect(lastNavigation().searchParams.get('game')).toBe('t6');
expect(lastNavigation().searchParams.has('offset')).toBe(false);
expect(lastNavigation().searchParams.get('player')).toBe(account.guid);
button('Reset').click();
expect(lastNavigation().searchParams.has('game')).toBe(false);
});
it('shows pending reservation guidance, age and historical matches without dead links', () => {
const initial = report('view=pending');
initial.pending.entries[0].matchAvailable = 0;
show(initial);
const panel = document.querySelector('#bank-results')!;
expect(panel.textContent).toContain('Waiting over 5 minutes');
expect(panel.textContent).toContain('These points are reserved');
expect(panel.textContent).toContain('Match #17 · History expired');
expect(panel.querySelector('a[href*="matches/17"]')).toBeNull();
expect(panel.querySelector('details summary')?.textContent).toBe('Why pending?');
});
it('retains data on refresh errors and successfully retries without erasing draft filters', async () => {
const fetch = vi
.fn()
.mockRejectedValueOnce(new Error('offline'))
.mockResolvedValueOnce(new Response(JSON.stringify(report())));
vi.stubGlobal('fetch', fetch);
show();
const search = document.querySelector<HTMLInputElement>('input[name="q"]')!;
search.value = 'draft';
search.dispatchEvent(new Event('input', { bubbles: true }));
button('Refresh').click();
await vi.waitFor(() => expect(document.body.textContent).toContain('Bank updates paused.'));
expect(document.querySelector('#bank-results')?.textContent).toContain('Dempsey');
button('Retry').click();
await vi.waitFor(() => expect(document.body.textContent).not.toContain('Bank updates paused.'));
expect(search.value).toBe('draft');
});
it('discards an old refresh when navigation changes the bank view', async () => {
let resolve!: (response: Response) => void;
vi.stubGlobal(
'fetch',
vi.fn(
() =>
new Promise<Response>((done) => {
resolve = done;
})
)
);
const update = show();
button('Refresh').click();
navigation.before.forEach((fn) => fn());
const next = report('view=transactions');
next.summary.totalBanked = 9000;
update(next);
resolve(new Response(JSON.stringify(report())));
await tick();
await tick();
expect(document.querySelector('.summary')?.textContent).toContain('9,000');
expect(document.querySelector('#bank-tab-transactions')?.getAttribute('aria-selected')).toBe(
'true'
);
expect(document.querySelector('#bank-results')?.textContent).toContain('Balance after');
});