@gjsify/adwaita-web 0.51.0 → 0.52.0

package/src/gtk-box.spec.ts

@@ -0,0 +1,168 @@
+// DOM-level tests for <gtk-box>, read off LAYOUT rather than the element's own state: an
+// element asserting its bookkeeping agrees with itself while the page is wrong.
+//
+// The last case is the reason the element exists — an authored tree with a `Gtk.Box` of
+// `Gtk.Label`s, mounted through the shipped `mountSharedTree`, was an unknown inline element
+// holding two unknown empty ones. It is a `SharedTreeNode` literal, the shape a `.blp`'s
+// `?shared-tree` projection hands over, so the case holds without the build seam.
+
+import { describe, expect, it } from '@gjsify/unit';
+
+import { BOX_ORIENTATION_VECTORS, BOX_SPACING_VECTORS, type SharedTreeNode } from '@gjsify/adwaita-core/conformance';
+
+import { Gtk } from '@gjsify/adwaita-web';
+import { mountSharedTree } from './shared-tree-builder.js';
+
+import type { GtkBox } from './elements/gtk-box.js';
+
+/** A box with `count` fixed-size children, in a 400px-wide host. */
+function mount(count = 3): { box: GtkBox; kids: HTMLElement[]; host: HTMLElement } {
+    const host = document.createElement('div');
+    host.style.width = '400px';
+    document.body.appendChild(host);
+    const box = document.createElement('gtk-box') as GtkBox;
+    const kids: HTMLElement[] = [];
+    for (let i = 0; i < count; i++) {
+        const kid = document.createElement('div');
+        kid.style.width = `${20 + i * 10}px`;
+        kid.style.height = '10px';
+        box.appendChild(kid);
+        kids.push(kid);
+    }
+    host.appendChild(box);
+    return { box, kids, host };
+}
+
+const rect = (el: Element) => el.getBoundingClientRect();
+
+/** Author `value` the way markup does: absent is no attribute at all. */
+function author(el: HTMLElement, name: string, value: string | number | null): void {
+    if (value === null) el.removeAttribute(name);
+    else el.setAttribute(name, String(value));
+}
+
+export const GtkBoxTest = async () => {
+    await describe('<gtk-box> against BOX_SPACING_VECTORS', async () => {
+        for (const vector of BOX_SPACING_VECTORS) {
+            await it(vector.rule, () => {
+                const { box, host } = mount(0);
+                author(box, 'spacing', vector.value);
+                expect(box.spacing).toBe(vector.spacing);
+                expect(getComputedStyle(box).columnGap).toBe(`${vector.spacing}px`);
+                host.remove();
+            });
+        }
+    });
+
+    await describe('<gtk-box> against BOX_ORIENTATION_VECTORS', async () => {
+        for (const vector of BOX_ORIENTATION_VECTORS) {
+            await it(vector.rule, () => {
+                const { box, host } = mount(0);
+                author(box, 'orientation', vector.value);
+                expect(box.orientation).toBe(vector.orientation);
+                expect(getComputedStyle(box).flexDirection).toBe(vector.orientation === 'vertical' ? 'column' : 'row');
+                host.remove();
+            });
+        }
+    });
+
+    await describe('<gtk-box> orientation', async () => {
+        await it('lays children out in a row by default, as GtkOrientable does', () => {
+            const { box, kids, host } = mount();
+            expect(box.orientation).toBe('horizontal');
+            expect(rect(kids[1]).left).toBe(rect(kids[0]).right);
+            expect(rect(kids[1]).top).toBe(rect(kids[0]).top);
+            host.remove();
+        });
+
+        await it('stacks them in a column when vertical, each child taking the full width', () => {
+            const { box, kids, host } = mount();
+            box.orientation = 'vertical';
+            expect(rect(kids[1]).top).toBe(rect(kids[0]).bottom);
+            expect(rect(kids[0]).left).toBe(rect(kids[1]).left);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-box> spacing', async () => {
+        await it('puts the gap BETWEEN children only, never at the edges', () => {
+            const { box, kids, host } = mount();
+            box.spacing = 12;
+            expect(rect(kids[0]).left).toBe(rect(box).left);
+            expect(rect(kids[1]).left - rect(kids[0]).right).toBe(12);
+            expect(rect(kids[2]).left - rect(kids[1]).right).toBe(12);
+            host.remove();
+        });
+
+        await it('runs along the column when vertical', () => {
+            const { box, kids, host } = mount();
+            box.orientation = 'vertical';
+            box.setAttribute('spacing', '6');
+            expect(rect(kids[1]).top - rect(kids[0]).bottom).toBe(6);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-box> homogeneous', async () => {
+        await it('gives every child the same share of the axis', () => {
+            const { box, kids, host } = mount();
+            box.homogeneous = true;
+            const widths = kids.map((kid) => Math.round(rect(kid).width));
+            expect(widths[0]).toBe(widths[1]);
+            expect(widths[1]).toBe(widths[2]);
+            expect(widths[0]).toBeGreaterThan(100);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-box> notify', async () => {
+        await it('fires notify:: on a REAL change only, with the normalised value', () => {
+            const { box, host } = mount(0);
+            const seen: unknown[] = [];
+            box.addEventListener('notify::spacing', (event) => seen.push((event as CustomEvent).detail.spacing));
+            box.spacing = 4;
+            box.setAttribute('spacing', '4.0');
+            box.spacing = -1;
+            expect(seen.join(',')).toBe('4,0');
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-box> as the Gtk.Box of an authored tree', async () => {
+        const tree: SharedTreeNode = {
+            tag: 'GtkBox',
+            props: { orientation: 'vertical', spacing: 18 },
+            children: [
+                { tag: 'GtkLabel', props: { label: 'Effect services' }, styleClasses: ['title-1'] },
+                { tag: 'GtkLabel', props: { label: 'effect/FileSystem over Gio.File', xalign: 0 } },
+            ],
+        };
+
+        await it('mounts upgraded elements, stacked by the authored orientation and spacing', () => {
+            const { root, unmount } = mountSharedTree(tree);
+            try {
+                expect(root instanceof Gtk.Box).toBe(true);
+                const labels = [...root.children];
+                expect(labels.every((label) => label instanceof Gtk.Label)).toBe(true);
+                expect(getComputedStyle(root).flexDirection).toBe('column');
+                expect(Math.round(rect(labels[1]).top - rect(labels[0]).bottom)).toBe(18);
+            } finally {
+                unmount();
+            }
+        });
+
+        await it('renders the authored text on screen, and the style class it carries', () => {
+            const { root, unmount } = mountSharedTree(tree);
+            try {
+                const [title, subtitle] = [...root.children] as HTMLElement[];
+                expect(title.textContent).toBe('Effect services');
+                expect(subtitle.textContent).toBe('effect/FileSystem over Gio.File');
+                expect(rect(title).height).toBeGreaterThan(0);
+                expect(title.classList.contains('title-1')).toBe(true);
+                expect(getComputedStyle(title).fontWeight).toBe('800');
+            } finally {
+                unmount();
+            }
+        });
+    });
+};

package/src/gtk-button.spec.ts

@@ -18,7 +18,8 @@ function mountWithStyles(names: readonly string[]): string[] {
     for (const name of names) el.setAttribute(name, '');
     document.body.appendChild(el);
     const btn = el.querySelector('button') as HTMLButtonElement;
-    return Array.from(btn.classList).filter((cls) => cls !== 'adw-button');
+    // `adw-button` is the skin and `text-button` says what fills the button, not its style.
+    return Array.from(btn.classList).filter((cls) => cls !== 'adw-button' && cls !== 'text-button');
 }
 
 function unmountAll(): void {
@@ -55,5 +56,126 @@ export const GtkButtonTest = async () => {
             expect(btn.classList.contains('suggested-action')).toBe(true);
             unmountAll();
         });
+
+        // What `buildSharedTree` writes for `Gtk.Button { icon-name: …; styles ["flat"] }`:
+        // the GObject property as an attribute and the style as a host class. Read as
+        // `icon` and the boolean flags only, that button rendered empty and unstyled.
+        await it('a host class and icon-name, as a built .blp writes them, style the button', () => {
+            const el = document.createElement('gtk-button');
+            el.setAttribute('icon-name', 'go-previous-symbolic');
+            el.classList.add('flat', 'suggested-action');
+            document.body.appendChild(el);
+            const btn = el.querySelector('button') as HTMLButtonElement;
+            expect(Array.from(btn.classList).filter((cls) => cls !== 'adw-button')).toStrictEqual([
+                'flat',
+                'suggested-action',
+                'icon-only',
+            ]);
+            expect(btn.querySelector('gtk-image')?.getAttribute('icon-name')).toBe('go-previous-symbolic');
+            el.classList.add('pill');
+            expect(btn.classList.contains('pill')).toBe(true);
+            unmountAll();
+        });
+    });
+
+    // `Gtk.Button:child`. A `.blp` writes `child: Adw.ButtonContent { … }`, which the shared
+    // tree carries as a child with `slot: 'child'`. The element used to wipe its children on
+    // connect and read their text as the label, so the button content vanished and
+    // `mountSharedTree` refused the slot as unknown.
+    await describe('<gtk-button> child', async () => {
+        await it('an authored child: fills the inner button in place of icon and label', () => {
+            const el = document.createElement('gtk-button');
+            el.classList.add('suggested-action', 'pill');
+            const content = document.createElement('adw-button-content');
+            content.setAttribute('slot', 'child');
+            content.setAttribute('label', 'Download');
+            content.setAttribute('icon-name', 'folder-download-symbolic');
+            el.appendChild(content);
+            document.body.appendChild(el);
+            const btn = el.querySelector('button') as HTMLButtonElement;
+            expect(Array.from(btn.children)).toStrictEqual([content]);
+            expect(Array.from(btn.childNodes).some((node) => node.nodeType === Node.TEXT_NODE)).toBe(false);
+            expect(btn.classList.contains('suggested-action') && btn.classList.contains('pill')).toBe(true);
+            // A style class added later rebuilds the button and keeps the child.
+            el.classList.add('flat');
+            expect(content.parentElement).toBe(btn);
+            unmountAll();
+        });
+
+        await it('a bare element child is the child too; inline text stays the label', async () => {
+            const late = document.createElement('gtk-button');
+            document.body.appendChild(late);
+            const content = document.createElement('adw-button-content');
+            late.appendChild(content);
+            const labelled = document.createElement('gtk-button');
+            labelled.textContent = 'Go';
+            document.body.appendChild(labelled);
+            // The late child reaches the button through the slot observer, one microtask on.
+            await Promise.resolve();
+            expect(content.parentElement).toBe(late.querySelector('button'));
+            expect(labelled.querySelector('button')?.textContent).toBe('Go');
+            unmountAll();
+        });
+    });
+
+    // libadwaita's `%pill_button` is `padding: 10px 32px` over a `min-height: 24px` content
+    // box, so a GTK pill is 44px tall. This one was 6px 20px and 34px, measured against a
+    // GTK render of the gallery's wrap box: every chip 10px short and 24px narrow.
+    await describe('<gtk-button pill> geometry', async () => {
+        await it('carries the GTK pill padding and height', () => {
+            const el = document.createElement('gtk-button');
+            el.setAttribute('label', 'Design');
+            el.setAttribute('pill', '');
+            document.body.appendChild(el);
+            const btn = el.querySelector('button') as HTMLButtonElement;
+            const style = getComputedStyle(btn);
+            expect([style.paddingTop, style.paddingRight, style.paddingBottom, style.paddingLeft]).toStrictEqual([
+                '10px',
+                '32px',
+                '10px',
+                '32px',
+            ]);
+            expect(btn.getBoundingClientRect().height).toBe(44);
+            unmountAll();
+        });
+
+        // Measured against a GTK render of the gallery's Gtk.Button and Adw.ButtonContent
+        // `.blp` files: each text button 6-7px narrower, the content pill 47px narrower
+        // with its label painted in the window colour, and "Delete" filled red.
+        await it('a label-only button carries the GTK text-button padding', () => {
+            const el = document.createElement('gtk-button');
+            el.setAttribute('label', 'Suggested');
+            document.body.appendChild(el);
+            const style = getComputedStyle(el.querySelector('button') as HTMLButtonElement);
+            expect([style.paddingLeft, style.paddingRight]).toStrictEqual(['17px', '17px']);
+            unmountAll();
+        });
+
+        await it('a pill keeps its padding around button content, which takes the button colour', () => {
+            const el = document.createElement('gtk-button');
+            el.classList.add('suggested-action', 'pill');
+            const content = document.createElement('adw-button-content');
+            content.setAttribute('label', 'Download');
+            el.appendChild(content);
+            document.body.appendChild(el);
+            const btn = el.querySelector('button') as HTMLButtonElement;
+            const style = getComputedStyle(btn);
+            expect([style.paddingLeft, style.paddingRight]).toStrictEqual(['32px', '32px']);
+            expect(getComputedStyle(content).color).toBe(style.color);
+            unmountAll();
+        });
+
+        await it('a destructive button is red text on a tint, not a filled button', () => {
+            const el = document.createElement('gtk-button');
+            el.setAttribute('label', 'Delete');
+            el.classList.add('destructive-action');
+            document.body.appendChild(el);
+            const style = getComputedStyle(el.querySelector('button') as HTMLButtonElement);
+            // The tint is the text colour at 15% alpha (`color-mix` computes to `color(srgb … / 0.15)`);
+            // a filled button is opaque and paints white text.
+            expect(style.color === 'rgb(255, 255, 255)').toBe(false);
+            expect(/[/,] 0\.15\)$/.test(style.backgroundColor)).toBe(true);
+            unmountAll();
+        });
     });
 };