ctrl-fx 0.0.1 → 0.1.0

package/dist/internal/testing.js

@@ -0,0 +1,974 @@
+import { pure } from '../effects';
+import { newTestData, } from '../testing';
+import {} from '../utils';
+import { exhaustivenessCheck } from '../utils';
+import { ComponentManager } from './cmpmgr';
+import { noopStyleRegistry } from './styleregistry';
+import { makeTestingInterpreter } from './testinginterpreter';
+class Node {
+    constructor() {
+        Object.defineProperty(this, "previousSibling", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "nextSibling", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "parentNode", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+    }
+    remove() {
+        if (this.previousSibling) {
+            this.previousSibling.nextSibling = this.nextSibling;
+        }
+        else {
+            if (this.parentNode) {
+                this.parentNode.firstChild = this.nextSibling;
+            }
+        }
+        if (this.nextSibling) {
+            this.nextSibling.previousSibling = this.previousSibling;
+        }
+        this.parentNode = null;
+    }
+    insertBefore(node) {
+        const newNode = typeof node === 'string' ? new TextNode(node) : node;
+        if (this.previousSibling) {
+            this.previousSibling.nextSibling = newNode;
+            newNode.previousSibling = this.previousSibling;
+        }
+        else {
+            if (this.parentNode) {
+                this.parentNode.firstChild = newNode;
+            }
+        }
+        newNode.nextSibling = this;
+        newNode.parentNode = this.parentNode;
+        this.previousSibling = newNode;
+        return newNode;
+    }
+    insertAfter(node) {
+        const newNode = typeof node === 'string' ? new TextNode(node) : node;
+        if (this.nextSibling) {
+            this.nextSibling.previousSibling = newNode;
+            newNode.nextSibling = this.nextSibling;
+        }
+        newNode.previousSibling = this;
+        newNode.parentNode = this.parentNode;
+        this.nextSibling = newNode;
+        return newNode;
+    }
+    before(...nodes) {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        let current = this;
+        for (let i = nodes.length - 1; i >= 0; i--) {
+            current = current.insertBefore(nodes[i]);
+        }
+    }
+    after(...nodes) {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        let current = this;
+        for (let i = 0; i < nodes.length; i++) {
+            current = current.insertAfter(nodes[i]);
+        }
+    }
+}
+class TextNode extends Node {
+    constructor(nodeValue) {
+        super();
+        Object.defineProperty(this, "nodeValue", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.nodeValue = nodeValue;
+    }
+}
+class ElementNode extends Node {
+    scrollTo(options) {
+        if (options.top !== undefined)
+            this.scrollTop = options.top;
+        if (options.left !== undefined)
+            this.scrollLeft = options.left;
+    }
+    constructor(tagName) {
+        super();
+        Object.defineProperty(this, "tagName", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "attributes", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {}
+        });
+        Object.defineProperty(this, "firstChild", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "scrollTop", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        Object.defineProperty(this, "scrollLeft", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        Object.defineProperty(this, "eventListeners", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        this.tagName = tagName;
+    }
+    removeAttribute(name) {
+        delete this.attributes[name];
+    }
+    setAttribute(name, value) {
+        this.attributes[name] = value;
+    }
+    lastChild() {
+        let child = this.firstChild;
+        while (child && child.nextSibling) {
+            child = child.nextSibling;
+        }
+        return child;
+    }
+    append(...nodes) {
+        if (nodes.length === 0) {
+            return;
+        }
+        let last = this.lastChild();
+        if (!last) {
+            this.firstChild = nodes[0];
+            this.firstChild.parentNode = this;
+            nodes = nodes.slice(1);
+            last = this.firstChild;
+        }
+        last.after(...nodes);
+    }
+    prepend(...nodes) {
+        if (this.firstChild) {
+            this.firstChild.before(...nodes);
+        }
+        else {
+            this.append(...nodes);
+        }
+    }
+    addEventListener(type, listener, options) {
+        this.eventListeners.push({
+            type,
+            listener,
+            options,
+        });
+    }
+    removeEventListener(type, listener, useCapture) {
+        this.eventListeners = this.eventListeners.filter(el => {
+            return !(el.type === type &&
+                el.listener === listener &&
+                (useCapture ? el.options.capture : !el.options.capture));
+        });
+    }
+    matchesSelector(selector) {
+        const parts = parseSelector(selector);
+        return matchesSelectorSequence(this, parts);
+    }
+    traverseAndCollect(selector, result) {
+        if (this.matchesSelector(selector)) {
+            result.push(this);
+        }
+        let child = this.firstChild;
+        while (child) {
+            if (child instanceof ElementNode) {
+                child.traverseAndCollect(selector, result);
+            }
+            child = child.nextSibling;
+        }
+    }
+    querySelector(selector) {
+        const results = this.querySelectorAll(selector);
+        return results.length > 0 ? results[0] : null;
+    }
+    querySelectorAll(selector) {
+        const result = [];
+        this.traverseAndCollect(selector, result);
+        return result;
+    }
+}
+class EventTarget {
+    constructor(tagName) {
+        Object.defineProperty(this, "tagName", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.tagName = tagName;
+    }
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+class HTMLInputELementTarget extends EventTarget {
+    constructor(value) {
+        super('INPUT');
+        Object.defineProperty(this, "value", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "selectionStart", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "selectionEnd", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        this.value = value;
+    }
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+class HTMLTextareaElementTarget extends EventTarget {
+    constructor(value) {
+        super('TEXTAREA');
+        Object.defineProperty(this, "value", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "selectionStart", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        Object.defineProperty(this, "selectionEnd", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        this.value = value;
+    }
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+class HTMLDivElementTarget extends EventTarget {
+    constructor() {
+        super('DIV');
+        Object.defineProperty(this, "innerText", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: ''
+        });
+    }
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+class HTMLOtherTarget extends EventTarget {
+    constructor() {
+        super('OTHER');
+    }
+}
+class Event {
+    constructor(type, target, eventPhase) {
+        Object.defineProperty(this, "type", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "eventPhase", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "defaultPrevented", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "propagationStopped", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "target", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.type = type;
+        this.target = target;
+        this.eventPhase = eventPhase;
+    }
+    preventDefault() {
+        this.defaultPrevented = true;
+    }
+    stopImmediatePropagation() {
+        this.propagationStopped = true;
+    }
+}
+class Touch {
+    constructor(clientX, clientY, pageX, pageY) {
+        Object.defineProperty(this, "clientX", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "clientY", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "pageX", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "pageY", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.clientX = clientX;
+        this.clientY = clientY;
+        this.pageX = pageX;
+        this.pageY = pageY;
+    }
+}
+class TouchList {
+    constructor(items) {
+        Object.defineProperty(this, "length", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.length = items.length;
+        for (let i = 0; i < items.length; i++) {
+            this[i] = items[i];
+        }
+    }
+    item(index) {
+        return this[index] ?? null;
+    }
+}
+class TouchEvent extends Event {
+    constructor(type, target, eventPhase) {
+        super(type, target, eventPhase);
+    }
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+class TouchStartEvent extends TouchEvent {
+    constructor(eventPhase, touches, target) {
+        super('touchstart', target, eventPhase);
+        Object.defineProperty(this, "touches", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.touches = touches;
+        this.eventPhase = eventPhase;
+    }
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+class TouchMoveEvent extends TouchEvent {
+    constructor(eventPhase, touches, target) {
+        super('touchmove', target, eventPhase);
+        Object.defineProperty(this, "touches", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.touches = touches;
+        this.eventPhase = eventPhase;
+    }
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+class TouchEndEvent extends TouchEvent {
+    constructor(eventPhase, touches, target) {
+        super('touchend', target, eventPhase);
+        Object.defineProperty(this, "touches", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.touches = touches;
+        this.eventPhase = eventPhase;
+    }
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+class TouchCancelEvent extends TouchEvent {
+    constructor(eventPhase, touches, target) {
+        super('touchcancel', target, eventPhase);
+        Object.defineProperty(this, "touches", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.touches = touches;
+        this.eventPhase = eventPhase;
+    }
+}
+class KeyEvent extends Event {
+    constructor(type, key, code, target, eventPhase) {
+        super(type, target, eventPhase);
+        Object.defineProperty(this, "key", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "code", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.key = key;
+        this.code = code;
+        this.target = target;
+    }
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+class KeyUpEvent extends KeyEvent {
+    constructor(key, code, target, eventPhase) {
+        super('keyup', key, code, target, eventPhase);
+    }
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+class KeyDownEvent extends KeyEvent {
+    constructor(key, code, target, eventPhase) {
+        super('keydown', key, code, target, eventPhase);
+    }
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+class KeyPressEvent extends KeyEvent {
+    constructor(key, code, target, eventPhase) {
+        super('keypress', key, code, target, eventPhase);
+    }
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+class OtherEvent extends Event {
+    constructor(target, eventPhase) {
+        super('other', target, eventPhase);
+    }
+}
+class Document {
+    constructor() {
+        Object.defineProperty(this, "head", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: this.createElement('head')
+        });
+        Object.defineProperty(this, "body", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: this.createElement('body')
+        });
+        Object.defineProperty(this, "visibilityState", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'visible'
+        });
+        Object.defineProperty(this, "documentEventListeners", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+    }
+    createTextNode(text) {
+        return new TextNode(text);
+    }
+    getElementById(id) {
+        return this.body.querySelector('#' + id);
+    }
+    querySelector(selector) {
+        return this.body.querySelector(selector);
+    }
+    createElement(tag) {
+        return new ElementNode(tag);
+    }
+    addEventListener(type, 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    listener, options) {
+        this.documentEventListeners.push({ type, listener, options });
+    }
+    removeEventListener(type, 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    listener, useCapture) {
+        this.documentEventListeners = this.documentEventListeners.filter(el => !(el.type === type &&
+            el.listener === listener &&
+            (useCapture ? el.options.capture : !el.options.capture)));
+    }
+}
+class Window {
+    constructor() {
+        Object.defineProperty(this, "document", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Document()
+        });
+        Object.defineProperty(this, "innerWidth", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 1024
+        });
+        Object.defineProperty(this, "innerHeight", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 768
+        });
+        Object.defineProperty(this, "location", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {
+                protocol: 'http',
+                hostname: 'localhost',
+                port: '8080',
+                pathname: '/',
+                search: '',
+                hash: '',
+            }
+        });
+        Object.defineProperty(this, "eventListeners", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+    }
+    addEventListener(type, listener, options) {
+        this.eventListeners.push({
+            type,
+            listener,
+            options,
+        });
+    }
+    removeEventListener(type, listener, useCapture) {
+        this.eventListeners = this.eventListeners.filter(el => {
+            return !(el.type === type &&
+                el.listener === listener &&
+                (useCapture ? el.options.capture : !el.options.capture));
+        });
+    }
+}
+function serializeElement(elem) {
+    const attrs = Object.entries(elem.attributes).map(([name, value]) => ({ name, value }));
+    const childNodes = [];
+    let child = elem.firstChild;
+    while (child) {
+        if (child instanceof TextNode) {
+            childNodes.push(child.nodeValue);
+        }
+        else if (child instanceof ElementNode) {
+            childNodes.push(serializeElement(child));
+        }
+        child = child.nextSibling;
+    }
+    return { tag: elem.tagName, attrs, childNodes };
+}
+function serializeDom(doc) {
+    return {
+        head: serializeElement(doc.head),
+        body: serializeElement(doc.body),
+    };
+}
+function dispatchClick(element) {
+    const syntheticEvent = {
+        type: 'click',
+        target: null,
+        eventPhase: 2,
+        defaultPrevented: false,
+        propagationStopped: false,
+        preventDefault() {
+            this.defaultPrevented = true;
+        },
+        stopImmediatePropagation() {
+            this.propagationStopped = true;
+        },
+    };
+    for (const entry of element.eventListeners) {
+        if (entry.type === 'click') {
+            entry.listener(syntheticEvent);
+            if (syntheticEvent.propagationStopped) {
+                break;
+            }
+        }
+    }
+}
+function dispatchSubmit(element) {
+    const syntheticEvent = {
+        type: 'submit',
+        target: null,
+        eventPhase: 2,
+        defaultPrevented: false,
+        propagationStopped: false,
+        preventDefault() {
+            this.defaultPrevented = true;
+        },
+        stopImmediatePropagation() {
+            this.propagationStopped = true;
+        },
+    };
+    for (const entry of element.eventListeners) {
+        if (entry.type === 'submit') {
+            entry.listener(syntheticEvent);
+            if (syntheticEvent.propagationStopped) {
+                break;
+            }
+        }
+    }
+}
+function dispatchCustomEvent(element, eventName, detail) {
+    const syntheticEvent = {
+        type: eventName,
+        detail,
+        target: null,
+        eventPhase: 2,
+        defaultPrevented: false,
+        propagationStopped: false,
+        preventDefault() {
+            this.defaultPrevented = true;
+        },
+        stopImmediatePropagation() {
+            this.propagationStopped = true;
+        },
+    };
+    for (const entry of element.eventListeners) {
+        if (entry.type === eventName) {
+            entry.listener(syntheticEvent);
+            if (syntheticEvent.propagationStopped) {
+                break;
+            }
+        }
+    }
+}
+function dispatchTextInput(element, value) {
+    const syntheticEvent = {
+        type: 'input',
+        target: { tagName: 'INPUT', value, selectionStart: value.length, selectionEnd: value.length },
+        eventPhase: 2,
+        defaultPrevented: false,
+        propagationStopped: false,
+        preventDefault() {
+            this.defaultPrevented = true;
+        },
+        stopImmediatePropagation() {
+            this.propagationStopped = true;
+        },
+    };
+    for (const entry of element.eventListeners) {
+        if (entry.type === 'input') {
+            entry.listener(syntheticEvent);
+            if (syntheticEvent.propagationStopped) {
+                break;
+            }
+        }
+    }
+}
+function querySelectorAllInApp(window, selector) {
+    const appRoot = window.document.getElementById('app');
+    if (!appRoot)
+        return [];
+    const results = [];
+    let child = appRoot.firstChild;
+    while (child) {
+        if (child instanceof ElementNode) {
+            results.push(...child.querySelectorAll(selector));
+        }
+        child = child.nextSibling;
+    }
+    return results;
+}
+function makeWindow() {
+    const win = new Window();
+    const root = win.document.createElement('div');
+    root.setAttribute('id', 'app');
+    win.document.body.append(root);
+    return win;
+}
+class TestableComponentImpl {
+    constructor(component, state, config, data, dom, window) {
+        Object.defineProperty(this, "config", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "data", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "dom", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "_component", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "_window", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this._component = component;
+        this.state = state;
+        this.config = config;
+        this.data = data;
+        this.dom = dom;
+        this._window = window;
+    }
+    withConfig(config) {
+        return new TestableComponentImpl(this._component, this.state, config, this.data, this.dom, this._window);
+    }
+    withData(data) {
+        return new TestableComponentImpl(this._component, this.state, this.config, data, this.dom, this._window);
+    }
+    run(...interactions) {
+        const win = makeWindow();
+        const { interpreter, getData, advanceTime, fireBroadcast } = makeTestingInterpreter(this.data, win, this.config);
+        const currentState = this.state;
+        const wrappedComponent = {
+            ...this._component,
+            initialState: (_params) => pure(currentState),
+        };
+        const appNode = win.document.getElementById('app');
+        const mgr = new ComponentManager(wrappedComponent, appNode, win, interpreter, noopStyleRegistry());
+        for (const interaction of interactions) {
+            if ('_type' in interaction) {
+                switch (interaction._type) {
+                    case 'AdvanceTime':
+                        advanceTime(interaction.milliseconds);
+                        break;
+                    case 'ReceiveBroadcast':
+                        fireBroadcast(interaction.channel, interaction.message);
+                        break;
+                    case 'FireCustomEvent': {
+                        const qs = interaction.selector;
+                        const cssSelector = qs.selector;
+                        const results = win.document.body.querySelectorAll(cssSelector);
+                        results.forEach(el => dispatchCustomEvent(el, interaction.eventName, interaction.detail));
+                        break;
+                    }
+                    case 'Submit': {
+                        const qs = interaction.selector;
+                        const cssSelector = qs.selector;
+                        const results = win.document.body.querySelectorAll(cssSelector);
+                        results.forEach(el => dispatchSubmit(el));
+                        break;
+                    }
+                    case 'TextInput': {
+                        const qs = interaction.selector;
+                        const cssSelector = qs.selector;
+                        const results = win.document.body.querySelectorAll(cssSelector);
+                        results.forEach(el => dispatchTextInput(el, interaction.value));
+                        break;
+                    }
+                    default:
+                        exhaustivenessCheck(interaction);
+                }
+            }
+            else {
+                switch (interaction.type) {
+                    case 'Click': {
+                        const qs = interaction.selector;
+                        const cssSelector = qs.selector;
+                        const results = win.document.body.querySelectorAll(cssSelector);
+                        switch (qs._type) {
+                            case 'ExactlyOne':
+                                if (results.length !== 1)
+                                    throw new Error(`Expected exactly one element matching '${cssSelector}', found ${results.length}`);
+                                break;
+                            case 'OneOrMore':
+                                if (results.length === 0)
+                                    throw new Error(`Expected at least one element matching '${cssSelector}', found 0`);
+                                break;
+                            case 'ZeroOrOne':
+                                if (results.length > 1)
+                                    throw new Error(`Expected zero or one element matching '${cssSelector}', found ${results.length}`);
+                                break;
+                            case 'ZeroOrMore':
+                                break;
+                            default:
+                                exhaustivenessCheck(qs);
+                        }
+                        results.forEach(el => dispatchClick(el));
+                        break;
+                    }
+                    default:
+                        exhaustivenessCheck(interaction.type);
+                }
+            }
+        }
+        const stateAfter = mgr.getRootState();
+        const newState = stateAfter._type === 'Ready' ? stateAfter.value : currentState;
+        return new TestableComponentImpl(this._component, newState, this.config, getData(), serializeDom(win.document), win);
+    }
+    find(selector) {
+        return querySelectorAllInApp(this._window, selector).map(serializeElement);
+    }
+    findOne(selector) {
+        const results = querySelectorAllInApp(this._window, selector);
+        if (results.length !== 1)
+            throw new Error(`findOne('${selector}'): expected 1 element, found ${results.length}`);
+        return serializeElement(results[0]);
+    }
+    findOneOrMore(selector) {
+        const results = querySelectorAllInApp(this._window, selector);
+        if (results.length === 0)
+            throw new Error(`findOneOrMore('${selector}'): expected at least 1 element, found 0`);
+        return results.map(serializeElement);
+    }
+    findMaybeOne(selector) {
+        const results = querySelectorAllInApp(this._window, selector);
+        if (results.length > 1)
+            throw new Error(`findMaybeOne('${selector}'): expected 0 or 1 elements, found ${results.length}`);
+        return results.length === 0 ? undefined : serializeElement(results[0]);
+    }
+}
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export function testableComponent(component, config, data) {
+    const initialData = data || newTestData();
+    const win = makeWindow();
+    const { interpreter, getData } = makeTestingInterpreter(initialData, win, config);
+    const appNode = win.document.getElementById('app');
+    const mgr = new ComponentManager(component, appNode, win, interpreter, noopStyleRegistry());
+    const stateAfter = mgr.getRootState();
+    const currentState = stateAfter._type === 'Ready'
+        ? stateAfter.value
+        : undefined;
+    return new TestableComponentImpl(component, currentState, config, getData(), serializeDom(win.document), win);
+}
+function parseSelector(selector) {
+    const parts = selector.trim().split(/\s+/);
+    return parts.map(parsePart);
+}
+function parsePart(part) {
+    const attrs = {};
+    const classes = [];
+    let tag = undefined;
+    // Handle #id
+    if (part.startsWith('#')) {
+        attrs['id'] = part.substring(1);
+        return { tag, classes, attrs };
+    }
+    // Handle .class
+    if (part.startsWith('.')) {
+        classes.push(part.substring(1));
+        return { tag, classes, attrs };
+    }
+    // Handle tag.class[attr=value]
+    const attrRegex = /\[([^\]=]+)=([^\]]+)\]/g;
+    let match;
+    while ((match = attrRegex.exec(part)) !== null) {
+        attrs[match[1]] = match[2];
+    }
+    const withoutAttrs = part.replace(attrRegex, '').trim();
+    const dotParts = withoutAttrs.split('.');
+    tag = dotParts[0] || undefined;
+    classes.push(...dotParts.slice(1));
+    return { tag, classes, attrs };
+}
+function matchesPart(element, part) {
+    if (part.tag && element.tagName.toLowerCase() !== part.tag.toLowerCase()) {
+        return false;
+    }
+    for (const cls of part.classes) {
+        const elementClasses = (element.attributes['class'] || '').split(/\s+/);
+        if (!elementClasses.includes(cls)) {
+            return false;
+        }
+    }
+    for (const [attr, value] of Object.entries(part.attrs)) {
+        if (element.attributes[attr] !== value) {
+            return false;
+        }
+    }
+    return true;
+}
+function matchesSelectorSequence(element, parts) {
+    if (parts.length === 0)
+        return true;
+    // The rightmost part must match the element itself, not just any ancestor
+    if (!matchesPart(element, parts[parts.length - 1])) {
+        return false;
+    }
+    if (parts.length === 1)
+        return true;
+    // Each remaining part (right to left) must be matched by some ancestor
+    let ancestor = element.parentNode;
+    for (let i = parts.length - 2; i >= 0; i--) {
+        let found = false;
+        while (ancestor) {
+            if (matchesPart(ancestor, parts[i])) {
+                found = true;
+                ancestor = ancestor.parentNode;
+                break;
+            }
+            ancestor = ancestor.parentNode;
+        }
+        if (!found)
+            return false;
+    }
+    return true;
+}