diff --git a/projects/testing-library/src/lib/testing-library.ts b/projects/testing-library/src/lib/testing-library.ts index c5237fdb..66631dc8 100644 --- a/projects/testing-library/src/lib/testing-library.ts +++ b/projects/testing-library/src/lib/testing-library.ts @@ -1,4 +1,13 @@ -import { ChangeDetectorRef, Component, Type, NgZone, SimpleChange, OnChanges, SimpleChanges } from '@angular/core'; +import { + ChangeDetectorRef, + Component, + Type, + NgZone, + SimpleChange, + OnChanges, + SimpleChanges, + ApplicationInitStatus, +} from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations'; @@ -74,7 +83,7 @@ export async function render( }); } - const fixture = createComponentFixture(sut, { template, wrapper }); + const fixture = await createComponentFixture(sut, { template, wrapper }); setComponentProperties(fixture, { componentProperties }); if (removeAngularAttributes) { @@ -174,15 +183,21 @@ export async function render( }; } -function createComponentFixture( +async function createComponent(component: Type): Promise> { + /* Make sure angular application is initialized before creating component */ + await TestBed.inject(ApplicationInitStatus).donePromise; + return TestBed.createComponent(component); +} + +async function createComponentFixture( component: Type, { template, wrapper }: Pick, 'template' | 'wrapper'>, -): ComponentFixture { +): Promise> { if (template) { TestBed.overrideTemplate(wrapper, template); - return TestBed.createComponent(wrapper); + return createComponent(wrapper); } - return TestBed.createComponent(component); + return createComponent(component); } function setComponentProperties( diff --git a/projects/testing-library/tests/render.spec.ts b/projects/testing-library/tests/render.spec.ts index ea6b9062..22d6567e 100644 --- a/projects/testing-library/tests/render.spec.ts +++ b/projects/testing-library/tests/render.spec.ts @@ -1,4 +1,13 @@ -import { Component, NgModule, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'; +import { + Component, + NgModule, + Input, + OnChanges, + OnInit, + SimpleChanges, + APP_INITIALIZER, + ApplicationInitStatus, +} from '@angular/core'; import { NoopAnimationsModule, BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { TestBed } from '@angular/core/testing'; import { render, fireEvent } from '../src/public_api'; @@ -116,3 +125,29 @@ describe('Angular component life-cycle hooks', () => { expect(nameChanged.mock.invocationCallOrder[0]).toBeLessThan(nameInitialized.mock.invocationCallOrder[0]); }); }); + +test('Waits for angular app initialization before rendering components', (done) => { + let resolve; + + const promise = new Promise((res) => { + resolve = res; + }); + + render(FixtureComponent, { + providers: [ + { + provide: APP_INITIALIZER, + useFactory: () => () => promise, + multi: true, + }, + ], + }) + .then(() => { + expect(TestBed.inject(ApplicationInitStatus).done).toEqual(true); + done(); + }) + .catch(done); + + // Wait a bit so the test will fail if render completes without us resolving the promise + setTimeout(resolve, 1000); +});