@stacksjs/stx
Version:
A performant UI Framework. Powered by Bun.
289 lines • 8.12 kB
TypeScript
import type { StxOptions } from './types';
/**
* Render an STX template to HTML.
*
* @example
* ```typescript
* const { html, container } = await render('<h1>{{ title }}</h1>', {
* context: { title: 'Hello World' }
* })
* expect(html).toContain('Hello World')
* ```
*/
export declare function render(template: string, options?: MountOptions): Promise<RenderResult>;
/**
* Mount an STX component for testing.
*
* @example
* ```typescript
* const wrapper = await mount('<Button @click="handleClick">Click me</Button>', {
* props: { disabled: false },
* context: { handleClick: vi.fn() }
* })
*
* await wrapper.find('button')?.trigger('click')
* expect(wrapper.emitted('click')).toBeDefined()
* ```
*/
export declare function mount(template: string, options?: MountOptions): Promise<ComponentWrapper>;
/**
* Wait for the next tick.
*/
export declare function nextTick(): Promise<void>;
/**
* Wait for a condition to be true.
*/
export declare function waitFor(condition: () => boolean | Promise<boolean>, options?: { timeout?: number; interval?: number }): Promise<void>;
/**
* Wait for element to appear.
*/
export declare function waitForElement(wrapper: ComponentWrapper, selector: string, options?: { timeout?: number }): Promise<ElementWrapper | null>;
/**
* Flush all pending promises.
*/
export declare function flushPromises(): Promise<void>;
/**
* Create a mock function.
*/
export declare function createMockFn<T extends (...args: unknown[]) => unknown>(): MockFn<T>;
/**
* Create a mock store for testing.
*
* @example
* ```ts
* const store = createMockStore({ count: 0, user: null })
*
* store.setState({ count: 5 })
* expect(store.getState().count).toBe(5)
*
* // Check history
* expect(store.getHistory()).toEqual([
* { count: 0, user: null },
* { count: 5, user: null }
* ])
*
* // Reset
* store.reset()
* expect(store.getState().count).toBe(0)
* ```
*/
export declare function createMockStore<T extends Record<string, unknown>>(initialState: T): MockStore<T>;
/**
* Create a test context with common setup.
*/
export declare function createTestContext(options?: {
props?: Record<string, unknown>
context?: Record<string, unknown>
mocks?: Record<string, unknown>
}): {
props: Record<string, unknown>
context: Record<string, unknown>
mocks: Record<string, MockFn>
};
/**
* Clean up after tests.
*/
export declare function cleanup(): void;
/**
* Fire events on elements.
*/
export declare const fireEvent: {
/**
* Fire a click event.
*/
async click(
target: HTMLElement | ElementWrapper | ComponentWrapper | null,
options?: MouseEventInit,
): unknown;
/**
* Fire a double click event.
*/
async dblClick(
target: HTMLElement | ElementWrapper | ComponentWrapper | null,
options?: MouseEventInit,
): unknown;
/**
* Fire an input event.
*/
async input(
target: HTMLElement | ElementWrapper | ComponentWrapper | null,
value: string,
): unknown;
/**
* Fire a change event.
*/
async change(
target: HTMLElement | ElementWrapper | ComponentWrapper | null,
value?: string,
): unknown;
/**
* Fire a submit event.
*/
async submit(
target: HTMLElement | ElementWrapper | ComponentWrapper | null,
): unknown;
/**
* Fire a focus event.
*/
async focus(
target: HTMLElement | ElementWrapper | ComponentWrapper | null,
): unknown;
/**
* Fire a blur event.
*/
async blur(
target: HTMLElement | ElementWrapper | ComponentWrapper | null,
): unknown;
/**
* Fire a keydown event.
*/
async keyDown(
target: HTMLElement | ElementWrapper | ComponentWrapper | null,
key: string,
options?: KeyboardEventInit,
): unknown;
/**
* Fire a keyup event.
*/
async keyUp(
target: HTMLElement | ElementWrapper | ComponentWrapper | null,
key: string,
options?: KeyboardEventInit,
): unknown;
/**
* Fire a custom event.
*/
async custom(
target: HTMLElement | ElementWrapper | ComponentWrapper | null,
eventName: string,
options?: FireEventOptions,
): unknown
};
/**
* Create custom matchers for testing.
*/
export declare const matchers: {
/**
* Check if wrapper contains text.
*/
toContainText(wrapper: ComponentWrapper | ElementWrapper, text: string): unknown;
/**
* Check if wrapper has class.
*/
toHaveClass(wrapper: ComponentWrapper | ElementWrapper, className: string): unknown;
/**
* Check if wrapper has attribute.
*/
toHaveAttribute(
wrapper: ComponentWrapper | ElementWrapper,
name: string,
value?: string,
): unknown;
/**
* Check if wrapper is visible.
*/
toBeVisible(wrapper: ComponentWrapper | ElementWrapper): unknown;
/**
* Check if wrapper exists.
*/
toExist(wrapper: ComponentWrapper | ElementWrapper | null): unknown;
/**
* Check if event was emitted.
*/
toHaveEmitted(wrapper: ComponentWrapper, event: string, times?: number): unknown;
/**
* Check if event was emitted with payload.
*/
toHaveEmittedWith(wrapper: ComponentWrapper, event: string, payload: unknown): (boolean { const emitted?) if (!emitted) return false return emitted.some((args)) => unknown
};
/** Mount options */
export declare interface MountOptions {
props?: Record<string, unknown>
slots?: Record<string, string>
context?: Record<string, unknown>
stxOptions?: Partial<StxOptions>
attachTo?: HTMLElement | string
mocks?: Record<string, unknown>
stubs?: Record<string, string | boolean>
plugins?: unknown[]
}
/** Render result */
export declare interface RenderResult {
html: string
document: Document
container: HTMLElement
context: Record<string, unknown>
dependencies: Set<string>
}
/** Wrapper for mounted component */
export declare interface ComponentWrapper {
element: HTMLElement
html(): string
text(): string
find(selector: string): ElementWrapper<T> | null
findAll(selector: string): ElementWrapper<T>[]
findComponent(name: string): ComponentWrapper | null
findAllComponents(name: string): ComponentWrapper[]
exists(): boolean
isVisible(): boolean
attributes(): Record<string, string>
attributes(name: string): string | null
classes(): string[]
classes(name: string): boolean
props(): Record<string, unknown>
props(name: string): T | undefined
emitted(): Record<string, unknown[][]>
emitted(event: string): unknown[][] | undefined
setProps(props: Record<string, unknown>): Promise<void>
setData(data: Record<string, unknown>): Promise<void>
trigger(event: string, payload?: unknown): Promise<void>
getValue(): string | boolean | string[]
setValue(value: string | boolean): Promise<void>
unmount(): void
vm: {
$nextTick(): Promise<void>
}
}
/** Wrapper for DOM elements */
export declare interface ElementWrapper<T extends HTMLElement = HTMLElement> {
element: T
html(): string
text(): string
find(selector: string): ElementWrapper<E> | null
findAll(selector: string): ElementWrapper<E>[]
exists(): boolean
isVisible(): boolean
attributes(): Record<string, string>
attributes(name: string): string | null
classes(): string[]
classes(name: string): boolean
trigger(event: string, payload?: unknown): Promise<void>
getValue(): string | boolean | string[]
setValue(value: string | boolean): Promise<void>
}
/** Fire event options */
export declare interface FireEventOptions {
bubbles?: boolean
cancelable?: boolean
detail?: unknown
}
/** Mock function type */
export declare interface MockFn<T extends (...args: unknown[]) => unknown = (...args: unknown[]) => unknown> {
(...args: Parameters<T>): ReturnType<T> | undefined
mock: {
calls: unknown[][]
results: unknown[]
}
mockImplementation(impl: T): MockFn<T>
mockReturnValue(value: unknown): MockFn<T>
mockClear(): MockFn<T>
mockReset(): MockFn<T>
}
/** Mock store interface */
export declare interface MockStore<T extends Record<string, unknown>> {
getState(): T
setState(partial: Partial<T>): void
reset(): void
getHistory(): T[]
subscribe(listener: (state: T) => void): () => void
}