@mk-kit/ui 0.37.0 → 0.38.0

package/fesm2022/mk-kit-ui-testing.mjs

@@ -0,0 +1,834 @@
+const NO_OP = async () => { };
+/**
+ * A DOM element wrapped for tests: reads are synchronous, every interaction
+ * dispatches the same events a user would and then settles change detection
+ * (`fixture.detectChanges()` + `whenStable()`), so the next read sees the
+ * updated view.
+ */
+class MkTestElement {
+    native;
+    settle;
+    constructor(
+    /** The underlying element — reach for it when a harness has no getter. */
+    native, 
+    /** Flush change detection after an interaction. */
+    settle = NO_OP) {
+        this.native = native;
+        this.settle = settle;
+    }
+    /** Trimmed text content with whitespace collapsed. */
+    text() {
+        return (this.native.textContent ?? '').replace(/\s+/g, ' ').trim();
+    }
+    attr(name) {
+        return this.native.getAttribute(name);
+    }
+    hasClass(name) {
+        return this.native.classList.contains(name);
+    }
+    /** Read a DOM property (`value`, `checked`, `open`, …). */
+    prop(name) {
+        return this.native[name];
+    }
+    matches(selector) {
+        return this.native.matches(selector);
+    }
+    isFocused() {
+        return this.native.ownerDocument.activeElement === this.native;
+    }
+    /** Native `disabled`, `aria-disabled="true"` or a `--disabled` host class. */
+    isDisabled() {
+        const el = this.native;
+        return (el.disabled === true ||
+            el.getAttribute('aria-disabled') === 'true' ||
+            Array.from(el.classList).some((c) => c.endsWith('--disabled')));
+    }
+    query(selector) {
+        const el = this.native.querySelector(selector);
+        return el ? new MkTestElement(el, this.settle) : null;
+    }
+    queryAll(selector) {
+        return Array.from(this.native.querySelectorAll(selector)).map((el) => new MkTestElement(el, this.settle));
+    }
+    /** Like `query`, but throws a readable error when nothing matches. */
+    child(selector) {
+        const el = this.query(selector);
+        if (!el)
+            throw new Error(`Expected "${selector}" inside <${this.describe()}>.`);
+        return el;
+    }
+    /** pointerdown → mousedown → focus → pointerup → mouseup → click, like a user. */
+    async click() {
+        const el = this.native;
+        el.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, cancelable: true }));
+        el.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, cancelable: true }));
+        el.focus();
+        el.dispatchEvent(new PointerEvent('pointerup', { bubbles: true, cancelable: true }));
+        el.dispatchEvent(new MouseEvent('mouseup', { bubbles: true, cancelable: true }));
+        el.click();
+        await this.settle();
+    }
+    async hover() {
+        for (const type of ['pointerenter', 'mouseenter', 'pointerover', 'mouseover']) {
+            this.native.dispatchEvent(new MouseEvent(type, { bubbles: type.endsWith('over') }));
+        }
+        this.native.dispatchEvent(new MouseEvent('mousemove', { bubbles: true }));
+        await this.settle();
+    }
+    async leave() {
+        for (const type of ['pointerleave', 'mouseleave', 'pointerout', 'mouseout']) {
+            this.native.dispatchEvent(new MouseEvent(type, { bubbles: type.endsWith('out') }));
+        }
+        await this.settle();
+    }
+    async focus() {
+        this.native.focus();
+        if (!this.isFocused())
+            this.native.dispatchEvent(new FocusEvent('focus'));
+        await this.settle();
+    }
+    async blur() {
+        this.native.blur();
+        this.native.dispatchEvent(new FocusEvent('blur'));
+        this.native.dispatchEvent(new FocusEvent('focusout', { bubbles: true }));
+        await this.settle();
+    }
+    /**
+     * Type into an input/textarea/contenteditable character by character —
+     * keydown, `value` append, `input`, keyup — then settle. Use `setValue`
+     * to replace the value in one go.
+     */
+    async type(text) {
+        const el = this.native;
+        el.focus();
+        for (const ch of text) {
+            const down = new KeyboardEvent('keydown', { key: ch, bubbles: true, cancelable: true });
+            el.dispatchEvent(down);
+            if (!down.defaultPrevented) {
+                if (el.isContentEditable)
+                    el.textContent = (el.textContent ?? '') + ch;
+                else
+                    el.value = (el.value ?? '') + ch;
+                el.dispatchEvent(new InputEvent('input', { bubbles: true, data: ch, inputType: 'insertText' }));
+            }
+            el.dispatchEvent(new KeyboardEvent('keyup', { key: ch, bubbles: true }));
+        }
+        await this.settle();
+    }
+    /** Set the value of an input/textarea/select and fire `input` + `change`. */
+    async setValue(value) {
+        const el = this.native;
+        el.focus();
+        el.value = value;
+        el.dispatchEvent(new InputEvent('input', { bubbles: true, inputType: 'insertReplacementText' }));
+        el.dispatchEvent(new Event('change', { bubbles: true }));
+        await this.settle();
+    }
+    async clear() {
+        const el = this.native;
+        el.focus();
+        el.value = '';
+        el.dispatchEvent(new InputEvent('input', { bubbles: true, inputType: 'deleteContentBackward' }));
+        await this.settle();
+    }
+    /** Dispatch keydown/keyup for each key. Printable single characters are also typed. */
+    async sendKeys(...keys) {
+        for (const key of keys) {
+            const mods = parseKey(key);
+            const down = new KeyboardEvent('keydown', { ...mods, bubbles: true, cancelable: true });
+            this.native.dispatchEvent(down);
+            if (!down.defaultPrevented && mods.key.length === 1 && !mods.ctrlKey && !mods.metaKey) {
+                const el = this.native;
+                if ('value' in el && typeof el.value === 'string' && !el.isContentEditable && isTextField(el)) {
+                    el.value += mods.key;
+                    el.dispatchEvent(new InputEvent('input', { bubbles: true, data: mods.key, inputType: 'insertText' }));
+                }
+            }
+            this.native.dispatchEvent(new KeyboardEvent('keyup', { ...mods, bubbles: true }));
+        }
+        await this.settle();
+    }
+    /** Dispatch any event on the element and settle. */
+    async dispatch(event) {
+        this.native.dispatchEvent(event);
+        await this.settle();
+    }
+    describe() {
+        const el = this.native;
+        const id = el.id ? `#${el.id}` : '';
+        const cls = el.classList.length ? `.${Array.from(el.classList).slice(0, 2).join('.')}` : '';
+        return `${el.tagName.toLowerCase()}${id}${cls}`;
+    }
+}
+/** `Control+a`, `Shift+Tab`, `Enter`, `a` → KeyboardEventInit. */
+function parseKey(key) {
+    const parts = key.split('+');
+    const k = parts.pop() ?? key;
+    const has = (m) => parts.some((p) => p.toLowerCase() === m);
+    return {
+        key: k,
+        ctrlKey: has('control') || has('ctrl'),
+        metaKey: has('meta') || has('cmd'),
+        shiftKey: has('shift'),
+        altKey: has('alt'),
+    };
+}
+function isTextField(el) {
+    if (el instanceof HTMLTextAreaElement)
+        return true;
+    if (!(el instanceof HTMLInputElement))
+        return false;
+    return !['checkbox', 'radio', 'button', 'submit', 'reset', 'file', 'range', 'color'].includes(el.type);
+}
+/**
+ * Finds harnesses under a root element. Create one with
+ * `MkHarnessLoader.fromFixture(fixture)`; use `.document()` for content that
+ * mk-kit teleports into `document.body` (dialogs, toasts, menus, select
+ * panels) and `.within(el)` to scope lookups.
+ */
+class MkHarnessLoader {
+    root;
+    settle;
+    constructor(root, settle) {
+        this.root = root;
+        this.settle = settle;
+    }
+    /**
+     * Loader rooted at the fixture's host element. Every interaction runs
+     * `fixture.detectChanges()` and awaits `fixture.whenStable()` afterwards,
+     * so it works in zoneless and zone-based TestBeds alike.
+     */
+    static fromFixture(fixture) {
+        const settle = async () => {
+            fixture.detectChanges();
+            await fixture.whenStable();
+            fixture.detectChanges();
+        };
+        return new MkHarnessLoader(fixture.nativeElement, settle);
+    }
+    /** Same settle function, rooted at `document.body` — for overlays. */
+    document() {
+        return new MkHarnessLoader(this.root.ownerDocument.body, this.settle);
+    }
+    within(root) {
+        return new MkHarnessLoader(root instanceof MkTestElement ? root.native : root, this.settle);
+    }
+    /** Wrap the root element itself. */
+    rootElement() {
+        return new MkTestElement(this.root, this.settle);
+    }
+    element(selector) {
+        const el = this.root.querySelector(selector) ?? (this.root.matches(selector) ? this.root : null);
+        if (!el)
+            throw new Error(`No element matches "${selector}" under <${this.root.tagName.toLowerCase()}>.`);
+        return new MkTestElement(el, this.settle);
+    }
+    elements(selector) {
+        return Array.from(this.root.querySelectorAll(selector)).map((el) => new MkTestElement(el, this.settle));
+    }
+    /** First matching harness; throws when there is none. */
+    async get(type, filters = {}) {
+        const [first] = await this.getAll(type, filters);
+        if (!first) {
+            throw new Error(`No ${type.name} found (host "${type.hostSelector}"${filters.selector ? `, selector "${filters.selector}"` : ''}${filters.text ? `, text ${String(filters.text)}` : ''}) under <${this.root.tagName.toLowerCase()}>.`);
+        }
+        return first;
+    }
+    async getOrNull(type, filters = {}) {
+        const [first] = await this.getAll(type, filters);
+        return first ?? null;
+    }
+    async has(type, filters = {}) {
+        return (await this.getAll(type, filters)).length > 0;
+    }
+    async getAll(type, filters = {}) {
+        await this.settle();
+        const hosts = new Set();
+        for (const part of type.hostSelector.split(',')) {
+            const sel = part.trim();
+            if (this.root.matches(sel))
+                hosts.add(this.root);
+            for (const el of Array.from(this.root.querySelectorAll(sel)))
+                hosts.add(el);
+        }
+        const out = [];
+        for (const host of hosts) {
+            if (filters.selector && !host.matches(filters.selector))
+                continue;
+            const el = new MkTestElement(host, this.settle);
+            if (filters.text !== undefined && !matchText(el.text(), filters.text))
+                continue;
+            out.push(new type(el, this));
+        }
+        // Document order.
+        out.sort((a, b) => (a.host.native.compareDocumentPosition(b.host.native) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1));
+        return out;
+    }
+}
+function matchText(actual, expected) {
+    return typeof expected === 'string' ? actual === expected : expected.test(actual);
+}
+/**
+ * Base class of every mk-kit harness. Subclasses declare `hostSelector`
+ * and expose user-level actions (`click()`, `selectOption()`, …) and reads
+ * (`isChecked()`, `text()`), so specs never depend on the component's DOM.
+ */
+class MkHarness {
+    host;
+    loader;
+    static hostSelector = '';
+    constructor(
+    /** The component's host element. */
+    host, loader) {
+        this.host = host;
+        this.loader = loader;
+    }
+    settle() {
+        return this.loader.settle();
+    }
+    /** Query inside the host. */
+    q(selector) {
+        return this.host.query(selector);
+    }
+    qAll(selector) {
+        return this.host.queryAll(selector);
+    }
+    /** Query the whole document — for panels teleported to `document.body`. */
+    qDocument(selector) {
+        const el = this.host.native.ownerDocument.querySelector(selector);
+        return el ? new MkTestElement(el, this.host.settle) : null;
+    }
+    /** Element referenced by an `aria-controls` / `aria-owns` id on `from`. */
+    controlled(from, attribute = 'aria-controls') {
+        const id = from.attr(attribute);
+        if (!id)
+            return null;
+        const el = this.host.native.ownerDocument.getElementById(id);
+        return el ? new MkTestElement(el, this.host.settle) : null;
+    }
+}
+/** Resolve "by index or by label" arguments shared by option-style harnesses. */
+function pickBy(items, which, label, what) {
+    const item = typeof which === 'number'
+        ? items[which]
+        : items.find((i) => matchText(label(i), which));
+    if (!item) {
+        throw new Error(`No ${what} ${typeof which === 'number' ? `at index ${which}` : `matching ${String(which)}`}. Available: ${items
+            .map((i) => JSON.stringify(label(i)))
+            .join(', ') || '(none)'}.`);
+    }
+    return item;
+}
+
+/** `button[mkButton]` / `a[mkButton]`. */
+class MkButtonHarness extends MkHarness {
+    static hostSelector = 'button[mkButton], a[mkButton], .mk-button';
+    text() {
+        return this.host.text();
+    }
+    async click() {
+        await this.host.click();
+    }
+    async focus() {
+        await this.host.focus();
+    }
+    isDisabled() {
+        return this.host.isDisabled();
+    }
+    isLoading() {
+        return this.host.hasClass('mk-button--loading');
+    }
+    tone() {
+        return this.host.attr('data-tone');
+    }
+    /** `solid` | `soft` | `outline` | `ghost` | `link`. */
+    variant() {
+        const m = Array.from(this.host.native.classList).find((c) => /^mk-button--(solid|soft|outline|ghost|link)$/.test(c));
+        return m ? m.replace('mk-button--', '') : null;
+    }
+    size() {
+        const m = Array.from(this.host.native.classList).find((c) => /^mk-button--(sm|md|lg)$/.test(c));
+        return m ? m.replace('mk-button--', '') : null;
+    }
+}
+/** Native `input[mkInput]` / `textarea[mkInput]`. */
+class MkInputHarness extends MkHarness {
+    static hostSelector = '[mkInput], .mk-input';
+    value() {
+        return this.host.prop('value') ?? '';
+    }
+    /** Replace the value (fires `input` + `change`). */
+    async setValue(value) {
+        await this.host.setValue(value);
+    }
+    /** Append text one character at a time (keydown / input / keyup). */
+    async type(text) {
+        await this.host.type(text);
+    }
+    async clear() {
+        await this.host.clear();
+    }
+    async focus() {
+        await this.host.focus();
+    }
+    async blur() {
+        await this.host.blur();
+    }
+    placeholder() {
+        return this.host.attr('placeholder') ?? '';
+    }
+    type_() {
+        return this.host.attr('type') ?? (this.host.native.tagName === 'TEXTAREA' ? 'textarea' : 'text');
+    }
+    isDisabled() {
+        return this.host.isDisabled();
+    }
+    isInvalid() {
+        return this.host.hasClass('mk-input--invalid') || this.host.attr('aria-invalid') === 'true';
+    }
+    isRequired() {
+        return this.host.prop('required') === true || this.host.attr('aria-required') === 'true';
+    }
+    isFocused() {
+        return this.host.isFocused();
+    }
+}
+/** `mk-checkbox`. */
+class MkCheckboxHarness extends MkHarness {
+    static hostSelector = 'mk-checkbox';
+    get input() {
+        return this.host.child('input[type="checkbox"]');
+    }
+    label() {
+        return this.q('.mk-checkbox__text')?.text() ?? '';
+    }
+    isChecked() {
+        return this.input.prop('checked') === true;
+    }
+    isIndeterminate() {
+        return this.input.prop('indeterminate') === true;
+    }
+    isDisabled() {
+        return this.input.isDisabled();
+    }
+    isRequired() {
+        return this.input.prop('required') === true;
+    }
+    async toggle() {
+        await this.input.click();
+    }
+    async check() {
+        if (!this.isChecked())
+            await this.toggle();
+    }
+    async uncheck() {
+        if (this.isChecked())
+            await this.toggle();
+    }
+    async focus() {
+        await this.input.focus();
+    }
+    async blur() {
+        await this.input.blur();
+    }
+}
+/** `mk-switch`. */
+class MkSwitchHarness extends MkHarness {
+    static hostSelector = 'mk-switch';
+    get control() {
+        return this.host.child('[role="switch"]');
+    }
+    label() {
+        return this.q('.mk-switch__label')?.text() ?? '';
+    }
+    isChecked() {
+        return this.control.attr('aria-checked') === 'true';
+    }
+    isDisabled() {
+        return this.control.isDisabled();
+    }
+    async toggle() {
+        await this.control.click();
+    }
+    async check() {
+        if (!this.isChecked())
+            await this.toggle();
+    }
+    async uncheck() {
+        if (this.isChecked())
+            await this.toggle();
+    }
+    async focus() {
+        await this.control.focus();
+    }
+}
+/** One `mk-radio` inside a group. */
+class MkRadioHarness extends MkHarness {
+    static hostSelector = 'mk-radio';
+    label() {
+        return this.q('.mk-radio__label')?.text() ?? this.host.text();
+    }
+    isChecked() {
+        return this.host.attr('aria-checked') === 'true';
+    }
+    isDisabled() {
+        return this.host.isDisabled();
+    }
+    async select() {
+        await this.host.click();
+    }
+    async focus() {
+        await this.host.focus();
+    }
+}
+/** `mk-radio-group`. */
+class MkRadioGroupHarness extends MkHarness {
+    static hostSelector = 'mk-radio-group';
+    radios() {
+        return this.loader.within(this.host).getAll(MkRadioHarness);
+    }
+    async labels() {
+        return (await this.radios()).map((r) => r.label());
+    }
+    /** Label of the checked radio, or `null`. */
+    async checkedLabel() {
+        return (await this.radios()).find((r) => r.isChecked())?.label() ?? null;
+    }
+    async checkedIndex() {
+        return (await this.radios()).findIndex((r) => r.isChecked());
+    }
+    /** Select by index, exact label or RegExp. */
+    async select(which) {
+        const radios = await this.radios();
+        await pickBy(radios, which, (r) => r.label(), 'radio').select();
+    }
+    isDisabled() {
+        return this.host.hasClass('mk-radio-group--disabled');
+    }
+}
+/** `mk-select` — opens the teleported listbox and picks options like a user. */
+class MkSelectHarness extends MkHarness {
+    static hostSelector = 'mk-select';
+    get trigger() {
+        return this.host.child('[role="combobox"]');
+    }
+    /** Label of the selected option, or `''` when only the placeholder shows. */
+    valueText() {
+        const v = this.q('.mk-select__value');
+        return v && !v.hasClass('mk-select__value--placeholder') ? v.text() : '';
+    }
+    placeholder() {
+        return this.q('.mk-select__value--placeholder')?.text() ?? '';
+    }
+    isOpen() {
+        return this.trigger.attr('aria-expanded') === 'true';
+    }
+    isDisabled() {
+        return this.trigger.isDisabled();
+    }
+    isInvalid() {
+        return this.trigger.attr('aria-invalid') === 'true';
+    }
+    async open() {
+        if (!this.isOpen())
+            await this.trigger.click();
+    }
+    async close() {
+        if (this.isOpen())
+            await this.trigger.sendKeys('Escape');
+        if (this.isOpen())
+            await this.trigger.click();
+    }
+    async focus() {
+        await this.trigger.focus();
+    }
+    /** Options of the (opened) listbox. Opens it if needed. */
+    async options() {
+        const els = await this.optionElements();
+        return els.map((el) => ({
+            label: el.text(),
+            selected: el.attr('aria-selected') === 'true',
+            disabled: el.attr('aria-disabled') === 'true',
+        }));
+    }
+    /** Pick an option by index, exact label or RegExp (opens the list first). */
+    async selectOption(which) {
+        const els = await this.optionElements();
+        await pickBy(els, which, (el) => el.text(), 'option').click();
+    }
+    async optionElements() {
+        await this.open();
+        const list = this.controlled(this.trigger);
+        if (!list)
+            throw new Error('mk-select listbox did not open.');
+        return list.queryAll('[role="option"]');
+    }
+}
+/** `mk-form-field` — label / hint / error around any control. */
+class MkFormFieldHarness extends MkHarness {
+    static hostSelector = 'mk-form-field';
+    label() {
+        return this.q('.mk-form-field__label-text')?.text() ?? '';
+    }
+    hint() {
+        return this.q('.mk-form-field__hint')?.text() ?? null;
+    }
+    /** The visible validation message, or `null` when the field is valid/untouched. */
+    error() {
+        return this.q('.mk-form-field__error')?.text() ?? null;
+    }
+    hasError() {
+        return this.error() !== null;
+    }
+    isRequired() {
+        return !!this.q('.mk-form-field__required');
+    }
+    /** The control inside the field, as a harness of the given type. */
+    control(type) {
+        return this.loader.within(this.host).get(type);
+    }
+}
+
+/** `mk-tabs`. */
+class MkTabsHarness extends MkHarness {
+    static hostSelector = 'mk-tabs';
+    tabButtons() {
+        return this.qAll('[role="tab"]');
+    }
+    labels() {
+        return this.tabButtons().map((t) => t.text());
+    }
+    selectedIndex() {
+        return this.tabButtons().findIndex((t) => t.attr('aria-selected') === 'true');
+    }
+    selectedLabel() {
+        const i = this.selectedIndex();
+        return i >= 0 ? this.labels()[i] : null;
+    }
+    /** Select by index, exact label or RegExp. */
+    async select(which) {
+        await pickBy(this.tabButtons(), which, (t) => t.text(), 'tab').click();
+    }
+    isDisabled(which) {
+        return pickBy(this.tabButtons(), which, (t) => t.text(), 'tab').isDisabled();
+    }
+    /** The visible tab panel (`mk-tab` host). */
+    selectedPanel() {
+        const tab = this.tabButtons()[this.selectedIndex()];
+        return tab ? this.controlled(tab) : null;
+    }
+    /** Text of the visible panel. */
+    selectedPanelText() {
+        return this.selectedPanel()?.text() ?? '';
+    }
+}
+/**
+ * A `[mkMenuTriggerFor]` trigger and the `mk-menu` panel it opens. The host
+ * is matched by the trigger's `aria-haspopup="menu"` (the directive's
+ * attribute is an input binding, so it is not in the DOM).
+ */
+class MkMenuHarness extends MkHarness {
+    static hostSelector = '[aria-haspopup="menu"]';
+    isOpen() {
+        return this.host.attr('aria-expanded') === 'true';
+    }
+    async open() {
+        if (!this.isOpen())
+            await this.host.click();
+    }
+    async close() {
+        if (this.isOpen())
+            await this.panel()?.sendKeys('Escape');
+        if (this.isOpen())
+            await this.host.click();
+    }
+    /** The teleported panel (`[role="menu"]`), or `null` while closed. */
+    panel() {
+        return this.controlled(this.host);
+    }
+    /** Item texts of the open menu (opens it if needed). Submenu panels excluded. */
+    async items() {
+        return (await this.itemElements()).map((i) => i.text());
+    }
+    /** Click an item by index, exact text or RegExp (opens the menu first). */
+    async clickItem(which) {
+        await pickBy(await this.itemElements(), which, (i) => i.text(), 'menu item').click();
+    }
+    async isItemDisabled(which) {
+        return pickBy(await this.itemElements(), which, (i) => i.text(), 'menu item').isDisabled();
+    }
+    async itemElements() {
+        await this.open();
+        const panel = this.panel();
+        if (!panel)
+            throw new Error('mk-menu panel did not open.');
+        return panel.queryAll('[role="menuitem"]');
+    }
+}
+
+/** One data row of `mk-table`. */
+class MkTableRowHarness extends MkHarness {
+    static hostSelector = 'tr.mk-table__row';
+    /** Cell texts of the data columns (expand / select cells excluded). */
+    cells() {
+        return this.dataCells().map((c) => c.text());
+    }
+    cell(index) {
+        return this.cells()[index] ?? '';
+    }
+    isSelected() {
+        return this.host.hasClass('mk-table__row--selected');
+    }
+    isExpanded() {
+        return this.host.hasClass('mk-table__row--expanded') || this.host.attr('aria-expanded') === 'true';
+    }
+    async click() {
+        await this.host.click();
+    }
+    /** Toggle the selection checkbox (throws when the table is not `selectable`). */
+    async toggleSelected() {
+        const cb = await this.loader.within(this.host.child('.mk-table__td--select')).get(MkCheckboxHarness);
+        await cb.toggle();
+    }
+    /** Toggle the expand / tree control of the row. */
+    async toggleExpanded() {
+        const btn = this.q('.mk-table__td--expand button') ?? this.q('.mk-table__tree-toggle') ?? this.q('button[aria-expanded]');
+        if (!btn)
+            throw new Error('Row has no expand toggle (table is not expandable / has no children).');
+        await btn.click();
+    }
+    dataCells() {
+        return this.qAll('td.mk-table__td').filter((c) => !c.hasClass('mk-table__td--expand') && !c.hasClass('mk-table__td--select'));
+    }
+}
+/** `mk-table`. */
+class MkTableHarness extends MkHarness {
+    static hostSelector = 'mk-table';
+    /** Header labels of the data columns, in display order. */
+    headers() {
+        return this.headerCells().map((th) => th.child('.mk-table__th-label').text());
+    }
+    rows() {
+        return this.loader.within(this.host).getAll(MkTableRowHarness);
+    }
+    async rowCount() {
+        return (await this.rows()).length;
+    }
+    /** Every data cell as text: `rows()[r].cells()`. */
+    async cellTexts() {
+        return (await this.rows()).map((r) => r.cells());
+    }
+    /** Click a sortable header (by index, exact label or RegExp). */
+    async sortBy(which) {
+        const th = pickBy(this.headerCells(), which, (h) => h.child('.mk-table__th-label').text(), 'column');
+        const btn = th.query('.mk-table__th-button');
+        if (!btn)
+            throw new Error(`Column "${th.text()}" is not sortable.`);
+        await btn.click();
+    }
+    /** `'ascending' | 'descending' | 'none' | null` (null = not sortable). */
+    sortDirection(which) {
+        return pickBy(this.headerCells(), which, (h) => h.child('.mk-table__th-label').text(), 'column').attr('aria-sort');
+    }
+    async selectedRowCount() {
+        return (await this.rows()).filter((r) => r.isSelected()).length;
+    }
+    /** Toggle the header "select all" checkbox. */
+    async toggleAll() {
+        const th = this.q('.mk-table__th--select');
+        if (!th)
+            throw new Error('Table is not selectable.');
+        await (await this.loader.within(th).get(MkCheckboxHarness)).toggle();
+    }
+    isEmpty() {
+        return !this.q('tr.mk-table__row');
+    }
+    headerCells() {
+        return this.qAll('th.mk-table__th').filter((th) => !th.hasClass('mk-table__th--expand') && !th.hasClass('mk-table__th--select'));
+    }
+}
+
+/**
+ * A dialog opened by `MkDialogService` (`open()`, `confirm()`, `alert()`,
+ * `prompt()`). Dialogs live in `document.body`, so look them up through
+ * `loader.document()`.
+ */
+class MkDialogHarness extends MkHarness {
+    static hostSelector = '.mk-overlay-panel[role="dialog"], .mk-overlay-panel[role="alertdialog"]';
+    title() {
+        return this.q('.mk-dialog__title')?.text() ?? this.host.attr('aria-label') ?? '';
+    }
+    bodyText() {
+        return this.q('.mk-dialog__body')?.text() ?? this.host.text();
+    }
+    /** Texts of every button in the dialog (header close excluded). */
+    buttons() {
+        return this.buttonElements().map((b) => b.text());
+    }
+    /** Click a button by index, exact text or RegExp. */
+    async clickButton(which) {
+        await pickBy(this.buttonElements(), which, (b) => b.text(), 'dialog button').click();
+    }
+    /** The header × button. */
+    async close() {
+        const btn = this.q('.mk-dialog__close');
+        if (!btn)
+            throw new Error('Dialog has no close button (hideClose).');
+        await btn.click();
+    }
+    async pressEscape() {
+        await this.host.sendKeys('Escape');
+    }
+    /** The prompt dialog's text field, if any. */
+    input() {
+        return this.q('.mk-dialog__body input, .mk-dialog__body textarea');
+    }
+    buttonElements() {
+        return this.qAll('button').filter((b) => !b.hasClass('mk-dialog__close') && !b.hasClass('mk-dialog__grip') && !b.hasClass('mk-dialog__resizer'));
+    }
+}
+/** One toast shown by `MkToastService` (lives in `document.body` — use `loader.document()`). */
+class MkToastHarness extends MkHarness {
+    static hostSelector = 'mk-toast';
+    title() {
+        return this.q('.mk-toast__title')?.text() ?? null;
+    }
+    message() {
+        return this.q('.mk-toast__message')?.text() ?? '';
+    }
+    tone() {
+        return this.host.attr('data-tone');
+    }
+    actionLabel() {
+        return this.q('.mk-toast__actions button')?.text() ?? null;
+    }
+    async clickAction() {
+        const btn = this.q('.mk-toast__actions button');
+        if (!btn)
+            throw new Error('Toast has no action.');
+        await btn.click();
+    }
+    async dismiss() {
+        const btn = this.q('.mk-toast__close');
+        if (!btn)
+            throw new Error('Toast is not dismissible.');
+        await btn.click();
+    }
+}
+
+/**
+ * `@mk-kit/ui/testing` — component test harnesses.
+ *
+ * Harnesses drive mk-kit components the way a user does (click the trigger,
+ * pick the option, read the label) so specs stay stable when a component's
+ * DOM changes. Zero dependencies beyond `@angular/core/testing`; works with
+ * zoneless and zone-based TestBeds. Not re-exported from the root
+ * `@mk-kit/ui` entry on purpose — it never belongs in an app bundle.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MkButtonHarness, MkCheckboxHarness, MkDialogHarness, MkFormFieldHarness, MkHarness, MkHarnessLoader, MkInputHarness, MkMenuHarness, MkRadioGroupHarness, MkRadioHarness, MkSelectHarness, MkSwitchHarness, MkTableHarness, MkTableRowHarness, MkTabsHarness, MkTestElement, MkToastHarness, matchText, pickBy };
+//# sourceMappingURL=mk-kit-ui-testing.mjs.map