@gjsify/adwaita-web 0.53.0 → 0.55.0

package/src/gtk-application-window.spec.ts

@@ -0,0 +1,107 @@
+// DOM-level tests for <gtk-application-window>. The subclass adds ONE strip and ONE property,
+// so the file is small on purpose: `show-menubar` is `gtk_application_window_update_menubar`
+// (gtkapplicationwindow.c:392-431), which shows the bar only when the property is set AND the
+// section has at least one item — and the second half is the `menubar` slot here, because the
+// `GMenuModel` the C reads is not something markup can carry.
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { GtkApplicationWindow } from './elements/gtk-application-window.js';
+
+function mount(attrs: Record<string, string> = {}): { el: GtkApplicationWindow; host: HTMLElement } {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const el = document.createElement('gtk-application-window') as GtkApplicationWindow;
+    for (const [name, value] of Object.entries(attrs)) el.setAttribute(name, value);
+    host.appendChild(el);
+    return { el, host };
+}
+
+function menubar(el: GtkApplicationWindow): HTMLElement {
+    return el.querySelector('.adw-gtk-application-window-menubar') as HTMLElement;
+}
+
+export const GtkApplicationWindowTest = async () => {
+    await describe('<gtk-application-window> structure', async () => {
+        await it('is titlebar, menubar, content — in that order', () => {
+            // update_menubar parents the bar above the window's child (:418), and
+            // gtk_window_set_titlebar puts the titlebar above that.
+            const { el, host } = mount();
+            expect([...el.children].map((node) => node.className)).toStrictEqual([
+                'adw-gtk-window-titlebar',
+                'adw-gtk-application-window-menubar',
+                'adw-gtk-window-content',
+            ]);
+            host.remove();
+        });
+
+        await it('is a Gtk.Window frame in every other respect', async () => {
+            const { el, host } = mount({ title: 'Editor' });
+            expect(el.decorated).toBe(true);
+            expect(el.getAttribute('aria-label')).toBe('Editor');
+            expect(el.querySelector('gtk-window-controls')).not.toBe(null);
+            host.remove();
+        });
+
+        await it('routes a `menubar` child into the strip and everything else into the content', async () => {
+            const { el, host } = mount();
+            const bar = document.createElement('span');
+            bar.setAttribute('slot', 'menubar');
+            const body = document.createElement('span');
+            el.append(bar, body);
+            // Adoption is the MutationObserver's (`src/slotted-children.ts`), and the
+            // menubar's OWN observer then re-runs the visibility rule — two microtasks.
+            await Promise.resolve();
+            await Promise.resolve();
+            expect(bar.parentElement).toBe(menubar(el));
+            expect(body.parentElement?.className).toBe('adw-gtk-window-content');
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-application-window> show-menubar', async () => {
+        await it('is FALSE by default, so the strip is hidden', async () => {
+            // :693 — the property's default is FALSE.
+            const { el, host } = mount();
+            expect(el.showMenubar).toBe(false);
+            expect(menubar(el).hidden).toBe(true);
+            host.remove();
+        });
+
+        await it('needs an item as well as the property — an empty section shows nothing', async () => {
+            // gtkapplicationwindow.c:400-402 — `should_have_menubar` is the AND of the two.
+            const { el, host } = mount({ 'show-menubar': 'true' });
+            expect(menubar(el).hidden).toBe(true);
+            const bar = document.createElement('span');
+            bar.setAttribute('slot', 'menubar');
+            el.appendChild(bar);
+            await Promise.resolve();
+            await Promise.resolve();
+            expect(menubar(el).hidden).toBe(false);
+            host.remove();
+        });
+
+        await it('hides the bar again when the property goes false, keeping the child', async () => {
+            // gtk_window_hide on the bar's box, not a reparent (:404-410).
+            const { el, host } = mount({ 'show-menubar': 'true' });
+            const bar = document.createElement('span');
+            bar.setAttribute('slot', 'menubar');
+            el.appendChild(bar);
+            await Promise.resolve();
+            await Promise.resolve();
+            el.showMenubar = false;
+            expect(menubar(el).hidden).toBe(true);
+            expect(menubar(el).children.length).toBe(1);
+            host.remove();
+        });
+
+        await it('notifies once per real change', async () => {
+            const { el, host } = mount();
+            const events: unknown[] = [];
+            el.addEventListener('notify::show-menubar', (e) => events.push((e as CustomEvent).detail));
+            el.showMenubar = true;
+            el.showMenubar = true;
+            expect(events).toStrictEqual([{ 'show-menubar': true }]);
+            host.remove();
+        });
+    });
+};

package/src/gtk-aspect-frame.spec.ts

@@ -0,0 +1,114 @@
+// DOM-level tests for <gtk-aspect-frame>: `obey-child` decides whose ratio wins, the two
+// alignments reach the flex container, and the ratio is clamped to the pspec's range.
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { GtkAspectFrame } from './elements/gtk-aspect-frame.js';
+
+function mount(attrs: Record<string, string> = {}): { el: GtkAspectFrame; host: HTMLElement } {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const el = document.createElement('gtk-aspect-frame') as GtkAspectFrame;
+    for (const [name, value] of Object.entries(attrs)) el.setAttribute(name, value);
+    if (attrs.width === undefined) el.style.width = '240px';
+    const child = document.createElement('gtk-label');
+    child.setAttribute('label', 'Framed');
+    el.append(child);
+    host.appendChild(el);
+    return { el, host };
+}
+
+export const GtkAspectFrameTest = async () => {
+    await describe('<gtk-aspect-frame> properties', async () => {
+        await it('holds the pspec defaults, and obey-child is TRUE without the attribute', () => {
+            const { el, host } = mount();
+            expect(el.ratio).toBe(1);
+            expect(el.xalign).toBe(0.5);
+            expect(el.yalign).toBe(0.5);
+            expect(el.obeyChild).toBe(true);
+            expect(el.child?.tagName.toLowerCase()).toBe('gtk-label');
+            host.remove();
+        });
+
+        await it('clamps the ratio to the pspec range and reads an unparseable one as the default', () => {
+            const { el, host } = mount({ ratio: '0' });
+            expect(el.ratio).toBe(0.0001);
+            el.ratio = 16;
+            expect(el.ratio).toBe(16);
+            el.setAttribute('ratio', '99999');
+            expect(el.ratio).toBe(10000);
+            el.setAttribute('ratio', 'sixteen');
+            expect(el.ratio).toBe(1);
+            host.remove();
+        });
+
+        await it('clamps xalign and yalign to 0…1, and an unparseable one is the default', () => {
+            const { el, host } = mount();
+            el.setAttribute('xalign', '-2');
+            expect(el.xalign).toBe(0);
+            el.setAttribute('yalign', '3');
+            expect(el.yalign).toBe(1);
+            el.setAttribute('xalign', 'middle');
+            expect(el.xalign).toBe(0.5);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-aspect-frame> look', async () => {
+        await it('obeys the child by default: no aspect-ratio is written at all', () => {
+            const { el, host } = mount();
+            expect(el.child?.style.aspectRatio).toBe('');
+            // The child still fills the frame — that is the allocation, not the ratio.
+            expect(el.child?.style.flex).toBe('1 1 auto');
+            expect(el.child?.style.maxWidth).toBe('100%');
+            host.remove();
+        });
+
+        await it('writes the declared ratio once obey-child is false', () => {
+            const { el, host } = mount({ 'obey-child': 'false', ratio: '2.5' });
+            expect(el.obeyChild).toBe(false);
+            // The RATIO, not the serialization: CSSOM echoes `2.5` back as `2.5 / 1`, which is
+            // the same value and a string a test must not be pinned to.
+            expect(Number.parseFloat(el.child?.style.aspectRatio ?? '')).toBe(2.5);
+            el.setAttribute('obey-child', 'true');
+            expect(el.obeyChild).toBe(true);
+            expect(el.child?.style.aspectRatio).toBe('');
+            host.remove();
+        });
+
+        await it('the alignments reach the container as justify-content and align-items', () => {
+            const { el, host } = mount({ xalign: '0', yalign: '1' });
+            expect(el.style.justifyContent).toBe('flex-start');
+            expect(el.style.alignItems).toBe('flex-end');
+            el.xalign = 0.5;
+            el.yalign = 0.5;
+            expect(el.style.justifyContent).toBe('center');
+            expect(el.style.alignItems).toBe('center');
+            host.remove();
+        });
+
+        await it('a ratio over a fixed box gives the child that shape', () => {
+            const { el, host } = mount({ 'obey-child': 'false', ratio: '2' });
+            const box = el.child?.getBoundingClientRect();
+            expect(box).toBeDefined();
+            expect(Math.round((box?.width ?? 0) / (box?.height ?? 1))).toBe(2);
+            host.remove();
+        });
+
+        await it('is a generic container', () => {
+            const { el, host } = mount();
+            expect(el.getAttribute('role')).toBe('generic');
+            expect(getComputedStyle(el).display).toBe('flex');
+            host.remove();
+        });
+
+        await it('notifies on a real change only', () => {
+            const { el, host } = mount();
+            const notified: unknown[] = [];
+            el.addEventListener('notify::ratio', (event) => notified.push((event as CustomEvent).detail));
+            el.ratio = 2;
+            el.ratio = 2;
+            expect(notified).toStrictEqual([{ ratio: 2 }]);
+            host.remove();
+        });
+    });
+};