Merge pull request 'feat(ui): F8-09 — turn report sticky icon-popup section menu' (#67) from feature/issue-52-report-toc-popup into development
This commit was merged in pull request #67.
This commit is contained in:
+9
-4
@@ -694,10 +694,15 @@ The web client renders the report as one section per FBS array
|
||||
foreign ship classes, battles, bombings, approaching groups, my /
|
||||
foreign / uninhabited / unknown planets, ships in production,
|
||||
cargo routes, my fleets, my / foreign / unidentified ship groups).
|
||||
Empty sections render explicit empty-state copy. Section anchors
|
||||
are exposed in a sticky table of contents (a `<select>` on mobile)
|
||||
and the scroll position is preserved across active-view switches
|
||||
via SvelteKit's `Snapshot` API.
|
||||
Empty sections render explicit empty-state copy. Section
|
||||
navigation is exposed through a sticky icon-popup menu pinned to
|
||||
the top-right of the report column (an anchored popover on desktop
|
||||
and a fixed bottom-sheet on mobile); the trigger label tracks the
|
||||
section currently in view, and picking a menuitem scrolls the
|
||||
matching section into view. Re-entering the report active view
|
||||
remounts the component and resets the scroll position; the active
|
||||
highlight is re-derived from the IntersectionObserver as the user
|
||||
scrolls.
|
||||
|
||||
The Bombings section is a flat read-only table — one row per
|
||||
bombing event, columns for `attacker`, `attack_power`, `wiped`
|
||||
|
||||
@@ -713,9 +713,13 @@ Web-клиент рендерит отчёт как одну секцию на
|
||||
группы, мои / чужие / необитаемые / неопознанные планеты, корабли в
|
||||
производстве, грузовые маршруты, мои флоты, мои / чужие /
|
||||
неопознанные группы кораблей). Пустые секции получают явную копию
|
||||
empty-state. Якоря секций отображены в sticky-TOC (на мобильном —
|
||||
`<select>`); позиция скролла сохраняется при переключении активного
|
||||
представления через SvelteKit `Snapshot` API.
|
||||
empty-state. Навигация по секциям — sticky icon-popup в правом
|
||||
верхнем углу колонки отчёта (анкорный popover на десктопе и фикс.
|
||||
bottom-sheet на мобильном); подпись на кнопке отслеживает раздел,
|
||||
который сейчас в зоне видимости, выбор пункта меню — скролл к
|
||||
нужной секции. При возврате в активный вью отчёт перемонтируется,
|
||||
позиция скролла сбрасывается к началу, а IntersectionObserver
|
||||
заново рассчитывает подсветку при прокрутке.
|
||||
|
||||
Секция бомбардировок — это плоская read-only-таблица: одна строка на
|
||||
событие, колонки `attacker`, `attack_power`, признак `wiped` и
|
||||
|
||||
+67
-29
@@ -15,7 +15,7 @@ section column.
|
||||
|
||||
```
|
||||
report.svelte
|
||||
├── report/report-toc.svelte // anchor list + mobile <select>
|
||||
├── report/report-toc.svelte // sticky icon-popup section menu
|
||||
├── report/section-galaxy-summary.svelte
|
||||
├── report/section-votes.svelte
|
||||
├── report/section-player-status.svelte
|
||||
@@ -85,27 +85,56 @@ the body — both surfaces stay in sync by construction.
|
||||
|
||||
## Table of contents and active highlight
|
||||
|
||||
`report/report-toc.svelte` renders two surfaces driven by the same
|
||||
entry list:
|
||||
`report/report-toc.svelte` renders a single icon-popup trigger
|
||||
pinned to the top-right corner of the report column. The trigger
|
||||
shows `≡` followed by the title of the currently-active section
|
||||
(CSS-clamped with `text-overflow: ellipsis` so a long RU title
|
||||
cannot bloat the button). Clicking opens an anchored popover
|
||||
(`role="menu"`) that lists every section as a `role="menuitem"`
|
||||
button; the active item gets `aria-current="location"` and the
|
||||
`.active` class. A click on an item closes the popover and scrolls
|
||||
the matching `<section id="report-<slug>">` into view via
|
||||
`scrollIntoView` (with `prefers-reduced-motion` falling back to
|
||||
`behavior: "auto"`).
|
||||
|
||||
- **Desktop / tablet sidebar** — sticky `<aside>` with vertical
|
||||
anchor list. The anchor for the currently-visible section gets
|
||||
`aria-current="location"` and an `.active` CSS class.
|
||||
- **Mobile (< 768 px)** — the desktop sidebar is hidden via CSS
|
||||
and a sticky `<select>` takes its place at the top of the body.
|
||||
Picking an option scrolls the matching section into view. The
|
||||
mobile contract intentionally avoids stacking another overlay on
|
||||
top of the existing layout-owned bottom-tabs.
|
||||
The trigger uses `position: fixed` instead of `position: sticky`.
|
||||
Per the CSS sticky spec a sticky element sticks within its nearest
|
||||
ancestor with non-`visible` overflow — and `.active-view-host`
|
||||
declares `overflow-y: auto` for the mobile scroll story. On
|
||||
desktop the host grows with content and the document body becomes
|
||||
the actual scroll container, so a sticky trigger inside the report
|
||||
column never receives a scroll event and rides up with the page
|
||||
content. A fixed trigger sidesteps the chain entirely; the
|
||||
component is mounted only while the report active view is on
|
||||
screen, so the fixed element is naturally tied to the view's
|
||||
lifetime. The desktop offset is `right: calc(18 rem + 1.25 rem)`
|
||||
to clear the always-on `lib/sidebar/sidebar.svelte`; below
|
||||
1024 px the sidebar collapses to an overlay drawer, so the
|
||||
default `right: 1.25 rem` matches the report's right padding. The
|
||||
report-view itself adds a top padding equal to the trigger's
|
||||
viewport offset plus its height so the first section's heading
|
||||
does not render under the trigger at scroll position 0, and every
|
||||
`<section id="report-…">` gets `scroll-margin-top: 7.5rem` so
|
||||
`scrollIntoView({ block: "start" })` lands the heading below the
|
||||
trigger after a popover-driven jump.
|
||||
|
||||
Both surfaces also expose a "Back to map" affordance
|
||||
(`report-back-to-map`) at the top.
|
||||
On viewports below `768.98 px` the popover surface re-styles into
|
||||
a fixed bottom-sheet anchored above the layout-owned bottom-tabs
|
||||
bar (mirrors `lib/active-view/map-toggles.svelte`), so the same
|
||||
trigger and the same menuitem list serve desktop and mobile.
|
||||
|
||||
Open/close state matches the `map-toggles.svelte` precedent:
|
||||
Escape closes, outside click closes, item-pick closes. The
|
||||
`restoreFocus` action returns keyboard focus to the trigger on
|
||||
dismount. The menu is non-modal — no focus trap.
|
||||
|
||||
The active slug is computed by an `IntersectionObserver` rooted on
|
||||
the viewport (`root: null`) with `rootMargin: "-30% 0px -60% 0px"`.
|
||||
The skew biases the active band toward the upper third of the
|
||||
visible area so that scrolling down advances the highlight
|
||||
naturally. The observer is created on mount and torn down on
|
||||
unmount.
|
||||
unmount. The TOC itself owns no observer — the orchestrator passes
|
||||
`activeSlug` in as a prop.
|
||||
|
||||
The in-game shell (`lib/game/game-shell.svelte`)
|
||||
expands `<main class="active-view-host">` to fit content rather
|
||||
@@ -129,8 +158,10 @@ highlight stays consistent without a separate source of truth.
|
||||
|
||||
All strings live under `game.report.*`:
|
||||
- `game.report.loading` — section loading placeholder.
|
||||
- `game.report.back_to_map`, `game.report.toc.title`,
|
||||
`game.report.toc.mobile_label` — shell-level strings.
|
||||
- `game.report.toc.title` — `aria-label` on the TOC root;
|
||||
`game.report.toc.open` / `game.report.toc.close` — `aria-label`
|
||||
on the trigger button, swapped by the open state (mirrors
|
||||
`game.map.toggles.open` / `close`).
|
||||
- `game.report.section.<slug>.title` — section heading.
|
||||
- `game.report.section.<slug>.empty` — empty-state copy (where
|
||||
applicable).
|
||||
@@ -151,19 +182,26 @@ couple them silently.
|
||||
shapes: kv-list (`report-section-galaxy-summary.test.ts`), grid
|
||||
with conditional row state (`report-section-bombings.test.ts`),
|
||||
per-race sub-table (`report-section-foreign-sciences.test.ts`),
|
||||
TOC (`report-toc.test.ts`). Each spec mounts the component
|
||||
against a synthetic `RenderedReportSource`, so the orchestrator
|
||||
/ IntersectionObserver are out of scope.
|
||||
TOC (`report-toc.test.ts`). The TOC spec exercises the icon-popup
|
||||
state machine (trigger label, open/close, menuitem list, active
|
||||
highlight, scroll-on-pick, Escape, outside-click). Each spec
|
||||
mounts the component against a synthetic `RenderedReportSource`,
|
||||
so the orchestrator / IntersectionObserver are out of scope.
|
||||
- **Playwright** — `tests/e2e/report-sections.spec.ts` exercises
|
||||
the full integration: every TOC anchor lands its section in
|
||||
view, the back-to-map button switches to the map view
|
||||
(`activeView.select("map")`), and the mobile `<select>` scrolls
|
||||
to the chosen section on a narrow viewport. The spec drives the
|
||||
app-shell through `window.__galaxyNav` (the dev-only nav surface)
|
||||
instead of `page.goto` per-view URLs. The old "scroll position
|
||||
survives a `/map` round-trip via SvelteKit `Snapshot`" case was
|
||||
dropped — see the [scroll position](#scroll-position) note.
|
||||
the full integration: every popover menuitem click lands its
|
||||
section in view and closes the popover, and on the
|
||||
`chromium-mobile` project the same trigger surfaces a fixed
|
||||
bottom-sheet popover instead of the anchored desktop variant.
|
||||
The spec drives the app-shell through `window.__galaxyNav` (the
|
||||
dev-only nav surface) instead of `page.goto` per-view URLs. The
|
||||
old "scroll position survives a `/map` round-trip via SvelteKit
|
||||
`Snapshot`" case was dropped — see the
|
||||
[scroll position](#scroll-position) note. F8-09 also removed the
|
||||
in-report "Back to map" test; the same affordance is exercised
|
||||
through the app-shell view menu by `tests/e2e/game-shell.spec.ts`
|
||||
("header view-menu navigates to every active view").
|
||||
|
||||
Test IDs follow the pattern `report-section-<slug>` for section
|
||||
roots, `report-toc-<slug>` for TOC anchors, and per-section row
|
||||
identifiers (e.g. `report-bombing-row`, `my-planets-row`).
|
||||
roots, `report-toc-trigger` / `report-toc-surface` for the popup
|
||||
shell, `report-toc-item-<slug>` for each menuitem, and per-section
|
||||
row identifiers (e.g. `report-bombing-row`, `my-planets-row`).
|
||||
|
||||
@@ -134,39 +134,34 @@ TOC and the body iterate the same data.
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/*
|
||||
`padding-top` clears the fixed TOC trigger that lives in the
|
||||
viewport's top-right corner (`report/report-toc.svelte`,
|
||||
`position: fixed; top: 4rem`). Without this padding the first
|
||||
section (galaxy-summary) renders directly under the trigger.
|
||||
*/
|
||||
.report-view {
|
||||
display: grid;
|
||||
grid-template-columns: 14rem 1fr;
|
||||
gap: 1.25rem;
|
||||
padding: 1rem 1.25rem 2rem;
|
||||
padding: 4.5rem 1.25rem 2rem;
|
||||
font-family: system-ui, sans-serif;
|
||||
}
|
||||
.report-view > :global(.report-toc) {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
align-self: start;
|
||||
padding: 0.5rem 0;
|
||||
max-height: calc(100vh - 4rem);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.report-body {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.75rem;
|
||||
}
|
||||
/*
|
||||
`scroll-margin-top` lets `scrollIntoView({ block: "start" })`
|
||||
land the section *heading* in view (not behind the fixed
|
||||
trigger or the sticky in-game header). Budget: ~3 rem header +
|
||||
~3 rem trigger area + ~1.5 rem breathing room.
|
||||
*/
|
||||
.report-body :global(section[id^="report-"]) {
|
||||
scroll-margin-top: 7.5rem;
|
||||
}
|
||||
@media (max-width: 767.98px) {
|
||||
.report-view {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 0.75rem;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.report-view > :global(.report-toc) {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--color-bg);
|
||||
padding: 0.5rem 0;
|
||||
z-index: 5;
|
||||
padding: 4rem 0.75rem 0.75rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,28 +1,34 @@
|
||||
<!--
|
||||
Phase 23 Report View table of contents.
|
||||
Turn-report section menu.
|
||||
|
||||
Responsibilities:
|
||||
- "Back to map" button at the top — visible on both desktop sidebar
|
||||
and mobile sticky toolbar. Switches the active view to the map
|
||||
through `activeView.select("map")`; the shell's tool gate resets
|
||||
the `mobileTool` overlay naturally once the map is no longer the
|
||||
active view.
|
||||
- Desktop / tablet sidebar: a vertical list of anchor links, one per
|
||||
section. The active link gets `aria-current="location"` and a
|
||||
`.active` style. Click scrolls the active-view-host (not the
|
||||
window) by calling `scrollIntoView` on the matching section.
|
||||
- Mobile (`max-width: 767.98px`): the sidebar collapses to a sticky
|
||||
`<select>` at the top of the body — a minimal contract that does
|
||||
not stack with the layout's bottom-tab bar. The same option list
|
||||
drives both surfaces.
|
||||
Replaces the F8-09 era 14 rem sticky sidebar (plus its mobile
|
||||
`<select>` twin) with a single sticky icon-popup trigger that sits
|
||||
in the top-right corner of the report column. The button shows
|
||||
`≡` + the title of the section currently in view, derived from the
|
||||
`activeSlug` prop the orchestrator computes through its
|
||||
`IntersectionObserver`. Clicking the button opens an anchored menu
|
||||
(or a bottom-sheet on `<768.98 px`) that lists every section; a
|
||||
click on an item closes the menu and scrolls the matching section
|
||||
into view via `scrollIntoView`. The active section gets
|
||||
`aria-current="location"` plus the `.active` style.
|
||||
|
||||
The active section is computed by the orchestrator
|
||||
(`report.svelte`) via `IntersectionObserver` and passed in via the
|
||||
`activeSlug` prop. The TOC itself owns no observers.
|
||||
The trigger label is clamped with `text-overflow: ellipsis` so a
|
||||
long RU title cannot stretch the button. The popover uses the same
|
||||
open/close state machine as `lib/active-view/map-toggles.svelte`:
|
||||
outside-click + Escape close, focus is restored to the trigger
|
||||
through the `restoreFocus` action. No focus trap — the menu is
|
||||
non-modal.
|
||||
|
||||
The component owns no IntersectionObserver and never sets
|
||||
`activeSlug` itself. The orchestrator picks the new active slug up
|
||||
naturally as the target section enters the viewport during the
|
||||
smooth scroll. The previous "Back to map" affordance was dropped
|
||||
in F8-09: that switch is available in the app-shell view menu.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { activeView } from "$lib/app-nav.svelte";
|
||||
import { onMount } from "svelte";
|
||||
|
||||
import { restoreFocus } from "$lib/a11y/restore-focus";
|
||||
import { i18n, type TranslationKey } from "$lib/i18n/index.svelte";
|
||||
|
||||
export interface TocEntry {
|
||||
@@ -37,6 +43,16 @@ The active section is computed by the orchestrator
|
||||
|
||||
let { entries, activeSlug }: Props = $props();
|
||||
|
||||
let open = $state(false);
|
||||
let rootEl: HTMLDivElement | null = $state(null);
|
||||
|
||||
const activeEntry = $derived(
|
||||
entries.find((e) => e.slug === activeSlug) ?? entries[0],
|
||||
);
|
||||
const activeTitle = $derived(
|
||||
activeEntry ? i18n.t(activeEntry.titleKey) : "",
|
||||
);
|
||||
|
||||
function scrollToSlug(slug: string): void {
|
||||
const target = document.getElementById(`report-${slug}`);
|
||||
if (target === null) return;
|
||||
@@ -49,154 +65,205 @@ The active section is computed by the orchestrator
|
||||
});
|
||||
}
|
||||
|
||||
function onAnchorClick(event: MouseEvent, slug: string): void {
|
||||
event.preventDefault();
|
||||
scrollToSlug(slug);
|
||||
function pickSection(slug: string): void {
|
||||
open = false;
|
||||
// Defer the scroll one frame so Svelte commits the close and
|
||||
// `restoreFocus` returns focus to the trigger first. Without
|
||||
// this, the focus restoration (the trigger is sticky, but its
|
||||
// natural in-flow position is at the top of the report) can
|
||||
// reset the smooth/instant scroll the browser had just begun.
|
||||
requestAnimationFrame(() => scrollToSlug(slug));
|
||||
}
|
||||
|
||||
function onSelectChange(event: Event): void {
|
||||
const select = event.currentTarget as HTMLSelectElement;
|
||||
const slug = select.value;
|
||||
if (slug === "") return;
|
||||
scrollToSlug(slug);
|
||||
function onKeyDown(event: KeyboardEvent): void {
|
||||
if (event.key === "Escape" && open) {
|
||||
open = false;
|
||||
}
|
||||
}
|
||||
|
||||
function backToMap(): void {
|
||||
activeView.select("map");
|
||||
}
|
||||
onMount(() => {
|
||||
const handleClick = (event: MouseEvent): void => {
|
||||
if (!open || rootEl === null) return;
|
||||
const target = event.target;
|
||||
if (target instanceof Node && rootEl.contains(target)) return;
|
||||
open = false;
|
||||
};
|
||||
document.addEventListener("click", handleClick, true);
|
||||
document.addEventListener("keydown", onKeyDown);
|
||||
return () => {
|
||||
document.removeEventListener("click", handleClick, true);
|
||||
document.removeEventListener("keydown", onKeyDown);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<aside
|
||||
<div
|
||||
class="report-toc"
|
||||
bind:this={rootEl}
|
||||
data-testid="report-toc"
|
||||
aria-label={i18n.t("game.report.toc.title")}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="back-to-map"
|
||||
data-testid="report-back-to-map"
|
||||
onclick={() => void backToMap()}
|
||||
class="trigger"
|
||||
data-testid="report-toc-trigger"
|
||||
aria-haspopup="menu"
|
||||
aria-expanded={open}
|
||||
aria-label={open
|
||||
? i18n.t("game.report.toc.close")
|
||||
: i18n.t("game.report.toc.open")}
|
||||
onclick={() => (open = !open)}
|
||||
>
|
||||
← {i18n.t("game.report.back_to_map")}
|
||||
<span class="icon" aria-hidden="true">≡</span>
|
||||
<span class="label">{activeTitle}</span>
|
||||
</button>
|
||||
|
||||
<nav class="desktop" aria-label={i18n.t("game.report.toc.title")}>
|
||||
<ul>
|
||||
{#if open}
|
||||
<div
|
||||
class="surface"
|
||||
role="menu"
|
||||
data-testid="report-toc-surface"
|
||||
use:restoreFocus
|
||||
>
|
||||
{#each entries as entry (entry.slug)}
|
||||
<li>
|
||||
<a
|
||||
href={`#report-${entry.slug}`}
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
class:active={activeSlug === entry.slug}
|
||||
aria-current={activeSlug === entry.slug
|
||||
? "location"
|
||||
: undefined}
|
||||
data-testid="report-toc-{entry.slug}"
|
||||
onclick={(e) => onAnchorClick(e, entry.slug)}
|
||||
data-testid="report-toc-item-{entry.slug}"
|
||||
onclick={() => pickSection(entry.slug)}
|
||||
>
|
||||
{i18n.t(entry.titleKey)}
|
||||
</a>
|
||||
</li>
|
||||
</button>
|
||||
{/each}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<label class="mobile">
|
||||
<span class="visually-hidden">
|
||||
{i18n.t("game.report.toc.mobile_label")}
|
||||
</span>
|
||||
<select
|
||||
data-testid="report-toc-mobile"
|
||||
value={activeSlug}
|
||||
onchange={onSelectChange}
|
||||
>
|
||||
{#each entries as entry (entry.slug)}
|
||||
<option value={entry.slug}>{i18n.t(entry.titleKey)}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</label>
|
||||
</aside>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/*
|
||||
The trigger uses `position: fixed` rather than `position: sticky`
|
||||
because on desktop the in-game shell's `.active-view-host`
|
||||
declares `overflow-y: auto` while staying tall enough that no
|
||||
overflow actually engages — the document body scrolls instead.
|
||||
Per the CSS sticky spec the host is the "scrollport" for any
|
||||
sticky descendant, so a sticky trigger inside the report column
|
||||
never receives a scroll event and rides up with the page. Fixed
|
||||
positioning anchors the trigger to the viewport directly; the
|
||||
component is only mounted while the report active view is on
|
||||
screen, so the fixed element is naturally tied to the view's
|
||||
lifetime.
|
||||
|
||||
`top: 4rem` clears the sticky header (~3 rem). On ≥ 1024 px the
|
||||
sidebar (`lib/sidebar/sidebar.svelte`) is always visible and
|
||||
occupies the right 18 rem of the viewport, so the trigger has to
|
||||
be pushed left by that much to stay inside the report column.
|
||||
Below 1024 px the sidebar collapses into an overlay drawer,
|
||||
so a viewport-right anchor of 1.25 rem matches the report's
|
||||
right padding.
|
||||
|
||||
When the history banner is showing (historical turn view,
|
||||
~2 rem extra) the trigger sits at the banner's lower edge —
|
||||
acceptable for the rare historical-turn read path.
|
||||
*/
|
||||
.report-toc {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
position: fixed;
|
||||
top: 4rem;
|
||||
right: 1.25rem;
|
||||
z-index: 30;
|
||||
font-family: system-ui, sans-serif;
|
||||
}
|
||||
.back-to-map {
|
||||
@media (min-width: 1024px) {
|
||||
.report-toc {
|
||||
right: calc(18rem + 1.25rem);
|
||||
}
|
||||
}
|
||||
.trigger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
min-height: 44px;
|
||||
max-width: min(18rem, calc(100vw - 2rem));
|
||||
background: var(--color-surface-overlay);
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
padding: 0.25rem 0.6rem;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.trigger:hover {
|
||||
background: var(--color-surface-hover);
|
||||
}
|
||||
.trigger .icon {
|
||||
flex: 0 0 auto;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1;
|
||||
}
|
||||
.trigger .label {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
}
|
||||
.surface {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.25rem);
|
||||
right: 0;
|
||||
min-width: 16rem;
|
||||
max-height: calc(100vh - 4rem);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.1rem;
|
||||
background: var(--color-surface-overlay);
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
padding: 0.35rem;
|
||||
overflow-y: auto;
|
||||
z-index: 50;
|
||||
}
|
||||
.surface [role="menuitem"] {
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
color: var(--color-text-muted);
|
||||
border: 0;
|
||||
border-left: 2px solid transparent;
|
||||
border-radius: 0 3px 3px 0;
|
||||
padding: 0.3rem 0.6rem;
|
||||
font: inherit;
|
||||
font-size: 0.85rem;
|
||||
text-align: left;
|
||||
padding: 0.4rem 0.6rem;
|
||||
background: var(--color-surface);
|
||||
color: var(--color-accent);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 3px;
|
||||
line-height: 1.3;
|
||||
cursor: pointer;
|
||||
}
|
||||
.back-to-map:hover {
|
||||
.surface [role="menuitem"]:hover {
|
||||
background: var(--color-surface-hover);
|
||||
color: var(--color-text);
|
||||
}
|
||||
.desktop {
|
||||
display: block;
|
||||
}
|
||||
.desktop ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.15rem;
|
||||
}
|
||||
.desktop a {
|
||||
display: block;
|
||||
padding: 0.3rem 0.6rem;
|
||||
color: var(--color-text-muted);
|
||||
text-decoration: none;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.3;
|
||||
border-left: 2px solid transparent;
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
.desktop a:hover {
|
||||
color: var(--color-text);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
.desktop a.active {
|
||||
.surface [role="menuitem"].active {
|
||||
color: var(--color-text);
|
||||
background: var(--color-surface);
|
||||
border-left-color: var(--color-accent);
|
||||
}
|
||||
.mobile {
|
||||
display: none;
|
||||
}
|
||||
.mobile select {
|
||||
width: 100%;
|
||||
font: inherit;
|
||||
padding: 0.4rem 0.5rem;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
@media (max-width: 767.98px) {
|
||||
.desktop {
|
||||
display: none;
|
||||
.report-toc {
|
||||
right: 0.75rem;
|
||||
}
|
||||
.mobile {
|
||||
display: block;
|
||||
.surface {
|
||||
position: fixed;
|
||||
top: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 3.25rem;
|
||||
max-height: calc(100vh - 6rem);
|
||||
border-radius: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -603,9 +603,9 @@ const en = {
|
||||
"game.inspector.planet.ship_groups.race.unknown": "unknown",
|
||||
|
||||
"game.report.loading": "loading report…",
|
||||
"game.report.back_to_map": "back to map",
|
||||
"game.report.toc.title": "sections",
|
||||
"game.report.toc.mobile_label": "jump to section",
|
||||
"game.report.toc.open": "show section list",
|
||||
"game.report.toc.close": "hide section list",
|
||||
"game.report.section.galaxy_summary.title": "galaxy summary",
|
||||
"game.report.section.galaxy_summary.field.turn": "turn",
|
||||
"game.report.section.galaxy_summary.field.size": "map size",
|
||||
|
||||
@@ -604,9 +604,9 @@ const ru: Record<keyof typeof en, string> = {
|
||||
"game.inspector.planet.ship_groups.race.unknown": "неизвестно",
|
||||
|
||||
"game.report.loading": "загрузка отчёта…",
|
||||
"game.report.back_to_map": "назад к карте",
|
||||
"game.report.toc.title": "разделы",
|
||||
"game.report.toc.mobile_label": "перейти к разделу",
|
||||
"game.report.toc.open": "показать список разделов",
|
||||
"game.report.toc.close": "скрыть список разделов",
|
||||
"game.report.section.galaxy_summary.title": "общие сведения о галактике",
|
||||
"game.report.section.galaxy_summary.field.turn": "ход",
|
||||
"game.report.section.galaxy_summary.field.size": "размер карты",
|
||||
|
||||
@@ -3,12 +3,16 @@
|
||||
// the orchestrator's sections render, then drives the page through
|
||||
// the targeted-test contract:
|
||||
//
|
||||
// 1. Every TOC anchor click scrolls the matching section into view
|
||||
// and the section is present in the DOM with at least one row
|
||||
// (or its empty-state copy when it is intentionally empty).
|
||||
// 2. The "back to map" button switches to the map view.
|
||||
// 3. The mobile <select> fallback scrolls a section into view on
|
||||
// a narrow viewport.
|
||||
// 1. Every TOC menuitem click scrolls the matching section into
|
||||
// view and the section is present in the DOM with at least one
|
||||
// row (or its empty-state copy when it is intentionally empty).
|
||||
// 2. On a narrow viewport the same trigger surfaces a bottom-sheet
|
||||
// popover and the same menuitem flow lands the chosen section.
|
||||
//
|
||||
// F8-09 collapsed the desktop sidebar and mobile `<select>` into a
|
||||
// single sticky icon-popup trigger; the in-report "Back to map"
|
||||
// button was removed (the affordance lives in the app-shell view
|
||||
// menu, exercised by `game-shell.spec.ts`).
|
||||
|
||||
import { fromJson, type JsonValue } from "@bufbuild/protobuf";
|
||||
import { expect, test, type Page } from "@playwright/test";
|
||||
@@ -36,9 +40,9 @@ const BATTLE_ID = "00000000-0000-0000-0000-000000000001";
|
||||
// SECTIONS lists every TOC slug paired with a row-presence hook.
|
||||
// `expectRow` is null for sections that the seeded report
|
||||
// intentionally leaves empty so the empty-state copy is asserted
|
||||
// instead. The orchestrator's section order must match this
|
||||
// list — the spec relies on each slug having a `report-toc-<slug>`
|
||||
// and a `report-section-<slug>` testid.
|
||||
// instead. The orchestrator's section order must match this list —
|
||||
// the spec relies on each slug having a `report-toc-item-<slug>` in
|
||||
// the popover and a `report-section-<slug>` testid in the body.
|
||||
const SECTIONS: ReadonlyArray<{ slug: string; expectRow: string | null }> = [
|
||||
{ slug: "galaxy-summary", expectRow: "galaxy-summary-field-turn" },
|
||||
{ slug: "votes", expectRow: "votes-mine" },
|
||||
@@ -226,7 +230,7 @@ async function bootSession(page: Page): Promise<void> {
|
||||
}
|
||||
|
||||
test.describe("Phase 23 report view", () => {
|
||||
test("every TOC anchor lands its section in view", async ({
|
||||
test("every popover menuitem lands its section in view", async ({
|
||||
page,
|
||||
}, testInfo) => {
|
||||
test.skip(
|
||||
@@ -252,9 +256,16 @@ test.describe("Phase 23 report view", () => {
|
||||
page.getByTestId("galaxy-summary-field-turn"),
|
||||
).toBeVisible();
|
||||
|
||||
const trigger = page.getByTestId("report-toc-trigger");
|
||||
const surface = page.getByTestId("report-toc-surface");
|
||||
|
||||
for (const entry of SECTIONS) {
|
||||
const anchor = page.getByTestId(`report-toc-${entry.slug}`);
|
||||
await anchor.click();
|
||||
await trigger.click();
|
||||
await expect(surface).toBeVisible();
|
||||
await page.getByTestId(`report-toc-item-${entry.slug}`).click();
|
||||
// The popover closes on selection and the section
|
||||
// scrolls into view.
|
||||
await expect(surface).toHaveCount(0);
|
||||
const section = page.getByTestId(`report-section-${entry.slug}`);
|
||||
await expect(section).toBeInViewport();
|
||||
if (entry.expectRow !== null) {
|
||||
@@ -280,30 +291,12 @@ test.describe("Phase 23 report view", () => {
|
||||
// scroll-restoration the test asserted exist any more. Re-adding that
|
||||
// behaviour would be a production change outside this test migration.
|
||||
|
||||
test("back-to-map button switches to the map view", async ({
|
||||
page,
|
||||
}, testInfo) => {
|
||||
test.skip(
|
||||
testInfo.project.name.startsWith("chromium-mobile"),
|
||||
"navigation is identical on mobile",
|
||||
);
|
||||
// F8-09 removed the in-report "Back to map" button — the same
|
||||
// affordance lives in the app-shell view menu, exercised by
|
||||
// `game-shell.spec.ts` ("header view-menu navigates to every
|
||||
// active view").
|
||||
|
||||
await mockGateway(page);
|
||||
await bootSession(page);
|
||||
await page.goto("/");
|
||||
await page.waitForFunction(() => window.__galaxyNav !== undefined);
|
||||
await page.evaluate(
|
||||
(id) => window.__galaxyNav!.enterGame(id, "report", {}),
|
||||
GAME_ID,
|
||||
);
|
||||
|
||||
await page.getByTestId("report-back-to-map").click();
|
||||
// The single-URL app-shell keeps the address bar at the app base;
|
||||
// the active map view is the navigation signal.
|
||||
await expect(page.getByTestId("active-view-map")).toBeVisible();
|
||||
});
|
||||
|
||||
test("mobile select scrolls to the chosen section", async ({
|
||||
test("mobile bottom-sheet popover lands the chosen section", async ({
|
||||
page,
|
||||
}, testInfo) => {
|
||||
test.skip(
|
||||
@@ -320,12 +313,25 @@ test.describe("Phase 23 report view", () => {
|
||||
GAME_ID,
|
||||
);
|
||||
|
||||
const mobileSelect = page.getByTestId("report-toc-mobile");
|
||||
await expect(mobileSelect).toBeVisible();
|
||||
await expect(
|
||||
page.getByTestId("galaxy-summary-field-turn"),
|
||||
).toBeVisible();
|
||||
await mobileSelect.selectOption("bombings");
|
||||
|
||||
const trigger = page.getByTestId("report-toc-trigger");
|
||||
await expect(trigger).toBeVisible();
|
||||
await trigger.click();
|
||||
|
||||
const surface = page.getByTestId("report-toc-surface");
|
||||
await expect(surface).toBeVisible();
|
||||
// Below 768 px the surface re-styles into a fixed
|
||||
// bottom-sheet anchored above the bottom-tabs bar.
|
||||
const position = await surface.evaluate(
|
||||
(el) => getComputedStyle(el).position,
|
||||
);
|
||||
expect(position).toBe("fixed");
|
||||
|
||||
await page.getByTestId("report-toc-item-bombings").click();
|
||||
await expect(surface).toHaveCount(0);
|
||||
await expect(
|
||||
page.getByTestId("report-section-bombings"),
|
||||
).toBeInViewport();
|
||||
|
||||
@@ -63,17 +63,19 @@ describe("active-view stubs", () => {
|
||||
expect(node).toHaveTextContent("ship groups");
|
||||
});
|
||||
|
||||
test("report view mounts with the TOC and the back-to-map link", () => {
|
||||
test("report view mounts with the icon-popup TOC", () => {
|
||||
// Phase 23 replaces the Phase 10 stub with the full report
|
||||
// orchestrator. The orchestrator mounts the table of contents
|
||||
// regardless of report state; the inner sections render
|
||||
// loading copy until a `RenderedReportSource` lands via
|
||||
// context. This test only smokes the orchestrator scaffold —
|
||||
// per-section assertions live in `report-section-*.test.ts`.
|
||||
// F8-09 collapsed the TOC into a single sticky icon-popup
|
||||
// trigger; "Back to map" lives in the app-shell view menu.
|
||||
const r = render(ReportView);
|
||||
expect(r.getByTestId("active-view-report")).toBeInTheDocument();
|
||||
expect(r.getByTestId("report-toc")).toBeInTheDocument();
|
||||
expect(r.getByTestId("report-back-to-map")).toBeInTheDocument();
|
||||
expect(r.getByTestId("report-toc-trigger")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("mail stub renders its localised title", () => {
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
// Vitest coverage for the Phase 23 Report View's table of contents.
|
||||
// Smokes the anchor list, the active-link state, the back-to-map
|
||||
// navigation, and the mobile <select> fallback. The
|
||||
// IntersectionObserver-driven active-section computation lives in
|
||||
// the orchestrator (`report.svelte`); this test only checks the
|
||||
// presentational pieces of the TOC.
|
||||
// Vitest coverage for the F8-09 turn-report icon-popup section menu.
|
||||
// Smokes the sticky trigger, its active-title label, the open/close
|
||||
// state machine, popover items + active highlight, scroll-on-pick,
|
||||
// and the Escape + outside-click dismissal paths. The
|
||||
// IntersectionObserver-driven `activeSlug` is computed by the
|
||||
// orchestrator (`report.svelte`) and passed in via prop; the TOC
|
||||
// itself owns no observers.
|
||||
|
||||
import "@testing-library/jest-dom/vitest";
|
||||
import { fireEvent, render } from "@testing-library/svelte";
|
||||
@@ -12,15 +13,6 @@ import { beforeEach, describe, expect, test, vi } from "vitest";
|
||||
import { i18n } from "../src/lib/i18n/index.svelte";
|
||||
import type { TranslationKey } from "../src/lib/i18n/index.svelte";
|
||||
|
||||
// The TOC's "back to map" button switches the active in-game view via
|
||||
// `activeView.select("map")` (the single-URL app-shell has no
|
||||
// `/games/:id/map` route). Mock the nav store so the spy captures the
|
||||
// view switch and no real `pushState` runs.
|
||||
const activeViewSelectMock = vi.hoisted(() => vi.fn());
|
||||
vi.mock("$lib/app-nav.svelte", () => ({
|
||||
activeView: { select: activeViewSelectMock },
|
||||
}));
|
||||
|
||||
import ReportToc, {
|
||||
type TocEntry,
|
||||
} from "../src/lib/active-view/report/report-toc.svelte";
|
||||
@@ -31,64 +23,11 @@ const ENTRIES: readonly TocEntry[] = [
|
||||
{ slug: "bombings", titleKey: "game.report.section.bombings.title" },
|
||||
];
|
||||
|
||||
beforeEach(() => {
|
||||
i18n.resetForTests("en");
|
||||
activeViewSelectMock.mockClear();
|
||||
});
|
||||
|
||||
describe("report TOC", () => {
|
||||
test("renders one anchor per entry and one option in the mobile select", () => {
|
||||
const ui = render(ReportToc, {
|
||||
props: { entries: ENTRIES, activeSlug: "galaxy-summary" },
|
||||
});
|
||||
for (const e of ENTRIES) {
|
||||
expect(ui.getByTestId(`report-toc-${e.slug}`)).toBeInTheDocument();
|
||||
}
|
||||
const mobile = ui.getByTestId("report-toc-mobile") as HTMLSelectElement;
|
||||
expect(mobile.options).toHaveLength(ENTRIES.length);
|
||||
expect(mobile.value).toBe("galaxy-summary");
|
||||
});
|
||||
|
||||
test("marks the active anchor with aria-current=location and a class", () => {
|
||||
const ui = render(ReportToc, {
|
||||
props: { entries: ENTRIES, activeSlug: "bombings" },
|
||||
});
|
||||
const active = ui.getByTestId("report-toc-bombings");
|
||||
expect(active).toHaveAttribute("aria-current", "location");
|
||||
expect(active).toHaveClass("active");
|
||||
|
||||
const inactive = ui.getByTestId("report-toc-votes");
|
||||
expect(inactive).not.toHaveAttribute("aria-current");
|
||||
expect(inactive).not.toHaveClass("active");
|
||||
});
|
||||
|
||||
test("back-to-map button switches the active view to the map", async () => {
|
||||
const ui = render(ReportToc, {
|
||||
props: {
|
||||
entries: ENTRIES,
|
||||
activeSlug: "galaxy-summary",
|
||||
},
|
||||
});
|
||||
const button = ui.getByTestId("report-back-to-map");
|
||||
await fireEvent.click(button);
|
||||
expect(activeViewSelectMock).toHaveBeenCalledWith("map");
|
||||
});
|
||||
|
||||
test("anchor click cancels the default jump and calls scrollIntoView on the target", async () => {
|
||||
// Stub `scrollIntoView` on the target — jsdom does not
|
||||
// implement it. The TOC also reads
|
||||
// `prefers-reduced-motion`; the matchMedia stub forces a
|
||||
// stable `behavior: "auto"` so the assertion is reproducible.
|
||||
const scrollSpy = vi.fn();
|
||||
const target = document.createElement("section");
|
||||
target.id = "report-bombings";
|
||||
target.scrollIntoView = scrollSpy;
|
||||
document.body.appendChild(target);
|
||||
|
||||
function stubReducedMotion(reduce: boolean): void {
|
||||
Object.defineProperty(window, "matchMedia", {
|
||||
writable: true,
|
||||
value: (query: string) => ({
|
||||
matches: query.includes("reduce"),
|
||||
matches: reduce && query.includes("reduce"),
|
||||
media: query,
|
||||
onchange: null,
|
||||
addListener: () => {},
|
||||
@@ -98,57 +37,129 @@ describe("report TOC", () => {
|
||||
dispatchEvent: () => false,
|
||||
}),
|
||||
});
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
i18n.resetForTests("en");
|
||||
});
|
||||
|
||||
describe("report TOC (icon-popup)", () => {
|
||||
test("renders the trigger with the active section title; popover closed by default", () => {
|
||||
const ui = render(ReportToc, {
|
||||
props: { entries: ENTRIES, activeSlug: "galaxy-summary" },
|
||||
});
|
||||
const trigger = ui.getByTestId("report-toc-trigger");
|
||||
expect(trigger).toHaveAttribute("aria-haspopup", "menu");
|
||||
expect(trigger).toHaveAttribute("aria-expanded", "false");
|
||||
expect(trigger).toHaveTextContent("galaxy summary");
|
||||
expect(ui.queryByTestId("report-toc-surface")).toBeNull();
|
||||
});
|
||||
|
||||
test("clicking the trigger opens the popover with one menuitem per entry", async () => {
|
||||
const ui = render(ReportToc, {
|
||||
props: { entries: ENTRIES, activeSlug: "galaxy-summary" },
|
||||
});
|
||||
await fireEvent.click(ui.getByTestId("report-toc-trigger"));
|
||||
expect(ui.getByTestId("report-toc-trigger")).toHaveAttribute(
|
||||
"aria-expanded",
|
||||
"true",
|
||||
);
|
||||
const surface = ui.getByTestId("report-toc-surface");
|
||||
expect(surface).toHaveAttribute("role", "menu");
|
||||
for (const entry of ENTRIES) {
|
||||
const item = ui.getByTestId(`report-toc-item-${entry.slug}`);
|
||||
expect(item).toHaveAttribute("role", "menuitem");
|
||||
}
|
||||
});
|
||||
|
||||
test("marks the active item with aria-current=location and .active", async () => {
|
||||
const ui = render(ReportToc, {
|
||||
props: { entries: ENTRIES, activeSlug: "bombings" },
|
||||
});
|
||||
await fireEvent.click(ui.getByTestId("report-toc-trigger"));
|
||||
const active = ui.getByTestId("report-toc-item-bombings");
|
||||
expect(active).toHaveAttribute("aria-current", "location");
|
||||
expect(active).toHaveClass("active");
|
||||
|
||||
const inactive = ui.getByTestId("report-toc-item-votes");
|
||||
expect(inactive).not.toHaveAttribute("aria-current");
|
||||
expect(inactive).not.toHaveClass("active");
|
||||
});
|
||||
|
||||
test("trigger label tracks activeSlug across re-renders", async () => {
|
||||
const ui = render(ReportToc, {
|
||||
props: { entries: ENTRIES, activeSlug: "galaxy-summary" },
|
||||
});
|
||||
expect(ui.getByTestId("report-toc-trigger")).toHaveTextContent(
|
||||
"galaxy summary",
|
||||
);
|
||||
await ui.rerender({ entries: ENTRIES, activeSlug: "votes" });
|
||||
expect(ui.getByTestId("report-toc-trigger")).toHaveTextContent("votes");
|
||||
});
|
||||
|
||||
test("clicking a menuitem scrolls the target into view and closes the popover", async () => {
|
||||
// jsdom does not implement `scrollIntoView`; stub it on the
|
||||
// section the spec is about to pick. `matchMedia` is forced to
|
||||
// `reduce` so the assertion stays stable.
|
||||
const scrollSpy = vi.fn();
|
||||
const target = document.createElement("section");
|
||||
target.id = "report-bombings";
|
||||
target.scrollIntoView = scrollSpy;
|
||||
document.body.appendChild(target);
|
||||
stubReducedMotion(true);
|
||||
|
||||
const ui = render(ReportToc, {
|
||||
props: { entries: ENTRIES, activeSlug: "galaxy-summary" },
|
||||
});
|
||||
await fireEvent.click(ui.getByTestId("report-toc-bombings"));
|
||||
await fireEvent.click(ui.getByTestId("report-toc-trigger"));
|
||||
await fireEvent.click(ui.getByTestId("report-toc-item-bombings"));
|
||||
// The component defers `scrollIntoView` one frame so the
|
||||
// surface unmount + focus restoration run first. Flush the
|
||||
// frame before asserting.
|
||||
await new Promise<void>((resolve) =>
|
||||
requestAnimationFrame(() => resolve()),
|
||||
);
|
||||
|
||||
expect(scrollSpy).toHaveBeenCalledWith({
|
||||
behavior: "auto",
|
||||
block: "start",
|
||||
});
|
||||
expect(ui.queryByTestId("report-toc-surface")).toBeNull();
|
||||
expect(ui.getByTestId("report-toc-trigger")).toHaveAttribute(
|
||||
"aria-expanded",
|
||||
"false",
|
||||
);
|
||||
target.remove();
|
||||
});
|
||||
|
||||
test("mobile select scrolls to the chosen section without navigating", async () => {
|
||||
const scrollSpy = vi.fn();
|
||||
const target = document.createElement("section");
|
||||
target.id = "report-votes";
|
||||
target.scrollIntoView = scrollSpy;
|
||||
document.body.appendChild(target);
|
||||
|
||||
Object.defineProperty(window, "matchMedia", {
|
||||
writable: true,
|
||||
value: () => ({
|
||||
matches: false,
|
||||
media: "(prefers-reduced-motion: no-preference)",
|
||||
onchange: null,
|
||||
addListener: () => {},
|
||||
removeListener: () => {},
|
||||
addEventListener: () => {},
|
||||
removeEventListener: () => {},
|
||||
dispatchEvent: () => false,
|
||||
}),
|
||||
test("Escape closes the popover", async () => {
|
||||
const ui = render(ReportToc, {
|
||||
props: { entries: ENTRIES, activeSlug: "galaxy-summary" },
|
||||
});
|
||||
await fireEvent.click(ui.getByTestId("report-toc-trigger"));
|
||||
expect(ui.getByTestId("report-toc-surface")).toBeInTheDocument();
|
||||
await fireEvent.keyDown(document, { key: "Escape" });
|
||||
expect(ui.queryByTestId("report-toc-surface")).toBeNull();
|
||||
});
|
||||
|
||||
test("outside click closes the popover", async () => {
|
||||
const outside = document.createElement("button");
|
||||
document.body.appendChild(outside);
|
||||
|
||||
const ui = render(ReportToc, {
|
||||
props: {
|
||||
entries: ENTRIES,
|
||||
activeSlug: "galaxy-summary",
|
||||
},
|
||||
props: { entries: ENTRIES, activeSlug: "galaxy-summary" },
|
||||
});
|
||||
const select = ui.getByTestId("report-toc-mobile") as HTMLSelectElement;
|
||||
await fireEvent.change(select, { target: { value: "votes" } });
|
||||
expect(scrollSpy).toHaveBeenCalled();
|
||||
expect(activeViewSelectMock).not.toHaveBeenCalled();
|
||||
target.remove();
|
||||
await fireEvent.click(ui.getByTestId("report-toc-trigger"));
|
||||
expect(ui.getByTestId("report-toc-surface")).toBeInTheDocument();
|
||||
await fireEvent.click(outside);
|
||||
expect(ui.queryByTestId("report-toc-surface")).toBeNull();
|
||||
|
||||
outside.remove();
|
||||
});
|
||||
|
||||
// Tests intentionally validate the *type* of the entries prop is
|
||||
// exposed correctly so future widening of the list does not
|
||||
// silently drop entries. TypeScript already enforces this through
|
||||
// `TocEntry`; the assertion below is a soft check so a stray
|
||||
// `as unknown as ...` cast surfaces fast.
|
||||
// Soft type-level check: a stray `as unknown as ...` cast on
|
||||
// `TocEntry` would silently widen the prop shape — assert the
|
||||
// runtime values look as expected.
|
||||
test("TocEntry exposes a slug and a TranslationKey", () => {
|
||||
const slug: string = ENTRIES[0]!.slug;
|
||||
const key: TranslationKey = ENTRIES[0]!.titleKey;
|
||||
|
||||
Reference in New Issue
Block a user