chore: make nTestBed helpers automatically clean up test components

 - before the components were destroyed by TestBed, but not removed from the rootView.
 - maintain a list of active fixtures for a set of tests, and remove them all when the tests complete.
 - reorder to the testing utils to flow better when reading (start with test init, then before/after then render components)
 - clean up some lint.

Author: justindujardin

Diff for: nativescript-angular/testing/index.ts

@@ -3,17 +3,9 @@ import { TestComponentRenderer } from "@angular/core/testing";
 import { NativeScriptTestComponentRenderer } from "./src/nativescript_test_component_renderer";
 import { COMMON_PROVIDERS } from "../platform-common";
 import { APP_ROOT_VIEW } from "../platform-providers";
-import { View } from "tns-core-modules/ui/core/view";
-import { topmost } from "tns-core-modules/ui/frame";
+import { testingRootView } from "./src/util";
 export * from "./src/util";
 
-/**
- * Get a reference to the root application view.
- */
-export function testingRootView(): View {
-    return topmost().currentPage.content;
-}
-
 /**
  * Providers array is exported for cases where a custom module has to be constructed
  * to test a particular piece of code. This can happen, for example, if you are trying

Diff for: nativescript-angular/testing/src/util.ts

@@ -1,10 +1,27 @@
+
+import { View } from "tns-core-modules/ui/core/view";
+import { topmost } from "tns-core-modules/ui/frame";
+import { LayoutBase } from "tns-core-modules/ui/layouts/layout-base";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { NgModule, Type } from "@angular/core";
 import { NativeScriptModule } from "../../nativescript.module";
 import { platformBrowserDynamicTesting } from "@angular/platform-browser-dynamic/testing";
 import { NS_COMPILER_PROVIDERS } from "../../platform";
 import { NATIVESCRIPT_TESTING_PROVIDERS, NativeScriptTestingModule } from "../index";
 import { CommonModule } from "@angular/common";
+/**
+ * Get a reference to the root application view.
+ */
+export function testingRootView(): View {
+    return topmost().currentPage.content;
+}
+
+/**
+ * Declared test contexts. When the suite is done this map should be empty if all lifecycle
+ * calls have happened as expected.
+ * @private
+ */
+const activeTestFixtures: ComponentFixture<any>[][] = [];
 
 /**
  * Return a promise that resolves after (durationMs) milliseconds
@@ -14,19 +31,13 @@ export function promiseWait(durationMs: number) {
 }
 
 /**
- * Render a component using the TestBed helper, and return a promise that resolves when the
- * ComponentFixture is fully initialized.
+ * Perform basic TestBed environment initialization. Call this once in the main entry point to your tests.
  */
