@gluonjs/test-utils / packages/test-utils/src / BaseMountOptions

Interface: BaseMountOptions

Extended by

Properties

attachTo?

readonly optional attachTo?: Element

container?

readonly optional container?: Element

name?

readonly optional name?: string

plugins?

readonly optional plugins?: readonly (GluonAppPlugin<void> | TestPluginUse)[]

providers?

readonly optional providers?: readonly TestProvider<unknown>[]

setup?

readonly optional setup?: (app) => void

Parameters

app

GluonApp

Returns

void

Example

Configure fixture ownership, container placement, naming, plugins, providers, and application setup shared by all mount helpers:

import { createInjectionKey, html } from '@gluonjs/core';
import {
  activeFixtureNames,
  assertNoFixtureLeaks,
  cleanupFixtures,
  flushUpdates,
  installAutoCleanup,
  mountComponent,
  mountElement,
  settle,
  testProvider,
  type AutoCleanupOptions,
  type BaseMountOptions,
  type ComponentFixture,
  type ElementFixture,
  type ElementMountOptions,
  type SettleOptions,
  type TestFixture,
  type TestProvider,
} from '@gluonjs/test-utils';

const currencyKey = createInjectionKey<string>('currency');
const currency: TestProvider<string> = testProvider(currencyKey, 'EUR');
const base = { name: 'product-price', providers: [currency] } satisfies BaseMountOptions;
const component: ComponentFixture<{ price: number }> = mountComponent(
  ({ price }) => html`<output>${price.toFixed(2)}</output>`,
  { ...base, props: { price: 129 } },
);
await component.setProps({ price: 119 });

interface ProductPickerElement extends HTMLElement { value: string; }
const elementOptions = {
  name: 'product-picker',
  attributes: { 'aria-label': 'Product' },
  properties: { value: 'lamp' },
  slots: { default: 'Choose a product' },
} satisfies ElementMountOptions<ProductPickerElement>;
const element: ElementFixture<ProductPickerElement> = mountElement<ProductPickerElement>('product-picker', elementOptions);
const fixture: TestFixture = component;
fixture.own(() => console.log('release request'), 'request');
await flushUpdates(() => element.element.dispatchEvent(new CustomEvent('change')));
const settleOptions = { cycles: 2, timers: false } satisfies SettleOptions;
await settle(settleOptions);
console.log(fixture.text(), element.emitted('change'), activeFixtureNames());

const autoCleanup = { assertBeforeCleanup: true } satisfies AutoCleanupOptions;
installAutoCleanup((cleanup) => { void cleanup; }, autoCleanup);
element.cleanup();
component.cleanup();
await cleanupFixtures();
assertNoFixtureLeaks();