@gjsify/adwaita-web 0.54.0 → 0.56.0

package/src/gtk-inscription.spec.ts

@@ -0,0 +1,235 @@
+// DOM-level tests for <gtk-inscription>. Two things dominate and both are about DEFAULTS,
+// because GtkInscription's defaults are the opposite of GtkLabel's: `min-chars` is 3 and
+// `xalign` is 0 where a label has none and 0.5, and `wrap-mode` defaults to WORD_CHAR where a
+// label defaults to WORD. A port that reused the label's defaults would be wrong in a way no
+// property assertion would catch, so the first test in each block pins the C's own numbers.
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { GtkInscription } from './elements/gtk-inscription.js';
+
+function mount(attrs: Record<string, string> = {}): { el: GtkInscription; host: HTMLElement } {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const el = document.createElement('gtk-inscription') as GtkInscription;
+    for (const [name, value] of Object.entries(attrs)) el.setAttribute(name, value);
+    host.appendChild(el);
+    return { el, host };
+}
+
+export const GtkInscriptionTest = async () => {
+    await describe('<gtk-inscription> defaults', async () => {
+        await it('reserves three characters and one line, and nothing more', () => {
+            // gtkinscription.c:59-65, :787-790 — min-chars 3, nat-chars 0, min-lines 1,
+            // nat-lines 0. So out of the box it holds three characters wide and one line
+            // tall, and lets its text be as long as it likes.
+            const { el, host } = mount();
+            expect(el.minChars).toBe(3);
+            expect(el.natChars).toBe(0);
+            expect(el.minLines).toBe(1);
+            expect(el.natLines).toBe(0);
+            host.remove();
+        });
+
+        await it('is start-aligned and centre-tall, the opposite pairing to GtkLabel', () => {
+            // gtkinscription.c:67-69, :791-792 — xalign 0.0, yalign 0.5. This is what makes a
+            // caption left-aligned under a centred icon with no CSS of its own.
+            const { el, host } = mount();
+            expect(el.xalign).toBe(0);
+            expect(el.yalign).toBe(0.5);
+            host.remove();
+        });
+
+        await it('wraps at WORD_CHAR, where GtkLabel wraps at WORD', () => {
+            // gtkinscription.c:738-740 — the pspec says so in its own doc comment, and the
+            // reason is the widget's purpose: a box of a known character count has to break
+            // a word longer than itself or it overflows.
+            const { el, host } = mount();
+            expect(el.wrapMode).toBe('word-char');
+            expect(getComputedStyle(el).overflowWrap).toBe('anywhere');
+            host.remove();
+        });
+
+        await it('clips its overflow, where a label only ellipsizes when asked', () => {
+            // gtkinscription.c:728-733 — GTK_INSCRIPTION_OVERFLOW_CLIP is the pspec default,
+            // so nothing disappears silently without it being written down.
+            const { el, host } = mount();
+            expect(el.textOverflow).toBe('clip');
+            expect(el.classList.contains('clip')).toBe(true);
+            expect(el.classList.contains('ellipsized')).toBe(false);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-inscription> the four counts ARE the measure', async () => {
+        await it('the natural width is MAX(min, nat) — never the smaller of the two', () => {
+            // gtkinscription.c:347-348 — `*natural = MAX (min_chars, nat_chars) * char_pixels`.
+            // A nat BELOW the min does not shrink the widget below the minimum it reserved.
+            const { el, host } = mount({ 'min-chars': '20', 'nat-chars': '5' });
+            expect(el.style.getPropertyValue('--gtk-inscription-width')).toBe('20ch');
+            expect(el.style.getPropertyValue('--gtk-inscription-min-ch')).toBe('20ch');
+            host.remove();
+        });
+
+        await it('a nat ABOVE the min does widen it', () => {
+            const { el, host } = mount({ 'min-chars': '5', 'nat-chars': '20' });
+            expect(el.style.getPropertyValue('--gtk-inscription-width')).toBe('20ch');
+            host.remove();
+        });
+
+        await it('both counts at ZERO means the widget does not size itself at all', () => {
+            // gtkinscription.c:344-345 and :378-379 — both measures return NOTHING when the
+            // two counts are zero, so the minimum is whatever the widget already had. That is
+            // NOT `0ch`, which would be a very much smaller widget.
+            const { el, host } = mount({ 'min-chars': '0', 'nat-chars': '0' });
+            expect(el.style.getPropertyValue('--gtk-inscription-width')).toBe('auto');
+            expect(el.style.getPropertyValue('--gtk-inscription-min-ch')).toBe('auto');
+            const { el: el2, host: host2 } = mount({ 'min-lines': '0', 'nat-lines': '0' });
+            expect(el2.style.getPropertyValue('--gtk-inscription-height')).toBe('auto');
+            host.remove();
+            host2.remove();
+        });
+
+        await it('the line counts use lh, which is the line box Pango measures', () => {
+            // gtkinscription.c:383-384 — `min_lines * line_pixels`. CSS `lh` resolves to the
+            // element's own line box, which is that unit.
+            const { el, host } = mount({ 'min-lines': '2', 'nat-lines': '4' });
+            expect(el.style.getPropertyValue('--gtk-inscription-min-lh')).toBe('2lh');
+            expect(el.style.getPropertyValue('--gtk-inscription-height')).toBe('4lh');
+            host.remove();
+        });
+
+        await it('a negative count clamps to zero — there is no -1 "auto" here', () => {
+            // gtkinscription.c:638-644 — the pspec is a `guint` with a floor of 0, unlike
+            // `GtkLabel:width-chars`, whose floor is -1.
+            const { el, host } = mount({ 'min-chars': '-5' });
+            expect(el.minChars).toBe(0);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-inscription> wrap-mode and text-overflow', async () => {
+        await it('the three wrap nicks reach real CSS, none of them a gap', () => {
+            // The same two declarations `_labels.scss:112-126` states for `<gtk-label>`:
+            // `word-break: break-all` is Pango's CHAR, `overflow-wrap: anywhere` is
+            // WORD_CHAR, and `normal` is WORD — which needs a rule only because
+            // WORD_CHAR is THIS widget's default.
+            const char = mount({ 'wrap-mode': 'char' });
+            expect(getComputedStyle(char.el).wordBreak).toBe('break-all');
+            char.host.remove();
+            const word = mount({ 'wrap-mode': 'word' });
+            expect(getComputedStyle(word.el).overflowWrap).toBe('normal');
+            word.host.remove();
+            const both = mount({ 'wrap-mode': 'word-char' });
+            expect(getComputedStyle(both.el).overflowWrap).toBe('anywhere');
+            both.host.remove();
+        });
+
+        await it("keeps the GtkInscription nicks, which are not the label's", () => {
+            // packages/framework/gtk-host/src/generated/props.ts:331 — `clip`,
+            // `ellipsize-start`, `ellipsize-middle`, `ellipsize-end`, where
+            // `Gtk.Label:ellipsize` spells the same four `none`/`start`/`middle`/`end`.
+            for (const mode of ['clip', 'ellipsize-start', 'ellipsize-middle', 'ellipsize-end'] as const) {
+                const { el, host } = mount({ 'text-overflow': mode });
+                expect(el.textOverflow).toBe(mode);
+                host.remove();
+            }
+        });
+
+        await it('draws every truncating member as an END ellipsis, which is the divergence', () => {
+            // `labelEllipsizeOverflowValue`'s own doc comment: CSS `text-overflow` has one
+            // truncating value, so `start` and `middle` are drawn as an end ellipsis — never
+            // as a silent clip, which would drop the same characters with no indication.
+            const { el, host } = mount({ 'text-overflow': 'ellipsize-middle' });
+            expect(el.classList.contains('ellipsized')).toBe(true);
+            expect(el.style.getPropertyValue('--gtk-inscription-text-overflow')).toBe('ellipsis');
+            host.remove();
+        });
+
+        await it('clip stays clip', () => {
+            const { el, host } = mount({ 'text-overflow': 'clip' });
+            expect(el.style.getPropertyValue('--gtk-inscription-text-overflow')).toBe('clip');
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-inscription> text and markup', async () => {
+        await it('text is written as a text node, never as parsed markup', () => {
+            // The XSS answer `<gtk-label>` already gives: the string is the display text, not
+            // a document. `labelDisplayText` is the same reduction the NativeScript port uses.
+            const { el, host } = mount({ text: '<b>bold</b>' });
+            expect(el.textContent).toBe('<b>bold</b>');
+            expect(el.querySelector('b')).toBe(null);
+            host.remove();
+        });
+
+        await it('markup is REDUCED to its plain text, not handed to innerHTML', () => {
+            const { el, host } = mount({ markup: '<b>bold</b>' });
+            expect(el.textContent).toBe('bold');
+            expect(el.querySelector('b')).toBe(null);
+            host.remove();
+        });
+
+        await it('text wins when both are written, which is the order the C leaves them in', () => {
+            // `gtk_inscription_set_markup` writes the label directly and a later `set_text`
+            // overwrites it, so a tree carrying both reads as the plain one.
+            const { el, host } = mount({ text: 'plain', markup: '<b>markup</b>' });
+            expect(el.textContent).toBe('plain');
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-inscription> alignment and events', async () => {
+        await it('xalign is a ratio on the spacer pair, and 0 puts all free space before', () => {
+            // GTK places the text at `xalign * (width − text width)`; splitting the free
+            // space between two `flex-grow` spacers in the ratio `xalign : 1 − xalign` IS that
+            // formula, and `flex-grow` takes a real number where `align-items` does not.
+            const { el, host } = mount({ xalign: '0.25' });
+            expect(el.style.getPropertyValue('--gtk-inscription-xalign')).toBe('0.25');
+            expect(getComputedStyle(el, '::before').flexGrow).toBe('0.25');
+            expect(getComputedStyle(el, '::after').flexGrow).toBe('0.75');
+            host.remove();
+        });
+
+        await it('a value outside 0…1 is held to the interval, as the pspec range is', () => {
+            // gtkinscription.c:757-760 — `g_param_spec_float (…, 0.0, 1.0, …)`.
+            const { el, host } = mount({ xalign: '4' });
+            expect(el.xalign).toBe(1);
+            const low = mount({ yalign: '-2' });
+            expect(low.el.yalign).toBe(0);
+            host.remove();
+            low.host.remove();
+        });
+
+        await it('notifies once per real change, with the PARSED property in the detail', () => {
+            const { el, host } = mount();
+            const events: unknown[] = [];
+            el.addEventListener('notify::min-chars', (e) => events.push((e as CustomEvent).detail));
+            el.minChars = 12;
+            el.minChars = 12;
+            el.minChars = 4;
+            expect(events).toStrictEqual([{ 'min-chars': 12 }, { 'min-chars': 4 }]);
+            host.remove();
+        });
+
+        await it('a declaration in the markup is adopted without emitting', () => {
+            const host = document.createElement('div');
+            document.body.appendChild(host);
+            const el = document.createElement('gtk-inscription') as GtkInscription;
+            const events: unknown[] = [];
+            el.addEventListener('notify::min-chars', (e) => events.push((e as CustomEvent).detail));
+            el.setAttribute('min-chars', '7');
+            host.appendChild(el);
+            expect(el.minChars).toBe(7);
+            expect(events.length).toBe(0);
+            host.remove();
+        });
+
+        await it('has no ARIA role, because ARIA has no keyword for static text', () => {
+            // gtkinscription.c:781 sets GTK_ACCESSIBLE_ROLE_LABEL, the same role GtkLabel
+            // sets — and `role="label"` is not in the ARIA role list, so none is written.
+            const { el, host } = mount({ text: 'hello' });
+            expect(el.hasAttribute('role')).toBe(false);
+            host.remove();
+        });
+    });
+};

package/src/gtk-level-bar.spec.ts

@@ -0,0 +1,199 @@
+// DOM-level tests for <gtk-level-bar>. The widget is three separable things and each
+// gets its own describe: the OFFSETS, which are a runtime list and decide both the
+// block's class and nothing else; the BLOCK COUNT, which depends on `mode`; and the
+// INTERVAL, whose endpoints drag `value` with them the way the C's setters do.
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { GtkLevelBar } from './elements/gtk-level-bar.js';
+
+function mount(attrs: Record<string, string> = {}): { el: GtkLevelBar; host: HTMLElement } {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const el = document.createElement('gtk-level-bar') as GtkLevelBar;
+    for (const [name, value] of Object.entries(attrs)) el.setAttribute(name, value);
+    host.appendChild(el);
+    return { el, host };
+}
+
+/** The `block` nodes under the trough, in DOM order, with their class names. */
+function blocks(el: GtkLevelBar): string[] {
+    return [...el.querySelectorAll('.adw-level-bar-block')].map((node) =>
+        [...node.classList].filter((name) => name !== 'adw-level-bar-block').join(' '),
+    );
+}
+
+export const GtkLevelBarTest = async () => {
+    await describe('<gtk-level-bar> defaults', async () => {
+        await it("is a continuous horizontal bar over 0…1, with GTK's three offsets", () => {
+            const { el, host } = mount();
+            expect(el.value).toBe(0);
+            expect(el.minValue).toBe(0);
+            expect(el.maxValue).toBe(1);
+            expect(el.mode).toBe('continuous');
+            expect(el.orientation).toBe('horizontal');
+            expect(el.classList.contains('continuous')).toBe(true);
+            expect(el.classList.contains('horizontal')).toBe(true);
+            // gtklevelbar.c:1058-1060 — installed before any application code runs.
+            expect(el.offsetValue('low')).toBe(0.25);
+            expect(el.offsetValue('high')).toBe(0.75);
+            expect(el.offsetValue('full')).toBe(1);
+            expect(el.getAttribute('role')).toBe('meter');
+            expect(el.getAttribute('aria-valuemin')).toBe('0');
+            expect(el.getAttribute('aria-valuemax')).toBe('1');
+            expect(el.getAttribute('aria-valuenow')).toBe('0');
+            host.remove();
+        });
+
+        await it('continuous draws an empty level and no filled one at value 0', () => {
+            // gtklevelbar.c:429-430 — the filled node is never allocated at 0.
+            const { el, host } = mount();
+            const filled = el.querySelectorAll('.adw-level-bar-block.filled');
+            expect(filled.length).toBe(1);
+            expect((filled[0] as HTMLElement).hidden).toBe(true);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-level-bar> offsets', async () => {
+        await it('names the block by the first offset at or above the value', () => {
+            // gtklevelbar.c:604-625 — and the LOWEST offset wins even below its value.
+            const { el, host } = mount({ value: '0.3' });
+            expect(blocks(el)).toStrictEqual(['empty', 'filled high']);
+            el.value = 0.1;
+            expect(blocks(el)).toStrictEqual(['empty', 'filled low']);
+            el.value = 0.9;
+            expect(blocks(el)).toStrictEqual(['empty', 'filled full']);
+            el.value = 1;
+            expect(blocks(el)).toStrictEqual(['empty', 'filled full']);
+            host.remove();
+        });
+
+        await it('above every offset no class is named at all', () => {
+            const { el, host } = mount({ value: '1.5' });
+            expect(blocks(el)).toStrictEqual(['empty', 'filled']);
+            host.remove();
+        });
+
+        await it('adds a custom offset, and refuses one outside the interval', () => {
+            // gtklevelbar.c:1403 — `g_return_if_fail (gtk_level_bar_value_in_interval)`.
+            const { el, host } = mount({ value: '0.5' });
+            const changed: unknown[] = [];
+            el.addEventListener('offset-changed', (e) => changed.push((e as CustomEvent).detail));
+            el.addOffsetValue('my-offset', 0.6);
+            expect(el.offsetValue('my-offset')).toBe(0.6);
+            // 0.6 is the first offset at or above 0.5 once it is in the list.
+            expect(blocks(el)).toStrictEqual(['empty', 'filled my-offset']);
+            expect(changed).toStrictEqual([{ name: 'my-offset' }]);
+
+            el.addOffsetValue('outside', 2);
+            expect(el.offsetValue('outside')).toBe(null);
+            // Re-adding the same value is a no-op and says nothing (gtklevelbar.c:259-260).
+            el.addOffsetValue('my-offset', 0.6);
+            expect(changed.length).toBe(1);
+            host.remove();
+        });
+
+        await it('replacing an offset re-sorts the list it is walked in', () => {
+            const { el, host } = mount();
+            el.addOffsetValue('mid', 0.5);
+            expect(el.offsetValue('mid')).toBe(0.5);
+            el.addOffsetValue('mid', 0.05);
+            // Now the LOWEST offset of all, so it names even a value of 0.
+            expect(blocks(el)).toStrictEqual(['empty', 'filled mid']);
+            el.value = 0.3;
+            expect(blocks(el)).toStrictEqual(['empty', 'filled high']);
+            host.remove();
+        });
+
+        await it('removes an offset and the class goes with it', () => {
+            const { el, host } = mount({ value: '0.9' });
+            el.removeOffsetValue('full');
+            // Nothing is above 0.9 any more, so nothing names it.
+            expect(blocks(el)).toStrictEqual(['empty', 'filled']);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-level-bar> mode', async () => {
+        await it('discrete draws one block per unit of the interval, filled from the left', () => {
+            // gtklevelbar.c:285-294 and :630-633.
+            const { el, host } = mount({ mode: 'discrete', 'max-value': '5', value: '3' });
+            expect(el.classList.contains('discrete')).toBe(true);
+            expect(blocks(el)).toStrictEqual(['filled', 'filled', 'filled', 'empty', 'empty']);
+            host.remove();
+        });
+
+        await it('inverted fills from the far end without reordering the DOM', () => {
+            // gtklevelbar.c:637, 648 — the INDEX is reversed, the node order is not.
+            const { el, host } = mount({ mode: 'discrete', 'max-value': '4', value: '1', inverted: '' });
+            expect(blocks(el)).toStrictEqual(['empty', 'empty', 'empty', 'filled full']);
+            host.remove();
+        });
+
+        await it('a one-unit interval is one block, and the value fills none of it', () => {
+            // `MAX(1, round(max) − round(min))` blocks, but `MIN(blocks, round(value) −
+            // round(min))` of them are filled — and for a zero-width interval that second
+            // number is 0 (gtklevelbar.c:291, :633).
+            const { el, host } = mount({ mode: 'discrete', 'min-value': '3', 'max-value': '3', value: '3' });
+            expect(blocks(el)).toStrictEqual(['empty']);
+            host.remove();
+        });
+
+        await it('carries the orientation the stylesheet selects on', () => {
+            const { el, host } = mount({ orientation: 'vertical' });
+            expect(el.classList.contains('vertical')).toBe(true);
+            expect(el.classList.contains('horizontal')).toBe(false);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-level-bar> interval', async () => {
+        await it('raising the minimum drags the value up with it', () => {
+            // gtklevelbar.c:1191-1192 — set_min_value moves `value`, then notifies it.
+            const { el, host } = mount({ value: '0.1' });
+            const events: string[] = [];
+            el.addEventListener('notify::value', () => events.push('value'));
+            el.minValue = 0.5;
+            expect(el.value).toBe(0.5);
+            expect(events).toStrictEqual(['value']);
+            host.remove();
+        });
+
+        await it('lowering the maximum drags the value down AND clamps the offsets', () => {
+            // gtklevelbar.c:1229-1234 and gtk_level_bar_ensure_offsets_in_range :667-682.
+            const { el, host } = mount({ value: '0.9' });
+            el.maxValue = 0.4;
+            expect(el.value).toBe(0.4);
+            expect(el.offsetValue('high')).toBe(0.4);
+            expect(el.offsetValue('full')).toBe(0.4);
+            expect(el.getAttribute('aria-valuemax')).toBe('0.4');
+            host.remove();
+        });
+
+        await it('reports the real interval to assistive technology, not 0…1', () => {
+            const { el, host } = mount({ 'min-value': '10', 'max-value': '20', value: '15' });
+            expect(el.getAttribute('aria-valuemin')).toBe('10');
+            expect(el.getAttribute('aria-valuemax')).toBe('20');
+            expect(el.getAttribute('aria-valuenow')).toBe('15');
+            expect(
+                (el.querySelector('.adw-level-bar-block.filled') as HTMLElement).style.getPropertyValue(
+                    '--level-fraction',
+                ),
+            ).toBe('0.5');
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-level-bar> notification', async () => {
+        await it('notifies with the parsed property, and not on a re-render', () => {
+            const { el, host } = mount();
+            const details: unknown[] = [];
+            el.addEventListener('notify::value', (e) => details.push((e as CustomEvent).detail));
+            el.value = 0.4;
+            el.value = 0.4;
+            el.mode = 'discrete';
+            expect(details).toStrictEqual([{ value: 0.4 }]);
+            host.remove();
+        });
+    });
+};

package/src/gtk-link-button.spec.ts

@@ -0,0 +1,117 @@
+// DOM-level tests for <gtk-link-button>: the two properties Gtk.LinkButton adds on top of
+// Gtk.Button (`uri`, `visited`), the order GTK writes them in — a new URI un-visits, a click
+// visits — and the boolean-accumulator shape of `::activate-link`.
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { GtkLinkButton } from './elements/gtk-link-button.js';
+
+function mount(attrs: Record<string, string> = {}): { el: GtkLinkButton; host: HTMLElement; opened: string[] } {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const el = document.createElement('gtk-link-button') as GtkLinkButton;
+    for (const [name, value] of Object.entries(attrs)) el.setAttribute(name, value);
+    host.appendChild(el);
+    // `window.open` is the launcher call; the specs must not open a tab to prove a colour.
+    const opened: string[] = [];
+    (el as unknown as { launch: (uri: string) => void }).launch = (uri: string) => opened.push(uri);
+    return { el, host, opened };
+}
+
+/** Collect the `detail` of every `event` dispatched on (or bubbling to) `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 GtkLinkButtonTest = async () => {
+    await describe('<gtk-link-button> uri', async () => {
+        await it('is a gtk-button with a uri, and the uri is what a new one unsets', async () => {
+            const { el, host } = mount({ uri: 'https://example.org/a', visited: '' });
+            expect(el.uri).toBe('https://example.org/a');
+            expect(el.visited).toBe(true);
+            expect(el.button.classList.contains('adw-button')).toBe(true);
+            expect(el.button.classList.contains('link')).toBe(true);
+            expect(el.button.classList.contains('visited')).toBe(true);
+            el.uri = 'https://example.org/b';
+            expect(el.getAttribute('uri')).toBe('https://example.org/b');
+            expect(el.visited).toBe(false);
+            expect(el.button.classList.contains('visited')).toBe(false);
+            host.remove();
+        });
+
+        await it('shows the uri as the tooltip only when the label is not the uri already', () => {
+            const named = mount({ uri: 'https://example.org/', label: 'Example' });
+            expect(named.el.button.title).toBe('https://example.org/');
+            const same = mount({ uri: 'https://example.org/', label: 'https://example.org/' });
+            expect(same.el.button.title).toBe('');
+            const own = mount({ uri: 'https://example.org/', label: 'Example', tooltip: 'Home' });
+            expect(own.el.button.title).toBe('Home');
+            named.host.remove();
+            same.host.remove();
+            own.host.remove();
+        });
+    });
+
+    await describe('<gtk-link-button> activation', async () => {
+        await it('a click launches the uri and then visits the link', () => {
+            const { el, host, opened } = mount({ uri: 'https://example.org/a', label: 'Example' });
+            const notified = record(el, 'notify::visited');
+            el.button.click();
+            expect(opened).toStrictEqual(['https://example.org/a']);
+            expect(el.visited).toBe(true);
+            expect(notified).toStrictEqual([{ visited: true }]);
+            host.remove();
+        });
+
+        await it('cancelling activate-link is a handler returning TRUE: no launch, no visit', () => {
+            const { el, host, opened } = mount({ uri: 'https://example.org/a', label: 'Example' });
+            let handled = false;
+            el.addEventListener('activate-link', (event) => {
+                event.preventDefault();
+                handled = true;
+            });
+            el.button.click();
+            expect(handled).toBe(true);
+            expect(opened).toStrictEqual([]);
+            expect(el.visited).toBe(false);
+            host.remove();
+        });
+
+        await it('a button with no uri launches nothing', () => {
+            const { el, host, opened } = mount({ label: 'Nowhere' });
+            el.button.click();
+            expect(opened).toStrictEqual([]);
+            expect(el.visited).toBe(false);
+            host.remove();
+        });
+
+        await it('writing the visited state directly notifies, and re-writing it does not', () => {
+            const { el, host } = mount({ uri: 'https://example.org/a' });
+            const notified = record(el, 'notify::visited');
+            el.visited = true;
+            el.visited = true;
+            expect(notified).toStrictEqual([{ visited: true }]);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-link-button> look', async () => {
+        await it('a visited link is drawn in a different colour than a fresh one', () => {
+            const { el, host } = mount({ uri: 'https://example.org/a', label: 'Example' });
+            const fresh = getComputedStyle(el.button).color;
+            el.visited = true;
+            expect(getComputedStyle(el.button).color === fresh).toBe(false);
+            host.remove();
+        });
+
+        await it('keeps the link treatment through a re-render of the label', () => {
+            const { el, host } = mount({ uri: 'https://example.org/a', label: 'Example', visited: '' });
+            el.setAttribute('label', 'Other');
+            expect(el.button.textContent).toBe('Other');
+            expect(el.button.classList.contains('link')).toBe(true);
+            expect(el.button.classList.contains('visited')).toBe(true);
+            host.remove();
+        });
+    });
+};