@testing-library/angular/fesm2022/testing-library-angular-zoneless.mjs

Test your Angular components with the dom-testing-library

import * as i0 from '@angular/core';
import { isStandalone, Component } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { getQueriesForElement, prettyDOM } from '@testing-library/dom';
export * from '@testing-library/dom';

async function render(componentOrTemplate, renderOptions = {}) {
    TestBed.configureTestingModule({
        declarations: [WrapperComponent],
        imports: 'imports' in renderOptions ? renderOptions.imports : [],
        providers: renderOptions.providers ?? [],
    });
    if ('importOverrides' in renderOptions && renderOptions.importOverrides?.length) {
        const sut = componentOrTemplate;
        if (typeof sut === 'function' && isStandalone(sut)) {
            const overrides = renderOptions.importOverrides;
            TestBed.overrideComponent(sut, {
                remove: { imports: overrides.map((o) => o.replace) },
                add: { imports: overrides.map((o) => o.with) },
            });
        }
        else {
            throw new Error(`Error while rendering: Cannot specify importOverrides on a template or non-standalone component.`);
        }
    }
    renderOptions.configureTestBed?.(TestBed);
    await TestBed.compileComponents();
    const fixture = typeof componentOrTemplate === 'string'
        ? await createWrapperFixture(componentOrTemplate, (renderOptions ?? {}))
        : await createComponentFixture(componentOrTemplate, (renderOptions ?? {}));
    if (renderOptions.skipDetectChanges !== true) {
        fixture.detectChanges();
    }
    if (renderOptions.waitForStableOnRender === true) {
        await fixture.whenStable();
    }
    return {
        fixture,
        container: fixture.nativeElement,
        debug: (element = fixture.nativeElement, maxLength, options) => {
            if (Array.isArray(element)) {
                for (const e of element) {
                    console.log(prettyDOM(e, maxLength, options));
                }
            }
            else {
                console.log(prettyDOM(element, maxLength, options));
            }
        },
        ...getQueriesForElement(fixture.nativeElement, renderOptions?.queries),
    };
}
async function createComponentFixture(sut, options) {
    return TestBed.createComponent(sut, { bindings: options.bindings || [] });
}
async function createWrapperFixture(sut, options) {
    const wrapper = options.wrapper ?? WrapperComponent;
    TestBed.overrideTemplate(wrapper, sut);
    const fixture = TestBed.createComponent(wrapper);
    setWrapperProperties(fixture, options.wrapperProperties);
    return fixture;
}
function setWrapperProperties(fixture, wrapperProperties = {}) {
    for (const key of Object.keys(wrapperProperties)) {
        const descriptor = Object.getOwnPropertyDescriptor(fixture.componentInstance.constructor.prototype, key);
        let _value = wrapperProperties[key];
        const defaultGetter = () => _value;
        const extendedSetter = (value) => {
            _value = value;
            descriptor?.set?.call(fixture.componentInstance, _value);
            fixture.changeDetectorRef.detectChanges();
        };
        Object.defineProperty(fixture.componentInstance, key, {
            get: descriptor?.get || defaultGetter,
            set: extendedSetter,
            // Allow the property to be defined again later.
            // This happens when the component properties are updated after initial render.
            // For Jest this is `true` by default, for Karma and a real browser the default is `false`
            configurable: true,
        });
        descriptor?.set?.call(fixture.componentInstance, _value);
    }
    return fixture;
}
class WrapperComponent {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: WrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: WrapperComponent, isStandalone: false, selector: "atl-wrapper-component", ngImport: i0, template: '', isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: WrapperComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'atl-wrapper-component',
                    template: '',
                    standalone: false,
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { render };
//# sourceMappingURL=testing-library-angular-zoneless.mjs.map