@gjsify/adwaita-web 0.54.0 → 0.56.0

package/src/gtk-drawing-area.spec.ts

@@ -0,0 +1,211 @@
+// DOM-level tests for <gtk-drawing-area>. Three separable things get their own describe:
+// the SIZE (the content properties and the floor they are), the CALLBACK (what it is
+// handed and how often it runs), and the NOTIFICATION pair — `resize` for the allocation
+// and `notify::` for the properties, which fire on different things in the C.
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { GtkDrawingArea } from './elements/gtk-drawing-area.js';
+
+function mount(attrs: Record<string, string> = {}): { el: GtkDrawingArea; host: HTMLElement } {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const el = document.createElement('gtk-drawing-area') as GtkDrawingArea;
+    for (const [name, value] of Object.entries(attrs)) el.setAttribute(name, value);
+    host.appendChild(el);
+    return { el, host };
+}
+
+/**
+ * Two frames, not one: the platform delivers a ResizeObserver's first observation AFTER
+ * the animation-frame callbacks of the frame it belongs to, so a single `rAF` resolves
+ * before the allocation the first draw needs has been recorded.
+ */
+function settled(): Promise<void> {
+    return new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
+}
+
+export const GtkDrawingAreaTest = async () => {
+    await describe('<gtk-drawing-area> size', async () => {
+        await it('defaults to no intrinsic size on either axis', () => {
+            // gtkdrawingarea.c:288-304 — both pspecs default to 0.
+            const { el, host } = mount();
+            expect(el.contentWidth).toBe(0);
+            expect(el.contentHeight).toBe(0);
+            host.remove();
+        });
+
+        await it('reads the two GIR properties as attributes', () => {
+            const { el, host } = mount({ 'content-width': '160', 'content-height': '120' });
+            expect(el.contentWidth).toBe(160);
+            expect(el.contentHeight).toBe(120);
+            host.remove();
+        });
+
+        await it('clamps a write outside the pspec range instead of refusing it', () => {
+            // g_param_spec_int ("content-width", …, 0, G_MAXINT, 0, …) at :290-294.
+            const { el, host } = mount();
+            el.contentWidth = 999;
+            expect(el.contentWidth).toBe(999);
+            el.contentWidth = -50;
+            expect(el.contentWidth).toBe(0);
+            el.contentHeight = 1e12;
+            expect(el.contentHeight).toBe(2147483647);
+            host.remove();
+        });
+
+        await it('notifies only when the value really moves', () => {
+            // gtkdrawingarea.c:373 — `if (priv->content_width == width) return;`.
+            const { el, host } = mount({ 'content-width': '160' });
+            const seen: unknown[] = [];
+            el.addEventListener('notify::content-width', (event) =>
+                seen.push((event as CustomEvent).detail['content-width']),
+            );
+            el.contentWidth = 160;
+            expect(seen).toStrictEqual([]);
+            el.contentWidth = 200;
+            expect(seen).toStrictEqual([200]);
+            host.remove();
+        });
+
+        await it('is the minimum AND the natural size, so the floor follows the number', () => {
+            // gtkdrawingarea.c:210-231 — `*minimum = *natural = priv->content_width`, which
+            // `_drawing.scss` spells as one custom property read by `width` AND `min-width`.
+            const { el, host } = mount({ 'content-width': '160', 'content-height': '120' });
+            expect(el.style.getPropertyValue('--adw-drawing-width')).toBe('160px');
+            expect(el.style.getPropertyValue('--adw-drawing-height')).toBe('120px');
+            expect(el.querySelector('canvas')).not.toBe(null);
+            // At the zero default there is no intrinsic size at all, so the property is
+            // GONE and the stylesheet's `auto` fallback is what answers.
+            el.contentWidth = 0;
+            expect(el.style.getPropertyValue('--adw-drawing-width')).toBe('');
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-drawing-area> the draw function', async () => {
+        await it('has none until one is set, and paints nothing', () => {
+            // gtkdrawingarea.c:251-252 — `if (!priv->draw_func) return;`.
+            const { el, host } = mount({ 'content-width': '40', 'content-height': '40' });
+            expect(el.drawFunc).toBe(null);
+            host.remove();
+        });
+
+        await it('is called with the ALLOCATION, not with the content size', async () => {
+            const { el, host } = mount({ 'content-width': '40', 'content-height': '40' });
+            const calls: number[][] = [];
+            el.setDrawFunc((_area, cr, width, height) => {
+                calls.push([width, height, Math.round(cr.lineWidth)]);
+                cr.fillStyle = '#ff0000';
+                cr.fillRect(0, 0, width, height);
+            });
+            await settled();
+            expect(calls.length).toBeGreaterThan(0);
+            // The callback runs, and the numbers it gets are the box the element was
+            // allocated — never the two properties (:248-262).
+            expect(calls[0][0]).toBeGreaterThanOrEqual(40);
+            expect(calls[0][1]).toBeGreaterThanOrEqual(40);
+            const canvas = el.querySelector('canvas') as HTMLCanvasElement;
+            expect(canvas.width).toBeGreaterThan(0);
+            host.remove();
+        });
+
+        await it('runs again when queue_draw asks for it', async () => {
+            const { el, host } = mount({ 'content-width': '40', 'content-height': '40' });
+            let calls = 0;
+            el.setDrawFunc(() => {
+                calls += 1;
+            });
+            await settled();
+            const seen = calls;
+            // gtkdrawingarea.c:127-129 — queue_draw calls the draw function again, on the
+            // NEXT FRAME: the C marks the window dirty and the frame clock draws it.
+            el.queueDraw();
+            expect(calls).toBe(seen);
+            await settled();
+            expect(calls).toBeGreaterThan(seen);
+            host.remove();
+        });
+
+        await it('installing one repaints with it, and clearing it blanks the widget', async () => {
+            const { el, host } = mount({ 'content-width': '40', 'content-height': '40' });
+            let calls = 0;
+            el.setDrawFunc(() => {
+                calls += 1;
+            });
+            await settled();
+            const seen = calls;
+            expect(seen).toBeGreaterThan(0);
+            // `set_draw_func` ends in `gtk_widget_queue_draw` (gtkdrawingarea.c:489), and
+            // the snapshot that answers calls the NEW function — so the install itself is
+            // what repaints, not the next unrelated frame.
+            el.setDrawFunc(() => {
+                calls += 1;
+            });
+            await settled();
+            expect(calls).toBe(seen + 1);
+            // With no function the snapshot returns before drawing (:251-252), so nothing
+            // is painted from here on however often a redraw is asked for.
+            const blanked = calls;
+            el.setDrawFunc(null);
+            el.queueDraw();
+            await settled();
+            expect(el.drawFunc).toBe(null);
+            expect(calls).toBe(blanked);
+            host.remove();
+        });
+
+        await it('hands the callback a context that starts each frame empty', async () => {
+            // GTK's renderer gives every frame a fresh surface; a canvas keeps its pixels,
+            // so the element clears — the one place a naive port shows (see the header).
+            const { el, host } = mount({ 'content-width': '40', 'content-height': '40' });
+            let pixel: number[] = [];
+            el.setDrawFunc((_area, cr, _width, _height) => {
+                cr.fillStyle = '#0000ff';
+                cr.fillRect(0, 0, 1, 1);
+                pixel = [...cr.getImageData(0, 0, 1, 1).data];
+            });
+            await settled();
+            expect(pixel[2]).toBe(255);
+            el.queueDraw();
+            expect(pixel[2]).toBe(255);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-drawing-area> notifications', async () => {
+        await it('emits resize with the allocation, once per change', async () => {
+            // gtkdrawingarea.c:233-238 — size_allocate emits ::resize and does nothing else.
+            const { el, host } = mount({ 'content-width': '40', 'content-height': '40' });
+            const seen: { width: number; height: number }[] = [];
+            // `resize` is a UIEvent name in lib.dom, so the listener parameter arrives typed.
+            el.addEventListener('resize', (event) => seen.push((event as unknown as CustomEvent).detail));
+            await settled();
+            expect(seen.length).toBe(1);
+            expect(seen[0].width).toBeGreaterThanOrEqual(40);
+            el.style.width = '80px';
+            await settled();
+            expect(seen.length).toBe(2);
+            expect(seen[1].width).toBe(80);
+            host.remove();
+        });
+
+        await it('re-arms its observer when the element comes back', async () => {
+            // The ResizeObserver is released on the way out, so a re-parent has to arm it
+            // again — the shape `scripts/check-adwaita-connect-rebind.mjs` holds for.
+            const { el, host } = mount({ 'content-width': '40', 'content-height': '40' });
+            await settled();
+            const parked = document.createElement('div');
+            document.body.appendChild(parked);
+            host.remove();
+            parked.appendChild(el);
+            const seen: unknown[] = [];
+            // `resize` is a UIEvent name in lib.dom, so the listener parameter arrives typed.
+            el.addEventListener('resize', (event) => seen.push((event as unknown as CustomEvent).detail));
+            el.style.width = '96px';
+            await settled();
+            expect(seen.length).toBe(1);
+            parked.remove();
+            host.remove();
+        });
+    });
+};

package/src/gtk-editable-label.spec.ts

@@ -0,0 +1,190 @@
+// DOM-level tests for `<gtk-editable-label>`: the stack's visible child, which is what
+// `editing` IS (gtkeditablelabel.c:595-599), and the four ways editing ends — Enter commits,
+// Escape discards, losing focus commits after the C's grace period, and `editable` FALSE
+// stops without committing.
+//
+// The draft is the point of the widget: while the entry is visible it holds a text the label
+// does not have yet, so every row here checks what the LABEL says afterwards and not only
+// what the entry did.
+
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { GtkEditableLabel } from './elements/gtk-editable-label.js';
+
+function mount(attrs: Record<string, string> = {}): GtkEditableLabel {
+    const el = document.createElement('gtk-editable-label') as GtkEditableLabel;
+    for (const [name, value] of Object.entries(attrs)) el.setAttribute(name, value);
+    document.body.appendChild(el);
+    return el;
+}
+
+function unmountAll(): void {
+    for (const el of Array.from(document.querySelectorAll('gtk-editable-label'))) el.remove();
+}
+
+/** The label half of the stack — `querySelector` is `Element`-typed, so the view is named. */
+function labelOf(el: GtkEditableLabel): HTMLElement {
+    return el.querySelector<HTMLElement>('.adw-editable-label-label') as HTMLElement;
+}
+
+const key = (target: HTMLElement, name: string): KeyboardEvent => {
+    const event = new KeyboardEvent('keydown', { key: name, bubbles: true, cancelable: true });
+    target.dispatchEvent(event);
+    return event;
+};
+
+const settle = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));
+
+export const GtkEditableLabelTest = async () => {
+    await describe('<gtk-editable-label> the stack', async () => {
+        await it('shows the label and not the entry until editing starts', () => {
+            const el = mount({ text: 'Ada Lovelace' });
+            expect(el.editing).toBe(false);
+            expect(el.classList.contains('editing')).toBe(false);
+            expect(labelOf(el).hidden).toBe(false);
+            expect(el.entry.hidden).toBe(true);
+            expect(el.getAttribute('tabindex')).toBe('0');
+            unmountAll();
+        });
+
+        await it('swaps the visible child when `editing` is set, and takes the tab stop', () => {
+            const el = mount({ text: 'Ada Lovelace', editing: '' });
+            expect(el.editing).toBe(true);
+            expect(el.classList.contains('editing')).toBe(true);
+            expect(labelOf(el).hidden).toBe(true);
+            expect(el.entry.hidden).toBe(false);
+            expect(el.hasAttribute('tabindex')).toBe(false);
+            unmountAll();
+        });
+
+        await it('notifies on every real change and on none that did not happen', () => {
+            const el = mount({ text: 'x' });
+            const seen: unknown[] = [];
+            el.addEventListener('notify::editing', (event) => seen.push((event as CustomEvent).detail));
+            el.editing = true;
+            el.editing = true;
+            el.editing = false;
+            expect(seen).toStrictEqual([{ editing: true }, { editing: false }]);
+            unmountAll();
+        });
+    });
+
+    await describe('<gtk-editable-label> starting', async () => {
+        await it('starts on a click of the LABEL, which is where the C puts the gesture', () => {
+            const el = mount({ text: 'x' });
+            labelOf(el).click();
+            expect(el.editing).toBe(true);
+            unmountAll();
+        });
+
+        // The keys are a binding of the WIDGET (gtkeditablelabel.c:54-63), so the event is
+        // dispatched on the host and not on the label node inside the stack.
+        await it('starts on Enter, and on Space where the C binds both', () => {
+            const label = mount({ text: 'x' });
+            key(label, 'Enter');
+            expect(label.editing).toBe(true);
+            label.editing = false;
+            key(label, ' ');
+            expect(label.editing).toBe(true);
+            unmountAll();
+        });
+
+        await it('refuses to start while `editable` is FALSE, as both actions are disabled', () => {
+            const el = mount({ text: 'x', editable: 'false' });
+            expect(el.editable).toBe(false);
+            labelOf(el).click();
+            expect(el.editing).toBe(false);
+            el.startEditing();
+            expect(el.editing).toBe(false);
+            unmountAll();
+        });
+    });
+
+    await describe('<gtk-editable-label> committing and discarding', async () => {
+        await it('Enter in the entry COMMITS: the draft becomes the label text', () => {
+            const el = mount({ text: 'Ada' });
+            el.startEditing();
+            el.entry.value = 'Ada Lovelace';
+            key(el.entry, 'Enter');
+            expect(el.editing).toBe(false);
+            expect(el.text).toBe('Ada Lovelace');
+            expect(el.querySelector('.adw-editable-label-label')?.textContent).toBe('Ada Lovelace');
+            unmountAll();
+        });
+
+        await it('Escape in the entry DISCARDS it: the label keeps what it had', () => {
+            const el = mount({ text: 'Ada' });
+            el.startEditing();
+            el.entry.value = 'Ada Lovelace';
+            key(el.entry, 'Escape');
+            expect(el.editing).toBe(false);
+            expect(el.text).toBe('Ada');
+            expect(el.querySelector('.adw-editable-label-label')?.textContent).toBe('Ada');
+            // …and the entry is reset, so the next edit starts from the committed text.
+            el.startEditing();
+            expect(el.entry.value).toBe('Ada');
+            unmountAll();
+        });
+
+        await it("losing focus COMMITS, after the C's grace period", async () => {
+            const el = mount({ text: 'Ada' });
+            el.startEditing();
+            el.entry.value = 'Ada Lovelace';
+            const outside = document.createElement('button');
+            document.body.appendChild(outside);
+            el.dispatchEvent(new FocusEvent('focusout', { bubbles: false, relatedTarget: outside }));
+            // Inside the grace period nothing has happened yet.
+            expect(el.editing).toBe(true);
+            await settle(160);
+            expect(el.editing).toBe(false);
+            expect(el.text).toBe('Ada Lovelace');
+            outside.remove();
+            unmountAll();
+        });
+
+        await it('a focus move WITHIN the widget is not leaving it', async () => {
+            const el = mount({ text: 'Ada' });
+            el.startEditing();
+            el.entry.value = 'Ada Lovelace';
+            el.dispatchEvent(new FocusEvent('focusout', { bubbles: false, relatedTarget: el }));
+            await settle(160);
+            expect(el.editing).toBe(true);
+            unmountAll();
+        });
+
+        await it('`editable="false"` stops editing without committing', () => {
+            const el = mount({ text: 'Ada' });
+            el.startEditing();
+            el.entry.value = 'Ada Lovelace';
+            el.editable = false;
+            expect(el.editing).toBe(false);
+            expect(el.text).toBe('Ada');
+            unmountAll();
+        });
+
+        await it('the label does not follow `text` while a draft is in the entry', () => {
+            const el = mount({ text: 'Ada' });
+            el.startEditing();
+            el.setAttribute('text', 'Grace Hopper');
+            expect(el.querySelector('.adw-editable-label-label')?.textContent).toBe('Ada');
+            expect(el.text).toBe('Grace Hopper');
+            unmountAll();
+        });
+    });
+
+    await describe('<gtk-editable-label> look', async () => {
+        await it('paints the view colours upstream gives the entry node', () => {
+            const el = mount({ text: 'Ada', editing: '' });
+            // `_labels.scss:94-97` writes `--view-bg-color` / `--view-fg-color` onto the
+            // entry, and the tokens move with the OS theme — so the row compares against a
+            // probe that resolves the same token rather than naming either colour.
+            const probe = document.createElement('div');
+            probe.style.backgroundColor = 'var(--view-bg-color)';
+            document.body.appendChild(probe);
+            expect(getComputedStyle(el.entry).backgroundColor).toBe(getComputedStyle(probe).backgroundColor);
+            expect(getComputedStyle(el.entry).color).toBe(getComputedStyle(el).color);
+            probe.remove();
+            unmountAll();
+        });
+    });
+};

package/src/gtk-emoji-chooser.spec.ts

@@ -0,0 +1,173 @@
+// DOM-level tests for <gtk-emoji-chooser>. The emoji table is data, so what these hold
+// is the BEHAVIOUR around it: the prefix search of `match_tokens`, the section hiding of
+// `update_headings` (including the "No Results Found" page), the recent list's cap and
+// its one exception, and the section button that follows the scroll position.
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { GtkEmojiChooser } from './elements/gtk-emoji-chooser.js';
+import { EMOJI_CATEGORIES, EMOJI_MAX_RECENT } from './emoji-data.js';
+
+function mount(attrs: Record<string, string> = {}): { el: GtkEmojiChooser; host: HTMLElement } {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const el = document.createElement('gtk-emoji-chooser') as GtkEmojiChooser;
+    for (const [name, value] of Object.entries(attrs)) el.setAttribute(name, value);
+    host.appendChild(el);
+    el.popup();
+    return { el, host };
+}
+
+function search(el: GtkEmojiChooser, text: string): void {
+    const entry = el.querySelector<HTMLInputElement>('.emoji-search-entry')!;
+    entry.value = text;
+    entry.dispatchEvent(new Event('input', { bubbles: true }));
+}
+
+/** The sections that are currently shown, in DOM order. */
+function visibleSections(el: GtkEmojiChooser): string[] {
+    return [...el.querySelectorAll<HTMLElement>('.emoji-flowbox')]
+        .filter((box) => !box.hidden)
+        .map((box) => box.dataset.section ?? '');
+}
+
+export const GtkEmojiChooserTest = async () => {
+    await describe('<gtk-emoji-chooser> sections', async () => {
+        await it('hides the recent box while the list is empty, ahead of the nine categories', () => {
+            // The struct order of GtkEmojiChooser (gtkemojichooser.c:216-228) with recent
+            // ahead of them all, which is also the `.ui`'s document order — but
+            // `populate_recent_section` (:352) hides the recent box while the list is
+            // empty, so a fresh chooser shows the nine categories and the first pick
+            // puts the recent box ahead of them.
+            const { el, host } = mount();
+            expect(visibleSections(el)).toStrictEqual(EMOJI_CATEGORIES.map((c) => c.id));
+            el.querySelector<HTMLButtonElement>('.emoji-flowbox[data-section="people"] .emoji')!.click();
+            expect(visibleSections(el)).toStrictEqual(['recent', ...EMOJI_CATEGORIES.map((c) => c.id)]);
+            host.remove();
+        });
+
+        await it('one toolbar button per section, recent first and insensitised when empty', () => {
+            // populate_recent_section (gtkemojichooser.c:376-386) makes the recent button
+            // INSENSITIVE while its box is empty.
+            const { el, host } = mount();
+            const buttons = [...el.querySelectorAll<HTMLButtonElement>('.emoji-section')];
+            expect(buttons).toHaveLength(EMOJI_CATEGORIES.length + 1);
+            expect(buttons[0]?.dataset.section).toBe('recent');
+            expect(buttons[0]?.disabled).toBe(true);
+            expect(buttons[1]?.title).toBe('Smileys & People');
+            host.remove();
+        });
+
+        await it('has a heading per section and none for recent', () => {
+            const { el, host } = mount();
+            const headings = [...el.querySelectorAll('.emoji-heading')].map((h) => h.textContent);
+            expect(headings).toStrictEqual(EMOJI_CATEGORIES.map((c) => c.heading));
+            expect(el.querySelector('.emoji-recent-box')?.previousElementSibling).toBe(null);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-emoji-chooser> search', async () => {
+        await it('an empty search shows every section the list has', () => {
+            // `filter_func` (gtkemojichooser.c:896-913) — `if (text[0] == 0) goto out`.
+            // The recent box is still hidden: `update_headings` never shows it, only
+            // `add_recent_item` does.
+            const { el, host } = mount();
+            search(el, '');
+            expect(visibleSections(el)).toHaveLength(EMOJI_CATEGORIES.length);
+            expect(el.querySelector('.emoji-empty')?.hasAttribute('hidden')).toBe(true);
+            host.remove();
+        });
+
+        await it('matches a PREFIX of a name or keyword word, case-folded', () => {
+            // match_tokens (gtkemojichooser.c:871-894) — every TERM must prefix some token,
+            // and g_str_tokenize_and_fold case-folds both sides.
+            const { el, host } = mount();
+            search(el, 'grin');
+            const shown = [...el.querySelectorAll<HTMLButtonElement>('.emoji-flowbox[data-section="people"] .emoji')]
+                .filter((button) => !button.hidden)
+                .map((button) => button.getAttribute('aria-label'));
+            expect(shown?.length).toBeGreaterThan(0);
+            expect(shown).toContain('grinning face');
+            search(el, 'THUMBS');
+            expect(
+                [...el.querySelectorAll<HTMLButtonElement>('.emoji-flowbox .emoji')]
+                    .filter((button) => !button.hidden)
+                    .map((button) => button.getAttribute('aria-label')),
+            ).toContain('thumbs up');
+            host.remove();
+        });
+
+        await it('hides a section with no match, heading and all', () => {
+            // update_headings (gtkemojichooser.c:967-989).
+            const { el, host } = mount();
+            search(el, 'zzzz-no-such-emoji');
+            expect(visibleSections(el)).toStrictEqual([]);
+            expect(el.querySelector('.emoji-empty')?.hasAttribute('hidden')).toBe(false);
+            expect(el.querySelector('.emoji-empty-title')?.textContent).toBe('No Results Found');
+            host.remove();
+        });
+
+        await it('needs every term to match', () => {
+            const { el, host } = mount();
+            search(el, 'grinning face');
+            expect(visibleSections(el)).toContain('people');
+            search(el, 'grinning unicorn');
+            expect(visibleSections(el)).toStrictEqual([]);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-emoji-chooser> picking', async () => {
+        await it('emits emoji-picked with the Unicode sequence', () => {
+            // emoji_activated (gtkemojichooser.c:449-486) — the signal carries `text`, the
+            // LABEL's own contents, which is the code-point sequence and not the name.
+            const { el, host } = mount();
+            const seen: unknown[] = [];
+            el.addEventListener('emoji-picked', (event) => seen.push((event as CustomEvent).detail));
+            const first = el.querySelector<HTMLButtonElement>('.emoji-flowbox[data-section="people"] .emoji')!;
+            first.click();
+            expect(seen).toStrictEqual([{ text: '\u{1F600}' }]);
+            host.remove();
+        });
+
+        await it('records the pick in recents and enables its button', () => {
+            // add_recent_item (gtkemojichooser.c:390-447) — the section becomes visible and
+            // its button sensitive only on a NON-empty list.
+            const { el, host } = mount();
+            expect(el.recentEmoji).toStrictEqual([]);
+            el.querySelector<HTMLButtonElement>('.emoji-flowbox[data-section="people"] .emoji')!.click();
+            expect(el.recentEmoji).toHaveLength(1);
+            expect(el.querySelector('.emoji-recent-box')?.hasAttribute('hidden')).toBe(false);
+            expect(el.querySelector<HTMLButtonElement>('.emoji-section[data-section="recent"]')?.disabled).toBe(false);
+            host.remove();
+        });
+
+        await it('does not record a pick made FROM the recents', () => {
+            const { el, host } = mount();
+            el.querySelector<HTMLButtonElement>('.emoji-flowbox[data-section="people"] .emoji')!.click();
+            el.querySelector<HTMLButtonElement>('.emoji-recent-box .emoji')!.click();
+            expect(el.recentEmoji).toHaveLength(1);
+            host.remove();
+        });
+
+        await it('keeps the recents list at MAX_RECENT, newest first, no duplicates', () => {
+            const { el, host } = mount();
+            const names = ['\u{1F600}', '\u{1F603}', '\u{1F604}', '\u{1F601}'];
+            for (const text of names) el.pick({ text, name: text, keywords: [] });
+            // Re-picking the first entry moves it to the front rather than adding a
+            // second: `add_emoji (box, TRUE /* prepend */, …)` (gtkemojichooser.c:422).
+            el.pick({ text: '\u{1F600}', name: 'again', keywords: [] });
+            expect(el.recentEmoji.map((entry) => entry.text)).toStrictEqual([
+                '\u{1F600}',
+                '\u{1F601}',
+                '\u{1F604}',
+                '\u{1F603}',
+            ]);
+            for (let index = 0; index < EMOJI_MAX_RECENT + 5; index += 1) {
+                el.pick({ text: `x${index}`, name: `x${index}`, keywords: [] });
+            }
+            expect(el.recentEmoji).toHaveLength(EMOJI_MAX_RECENT);
+            host.remove();
+        });
+    });
+};

package/src/gtk-entry.spec.ts

@@ -70,4 +70,27 @@ export const GtkEntryTest = async () => {
             unmountAll();
         });
     });
+
+    await describe('<gtk-entry> GTK property spellings', async () => {
+        await it('reads placeholder-text, the Gtk.Entry property, and the older placeholder', () => {
+            expect(mountEntry({ 'placeholder-text': 'Search' }).input.placeholder).toBe('Search');
+            expect(mountEntry({ placeholder: 'Old' }).input.placeholder).toBe('Old');
+            expect(mountEntry({ 'placeholder-text': 'New', placeholder: 'Old' }).input.placeholder).toBe('New');
+            unmountAll();
+        });
+
+        await it('follows placeholder-text when it changes', () => {
+            const entry = mountEntry({ 'placeholder-text': 'a' });
+            entry.setAttribute('placeholder-text', 'b');
+            expect(entry.input.placeholder).toBe('b');
+            unmountAll();
+        });
+
+        await it('width-request is a minimum width; -1 and nonsense leave it natural', () => {
+            expect(mountEntry({ 'width-request': '280' }).style.minWidth).toBe('280px');
+            expect(mountEntry({ 'width-request': '-1' }).style.minWidth).toBe('');
+            expect(mountEntry({ 'width-request': 'x' }).style.minWidth).toBe('');
+            unmountAll();
+        });
+    });
 };