diff --git a/public/style.css b/public/style.css index f6c932752..5a72043eb 100644 --- a/public/style.css +++ b/public/style.css @@ -2620,12 +2620,12 @@ button.ch-item:hover .ch-icon-btn { opacity: 1; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } -/* Favorite stars — Phosphor sprite, 44×44 hit target (WCAG 2.5.5) */ +/* Favorite stars — Phosphor sprite, 48×48 hit target (the house minimum, #2052) */ .fav-star { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0; line-height: 1; transition: color .15s, transform .15s; - min-width: 44px; min-height: 44px; + min-width: 48px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; } .fav-star .ph-icon { width: 22px; height: 22px; } diff --git a/test-all.sh b/test-all.sh index 4ea0fa42d..b0fffb55d 100755 --- a/test-all.sh +++ b/test-all.sh @@ -143,6 +143,7 @@ run test-issue-111-drawer-version.js # Previously run only by the JS unit step in deploy.yml (#174) run test-packet-filter-time.js +run test-packets.js run test-confidence-indicator.js run test-1659-analytics-warmup.js run test-analytics-tab-state-and-query.js diff --git a/test-issue-1648-m2-icons-e2e.js b/test-issue-1648-m2-icons-e2e.js index 301b041bf..83321e593 100644 --- a/test-issue-1648-m2-icons-e2e.js +++ b/test-issue-1648-m2-icons-e2e.js @@ -260,8 +260,8 @@ async function main() { else { if (favProbe.aria !== 'Toggle favorite') fail(`(j) /nodes fav-star: aria-label missing/wrong (got "${favProbe.aria}")`); else pass('(j) /nodes fav-star has aria-label="Toggle favorite"'); - if (favProbe.w < 44 || favProbe.h < 44) fail(`(j) /nodes fav-star bbox ${favProbe.w}x${favProbe.h} < 44x44 (WCAG 2.5.5)`); - else pass(`(j) /nodes fav-star bbox ${favProbe.w}x${favProbe.h} ≥ 44x44`); + if (favProbe.w < 48 || favProbe.h < 48) fail(`(j) /nodes fav-star bbox ${favProbe.w}x${favProbe.h} < 48x48 (house minimum, #2052)`); + else pass(`(j) /nodes fav-star bbox ${favProbe.w}x${favProbe.h} ≥ 48x48`); if (!favProbe.hasPh) fail('(j) /nodes fav-star missing ph-icon sprite'); else pass('(j) /nodes fav-star uses ph-icon sprite'); if (favProbe.hasStarText) fail('(j) /nodes fav-star still contains ★ or ☆ text'); diff --git a/test-packets.js b/test-packets.js index 4c44d79a3..faf999239 100644 --- a/test-packets.js +++ b/test-packets.js @@ -16,6 +16,22 @@ function test(name, fn) { } } +// A test of a bug that is known and not fixed yet. It must fail, and says so +// without failing the run. When it passes, the bug is fixed and the call has to +// become a plain test(): that is reported as a failure, so the test cannot rot. +let knownBugs = 0; +function knownBug(issue, name, fn) { + let threw = null; + try { fn(); } catch (e) { threw = e; } + if (threw) { + knownBugs++; + console.log(` XFAIL ${name} (known bug ${issue}): ${threw.message}`); + } else { + failed++; + console.log(` ❌ ${name}: passes now, so known bug ${issue} is fixed: change knownBug() to test()`); + } +} + // The aria-hidden Phosphor sprite icon packets.js renders. 30627454 (#1648 M2) // replaced the row emoji with these, one to one (💬 → chat-circle, 📡 → // broadcast, 🔒 → lock, …). @@ -1120,23 +1136,34 @@ console.log('\n=== packets.js: buildGroupRowHtml ==='); assert(!result.includes('group-header')); }); + const collapsedGroup = { + hash: 'xyz', count: 3, latest: '2024-01-01T00:00:00Z', + observer_id: null, raw_hex: 'aabbcc', payload_type: 0, + route_type: 0, decoded_json: '{}', path_json: '[]', + observation_count: 3, observer_count: 2 + }; + test('buildGroupRowHtml renders multi-count group with expand arrow', () => { - const p = { - hash: 'xyz', count: 3, latest: '2024-01-01T00:00:00Z', - observer_id: null, raw_hex: 'aabbcc', payload_type: 0, - route_type: 0, decoded_json: '{}', path_json: '[]', - observation_count: 3, observer_count: 2 - }; - const result = api.buildGroupRowHtml(p); + const result = api.buildGroupRowHtml(collapsedGroup); assert(result.includes('group-header')); - // Collapsed arrow. Before 30627454 (#1648 M2) a collapsed group showed ▶ - // (and an expanded one ▼); the right-pointing sprite is #ph-caret-right. - // The migration mapped ▶ to #ph-caret-up, so this assertion is RED on - // purpose: it documents the collapsed-caret bug tracked in #189. - assert(result.includes(phIcon('caret-right')), 'collapsed group shows a right caret'); + // The expand cell of a collapsed group holds a caret, and it is not the + // expanded one. + const cell = /]*>([\s\S]*?)<\/td>/.exec(result); + assert(cell && /#ph-caret-/.test(cell[1]), 'collapsed group has a caret in its expand cell'); assert(!result.includes(phIcon('caret-down')), 'collapsed group does not show the expanded caret'); }); + // KNOWN BUG #189. Before 30627454 (#1648 M2, emoji to Phosphor sprites) a + // collapsed group showed ▶ and an expanded one ▼. The migration mapped ▶ to + // #ph-caret-up, so a collapsed group now points up. The right-pointing sprite + // is #ph-caret-right, which is also what the other collapsed disclosures use + // (analytics.js, #ptOverviewChevron). public/packets.js is not fixed yet; when + // it is, this assertion starts to pass, knownBug() reports that, and the run + // goes red until the call below is turned into a plain test(). + knownBug('#189', 'buildGroupRowHtml shows a right-pointing caret on a collapsed group', () => { + assert(api.buildGroupRowHtml(collapsedGroup).includes(phIcon('caret-right')), 'collapsed group shows a right caret'); + }); + test('buildGroupRowHtml shows observation count badge', () => { const p = { hash: 'obs', count: 1, latest: '2024-01-01T00:00:00Z', @@ -1553,6 +1580,6 @@ async function testChannelDestinations() { testChannelDestinations().then(() => { console.log(`\n${'='.repeat(40)}`); - console.log(`packets.js tests: ${passed} passed, ${failed} failed`); + console.log(`packets.js tests: ${passed} passed, ${failed} failed, ${knownBugs} known bug(s) still failing`); if (failed > 0) process.exit(1); }).catch(error => { console.error(error); process.exit(1); }); diff --git a/test-test-all.js b/test-test-all.js index 1a872c2b7..28bda4ae8 100644 --- a/test-test-all.js +++ b/test-test-all.js @@ -129,10 +129,6 @@ test('test-all.sh registers itself through this test', () => { // it, and delete its entry here. Do not add a file to this list to get a new // test past the check below: register it instead. const KNOWN_UNREGISTERED = { - // red unit tests (stale after intended UI changes) - 'test-packets.js': 'red on 1 assertion: collapsed group caret is #ph-caret-up, a real bug (#189); register once packets.js is fixed', - // need something CI's unit job does not have - // E2E 'test-rx-coverage-mobile-nav-e2e.js': 'skips while clientRxCoverage is off (the default)', }; diff --git a/test-touch-targets.js b/test-touch-targets.js index fede79316..da84a0121 100644 --- a/test-touch-targets.js +++ b/test-touch-targets.js @@ -63,6 +63,7 @@ const BUTTON_SELECTORS = [ ['.clock-filter-btn', 'button', 'clock-filter-btn'], ['.copy-link-btn', 'button', 'copy-link-btn'], ['.alab-btn', 'button', 'alab-btn'], + ['.fav-star', 'button', 'fav-star'], ]; // Form controls. min-WIDTH is not enforced on these (text fields legitimately