@gjsify/adwaita-web 0.53.0 → 0.55.0

package/src/gtk-list-box.spec.ts

@@ -0,0 +1,422 @@
+// DOM-level tests for <gtk-list-box>: the rows it collects, the `.activatable` class and
+// `aria-selected` it derives for each of them, and the three selection doors (click,
+// `select_row`, `select_all`) driven with real clicks and real modifiers.
+//
+// The RULES are `box-selection.spec.ts` in @gjsify/adwaita-core, driven from the same
+// conformance tables; what is asserted here is that the element WIRES them — that a click on
+// row 3 reaches `listBoxSelect` with the right position and modifiers, and that the answer
+// comes back onto the row as a class, an ARIA state and a tab stop.
+import { describe, expect, it } from '@gjsify/unit';
+
+import { BOX_ALL_VECTORS, BOX_ROW_VECTORS, BOX_SELECT_VECTORS } from '@gjsify/adwaita-core/conformance';
+
+import type { GtkListBox } from './elements/gtk-list-box.js';
+import type { GtkListBoxRow } from './elements/gtk-list-box-row.js';
+
+/** The labels the hand-written tests use; a vector that names a longer box gets a numbered row. */
+const LABELS = ['Documents', 'Downloads', 'Music', 'Pictures', 'Videos'];
+
+/**
+ * A box with `count` rows.
+ *
+ * `count` is the vector's own `length` whenever a table drives this: the tables name the box
+ * they are about, and a harness that silently ran every vector against the same five rows
+ * turned `select_all` on a four-row box into a five-row assertion and could not express a box
+ * longer than the labels.
+ */
+function mount(
+    attrs: Record<string, string> = {},
+    rowAttrs: Record<string, string>[] = [],
+    count = LABELS.length,
+): { el: GtkListBox; host: HTMLElement } {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const el = document.createElement('gtk-list-box') as GtkListBox;
+    for (const [name, value] of Object.entries(attrs)) el.setAttribute(name, value);
+    for (let index = 0; index < count; index++) {
+        const row = document.createElement('gtk-list-box-row') as GtkListBoxRow;
+        for (const [name, value] of Object.entries(rowAttrs[index] ?? {})) row.setAttribute(name, value);
+        const text = document.createElement('span');
+        text.textContent = LABELS[index] ?? `row ${index}`;
+        row.appendChild(text);
+        el.appendChild(row);
+    }
+    host.appendChild(el);
+    return { el, host };
+}
+
+/**
+ * Open the box on the state a vector names — its selection AND its anchor
+ * (`box->selected_row`, gtklistbox.c:145).
+ *
+ * The two are independent upstream, and `select_row` alone cannot reach the pair the
+ * `<Shift>` rows need: `gtk_list_box_unselect_row_internal` unselects a row in `multiple`
+ * mode and LEAVES THE ANCHOR ON IT (gtklistbox.c:1719-1722), so "a selection with an anchor
+ * that is not in it" is a state GTK is in, and a later `<Shift>` measures from the anchor.
+ * Selecting the anchor row and unselecting it again is the same pair of doors an application
+ * has, so the state is built through the element rather than around it.
+ */
+function openOn(el: GtkListBox, selection: readonly number[], anchor: number): void {
+    for (const position of selection) el.selectRow(el.rows[position]!);
+    if (anchor < 0) {
+        el.unselectAll();
+        return;
+    }
+    if (selection.includes(anchor)) return;
+    el.selectRow(el.rows[anchor]!);
+    el.unselectRow(el.rows[anchor]!);
+}
+
+/** Row attributes for a vector's length, with `position` marked unselectable, or none. */
+function rowAttrsFor(length: number, position: number | null): Record<string, string>[] {
+    const attrs = Array.from({ length }, () => ({}) as Record<string, string>);
+    if (position !== null && position >= 0 && position < length) attrs[position] = { selectable: 'false' };
+    return attrs;
+}
+
+const rowsOf = (el: GtkListBox): GtkListBoxRow[] => [...el.querySelectorAll('gtk-list-box-row')] as GtkListBoxRow[];
+const click = (target: Element, init: MouseEventInit = {}) =>
+    target.dispatchEvent(new MouseEvent('click', { bubbles: true, detail: 1, ...init }));
+const key = (target: Element, init: KeyboardEventInit) =>
+    target.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, ...init }));
+
+export const GtkListBoxTest = async () => {
+    await describe('<gtk-list-box> collects its rows and derives their state', async () => {
+        await it('is a listbox of listitems while it can select, and a plain list in none', () => {
+            const { el, host } = mount();
+            expect(el.getAttribute('role')).toBe('listbox');
+            expect(rowsOf(el)[0]!.getAttribute('role')).toBe('listitem');
+            expect(el.getAttribute('aria-multiselectable')).toBe(null);
+            el.selectionMode = 'none';
+            expect(el.getAttribute('role')).toBe('list');
+            el.selectionMode = 'multiple';
+            expect(el.getAttribute('aria-multiselectable')).toBe('true');
+            host.remove();
+        });
+
+        await it('gives every row the .activatable class while the box can select', () => {
+            // gtk_list_box_update_row (:3611-3615): activatable OR (selectable AND can_select).
+            const { el, host } = mount();
+            expect(rowsOf(el).every((row) => row.classList.contains('activatable'))).toBe(true);
+            host.remove();
+        });
+
+        await it('drops the class off an unactivatable, unselectable row in a none box', () => {
+            const { el, host } = mount({ 'selection-mode': 'none' }, [
+                {},
+                { activatable: 'false', selectable: 'false' },
+            ]);
+            // Row 0 KEEPS the class: `activatable || (selectable && can_select)` with
+            // `can_select` false still answers true through its own `activatable`
+            // (gtklistbox.c:3611-3615). Only the row with both flags off loses it.
+            expect(rowsOf(el)[0]!.classList.contains('activatable')).toBe(true);
+            expect(rowsOf(el)[1]!.classList.contains('activatable')).toBe(false);
+            host.remove();
+        });
+
+        await it('keeps the class on an unactivatable row that is still selectable', () => {
+            const { el, host } = mount({}, [{}, { activatable: 'false' }]);
+            expect(rowsOf(el)[1]!.classList.contains('activatable')).toBe(true);
+            host.remove();
+        });
+
+        await it('publishes aria-selected only while the row is selectable and the box can select', () => {
+            const { el, host } = mount({ 'selection-mode': 'multiple' }, [{}, { selectable: 'false' }]);
+            el.selectAll();
+            expect(rowsOf(el)[0]!.getAttribute('aria-selected')).toBe('true');
+            // `gtk_accessible_reset_state` (:3622-3623) — not `false`, ABSENT.
+            expect(rowsOf(el)[1]!.hasAttribute('aria-selected')).toBe(false);
+            el.selectionMode = 'none';
+            expect(rowsOf(el).every((row) => row.hasAttribute('aria-selected'))).toBe(false);
+            host.remove();
+        });
+
+        await it('takes a row appended after connect into the selection', async () => {
+            const { el, host } = mount();
+            const row = document.createElement('gtk-list-box-row');
+            el.appendChild(row);
+            await Promise.resolve();
+            expect(el.rows).toHaveLength(LABELS.length + 1);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-list-box> drives the select vectors with real clicks', async () => {
+        for (const vector of BOX_SELECT_VECTORS) {
+            await it(vector.rule, async () => {
+                const attrs: Record<string, string> = { 'selection-mode': vector.mode };
+                if (vector.step.modify === true) attrs['activate-on-single-click'] = 'false';
+                const rowAttrs = rowAttrsFor(vector.length, vector.step.selectable === false ? vector.position : null);
+                const { el, host } = mount(attrs, rowAttrs, vector.length);
+                openOn(el, vector.selection, vector.anchor);
+                if (vector.mode === 'browse') {
+                    // `browse` refuses `unselect_all` (:986-987), so its starting selection is
+                    // reached by selecting the one row and then another.
+                    el.selectRow(el.rows[vector.selection[0] ?? 0]!);
+                }
+                await Promise.resolve();
+                // A position the box does not have is the C's `row == NULL`: the press landed
+                // between rows or past the last one, `active_row` stays NULL and the release
+                // does nothing at all (gtklistbox.c:1911-1913, :1953-1954). A browser puts
+                // that click on the box, which is the DOM's spelling of "in no row" — clicking
+                // a clamped row instead would have tested a different click altogether.
+                const inBox = vector.position >= 0 && vector.position < vector.length;
+                click(inBox ? rowsOf(el)[vector.position]! : el, {
+                    ctrlKey: vector.step.modify === true,
+                    shiftKey: vector.step.extend === true,
+                });
+                expect(el.selectedRows).toStrictEqual(vector.expected.selection);
+                host.remove();
+            });
+        }
+    });
+
+    await describe('<gtk-list-box> select_all / unselect_all refusals', async () => {
+        for (const vector of BOX_ALL_VECTORS) {
+            await it(vector.rule, async () => {
+                const { el, host } = mount({ 'selection-mode': vector.mode }, [], vector.length);
+                if (vector.op === 'select-all') {
+                    el.selectAll();
+                    expect(el.selectedRows).toStrictEqual(vector.expected ?? []);
+                } else {
+                    el.selectRow(el.rows[0] ?? null);
+                    el.selectAll();
+                    el.unselectAll();
+                    // A refusal leaves the rows selected; a change clears them. The modes that
+                    // refuse are the ones `select_all` never filled in the first place, so both
+                    // halves are read off the SAME fact the C reads it from.
+                    expect(el.selectedRows.length > 0).toBe(vector.mode !== 'multiple');
+                }
+                host.remove();
+            });
+        }
+    });
+
+    await describe('<gtk-list-box> drives the programmatic row vectors', async () => {
+        for (const vector of BOX_ROW_VECTORS) {
+            await it(vector.rule, async () => {
+                const rowAttrs = rowAttrsFor(vector.length, vector.step.selectable === false ? vector.position : null);
+                // `multiple` to BUILD the selection and the vector's own mode afterwards:
+                // `gtk_list_box_set_selection_mode` notifies and updates the rows but does
+                // NOT prune what is selected (gtklistbox.c:1219-1225), so a single-mode box
+                // holding two rows is a state GTK itself can be in, and one the element can.
+                const { el, host } = mount({ 'selection-mode': 'multiple' }, rowAttrs, vector.length);
+                openOn(el, vector.selection, vector.anchor);
+                await Promise.resolve();
+                el.setAttribute('selection-mode', vector.mode);
+                await Promise.resolve();
+
+                const target = vector.position === null ? null : el.rows[vector.position];
+                if (vector.op === 'select') el.selectRow(target);
+                else if (target !== null) el.unselectRow(target);
+                expect(el.selectedRows).toStrictEqual(vector.expected.selection);
+                host.remove();
+            });
+        }
+    });
+
+    await describe('<gtk-list-box> tab-behavior', async () => {
+        await it('gives every activatable row its own tab stop by default', () => {
+            const { el, host } = mount();
+            expect(rowsOf(el).map((row) => row.tabIndex)).toStrictEqual([0, 0, 0, 0, 0]);
+            host.remove();
+        });
+
+        await it('hands out one tab stop for the whole box under item and cell', () => {
+            const { el, host } = mount({ 'tab-behavior': 'item' });
+            expect(rowsOf(el).map((row) => row.tabIndex)).toStrictEqual([0, -1, -1, -1, -1]);
+            el.tabBehavior = 'cell';
+            expect(rowsOf(el).map((row) => row.tabIndex)).toStrictEqual([0, -1, -1, -1, -1]);
+            host.remove();
+        });
+
+        await it('puts the roving tab stop on the first selected row, and moves it on selection', () => {
+            const { el, host } = mount({ 'tab-behavior': 'item' });
+            el.selectRow(el.rows[3]!);
+            expect(rowsOf(el).map((row) => row.tabIndex)).toStrictEqual([-1, -1, -1, 0, -1]);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-list-box> activation', async () => {
+        await it('activates on one click by default and emits row-activated and activate', async () => {
+            const { el, host } = mount();
+            let activated = 0;
+            let rowActivated = 0;
+            el.addEventListener('row-activated', () => {
+                rowActivated++;
+            });
+            rowsOf(el)[2]!.addEventListener('activate', () => {
+                activated++;
+            });
+            click(rowsOf(el)[2]!);
+            expect(activated).toBe(1);
+            expect(rowActivated).toBe(1);
+            host.remove();
+        });
+
+        await it('waits for a double click when activate-on-single-click is off', () => {
+            const { el, host } = mount({ 'activate-on-single-click': 'false' });
+            let activated = 0;
+            rowsOf(el)[2]!.addEventListener('activate', () => {
+                activated++;
+            });
+            click(rowsOf(el)[2]!, { detail: 1 });
+            expect(activated).toBe(0);
+            click(rowsOf(el)[2]!, { detail: 2 });
+            expect(activated).toBe(1);
+            host.remove();
+        });
+
+        await it('emits nothing for a row that is not activatable', () => {
+            const { el, host } = mount({}, [{}, { activatable: 'false' }]);
+            let activated = 0;
+            rowsOf(el)[1]!.addEventListener('activate', () => {
+                activated++;
+            });
+            click(rowsOf(el)[1]!);
+            expect(activated).toBe(0);
+            // The CLICK still selects — activatable is about activation, not selection.
+            expect(el.selectedRows).toStrictEqual([1]);
+            host.remove();
+        });
+
+        await it('toggles the row on Ctrl+Space, the toggle-cursor-row binding', () => {
+            const { el, host } = mount({ 'selection-mode': 'multiple' });
+            const row = rowsOf(el)[1]!;
+            row.focus();
+            key(row, { key: ' ', ctrlKey: true });
+            expect(el.selectedRows).toStrictEqual([1]);
+            key(row, { key: ' ', ctrlKey: true });
+            expect(el.selectedRows).toStrictEqual([]);
+            host.remove();
+        });
+
+        await it('emits selected-rows-changed on every change and row-selected once', async () => {
+            const { el, host } = mount();
+            let changes = 0;
+            let rowSelected = 0;
+            let notified: number[] = [];
+            el.addEventListener('selected-rows-changed', () => {
+                changes++;
+            });
+            el.addEventListener('row-selected', () => {
+                rowSelected++;
+            });
+            el.addEventListener('notify::selected-rows', (event) => {
+                notified = (event as CustomEvent<{ selectedRows: number[] }>).detail.selectedRows;
+            });
+            click(rowsOf(el)[1]!);
+            click(rowsOf(el)[2]!);
+            expect(changes).toBe(2);
+            expect(rowSelected).toBe(2);
+            expect(notified).toStrictEqual([2]);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-list-box> row-selected names the row the click landed on', async () => {
+        await it('and NULL when that row ended up unselected', () => {
+            const { el, host } = mount();
+            const seen: (HTMLElement | null)[] = [];
+            el.addEventListener('row-selected', (event) => {
+                seen.push((event as CustomEvent<{ row: HTMLElement | null }>).detail.row);
+            });
+            click(rowsOf(el)[2]!);
+            expect(seen).toStrictEqual([rowsOf(el)[2]!]);
+            // Ctrl+click on the SELECTED row in single mode clears it, and the C emits
+            // row-selected with NULL there (gtklistbox.c:1826-1828).
+            click(rowsOf(el)[2]!, { ctrlKey: true });
+            expect(seen[1]).toBe(null);
+            expect(el.selectedRows).toStrictEqual([]);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-list-box> select_row is the programmatic door, not the click', async () => {
+        await it('is idempotent where a click would toggle', () => {
+            const { el, host } = mount();
+            el.selectRow(el.rows[2]!);
+            el.selectRow(el.rows[2]!);
+            expect(el.selectedRows).toStrictEqual([2]);
+            host.remove();
+        });
+
+        await it('clears everything for a null row and moves the anchor with it', async () => {
+            const { el, host } = mount({ 'selection-mode': 'multiple' });
+            el.selectRow(el.rows[1]!);
+            el.selectRow(el.rows[3]!);
+            el.selectRow(null);
+            expect(el.selectedRows).toStrictEqual([]);
+            host.remove();
+        });
+
+        await it('ignores an unselectable row', () => {
+            const { el, host } = mount({}, [{}, { selectable: 'false' }]);
+            el.selectRow(el.rows[1]!);
+            expect(el.selectedRows).toStrictEqual([]);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-list-box-row> on its own', async () => {
+        await it('reads activatable and selectable by PRESENCE, defaulting both to true', () => {
+            const host = document.createElement('div');
+            document.body.appendChild(host);
+            const row = document.createElement('gtk-list-box-row') as GtkListBoxRow;
+            host.appendChild(row);
+            expect(row.activatable).toBe(true);
+            expect(row.selectable).toBe(true);
+            row.setAttribute('activatable', 'false');
+            row.setAttribute('selectable', 'false');
+            expect(row.activatable).toBe(false);
+            expect(row.selectable).toBe(false);
+            host.remove();
+        });
+
+        await it('is the tab stop only while activatable, and answers Enter and Space', () => {
+            const host = document.createElement('div');
+            document.body.appendChild(host);
+            const row = document.createElement('gtk-list-box-row') as GtkListBoxRow;
+            host.appendChild(row);
+            let activations = 0;
+            row.addEventListener('activate', () => {
+                activations++;
+            });
+            expect(row.tabIndex).toBe(0);
+            key(row, { key: 'Enter' });
+            key(row, { key: ' ' });
+            expect(activations).toBe(2);
+            // `activatable="false"` alone does NOT stop the class: the row is still
+            // SELECTABLE, and the C's rule is `activatable || (selectable && can_select)`
+            // (gtklistbox.c:3611-3615). Both flags off is what takes the tab stop away.
+            row.setAttribute('activatable', 'false');
+            expect(row.classList.contains('activatable')).toBe(true);
+            row.setAttribute('selectable', 'false');
+            // Not activatable means NOT FOCUSABLE upstream, and `attachRowActivation` removes
+            // the attribute rather than writing -1 (row-activation.ts).
+            expect(row.hasAttribute('tabindex')).toBe(false);
+            key(row, { key: 'Enter' });
+            expect(activations).toBe(2);
+            host.remove();
+        });
+
+        await it('puts an authored child in the contents node, after connect too', async () => {
+            const host = document.createElement('div');
+            document.body.appendChild(host);
+            const row = document.createElement('gtk-list-box-row') as GtkListBoxRow;
+            const first = document.createElement('span');
+            first.textContent = 'first';
+            row.appendChild(first);
+            host.appendChild(row);
+            expect(row.child).toBe(first);
+            const late = document.createElement('span');
+            late.textContent = 'late';
+            row.appendChild(late);
+            await Promise.resolve();
+            expect(row.child).toBe(first);
+            expect(row.textContent).toContain('late');
+            host.remove();
+        });
+    });
+};

package/src/gtk-list-view.spec.ts

@@ -0,0 +1,203 @@
+// DOM-level tests for <gtk-list-view>: the two model doors, the factory, the
+// click-and-modifier selection, and the one thing a pure core test cannot reach — that a
+// splice leaves the OTHER rows standing, which is what the whole items-changed path
+// exists for.
+//
+// The THIRD model door, the string-list child a `.blp` authors (ADR 0072), has no case
+// here for the reason `<gtk-drop-down>`'s has none: the tag it is written as is markup
+// the shared-tree builder emits and no `customElements.define` registers, so a spec that
+// constructed one would be asserting against an inert `HTMLElement`. It is covered where
+// that markup is produced, in `value-lists.spec.ts`.
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { AdwListItemContext } from '@gjsify/adwaita-core';
+import { LIST_VIEW_SELECT_VECTORS } from '@gjsify/adwaita-core/conformance';
+
+import type { GtkListView } from './elements/gtk-list-view.js';
+
+function mount(attrs: Record<string, string> = {}): { el: GtkListView; host: HTMLElement } {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const el = document.createElement('gtk-list-view') as GtkListView;
+    for (const [name, value] of Object.entries(attrs)) el.setAttribute(name, value);
+    host.appendChild(el);
+    return { el, host };
+}
+
+const rows = (el: GtkListView): HTMLElement[] => [...el.querySelectorAll<HTMLElement>('.adw-list-view-row')];
+const labels = (el: GtkListView): string[] => rows(el).map((row) => row.textContent ?? '');
+
+const click = (row: HTMLElement, init: MouseEventInit = {}) =>
+    row.dispatchEvent(new MouseEvent('click', { bubbles: true, ...init }));
+
+export const GtkListViewTest = async () => {
+    await describe('<gtk-list-view> model', async () => {
+        await it('draws one row per item from the JSON attribute', () => {
+            const { el, host } = mount({ model: '["Alpha","Beta","Gamma"]' });
+            expect(labels(el)).toStrictEqual(['Alpha', 'Beta', 'Gamma']);
+            expect(el.getAttribute('role')).toBe('listbox');
+            host.remove();
+        });
+
+        await it('takes the property too, in every item spelling the port accepts', () => {
+            const { el, host } = mount();
+            el.model = ['Alpha', { label: 'Beta' }, { value: 'c', label: 'Gamma' }];
+            expect(labels(el)).toStrictEqual(['Alpha', 'Beta', 'Gamma']);
+            expect(el.model[2]!.value).toBe('c');
+            host.remove();
+        });
+
+        await it('survives a malformed attribute instead of failing to upgrade', () => {
+            const { el, host } = mount({ model: '{' });
+            expect(labels(el)).toStrictEqual([]);
+            host.remove();
+        });
+
+        await it('SPLICES: an appended item leaves the existing row nodes identical', () => {
+            const { el, host } = mount({ model: '["Alpha","Beta"]' });
+            const before = rows(el);
+            el.model = ['Alpha', 'Beta', 'Gamma'];
+            const after = rows(el);
+            expect(after.length).toBe(3);
+            expect(after[0]).toBe(before[0]);
+            expect(after[1]).toBe(before[1]);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-list-view> factory', async () => {
+        await it('draws the item label when no factory was set', () => {
+            const { el, host } = mount({ model: '["Alpha"]' });
+            expect(el.querySelector('.adw-list-item-label')?.textContent).toBe('Alpha');
+            host.remove();
+        });
+
+        await it('hands a factory the item, its position and its selected state', () => {
+            const { el, host } = mount({ model: '["Alpha","Beta"]' });
+            const seen: AdwListItemContext[] = [];
+            el.factory = (context) => {
+                seen.push(context);
+                const node = document.createElement('b');
+                node.textContent = `${context.position}:${context.item.label}`;
+                return node;
+            };
+            expect(labels(el)).toStrictEqual(['0:Alpha', '1:Beta']);
+            expect(seen[1]!.selected).toBe(false);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-list-view> drives the selection vectors with real clicks', async () => {
+        // The core suite drives the same rows through `ListViewState`; this is the half
+        // that proves the ELEMENT reads the two modifiers off the event and routes them to
+        // it, which no pure test of the rules can reach.
+        for (const vector of LIST_VIEW_SELECT_VECTORS) {
+            await it(vector.rule, () => {
+                const { el, host } = mount({
+                    model: JSON.stringify(Array.from({ length: vector.length }, (_, i) => `${i}`)),
+                    'selection-mode': vector.mode,
+                });
+                for (const step of vector.clicks) {
+                    const row = rows(el)[step.position];
+                    if (row !== undefined) click(row, { ctrlKey: step.modify, shiftKey: step.extend });
+                }
+                expect(el.selected).toStrictEqual([...vector.selection]);
+                host.remove();
+            });
+        }
+    });
+
+    await describe('<gtk-list-view> selection', async () => {
+        await it('selects on click and notifies once per change', () => {
+            const { el, host } = mount({ model: '["Alpha","Beta","Gamma"]' });
+            const notified: number[][] = [];
+            el.addEventListener('notify::selected', (event) => {
+                notified.push((event as CustomEvent).detail.selected as number[]);
+            });
+            click(rows(el)[1]!);
+            click(rows(el)[1]!);
+            expect(el.selected).toStrictEqual([1]);
+            expect(notified).toStrictEqual([[1]]);
+            expect(rows(el)[1]!.getAttribute('aria-selected')).toBe('true');
+            host.remove();
+        });
+
+        await it('Ctrl and Shift add and extend in multiple mode', () => {
+            const { el, host } = mount({ model: '["A","B","C","D"]', 'selection-mode': 'multiple' });
+            expect(el.getAttribute('aria-multiselectable')).toBe('true');
+            click(rows(el)[0]!);
+            click(rows(el)[2]!, { ctrlKey: true });
+            expect(el.selected).toStrictEqual([0, 2]);
+            click(rows(el)[0]!);
+            click(rows(el)[2]!, { shiftKey: true });
+            expect(el.selected).toStrictEqual([0, 1, 2]);
+            host.remove();
+        });
+
+        await it('selects nothing at all in none mode, and says so to assistive technology', () => {
+            const { el, host } = mount({ model: '["A","B"]', 'selection-mode': 'none' });
+            click(rows(el)[1]!);
+            expect(el.selected).toStrictEqual([]);
+            expect(el.getAttribute('role')).toBe('list');
+            expect(rows(el)[1]!.getAttribute('role')).toBe('listitem');
+            host.remove();
+        });
+
+        await it('drops a selected position the replaced model no longer has', () => {
+            const { el, host } = mount({ model: '["A","B","C"]' });
+            click(rows(el)[2]!);
+            el.model = ['A'];
+            expect(el.selected).toStrictEqual([]);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-list-view> activation and keyboard', async () => {
+        await it('activates on double click, and on a single one only when asked', () => {
+            const { el, host } = mount({ model: '["A","B"]' });
+            const activated: number[] = [];
+            el.addEventListener('activate', (event) => {
+                activated.push((event as CustomEvent).detail.position as number);
+            });
+            click(rows(el)[1]!);
+            expect(activated).toStrictEqual([]);
+            rows(el)[1]!.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }));
+            el.singleClickActivate = true;
+            click(rows(el)[0]!);
+            expect(activated).toStrictEqual([1, 0]);
+            host.remove();
+        });
+
+        await it('hands out a roving tabindex for tab-behavior item, and every stop for all', () => {
+            const { el, host } = mount({ model: '["A","B","C"]', 'tab-behavior': 'item' });
+            expect(rows(el).map((row) => row.tabIndex)).toStrictEqual([0, -1, -1]);
+            click(rows(el)[2]!);
+            expect(rows(el).map((row) => row.tabIndex)).toStrictEqual([-1, -1, 0]);
+            el.tabBehavior = 'all';
+            expect(rows(el).map((row) => row.tabIndex)).toStrictEqual([0, 0, 0]);
+            host.remove();
+        });
+
+        await it('moves the selection with ArrowDown, which is what the roving tabindex needs', () => {
+            const { el, host } = mount({ model: '["A","B","C"]', 'tab-behavior': 'item' });
+            click(rows(el)[0]!);
+            // Dispatched ON THE ROW: `attachRovingFocus` listens on the host and finds the
+            // item the key came from, so a press with the host itself as the target is one
+            // no user can produce and the helper correctly ignores.
+            rows(el)[0]!.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+            expect(el.selected).toStrictEqual([1]);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-list-view> separators', async () => {
+        await it('carries the .separators class only while show-separators is set', () => {
+            const { el, host } = mount({ model: '["A","B"]' });
+            expect(el.classList.contains('separators')).toBe(false);
+            el.showSeparators = true;
+            expect(el.classList.contains('separators')).toBe(true);
+            expect(getComputedStyle(rows(el)[0]!).borderBottomWidth).toBe('1px');
+            host.remove();
+        });
+    });
+};