-export function nTestBedRender<T>(componentType: Type<T>): Promise<ComponentFixture<T>> {
-    const fixture = TestBed.createComponent(componentType);
-    fixture.detectChanges();
-    return fixture.whenRenderingDone()
-    // TODO(jd): it seems that the whenStable and whenRenderingDone utilities of ComponentFixture
-    //           do not work as expected. I looked at how to fix it and it's not clear how to provide
-    //           a {N} specific subclass, because ComponentFixture is newed directly rather than injected
-    // What to do about it? Maybe fakeAsync can help? For now just setTimeout for 100ms (x_X)
-        .then(promiseWait(100))
-        .then(() => fixture);
+export function nTestBedInit() {
+    TestBed.initTestEnvironment(
+        NativeScriptTestingModule,
+        platformBrowserDynamicTesting(NS_COMPILER_PROVIDERS)
+    );
 }
 
 /**
@@ -55,6 +66,7 @@ export function nTestBedBeforeEach(
     imports: any[] = [],
     entryComponents: any[] = []) {
     return (done) => {
+        activeTestFixtures.push([]);
         // If there are no entry components we can take the simple path.
         if (entryComponents.length === 0) {
             TestBed.configureTestingModule({
@@ -96,30 +108,59 @@ export function nTestBedBeforeEach(
                 done();
             });
     };
-
-}
-
-/**
- * Perform basic TestBed environment initialization. Call this once in the main entry point to your tests.
- */
-export function nBasicTestBedInit() {
-    TestBed.initTestEnvironment(
-        NativeScriptTestingModule,
-        platformBrowserDynamicTesting(NS_COMPILER_PROVIDERS)
-    );
 }
 
 /**
  * Helper for a basic component TestBed clean up.
  * @param resetEnv When true the testing environment will be reset
  * @param resetFn When resetting the environment, use this init function
  */
-export function nTestBedAfterEach(resetEnv = true, resetFn = nBasicTestBedInit) {
+export function nTestBedAfterEach(resetEnv = true, resetFn = nTestBedInit) {
     return () => {
+        if (activeTestFixtures.length === 0) {
+            throw new Error(
+                `There are no more declared fixtures.` +
+                `Did you call "nTestBedBeforeEach" and "nTestBedAfterEach" an equal number of times?`
+            );
+        }
+        const root = testingRootView() as LayoutBase;
+        const fixtures = activeTestFixtures.pop();
+        fixtures.forEach((fixture) => {
+            root.removeChild(fixture.nativeElement);
+            fixture.destroy();
+        });
         TestBed.resetTestingModule();
         if (resetEnv) {
             TestBed.resetTestEnvironment();
             resetFn();
         }
     };
 }
+
+/**
+ * Render a component using the TestBed helper, and return a promise that resolves when the
+ * ComponentFixture is fully initialized.
+ */
+export function nTestBedRender<T>(componentType: Type<T>): Promise<ComponentFixture<T>> {
+    const fixture = TestBed.createComponent(componentType);
+    fixture.detectChanges();
+    return fixture.whenRenderingDone()
+    // TODO(jd): it seems that the whenStable and whenRenderingDone utilities of ComponentFixture
+    //           do not work as expected. I looked at how to fix it and it's not clear how to provide
+    //           a {N} specific subclass, because ComponentFixture is newed directly rather than injected
+    // What to do about it? Maybe fakeAsync can help? For now just setTimeout for 100ms (x_X)
+        .then(promiseWait(100))
+        .then(() => {
+            const list = activeTestFixtures[activeTestFixtures.length - 1];
+            if (!list) {
+                console.warn(
+                    "nTestBedRender called without nTestBedBeforeEach/nTestBedAfter each. " +
+                    "You are responsible for calling 'fixture.destroy()' when your test is done " +
+                    "in order to clean up the components that are created."
+                );
+            } else {
+                list.push(fixture);
+            }
+            return fixture;
+        });
+}

Diff for: tests/app/tests/modal-dialog.ts

@@ -1,14 +1,14 @@
 // make sure you import mocha-config before @angular/core
-import {assert} from './test-config';
-import {Component, ViewContainerRef} from '@angular/core';
-import {Page} from 'ui/page';
-import {topmost} from 'ui/frame';
-import {ModalDialogParams, ModalDialogService} from 'nativescript-angular/directives/dialogs';
+import {assert} from "./test-config";
+import {Component, ViewContainerRef} from "@angular/core";
+import {Page} from "ui/page";
+import {topmost} from "ui/frame";
+import {ModalDialogParams, ModalDialogService} from "nativescript-angular/directives/dialogs";
 
-import {device, platformNames} from 'platform';
+import {device, platformNames} from "platform";
 
-import {ComponentFixture} from '@angular/core/testing';
-import {nTestBedRender, nTestBedAfterEach, nTestBedBeforeEach} from 'nativescript-angular/testing';
+import {ComponentFixture} from "@angular/core/testing";
+import {nTestBedRender, nTestBedAfterEach, nTestBedBeforeEach} from "nativescript-angular/testing";
 const CLOSE_WAIT = (device.os === platformNames.ios) ? 1000 : 0;
 
 @Component({

Diff for: tests/app/tests/test-main.ts

@@ -1,3 +1,3 @@
-import 'nativescript-angular/zone-js/testing.mocha';
-import {nBasicTestBedInit} from 'nativescript-angular/testing';
-nBasicTestBedInit();
+import "nativescript-angular/zone-js/testing.mocha";
+import {nTestBedInit} from "nativescript-angular/testing";
+nTestBedInit();