chore(testing): use ngx-tools createComponent utility (#1479)

demo/app/app.component.spec.ts

@@ -1,25 +1,31 @@
-import { async, TestBed } from '@angular/core/testing';
+import { Component } from '@angular/core';
+import { async, ComponentFixture } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
+import { createComponent } from '@terminus/ngx-tools/testing/public-api';
 
 import { AppComponent } from './app.component';
 
+@Component({
+  template: `
+  <demo-app></demo-app>
+  `,
+})
+class TestHostComponent {
+}
 
 describe('AppComponent', () => {
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule,
-      ],
-      declarations: [
-        AppComponent,
-      ],
-    }).compileComponents();
-  }));
+  let component: AppComponent;
+  let fixture: ComponentFixture<TestHostComponent>;
 
+  beforeEach(() => {
+    fixture = createComponent(TestHostComponent, [], [RouterTestingModule]);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
   it('should create the app', async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
+    const fixture = createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
 
     expect(app).toBeTruthy();

terminus-ui/card/src/card-title.directive.spec.ts

@@ -1,13 +1,8 @@
 import {
   Component,
-  Provider,
-  Type,
 } from '@angular/core';
-import {
-  ComponentFixture,
-  TestBed,
-} from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { createComponent } from '@terminus/ngx-tools/testing';
 
 import { TsCardTitleDirective } from './card-title.directive';
 import { TsCardModule } from './card.module';
@@ -42,7 +37,7 @@ class TestHostErrorComponent {}
 describe(`TsCardTitleDirective`, () => {
 
   test(`should add the title class`, () => {
-    const fixture = createComponent(TestHostComponent);
+    const fixture = createComponent(TestHostComponent, [], [TsCardModule]);
     fixture.detectChanges();
     const classElement = fixture.debugElement.query(By.directive(TsCardTitleDirective));
 
@@ -51,7 +46,7 @@ describe(`TsCardTitleDirective`, () => {
 
 
   test(`should add the accent border class`, () => {
-    const fixture = createComponent(TestHostAccentBorderComponent);
+    const fixture = createComponent(TestHostAccentBorderComponent, [], [TsCardModule]);
     fixture.detectChanges();
     const classElement = fixture.debugElement.query(By.directive(TsCardTitleDirective));
 
@@ -61,29 +56,11 @@ describe(`TsCardTitleDirective`, () => {
 
   test(`should throw an error if not nested within a TsCardComponent`, () => {
     const create = () => {
-      const fixture = createComponent(TestHostErrorComponent);
+      const fixture = createComponent(TestHostErrorComponent, [], [TsCardModule]);
       fixture.detectChanges();
     };
 
     expect(create).toThrow();
   });
 
 });
-
-
-
-
-function createComponent<T>(component: Type<T>, providers: Provider[] = [], imports: any[] = []): ComponentFixture<T> {
-  TestBed.configureTestingModule({
-    imports: [
-      TsCardModule,
-      ...imports,
-    ],
-    declarations: [component],
-    providers: [
-      ...providers,
-    ],
-  }).compileComponents();
-
-  return TestBed.createComponent<T>(component);
-}

terminus-ui/chart/src/chart.component.spec.ts

@@ -7,8 +7,8 @@ import {
 } from '@angular/core';
 import {
   ComponentFixture,
-  TestBed,
 } from '@angular/core/testing';
+import { createComponent as createComponentInner } from '@terminus/ngx-tools/testing';
 
 import { TsAmChartsService } from './amcharts.service';
 import { TsChartComponent, TsChartVisualizationOptions } from './chart.component';
@@ -157,17 +157,14 @@ const AM_CHARTS_PROVIDER: Provider[] = [{
  */
 
 function createComponent<T>(component: Type<T>, providers: Provider[] = AM_CHARTS_PROVIDER, imports: any[] = []): ComponentFixture<T> {
-  TestBed.configureTestingModule({
-    imports: [
+  return createComponentInner<T>(
+    component,
+    providers,
+    [
       TsChartModule,
       ...imports,
     ],
-    declarations: [component],
-    providers: [
-      ...providers,
-    ],
-  }).compileComponents();
-   return TestBed.createComponent<T>(component);
+  );
 }
 
 

terminus-ui/confirmation/src/confirmation.directive.spec.ts

@@ -1,24 +1,17 @@
 // tslint:disable: no-non-null-assertion
-import { OverlayModule } from '@angular/cdk/overlay';
-import { PortalModule } from '@angular/cdk/portal';
-import { CommonModule } from '@angular/common';
 import {
   Component,
   EventEmitter,
   Input,
   NgModule,
   Output,
-  Provider,
-  Type,
   ViewChild,
 } from '@angular/core';
 import {
   ComponentFixture,
-  TestBed,
 } from '@angular/core/testing';
-import { FlexLayoutModule } from '@angular/flex-layout';
-import { expectNativeEl } from '@terminus/ngx-tools/testing';
-import { TsButtonComponent } from '@terminus/ui/button';
+import { createComponent, expectNativeEl } from '@terminus/ngx-tools/testing';
+import { TsButtonModule } from '@terminus/ui';
 
 import { TsConfirmationDirective } from './confirmation.directive';
 import { TsConfirmationModule } from './confirmation.module';
@@ -108,7 +101,7 @@ describe(`TsConfirmationDirective`, function() {
 
 
   beforeEach(() => {
-    fixture = createComponent(TestHostComponent);
+    fixture = createComponent(TestHostComponent, [], [TsConfirmationModule, TsButtonModule]);
     testComponent = fixture.componentInstance;
     directive = testComponent.directive;
     button = fixture.debugElement.nativeElement.querySelector('button');
@@ -315,33 +308,3 @@ describe(`TsConfirmationDirective`, function() {
 });
 
 
-
-
-/**
- * HELPERS
- */
-
-// TODO: Move to ngx-tools (and all other instances of this utility)
-export function createComponent<T>(component: Type<T>, providers: Provider[] = [], imports: any[] = []): ComponentFixture<T> {
-  TestBed.configureTestingModule({
-    imports: [
-      CommonModule,
-      OverlayModule,
-      PortalModule,
-      FlexLayoutModule,
-      TsButtonModuleMock,
-      TsConfirmationModule,
-      ...imports,
-    ],
-    declarations: [component],
-    providers: [
-      {
-        provide: TsButtonComponent,
-        useClass: TsButtonComponentMock,
-      },
-      ...providers,
-    ],
-  }).compileComponents();
-
-  return TestBed.createComponent<T>(component);
-}

terminus-ui/date-range/src/date-range.component.spec.ts

@@ -2,14 +2,14 @@
 import { Provider, Type } from '@angular/core';
 import {
   ComponentFixture,
-  TestBed,
 } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
-import { By } from '@angular/platform-browser';
-import { typeInElement } from '@terminus/ngx-tools/testing';
+import {
+  createComponent as createComponentInner,
+  typeInElement,
+ } from '@terminus/ngx-tools/testing';
 import * as testComponents from '@terminus/ui/date-range/testing';
 import {
-  getRangeInputElements,
   getRangeInputInstances,
 } from '@terminus/ui/date-range/testing';
 
@@ -237,19 +237,12 @@ describe(`TsDateRangeComponent`, function() {
  * HELPERS
  */
 
-// TODO: Move to ngx-tools (and all other instances of this utility)
 export function createComponent<T>(component: Type<T>, providers: Provider[] = [], imports: any[] = []): ComponentFixture<T> {
-  TestBed.configureTestingModule({
-    imports: [
+  return createComponentInner<T>(component,
+    providers,
+    [
       ReactiveFormsModule,
       TsDateRangeModule,
       ...imports,
-    ],
-    declarations: [component],
-    providers: [
-      ...providers,
-    ],
-  }).compileComponents();
-
-  return TestBed.createComponent<T>(component);
+    ]);
 }

terminus-ui/form-field/src/form-field.component.spec.ts

@@ -7,7 +7,6 @@ import {
 } from '@angular/core';
 import {
   ComponentFixture,
-  TestBed,
 } from '@angular/core/testing';
 import {
   FormControl,
@@ -18,7 +17,11 @@ import {
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { TsDocumentService } from '@terminus/ngx-tools';
-import { createFakeEvent, TsDocumentServiceMock } from '@terminus/ngx-tools/testing';
+import {
+  createComponent as createComponentInner,
+  createFakeEvent,
+  TsDocumentServiceMock,
+} from '@terminus/ngx-tools/testing';
 import { TsInputComponent, TsInputModule } from '@terminus/ui/input';
 
 import { TsFormFieldComponent, TsFormFieldModule } from './form-field.module';
@@ -321,22 +324,15 @@ export class UpdateOutline {
 
 
 function createComponent<T>(component: Type<T>, providers: Provider[] = [], imports: any[] = []): ComponentFixture<T> {
-  TestBed.configureTestingModule({
-    imports: [
+  return createComponentInner<T>(component,
+    providers,
+    [
       FormsModule,
       ReactiveFormsModule,
       TsFormFieldModule,
       TsInputModule,
       NoopAnimationsModule,
-      ...imports,
-    ],
-    declarations: [component],
-    providers: [
-      ...providers,
-    ],
-  }).compileComponents();
-
-  return TestBed.createComponent<T>(component);
+    ]);
 }
 
 class MyDocumentService extends TsDocumentServiceMock {

terminus-ui/input/src/date-adapter.spec.ts

@@ -2,13 +2,8 @@
 import {
   Component,
   OnInit,
-  Provider,
-  Type,
 } from '@angular/core';
-import {
-  ComponentFixture,
-  TestBed,
-} from '@angular/core/testing';
+import { createComponent } from '@terminus/ngx-tools/testing';
 
 import { TsDateAdapter } from './date-adapter';
 
@@ -18,7 +13,7 @@ describe(`TsDateAdapter`, () => {
   describe(`format`, () => {
 
     test(`should format as dashed string`, () => {
-      const fixture = createComponent(DemoComponent);
+      const fixture = createComponent(DemoComponent, [TsDateAdapter], []);
       fixture.detectChanges();
 
       expect(fixture.componentInstance.setDate()).toEqual('02-01-2018');
@@ -29,24 +24,6 @@ describe(`TsDateAdapter`, () => {
 });
 
 
-
-
-function createComponent<T>(component: Type<T>, providers: Provider[] = [], imports: any[] = []): ComponentFixture<T> {
-  TestBed.configureTestingModule({
-    imports: [
-      ...imports,
-    ],
-    declarations: [component],
-    providers: [
-      TsDateAdapter,
-      ...providers,
-    ],
-  }).compileComponents();
-
-  return TestBed.createComponent<T>(component);
-}
-
-
 /**
  * TEMPLATES
  */