fix: wait on app initialization before creating the component (#177)

Closes #176

Author: jbchr

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<SutType, WrapperType = SutType>(
       });
   }
 
-  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<SutType, WrapperType = SutType>(
   };
 }
 
-function createComponentFixture<SutType>(
+async function createComponent<SutType>(component: Type<SutType>): Promise<ComponentFixture<SutType>> {
+  /* Make sure angular application is initialized before creating component */
+  await TestBed.inject(ApplicationInitStatus).donePromise;
+  return TestBed.createComponent(component);
+}
+
+async function createComponentFixture<SutType>(
   component: Type<SutType>,
   { template, wrapper }: Pick<RenderDirectiveOptions<SutType, any>, 'template' | 'wrapper'>,
-): ComponentFixture<SutType> {
+): Promise<ComponentFixture<SutType>> {
   if (template) {
     TestBed.overrideTemplate(wrapper, template);
-    return TestBed.createComponent(wrapper);
+    return createComponent(wrapper);
   }
-  return TestBed.createComponent(component);
+  return createComponent(component);
 }
 
 function setComponentProperties<SutType>(

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);
+});