/** * Component mounting utilities for test environments. */ import { type QueryScope } from '@vielzeug/assay'; import type { Readable } from '@vielzeug/ripple'; import type { ComponentDefinition } from '../component-types'; import type { HTMLResult } from '../template/result'; import { type FlushOptions } from './flush'; /** * A mounted component ready for assertions. All inherited `QueryScope` methods are scoped to * `element.shadowRoot`, falling back to `element` for light-DOM components (`shadow: false`). */ export interface Fixture extends QueryScope { /** Run a callback then flush — the standard way to trigger and assert a reactive update */ act(fn: () => unknown): Promise; /** Set an attribute (boolean `false` removes it) then flush */ attr(name: string, value: string | number | boolean): Promise; /** Set multiple attributes then flush */ attrs(record: Record): Promise; /** Remove the component from the DOM. Idempotent. */ dispose(): void; /** `true` after `dispose()` has been called. */ readonly disposed: boolean; /** The component element */ element: T; /** Wait for all reactive updates and animation frames */ flush(options?: FlushOptions): Promise; /** The component's shadow root (null for light-DOM components) */ readonly shadow: ShadowRoot | null; /** Delegates to `dispose()`. Enables `using` declarations. */ [Symbol.dispose](): void; } export interface MountOptions { /** HTML attributes to set on the element */ attrs?: Record; /** Extra component options when passing an inline setup function */ componentOptions?: Omit>, 'setup'>; /** Parent container (default: document.body) */ container?: HTMLElement | ShadowRoot; /** Inner HTML for slot content */ html?: string; /** Properties assigned directly onto the element */ props?: Record; } type MountProps = { readonly [x: string]: Readable; }; export type MountSetup = { bivarianceHack: (props: MountProps) => HTMLResult | null; }['bivarianceHack']; export declare const _mountedElements: HTMLElement[]; /** * Mount a component into the DOM and return a test fixture. * * Accepts a registered tag name, an inline setup function, or a component * options object. Setup functions are auto-registered with generated tag names. * * @example — inline setup function * const { query } = await mount(() => { * const count = signal(0); * return html``; * }); * * @example — registered tag name * const { query } = await mount('my-counter'); */ export declare function mount(tagOrSetup: string, options?: MountOptions): Promise>; export declare function mount(tagOrSetup: MountSetup, options?: MountOptions): Promise>; /** * Register and mount a component definition in a single call. * * Combines `define(tag, definition)` + `mount(tag, options)` — the standard * pattern for testing full custom-element lifecycle (props, reconnect, etc.). * * @example * const { query } = await mountComponent('my-counter', { * props: { count: prop.number(0) }, * setup: (props) => html`
${props.count}
`, * }); */ export declare function mountComponent, T extends HTMLElement = HTMLElement>(tag: string, definition: ComponentDefinition, options?: MountOptions): Promise>; /** * Register a stub custom element (no-op if already defined). * * @example * mock('child-button', ''); */ export declare function mock(tagName: string, template?: string): void; /** * Remove all elements mounted via `mount()`. * Call in `afterEach` to keep tests isolated. * * @example * afterEach(() => cleanup()); */ export declare function cleanup(): void; export {}; //# sourceMappingURL=mount.d.ts.map