// Regression tests (Node) of user playtest #4, UI-flow items: // 2 机变 picks take two taps like the shop (ui/choiceOverlay.js): the first tap selects a card (gold frame, 确认选择 · // 再次点击 strip, the header's 确认选择), the second — or 确认选择 — sends it; another card moves the selection; a card // that cannot be picked (not my turn, taken, a pick in flight) is never selected; the selection drops with it // 3 untimed phases show no timer at all: Countdown renders nothing without a deadline; the 机变 overlay of an untimed // draft (solo, a single human) shows no clock and says so // 7 the detail card's live stats (ui/detailPanel.js): battle / prep values coloured against the unit's base (green // up, red down, a shorter attack interval is up), the difference beside them, a 实时 / 开战时 tag; the battle HP // bar follows the live HP; the game screen asks g.unitStats for own board units in prep and reads the local sim in // battle // 1 (layout) on a notched phone the shop bar keeps its place at the bottom edge instead of rising by the bottom inset // over the bench pads — a bench piece is pressed / dropped on by its tile (css/devices.css) // 5 an effect-only item's card (the special 维式重锤, 突变细胞: items.json shopExcluded) says the shop never sells it // and where it comes from // (server side: test/match/unitStats.test.js, test/match/draft.test.js, test/ui/bandDraft.test.js; the runner: // test/match/runner.test.js) import { test, describe } from 'node:test'; import assert from 'node:assert/strict'; import { readFileSync } from 'node:fs'; import path from 'node:path'; import { fileURLToPath } from 'node:url'; const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../..'); const read = (p) => readFileSync(path.join(ROOT, p), 'utf8'); // the browser data store reads the real data files from disk (the card renders below) globalThis.fetch = async (url) => { const name = String(url).split('/').pop(); try { const body = readFileSync(path.join(ROOT, 'data', name), 'utf8'); return { ok: true, status: 200, json: async () => JSON.parse(body) }; } catch { return { ok: false, status: 404, json: async () => ({}) }; } }; const { ChoiceView, spTap, armedCard, cardPickable } = await import('../../public/js/ui/choiceOverlay.js'); const { ChessDetail, ItemDetail, statTone, liveStat } = await import('../../public/js/ui/detailPanel.js'); const { Button } = await import('../../public/js/ui/components.js'); const { data } = await import('../../public/js/data.js'); /** Every vnode of a preact tree (htm output), depth first; `expand` names components rendered in place (hook-free). */ function* walk(v, expand = new Set()) { if (Array.isArray(v)) { for (const x of v) yield* walk(x, expand); return; } if (!v || typeof v !== 'object') return; yield v; if (typeof v.type === 'function' && expand.has(v.type.name)) { yield* walk(v.type(v.props), expand); return; } yield* walk(v.props?.children, expand); } const textOf = (v) => { if (v == null || typeof v === 'boolean') return ''; if (typeof v === 'string' || typeof v === 'number') return String(v); if (Array.isArray(v)) return v.map(textOf).join(''); if (typeof v === 'object' && typeof v.type === 'function' && ['Stat', 'LiveTag'].includes(v.type.name)) return textOf(v.type(v.props)); return typeof v === 'object' ? textOf(v.props?.children) : ''; }; const hasClass = (v, c) => typeof v?.props?.class === 'string' && v.props.class.split(/\s+/).includes(c); // ---- 2: two-tap 机变 picks ---------------------------------------------------------------------------------------- describe('2: 机变 cards take two taps (select → confirm), like buying in the shop', () => { const sp = (o = {}) => ({ family: 'bounty', name: '悬赏决策', desc: '', untimed: false, order: ['me', 'p2'], turnPid: 'me', pickOf: new Map(), cards: [{ idx: 0, name: 'A', desc: 'a', takenBy: null }, { idx: 1, name: 'B', desc: 'b', takenBy: null }, { idx: 2, name: 'C', desc: 'c', takenBy: 'p2' }], ...o, }); const me = { myId: 'me', solo: false }; test('spTap: the first tap selects, the second on the same card confirms, another card moves the selection', () => { assert.deepEqual(spTap(null, 0, true), { armed: 0, pick: null }, 'first tap: selected, nothing sent'); assert.deepEqual(spTap(0, 0, true), { armed: null, pick: 0 }, 'second tap on it: sent'); assert.deepEqual(spTap(0, 1, true), { armed: 1, pick: null }, 'another card: the selection moves'); assert.deepEqual(spTap(1, 0, false), { armed: 1, pick: null }, 'a card that cannot be picked changes nothing'); assert.deepEqual(spTap(null, 'x', true), { armed: null, pick: null }); }); test('cardPickable / armedCard: only my turn, before my pick, a free card, nothing in flight — the selection drops otherwise', () => { const s = sp(); assert.equal(cardPickable(s, s.cards[0], me), true); assert.equal(cardPickable(s, s.cards[2], me), false, 'taken'); assert.equal(cardPickable(sp({ turnPid: 'p2' }), s.cards[0], me), false, 'not my turn'); assert.equal(cardPickable(sp({ turnPid: 'p2' }), s.cards[0], { myId: 'me', solo: true }), true, 'solo: always my turn'); assert.equal(cardPickable(sp({ pickOf: new Map([['me', 1]]) }), s.cards[0], me), false, 'after my pick'); assert.equal(cardPickable(s, s.cards[0], { ...me, busyIdx: 1 }), false, 'a pick in flight'); assert.equal(armedCard(0, s, me), 0); assert.equal(armedCard(2, s, me), null, 'a taken card is never selected'); assert.equal(armedCard(0, sp({ turnPid: 'p2' }), me), null, 'the turn moved on (timeout)'); assert.equal(armedCard(0, s, { ...me, busyIdx: 0 }), null); assert.equal(armedCard(7, s, me), null); assert.equal(armedCard(null, s, me), null); }); test('ChoiceView: the selected card lifts with a 确认选择 · 再次点击 strip, the header offers 确认选择; taps go through onTap', () => { const s = sp(); const taps = []; let confirmed = 0; const v = ChoiceView({ pub: { players: [{ playerId: 'me', seat: 0, name: 'Me' }, { playerId: 'p2', seat: 1, name: 'P2' }], deadline: 0 }, sp: s, ...me, armed: 1, onTap: (i) => taps.push(i), onConfirm: () => { confirmed++; } }); assert.ok(hasClass(v, 'has-armed')); const nodes = [...walk(v)]; const cards = nodes.filter((n) => hasClass(n, 'spcard')); assert.equal(cards.length, 3); assert.deepEqual(cards.map((c) => hasClass(c, 'is-armed')), [false, true, false]); assert.equal(cards[1].props['aria-pressed'], 'true'); assert.match(cards[1].props['aria-label'], /已选中,再次点击确认/); assert.equal(textOf(nodes.find((n) => hasClass(n, 'spcard__confirm'))), '确认选择再次点击'); const btn = nodes.find((n) => n.type === Button); assert.ok(btn && textOf(btn.props.children).includes('确认选择'), 'the header confirm'); btn.props.onClick(); assert.equal(confirmed, 1); cards[0].props.onClick(); cards[1].props.onClick(); cards[2].props.onClick(); // taken: disabled, never tapped assert.deepEqual(taps, [0, 1]); assert.equal(cards[2].props.disabled, true); // nothing selected: no strip, no confirm button, the hint says how it works const idle = [...walk(ChoiceView({ pub: { players: [] }, sp: s, ...me }))]; assert.ok(!idle.some((n) => hasClass(n, 'spcard__confirm'))); assert.ok(!idle.some((n) => n.type === Button)); assert.match(textOf(idle.find((n) => hasClass(n, 'spov__sub'))), /点击卡牌选中,再次点击确认/); }); test('3: an untimed 机变 (solo, a single human) shows no clock and says so; a timed one keeps its countdown', () => { const timed = [...walk(ChoiceView({ pub: { players: [], deadline: Date.now() + 9000 }, sp: sp(), ...me }))]; assert.ok(timed.some((n) => n.type?.name === 'Countdown')); assert.match(textOf(timed.find((n) => hasClass(n, 'spov__sub'))), /倒计时结束后仍未选定将自动分配/); const lone = [...walk(ChoiceView({ pub: { players: [], deadline: 0 }, sp: sp({ untimed: true }), ...me }))]; assert.ok(!lone.some((n) => n.type?.name === 'Countdown'), 'a single human\'s co-op draft: untimed'); assert.match(textOf(lone.find((n) => hasClass(n, 'spov__sub'))), /无时间限制/); }); test('教鞭 ChoiceView: personal heading, no global order or turn; timing follows PREP deadline', () => { const s = sp({ name: '教鞭 · 战术特训', desc: '请选择一项战术特训', cards: sp().cards.slice(0, 2) }); for (const [solo, deadline] of [[false, 0], [true, 123456]]) { let confirmed = false; const v = ChoiceView({ pub: { players: [{ playerId: 'me', name: 'Me' }, { playerId: 'p2', name: 'P2' }], deadline }, sp: s, ...me, solo, personal: true, armed: 0, total: 74, onConfirm: () => { confirmed = true; } }); const nodes = [...walk(v)]; assert.equal(v.props['aria-label'], '教鞭选择'); assert.ok(!nodes.some((n) => hasClass(n, 'spov__order'))); assert.doesNotMatch(textOf(v), /机变阶段|当前轮到|正在决策/); const clock = nodes.find((n) => n.type?.name === 'Countdown'); assert.equal(!!clock, deadline > 0); if (clock) { assert.equal(clock.props.deadline, deadline); assert.equal(clock.props.total, 74); } assert.match(textOf(nodes.find((n) => hasClass(n, 'spov__sub'))), deadline ? /休整期结束时未选择将自动选定/ : /无时间限制/); const btn = nodes.find((n) => n.type === Button); btn.props.onClick(); assert.ok(confirmed); assert.match(btn.props.title, /确认选择「A」/); assert.match(nodes.find((n) => hasClass(n, 'spcard')).props.title, /^A\na$/); } }); test('the overlay keeps the selection itself and drops it on Esc / a tap elsewhere (source contract)', () => { const src = read('public/js/ui/choiceOverlay.js'); assert.match(src, /export function ChoiceOverlay\(props\) \{[\s\S]*useState\(null\)[\s\S]*armedCard\(sel, sp/); assert.match(src, /e\.key === 'Escape'/); assert.match(src, /closest\('\.spcard, \.spov__confirm'\)/); const css = read('public/css/screens/game-panels.css'); assert.match(css, /\.spcard\.is-armed/); assert.match(css, /\.spcard__confirm \{/); }); }); // ---- 3: no timer without a deadline -------------------------------------------------------------------------------- describe('3: untimed phases show no timer', () => { test('Countdown renders nothing without a deadline (the "--" placeholder read as a timer)', () => { const comp = read('public/js/ui/components.js'); const fn = comp.slice(comp.indexOf('export function Countdown'), comp.indexOf('// ---- Modal')); assert.match(fn, /if \(remain == null\) return null;/); // after the hooks (a component may toggle between timed and untimed) assert.ok(fn.indexOf('useEffect(') < fn.indexOf('if (remain == null) return null;')); }); }); // ---- 7: live stats ------------------------------------------------------------------------------------------------- describe('7: the detail card shows live stats against the base', () => { test('statTone: higher is up, a shorter attack interval is up, rounding noise is equal', () => { assert.equal(statTone('atk', 1042, 501), 'up'); assert.equal(statTone('atk', 400, 501), 'down'); assert.equal(statTone('atk', 501.3, 501), null); assert.equal(statTone('interval', 0.9, 1.05), 'up', 'faster attacks help'); assert.equal(statTone('interval', 1.3, 1.05), 'down'); assert.equal(statTone('interval', 1.052, 1.05), null); assert.equal(statTone('res', 12.3, 10), 'up'); assert.equal(statTone('res', 10.02, 10), null); assert.equal(statTone('blockCnt', 2, 3), 'down'); assert.equal(statTone('atk', null, 3), null); }); test('liveStat: the live value with its difference and the base in the title; the record value without live stats', () => { const live = { atk: 1042, interval: 0.95, res: 12.5, base: { atk: 501, interval: 1.05, res: 10 } }; assert.deepEqual(liveStat(live, 'atk', 501), { v: '1,042', tone: 'up', sub: '+541', title: '基础 501' }); const iv = liveStat(live, 'interval', 1.05, (v) => `${v.toFixed(2)}s`); assert.deepEqual(iv, { v: '0.95s', tone: 'up', sub: '−0.10', title: '基础 1.05s' }); assert.equal(liveStat(live, 'res', 10, String).sub, '+2.5'); assert.deepEqual(liveStat(null, 'atk', 501), { v: '501', tone: null, sub: null, title: undefined }); assert.equal(liveStat(null, 'atk', null).v, '—'); assert.deepEqual(liveStat({ atk: 501, base: { atk: 501 } }, 'atk', 501), { v: '501', tone: null, sub: null, title: '基础 501' }); }); test('a rendered card: live values coloured, the 实时 / 开战时 tag, the battle HP bar from the live HP', async () => { await data.loadAll('chess', 'garrisons', 'assets', 'bonds', 'items'); const c = data.lookup('chess', 'chess_char_1_01_a'); assert.ok(c); const s = c.stats; const live = { src: 'battle', hp: 300, maxHp: Math.round(s.maxHp * 1.2), atk: Math.round(s.atk * 0.8), def: s.def, res: s.res ?? 0, interval: 0.5, blockCnt: s.blockCnt, base: { maxHp: s.maxHp, atk: s.atk, def: s.def, res: s.res ?? 0, interval: 1, blockCnt: s.blockCnt }, }; const blocks = ChessDetail({ chess: c, piece: null, editable: false, bonds: [], loadout: null, live }); const stats = blocks.find((b) => b.key === 'stats'); assert.ok(hasClass(stats, 'is-live')); assert.equal(stats.props['data-live'], 'battle'); const cells = [...walk(stats, new Set(['Stat', 'LiveTag']))].filter((n) => hasClass(n, 'dstat')); const cell = (k) => cells.find((n) => textOf(n).startsWith(k)); assert.ok(hasClass(cell('生命上限'), 'is-up')); assert.ok(hasClass(cell('攻击'), 'is-down') && !hasClass(cell('攻击间隔'), 'is-down')); assert.ok(hasClass(cell('攻击间隔'), 'is-up'), 'a shorter interval is a buff'); assert.ok(!hasClass(cell('防御'), 'is-up') && !hasClass(cell('防御'), 'is-down'), 'unchanged'); assert.ok(textOf(stats).includes('实时')); const head = blocks.find((b) => b.key === 'head'); const hp = [...walk(head)].find((n) => hasClass(n, 'dhp')); assert.ok(textOf(hp).includes(`300 / ${live.maxHp.toLocaleString('en-US')}`), 'the live HP'); // the prep preview: 开战时, no HP bar const prep = ChessDetail({ chess: c, piece: null, editable: false, bonds: [], loadout: null, live: { ...live, src: 'prep' } }); assert.ok(textOf(prep.find((b) => b.key === 'stats')).includes('开战时')); assert.ok(![...walk(prep.find((b) => b.key === 'head'))].some((n) => hasClass(n, 'dhp'))); // no live stats: the record's numbers, no tag const plain = ChessDetail({ chess: c, piece: null, editable: false, bonds: [], loadout: null }); const pstats = plain.find((b) => b.key === 'stats'); assert.ok(!hasClass(pstats, 'is-live')); assert.ok(!textOf(pstats).includes('实时') && !textOf(pstats).includes('开战时')); }); test('the game screen feeds it: g.unitStats for an own board unit in prep (newest answer only), the local sim in battle', () => { const src = read('public/js/screens/game.js'); assert.match(src, /net\.on\('m\.unitStats'/); assert.match(src, /msg\.seq !== statsSeqRef\.current/, 'only the newest request\'s answer'); assert.match(src, /net\.request\('g\.unitStats', \{ seq: statsSeqRef\.current \}\)/); assert.match(src, /battleRunner\.unitStats\(uid, fid\)/); assert.match(src, /live=\$\{liveStats\}/); const panel = read('public/js/ui/detailPanel.js'); assert.match(panel, /useTicker\(detail && getter \? 250 : 0\)/, 'a getter is re-read 4× a second'); // an own board piece's card opened in prep and left open into the battle turns live (its unit found by uid) assert.match(src, /battleRunner\.unitIdOf\(pieceUid, myId, fid\)/); }); }); // ---- 1 (layout) / 5 ------------------------------------------------------------------------------------------------ describe('1 / 5: the bench stays reachable on a notched phone; effect-only items say where they come from', () => { test('devices.css: the shop bar steps back over the HUD\'s bottom inset (it covered ~3/4 of bench pads 2–9)', () => { const css = read('public/css/devices.css'); assert.match(css, /\.gm__hud > \.shopbar \{ bottom: calc\(\.2rem - var\(--sa-b\)\); \}/); // the shop's own rule stays the desktop place (.2rem from the bottom): the inset rule only cancels the HUD inset assert.match(read('public/css/screens/game-shop.css'), /\.shopbar \{\n {2}position: absolute; right: \.26rem; bottom: \.2rem;/); }); test('ItemDetail: 调度中心不出售 + the source for the special 维式重锤 / 突变细胞, nothing for a shop item', async () => { await data.loadAll('items', 'assets'); const special = data.lookup('items', 'chess_item_4_09_e_a'); // 灼燃维式重锤 const cell = data.lookup('items', 'chess_item_5_08_e_a'); // 突变细胞 assert.ok(special?.shopExcluded && cell?.shopExcluded, 'items.json marks them'); const plain = data.list('items').find((i) => i.itemType === 'EQUIP' && !i.shopExcluded && !i.isGolden); const note = (item) => [...walk(ItemDetail({ item, piece: null, editable: false }))].find((n) => hasClass(n, 'dhint--source')); assert.match(textOf(note(special)), /调度中心不出售 · 获取途径:维多利亚盟约每25层 \/ 洛洛的定制品/); assert.match(textOf(note(cell)), /昆图斯/); assert.equal(note(plain), undefined, 'a shop item has no such line'); }); });