@gjsify/adwaita-web 0.54.0 → 0.56.0

package/src/gtk-expander.spec.ts

@@ -0,0 +1,170 @@
+// DOM-level tests for <gtk-expander>. What matters is the disclosure itself — the
+// `expanded` flag, the `:checked` state GTK puts on the ARROW node rather than on the
+// widget, the `label` / `label-widget` precedence, and the `Alt`+mnemonic that
+// `gtk_expander_new_with_mnemonic` documents — plus the node tree, because the stylesheet
+// selects on `expander-widget > box > title`.
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { GtkExpander } from './elements/gtk-expander.js';
+
+function mount(
+    attrs: Record<string, string> = {},
+    labelWidget = false,
+): {
+    el: GtkExpander;
+    host: HTMLElement;
+} {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    host.style.width = '260px';
+    const el = document.createElement('gtk-expander') as GtkExpander;
+    for (const [name, value] of Object.entries(attrs)) el.setAttribute(name, value);
+    if (labelWidget) {
+        const badge = document.createElement('span');
+        badge.id = 'badge';
+        badge.setAttribute('slot', 'label');
+        el.appendChild(badge);
+    }
+    const body = document.createElement('div');
+    body.id = 'body';
+    body.style.height = '40px';
+    el.appendChild(body);
+    host.appendChild(el);
+    return { el, host };
+}
+
+/** Collect the `detail` of every `event` dispatched on `el`. */
+function record(el: HTMLElement, event: string): unknown[] {
+    const details: unknown[] = [];
+    el.addEventListener(event, (e) => details.push((e as CustomEvent).detail));
+    return details;
+}
+
+export const GtkExpanderTest = async () => {
+    await describe('<gtk-expander> disclosure', async () => {
+        await it('builds the node tree the stylesheet selects on', () => {
+            const { el, host } = mount({ label: 'More options' });
+            const box = el.querySelector('.adw-expander-box') as HTMLElement;
+            const title = box.querySelector('.adw-expander-title') as HTMLElement;
+            expect(box.children[0]).toBe(title);
+            expect((box.children[1] as HTMLElement).classList.contains('adw-expander-content')).toBe(true);
+            // GTK gives the WIDGET the button role (gtkexpander.c:393) and the arrow is its
+            // own node; here the title carries the role because it is what is pressed.
+            expect(title.getAttribute('role')).toBe('button');
+            expect(title.tabIndex).toBe(0);
+            expect((title.firstElementChild as HTMLElement).classList.contains('adw-expander-arrow')).toBe(true);
+            host.remove();
+        });
+
+        await it('starts collapsed with the child out of the box', () => {
+            const { el, host } = mount({ label: 'More options' });
+            expect(el.expanded).toBe(false);
+            const title = el.querySelector('.adw-expander-title') as HTMLElement;
+            expect(title.getAttribute('aria-expanded')).toBe('false');
+            // `gtk_expander_set_child` parents the child into the box only while expanded
+            // (gtkexpander.c:909-923), so a collapsed expander does not lay it out.
+            expect((el.querySelector('.adw-expander-content') as HTMLElement).hidden).toBe(true);
+            host.remove();
+        });
+
+        await it('marks the ARROW, not the widget, with :checked', () => {
+            const { el, host } = mount({ label: 'More options' });
+            const arrow = el.querySelector('.adw-expander-arrow') as HTMLElement;
+            expect(arrow.classList.contains('checked')).toBe(false);
+            el.expanded = true;
+            // gtkexpander.c:897-900 — GTK_STATE_FLAG_CHECKED goes on `arrow_widget`.
+            expect(arrow.classList.contains('checked')).toBe(true);
+            el.expanded = false;
+            expect(arrow.classList.contains('checked')).toBe(false);
+            host.remove();
+        });
+
+        await it('a click toggles it, notifies once per change, and emits activate', () => {
+            const { el, host } = mount({ label: 'More options' });
+            const title = el.querySelector('.adw-expander-title') as HTMLElement;
+            const expanded = record(el, 'notify::expanded');
+            const activated = record(el, 'activate');
+            title.click();
+            expect(el.expanded).toBe(true);
+            title.click();
+            expect(el.expanded).toBe(false);
+            expect(expanded).toStrictEqual([{ expanded: true }, { expanded: false }]);
+            expect(activated).toStrictEqual([{ expanded: true }, { expanded: false }]);
+            host.remove();
+        });
+
+        await it('names the disclosed row for aria-controls', () => {
+            const { el, host } = mount({ label: 'More options' });
+            const title = el.querySelector('.adw-expander-title') as HTMLElement;
+            expect(title.getAttribute('aria-controls')).toBe(el.child?.id);
+            expect(el.child?.id).not.toBe('');
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-expander> label', async () => {
+        await it('makes the text a GtkLabel, as gtk_expander_set_label does', () => {
+            const { el, host } = mount({ label: '_More options', 'use-underline': '' });
+            const label = el.querySelector('.adw-expander-title > gtk-label') as HTMLElement;
+            expect(el.label).toBe('_More options');
+            // The very reduction `<gtk-label>` applies to its own `label`, so the expander's
+            // title and a bare label show the same string.
+            expect(label.getAttribute('label')).toBe('More options');
+            expect(label.getAttribute('use-underline')).toBe('');
+            host.remove();
+        });
+
+        await it('leaves markup alone unless use-markup says otherwise', () => {
+            const { el, host } = mount({ label: '<b>Bold</b> options' });
+            const label = el.querySelector('.adw-expander-title > gtk-label') as HTMLElement;
+            expect(label.getAttribute('label')).toBe('<b>Bold</b> options');
+            el.useMarkup = true;
+            expect(label.getAttribute('use-markup')).toBe('');
+            expect(label.getAttribute('label')).toBe('Bold options');
+            host.remove();
+        });
+
+        await it("a label widget takes the place of the text, as the C's NULL label does", () => {
+            const { el, host } = mount({ label: 'More options' }, true);
+            expect(el.labelWidget?.id).toBe('badge');
+            // `gtk_expander_set_label` NULLs the label widget (gtkexpander.c:969-970), so
+            // the two are mutually exclusive and the widget wins.
+            expect(el.label).toBe(null);
+            expect((el.querySelector('.adw-expander-title > gtk-label') as HTMLElement).hidden).toBe(true);
+            host.remove();
+        });
+
+        await it('Alt plus the marked character activates, as the constructor documents', () => {
+            const { el, host } = mount({ label: '_More options', 'use-underline': '' });
+            const title = el.querySelector('.adw-expander-title') as HTMLElement;
+            title.dispatchEvent(new KeyboardEvent('keydown', { key: 'm', altKey: true, bubbles: true }));
+            expect(el.expanded).toBe(true);
+            title.dispatchEvent(new KeyboardEvent('keydown', { key: 'z', altKey: true, bubbles: true }));
+            // `gtk_label_get_mnemonic_keyval` binds the FIRST marked character only.
+            expect(el.expanded).toBe(true);
+            title.dispatchEvent(new KeyboardEvent('keydown', { key: 'm', bubbles: true }));
+            expect(el.expanded).toBe(true);
+            host.remove();
+        });
+
+        await it('an escaped __ marks nothing, exactly as stripMnemonic reads it', () => {
+            const { el, host } = mount({ label: '__More _options', 'use-underline': '' });
+            const title = el.querySelector('.adw-expander-title') as HTMLElement;
+            expect(title.querySelector('gtk-label')?.getAttribute('label')).toBe('_More options');
+            title.dispatchEvent(new KeyboardEvent('keydown', { key: 'o', altKey: true, bubbles: true }));
+            expect(el.expanded).toBe(true);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-expander> resize-toplevel', async () => {
+        await it('is reflected, because a document reflows itself', () => {
+            const { el, host } = mount({ label: 'More', 'resize-toplevel': '' });
+            expect(el.resizeToplevel).toBe(true);
+            expect(el.classList.contains('resize-toplevel')).toBe(true);
+            el.resizeToplevel = false;
+            expect(el.classList.contains('resize-toplevel')).toBe(false);
+            host.remove();
+        });
+    });
+};

package/src/gtk-fixed.spec.ts

@@ -0,0 +1,97 @@
+// DOM-level tests for <gtk-fixed>: the children are out of flow at pixel offsets, an
+// unpositioned one is at 0, 0 as GtkBuilder puts it, and the fixed's own box is the UNION
+// of its children's rectangles — `gtk_fixed_layout_measure` in one number per axis.
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { GtkFixed } from './elements/gtk-fixed.js';
+
+/** A fixed-size box, so the union below is arithmetic and not a measurement of text. */
+function cell(x: number, y: number, width: number, height: number): HTMLElement {
+    const el = document.createElement('div');
+    el.style.width = `${width}px`;
+    el.style.height = `${height}px`;
+    if (x !== 0 || y !== 0) {
+        el.style.left = `${x}px`;
+        el.style.top = `${y}px`;
+    }
+    return el;
+}
+
+function mount(...children: HTMLElement[]): { el: GtkFixed; host: HTMLElement } {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const el = document.createElement('gtk-fixed') as GtkFixed;
+    el.append(...children);
+    host.appendChild(el);
+    return { el, host };
+}
+
+export const GtkFixedTest = async () => {
+    await describe('<gtk-fixed> placement', async () => {
+        await it('takes a child out of flow and leaves an unpositioned one at 0, 0', () => {
+            const { el, host } = mount(cell(0, 0, 40, 10));
+            const style = getComputedStyle(el.firstElementChild as HTMLElement);
+            expect(style.position).toBe('absolute');
+            expect(style.left).toBe('0px');
+            expect(style.top).toBe('0px');
+            expect(getComputedStyle(el).position).toBe('relative');
+            host.remove();
+        });
+
+        await it('put() writes the offset the child sits at', () => {
+            const { el, host } = mount(cell(0, 0, 40, 10));
+            const child = el.firstElementChild as HTMLElement;
+            el.put(child, 20, 30);
+            expect(child.style.left).toBe('20px');
+            expect(child.style.top).toBe('30px');
+            // move() is the same without the parent change.
+            el.move(child, 5, 6);
+            expect(child.style.left).toBe('5px');
+            host.remove();
+        });
+
+        await it('put() adopts a child that is not in it yet', () => {
+            const { el, host } = mount();
+            const late = cell(0, 0, 20, 20);
+            document.body.appendChild(late);
+            el.put(late, 8, 9);
+            expect(late.parentNode).toBe(el);
+            expect(late.style.left).toBe('8px');
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-fixed> size', async () => {
+        await it("is the union of its children's rectangles", () => {
+            const { el, host } = mount(cell(20, 10, 60, 20), cell(10, 30, 40, 15));
+            // MAX (x + width) = 80 and MAX (y + height) = 45 over the two children.
+            expect(el.style.minWidth).toBe('80px');
+            expect(el.style.minHeight).toBe('45px');
+            host.remove();
+        });
+
+        await it('an empty fixed asks for nothing', () => {
+            const { el, host } = mount();
+            expect(el.style.minWidth).toBe('0px');
+            expect(el.style.minHeight).toBe('0px');
+            host.remove();
+        });
+
+        await it('a child added after connect is in the next union', async () => {
+            const { el, host } = mount(cell(0, 0, 30, 30));
+            expect(el.style.minWidth).toBe('30px');
+            el.appendChild(cell(70, 0, 30, 30));
+            await new Promise<void>((resolve) => setTimeout(resolve, 0));
+            expect(el.style.minWidth).toBe('100px');
+            host.remove();
+        });
+
+        await it('clips like GTK_OVERFLOW_HIDDEN, and is a block that holds a position', () => {
+            const { el, host } = mount(cell(0, 0, 10, 10));
+            const style = getComputedStyle(el);
+            expect(style.overflow).toBe('hidden');
+            expect(style.display).toBe('block');
+            host.remove();
+        });
+    });
+};

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

@@ -0,0 +1,289 @@
+// DOM-level tests for <gtk-flow-box>: the cells it collects, the four state flags it derives
+// for each, the horizontal-by-default orientation, and the property doors the flex layout reads.
+//
+// The SELECTION RULES are the same core module `<gtk-list-box>` drives and
+// `box-selection.spec.ts` holds them to, so this suite does not re-run the tables — it runs
+// the two places the flow box is its OWN code: the orientation, which flips the line the
+// primary arrows walk, and the layout properties, which are what the arrows' visual step is
+// measured against.
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { GtkFlowBox } from './elements/gtk-flow-box.js';
+import type { GtkFlowBoxChild } from './elements/gtk-flow-box-child.js';
+
+const CELLS = 9;
+
+function mount(attrs: Record<string, string> = {}): { el: GtkFlowBox; host: HTMLElement } {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const el = document.createElement('gtk-flow-box') as GtkFlowBox;
+    for (const [name, value] of Object.entries(attrs)) el.setAttribute(name, value);
+    for (let index = 0; index < CELLS; index++) {
+        const child = document.createElement('gtk-flow-box-child') as GtkFlowBoxChild;
+        const text = document.createElement('span');
+        text.textContent = `cell ${index}`;
+        child.appendChild(text);
+        el.appendChild(child);
+    }
+    host.appendChild(el);
+    return { el, host };
+}
+
+const childrenOf = (el: GtkFlowBox): GtkFlowBoxChild[] =>
+    [...el.querySelectorAll('gtk-flow-box-child')] as GtkFlowBoxChild[];
+const selectedFlags = (el: GtkFlowBox): boolean[] =>
+    childrenOf(el).map((child) => child.classList.contains('selected'));
+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 GtkFlowBoxTest = async () => {
+    await describe('<gtk-flow-box> orientation, and the default nobody expects', async () => {
+        await it('is HORIZONTAL by default, where a GtkListBase is vertical', async () => {
+            // gtkflowbox.c:3981 — `priv->orientation = GTK_ORIENTATION_HORIZONTAL`, against
+            // gtklistbase.c:2070 which answers VERTICAL for every list view.
+            const { el, host } = mount();
+            expect(el.orientation).toBe('horizontal');
+            expect(el.classList.contains('vertical')).toBe(false);
+            expect(globalThis.getComputedStyle(el).flexDirection).toBe('row');
+            el.orientation = 'vertical';
+            expect(el.classList.contains('vertical')).toBe(true);
+            host.remove();
+        });
+
+        await it('declares a grid of gridcells, and multiselectable only in multiple', () => {
+            const { el, host } = mount();
+            expect(el.getAttribute('role')).toBe('grid');
+            expect(childrenOf(el)[0]!.getAttribute('role')).toBe('gridcell');
+            expect(el.getAttribute('aria-multiselectable')).toBe(null);
+            el.selectionMode = 'multiple';
+            expect(el.getAttribute('aria-multiselectable')).toBe('true');
+            host.remove();
+        });
+
+        await it('is a readonly grid in selection-mode none', () => {
+            const { el, host } = mount({ 'selection-mode': 'none' });
+            expect(el.getAttribute('aria-readonly')).toBe('true');
+            expect(childrenOf(el).every((child) => child.hasAttribute('aria-selected'))).toBe(false);
+            el.selectionMode = 'single';
+            expect(el.hasAttribute('aria-readonly')).toBe(false);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-flow-box> the layout properties the flex rules read', async () => {
+        await it("defaults max-children-per-line to GTK's own seven", () => {
+            // DEFAULT_MAX_CHILDREN_PER_LINE (gtkflowbox.c:728, :3985).
+            const { el, host } = mount();
+            expect(el.maxChildrenPerLine).toBe(7);
+            host.remove();
+        });
+
+        await it('never lets max-children-per-line fall below the ParamSpec minimum of 1', () => {
+            const { el, host } = mount();
+            el.maxChildrenPerLine = 0;
+            expect(el.maxChildrenPerLine).toBe(1);
+            el.setAttribute('max-children-per-line', 'not-a-number');
+            expect(el.maxChildrenPerLine).toBe(7);
+            host.remove();
+        });
+
+        await it('keeps min-children-per-line at zero unless asked, which is the GIR default', () => {
+            const { el, host } = mount();
+            expect(el.minChildrenPerLine).toBe(0);
+            expect(el.style.getPropertyValue('--adw-flow-box-min-children-per-line')).toBe('');
+            el.minChildrenPerLine = 3;
+            expect(el.style.getPropertyValue('--adw-flow-box-min-children-per-line')).toBe('3');
+            host.remove();
+        });
+
+        await it('writes the two spacings as custom properties, in pixels', () => {
+            const { el, host } = mount({ 'row-spacing': '6', 'column-spacing': '12' });
+            expect(el.rowSpacing).toBe(6);
+            expect(el.columnSpacing).toBe(12);
+            expect(el.style.getPropertyValue('--adw-flow-box-row-spacing')).toBe('6px');
+            expect(el.style.getPropertyValue('--adw-flow-box-column-spacing')).toBe('12px');
+            host.remove();
+        });
+
+        await it('reads a broken spacing as the GIR default of zero', () => {
+            const { el, host } = mount();
+            el.setAttribute('row-spacing', '-4');
+            expect(el.rowSpacing).toBe(0);
+            el.setAttribute('row-spacing', '');
+            expect(el.rowSpacing).toBe(0);
+            host.remove();
+        });
+
+        await it('caps a cell at its share of the line, so max-children-per-line caps the line', () => {
+            const { el, host } = mount({ 'max-children-per-line': '3' });
+            const child = childrenOf(el)[0]!;
+            // The stylesheet computes `max-width: calc(100% / 3)` from the custom property, so
+            // the resolved value on the cell is what the count produced.
+            expect(el.style.getPropertyValue('--adw-flow-box-max-children-per-line')).toBe('3');
+            expect(child.style.getPropertyValue('--adw-flow-box-max-children-per-line')).toBe('');
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-flow-box> selection', async () => {
+        await it('a click selects and the class follows the selection', () => {
+            const { el, host } = mount();
+            click(childrenOf(el)[3]!);
+            expect(el.selectedChildren).toStrictEqual([3]);
+            expect(selectedFlags(el)).toStrictEqual([false, false, false, true, false, false, false, false, false]);
+            expect(childrenOf(el)[3]!.getAttribute('aria-selected')).toBe('true');
+            host.remove();
+        });
+
+        await it('Ctrl+click toggles in multiple mode and keeps the anchor', () => {
+            const { el, host } = mount({ 'selection-mode': 'multiple' });
+            click(childrenOf(el)[1]!);
+            click(childrenOf(el)[5]!, { ctrlKey: true });
+            expect(el.selectedChildren).toStrictEqual([1, 5]);
+            click(childrenOf(el)[5]!, { ctrlKey: true });
+            expect(el.selectedChildren).toStrictEqual([1]);
+            host.remove();
+        });
+
+        await it('Shift+click takes the span and keeps the anchor, as the C does', () => {
+            const { el, host } = mount({ 'selection-mode': 'multiple' });
+            click(childrenOf(el)[2]!);
+            click(childrenOf(el)[6]!, { shiftKey: true });
+            expect(el.selectedChildren).toStrictEqual([2, 3, 4, 5, 6]);
+            // A second extend grows the range from the FIRST click, because
+            // `priv->selected_child` is left where it was (gtkflowbox.c:1113).
+            click(childrenOf(el)[8]!, { shiftKey: true });
+            expect(el.selectedChildren).toStrictEqual([2, 3, 4, 5, 6, 7, 8]);
+            host.remove();
+        });
+
+        await it('clears the selection on Ctrl+click of the selected row in single mode', () => {
+            const { el, host } = mount();
+            click(childrenOf(el)[4]!);
+            click(childrenOf(el)[4]!, { ctrlKey: true });
+            expect(el.selectedChildren).toStrictEqual([]);
+            host.remove();
+        });
+
+        await it('browse keeps a row selected under Ctrl+click, because it has no toggle', () => {
+            const { el, host } = mount({ 'selection-mode': 'browse' });
+            click(childrenOf(el)[4]!);
+            click(childrenOf(el)[4]!, { ctrlKey: true });
+            expect(el.selectedChildren).toStrictEqual([4]);
+            host.remove();
+        });
+
+        await it('select_all is refused outside multiple, and unselect_all in browse', () => {
+            const { el, host } = mount();
+            el.selectChild(childrenOf(el)[1]!);
+            el.selectAll();
+            expect(el.selectedChildren).toStrictEqual([1]);
+            el.selectionMode = 'browse';
+            el.selectChild(childrenOf(el)[2]!);
+            el.unselectAll();
+            expect(el.selectedChildren).toStrictEqual([2]);
+            host.remove();
+        });
+
+        await it('toggles on Ctrl+Space, the toggle-cursor-child binding', () => {
+            const { el, host } = mount({ 'selection-mode': 'multiple' });
+            const child = childrenOf(el)[2]!;
+            child.focus();
+            key(child, { key: ' ', ctrlKey: true });
+            expect(el.selectedChildren).toStrictEqual([2]);
+            key(child, { key: ' ', ctrlKey: true });
+            expect(el.selectedChildren).toStrictEqual([]);
+            host.remove();
+        });
+
+        await it('emits child-activated and activate on one click by default', () => {
+            const { el, host } = mount();
+            let activated = 0;
+            let childActivated = 0;
+            el.addEventListener('child-activated', () => {
+                childActivated++;
+            });
+            childrenOf(el)[1]!.addEventListener('activate', () => {
+                activated++;
+            });
+            click(childrenOf(el)[1]!);
+            expect(activated).toBe(1);
+            expect(childActivated).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;
+            childrenOf(el)[1]!.addEventListener('activate', () => {
+                activated++;
+            });
+            click(childrenOf(el)[1]!, { detail: 1 });
+            expect(activated).toBe(0);
+            click(childrenOf(el)[1]!, { detail: 2 });
+            expect(activated).toBe(1);
+            host.remove();
+        });
+
+        await it('emits selected-children-changed on every change', () => {
+            const { el, host } = mount();
+            let changes = 0;
+            el.addEventListener('selected-children-changed', () => {
+                changes++;
+            });
+            click(childrenOf(el)[0]!);
+            click(childrenOf(el)[1]!);
+            expect(changes).toBe(2);
+            host.remove();
+        });
+
+        await it('every cell is its own tab stop, and the arrows walk the line', () => {
+            const { el, host } = mount();
+            expect(childrenOf(el).every((child) => child.tabIndex === 0)).toBe(true);
+            childrenOf(el)[0]!.focus();
+            key(childrenOf(el)[0]!, { key: 'ArrowRight' });
+            expect(el.selectedChildren).toStrictEqual([1]);
+            host.remove();
+        });
+
+        await it('takes a cell appended after connect into the selection', async () => {
+            const { el, host } = mount();
+            const child = document.createElement('gtk-flow-box-child');
+            el.appendChild(child);
+            await Promise.resolve();
+            expect(el.children).toHaveLength(CELLS + 1);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-flow-box-child> on its own', async () => {
+        await it('is a gridcell and a tab stop, with its authored child inside', async () => {
+            const host = document.createElement('div');
+            document.body.appendChild(host);
+            const child = document.createElement('gtk-flow-box-child') as GtkFlowBoxChild;
+            const text = document.createElement('span');
+            text.textContent = 'only';
+            child.appendChild(text);
+            host.appendChild(child);
+            expect(child.getAttribute('role')).toBe('gridcell');
+            expect(child.tabIndex).toBe(0);
+            expect(child.child).toBe(text);
+            expect(child.selected).toBe(false);
+            child.classList.add('selected');
+            expect(child.selected).toBe(true);
+            host.remove();
+        });
+
+        await it('answers its index from the DOM, so a move reports where it IS', async () => {
+            const { el, host } = mount();
+            const moved = childrenOf(el)[7]!;
+            el.prepend(moved);
+            await Promise.resolve();
+            expect(moved.index).toBe(0);
+            expect(el.children[0]).toBe(moved);
+            host.remove();
+        });
+    });
+};