fix all docs tests and run tests in CI (#100)

- Fix the `docs` project's tests and align their components with more modern standards in the repo.
- Run tests in CI

.circleci/config.yml

@@ -24,6 +24,10 @@ jobs:
             - node_modules
           key: v1-dependencies-{{ checksum "package.json" }}
 
+      - run:
+          name: test libs/core (@angular-react/core)
+          command: npm run test:ci -- core
+
       - run:
           name: build libs/core (@angular-react/core)
           command: npm run build:libs:core
@@ -71,7 +75,11 @@ jobs:
           key: v1-dependencies-{{ checksum "package.json" }}
 
       - run:
-          name: build docs (@angular-react/core)
+          name: test docs
+          command: npm run test:ci -- docs
+
+      - run:
+          name: build docs
           command: npm run build:demo:github
 
       - deploy:

apps/demo/karma.conf.js

@@ -1,31 +1,5 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
+const baseConfig = require('../../test/karma.conf');
 
 module.exports = function(config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma'),
-    ],
-    client: {
-      clearContext: false, // leave Jasmine Spec Runner output visible in browser
-    },
-    coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, '../../coverage'),
-      reports: ['html', 'lcovonly'],
-      fixWebpackSourcePaths: true,
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false,
-  });
+  baseConfig(config);
 };

apps/docs/karma.conf.js

@@ -1,31 +1,5 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
+const baseConfig = require('../../test/karma.conf');
 
 module.exports = function(config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma'),
-    ],
-    client: {
-      clearContext: false, // leave Jasmine Spec Runner output visible in browser
-    },
-    coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, '../../coverage'),
-      reports: ['html', 'lcovonly'],
-      fixWebpackSourcePaths: true,
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false,
-  });
+  baseConfig(config);
 };

apps/docs/src/app/app.component.spec.ts

@@ -1,6 +1,17 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AngularReactBrowserModule } from '@angular-react/core';
+import {
+  FabButtonModule,
+  FabContextualMenuModule,
+  FabDropdownModule,
+  FabPivotModule,
+  FabCommandBarModule,
+} from '@angular-react/fabric';
 
 import { AppComponent } from './app.component';
+import { ComponentsModule } from './components/components.module';
+import { MaterialModule } from './material.module';
 
 describe('AppComponent', () => {
   let component: AppComponent;
@@ -8,6 +19,17 @@ describe('AppComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule,
+        MaterialModule,
+        FabDropdownModule,
+        ComponentsModule,
+        AngularReactBrowserModule,
+        FabPivotModule,
+        FabContextualMenuModule,
+        FabCommandBarModule,
+        FabButtonModule,
+      ],
       declarations: [AppComponent],
     }).compileComponents();
   }));

apps/docs/src/app/components/navbar/navbar.component.spec.ts

@@ -1,6 +1,10 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { MaterialModule } from '../../material.module';
 
 import { NavbarComponent } from './navbar.component';
+import { SubNavService } from '../../shared/sub-nav.service';
 
 describe('NavbarComponent', () => {
   let component: NavbarComponent;
@@ -8,7 +12,9 @@ describe('NavbarComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+      imports: [MaterialModule, RouterTestingModule],
       declarations: [NavbarComponent],
+      providers: [SubNavService],
     }).compileComponents();
   }));
 

apps/docs/src/app/components/page-header/page-header.component.ts

@@ -1,12 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-page-header',
   templateUrl: './page-header.component.html',
   styleUrls: ['./page-header.component.scss'],
 })
-export class PageHeaderComponent implements OnInit {
-  constructor() {}
-
-  ngOnInit() {}
-}
+export class PageHeaderComponent {}

apps/docs/src/app/components/sub-nav/sub-nav.component.html

@@ -1,4 +0,0 @@
-<ng-container *subnav>
-  <!-- Content is projected into navbar. -->
-  <ng-content></ng-content>
-</ng-container>

apps/docs/src/app/components/sub-nav/sub-nav.component.ts

@@ -2,6 +2,11 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-sub-nav',
-  templateUrl: './sub-nav.component.html',
+  template: `
+    <ng-container *subnav>
+      <!-- Content is projected into navbar. -->
+      <ng-content></ng-content>
+    </ng-container>
+  `,
 })
 export class SubNavComponent {}

apps/docs/src/app/components/triangle/triangle.component.ts

@@ -1,19 +1,6 @@
 // tslint:disable:no-input-rename
 
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  OnChanges,
-  SimpleChanges,
-  OnInit,
-  ViewEncapsulation,
-  ContentChild,
-  TemplateRef,
-  ElementRef,
-  OnDestroy,
-} from '@angular/core';
-import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
+import { Component, OnInit, ContentChild, TemplateRef, ElementRef, OnDestroy } from '@angular/core';
 
 export const COLORS = { default: { text: '#222', bg: '#ddd' }, hover: { text: '#fff', bg: '#0078D4' } };
 export const DEFAULT_DOT_SIZE = 25;
@@ -46,7 +33,7 @@ export class TriangleComponent implements OnInit, OnDestroy {
   private startTime: number; // In milliseconds
   private counter = 0; // Revolving counter, 0-9 and back again.
   private _scale: number; // Moves from 1 to 1.5 and back to 1 at a set rate based on time elapsed.
-  private timer: NodeJS.Timer; // Repeating timer that updates the counter once per second.
+  private timer: number; // Repeating timer that updates the counter once per second.
   private _dots: Array<SierpinskiTriangleDot>; // Collection of dot objects, rendered by the dotTemplate.
   public isActive: boolean; // Used to indicate active looping and to prevent further looping (stop).
 
@@ -106,9 +93,9 @@ export class TriangleComponent implements OnInit, OnDestroy {
     // the updates as it is aware of each node being updated.  React struggles
     // with this update since it is not holistically aware of every node
     // being updated.  Although React Fiber optimizes updates to prevent
-    // blocking the single thread and interupting high priority updates such
+    // blocking the single thread and interrupting high priority updates such
     // as animation, each individual React node schedules it's update without
-    // knowledge of the other nodes (dots) and they all atempt to update
+    // knowledge of the other nodes (dots) and they all attempt to update
     // at the same time, blocking the thread.  Further investigation is needed
     // to see if there is a way for the separate React dots to share a scheduler
     // and coordinate DOM updates.
@@ -120,7 +107,7 @@ export class TriangleComponent implements OnInit, OnDestroy {
 
     // Update the counter (the number shown on each dot).
     this.startTime = new Date().getTime();
-    this.timer = setInterval(() => this.updateCounter(), this.interval);
+    this.timer = setInterval(() => this.updateCounter(), this.interval) as any;
 
     // Update the scale value for the container (applied via css transform
     // on the container).
@@ -170,7 +157,6 @@ class SierpinskiTriangle {
     if (size <= targetSize) {
       this.dot = new SierpinskiTriangleDot(x - targetSize / 2, y - targetSize / 2, targetSize);
     } else {
-      const newSize = size / 2;
       size /= 2;
       this.triangles = [
         new SierpinskiTriangle({ x, y: y - size / 2, size, targetSize }),
@@ -188,7 +174,7 @@ class SierpinskiTriangle {
 class SierpinskiTriangleDot {
   hover = false;
 
-  constructor(private _x, private _y, private _size) {}
+  constructor(private readonly _x: number, private readonly _y: number, private readonly _size: number) {}
 
   get x() {
     return this._x + 'px';

apps/docs/src/app/containers/component-docs/component-docs.component.spec.ts

@@ -1,6 +1,10 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { MaterialModule } from '../../material.module';
 
 import { ComponentDocsComponent } from './component-docs.component';
+import { SubNavComponent } from '../../components/components.module';
 
 describe('ComponentDocsComponent', () => {
   let component: ComponentDocsComponent;
@@ -8,7 +12,8 @@ describe('ComponentDocsComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ComponentDocsComponent],
+      imports: [RouterTestingModule, MaterialModule],
+      declarations: [ComponentDocsComponent, SubNavComponent],
     }).compileComponents();
   }));
 

apps/docs/src/app/containers/component-docs/fabric/fabric.component.spec.ts

@@ -1,4 +1,6 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { AngularReactBrowserModule } from '@angular-react/core';
+import { FabDialogModule, FabButtonModule, FabComboBoxModule, FabCalendarModule } from '@angular-react/fabric';
 
 import { FabricComponent } from './fabric.component';
 
@@ -8,6 +10,7 @@ describe('FabricComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+      imports: [AngularReactBrowserModule, FabButtonModule, FabDialogModule, FabComboBoxModule, FabCalendarModule],
       declarations: [FabricComponent],
     }).compileComponents();
   }));

apps/docs/src/app/containers/component-docs/semantic-ui/semantic-ui.component.html

@@ -2,5 +2,5 @@
 
 <h2>Button</h2>
 
-<sem-button (click)="onClick($event)" label="test button" [primary]="true"></sem-button>
+<sem-button (onClick)="onClick($event)" label="test button" [primary]="true"></sem-button>
 <h3 class="button-height">{{ sampleContent }}</h3>

apps/docs/src/app/containers/component-docs/semantic-ui/semantic-ui.component.spec.ts

@@ -1,6 +1,9 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { AngularReactBrowserModule } from '@angular-react/core';
 
 import { SemanticUiComponent } from './semantic-ui.component';
+import { SemanticModule } from '../../../semantic.module';
+import { SemButtonModule } from '@angular-react/semantic-ui';
 
 describe('SemanticUiComponent', () => {
   let component: SemanticUiComponent;
@@ -8,6 +11,7 @@ describe('SemanticUiComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+      imports: [AngularReactBrowserModule, SemButtonModule],
       declarations: [SemanticUiComponent],
     }).compileComponents();
   }));

apps/docs/src/app/containers/docs/docs.component.spec.ts

@@ -1,6 +1,9 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 
 import { DocsComponent } from './docs.component';
+import { MaterialModule } from '../../material.module';
+import { ComponentsModule } from '../../components/components.module';
 
 describe('DocsComponent', () => {
   let component: DocsComponent;
@@ -8,6 +11,7 @@ describe('DocsComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+      imports: [RouterTestingModule, MaterialModule, ComponentsModule],
       declarations: [DocsComponent],
     }).compileComponents();
   }));

apps/docs/src/app/containers/performance/angular-perf/angular-perf.component.spec.ts

@@ -1,6 +1,8 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { AngularPerfComponent } from './angular-perf.component';
+import { MaterialModule } from '../../../material.module';
+import { ComponentsModule } from '../../../components/components.module';
 
 describe('AngularPerfComponent', () => {
   let component: AngularPerfComponent;
@@ -8,6 +10,7 @@ describe('AngularPerfComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+      imports: [MaterialModule, ComponentsModule],
       declarations: [AngularPerfComponent],
     }).compileComponents();
   }));

apps/docs/src/app/containers/performance/mixed-perf/mixed-perf.component.html

@@ -69,5 +69,6 @@
       {{ projectAsAngular ? (dot.textOverride ? dot.textOverride : text) : '' }}
     </app-react-dot>
   </ng-template>
+
   <div class="message mat-h1">{{ triangle.dots?.length }} Dots</div>
 </app-triangle>

apps/docs/src/app/containers/performance/mixed-perf/mixed-perf.component.spec.ts

@@ -1,4 +1,9 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { AngularReactBrowserModule } from '@angular-react/core';
+
+import { MaterialModule } from '../../../material.module';
+import { ComponentsModule } from '../../../components/components.module';
+import { ReactComponentsModule } from '../../../react-components/react-components.module';
 
 import { MixedPerfComponent } from './mixed-perf.component';
 
@@ -9,6 +14,7 @@ describe('MixedPerfComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [MixedPerfComponent],
+      imports: [AngularReactBrowserModule, MaterialModule, ComponentsModule, ReactComponentsModule],
     }).compileComponents();
   }));
 

apps/docs/src/app/containers/performance/performance.component.spec.ts

@@ -1,6 +1,10 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { MaterialModule } from '../../material.module';
 
 import { PerformanceComponent } from './performance.component';
+import { ComponentsModule } from '../../components/components.module';
 
 describe('PerformanceComponent', () => {
   let component: PerformanceComponent;
@@ -8,6 +12,7 @@ describe('PerformanceComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+      imports: [RouterTestingModule, MaterialModule, ComponentsModule],
       declarations: [PerformanceComponent],
     }).compileComponents();
   }));

apps/docs/src/app/containers/performance/profiles/profiles.component.spec.ts

@@ -1,6 +1,8 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ProfilesComponent } from './profiles.component';
+import { MaterialModule } from '../../../material.module';
+import { ComponentsModule } from '../../../components/components.module';
 
 describe('ProfilesComponent', () => {
   let component: ProfilesComponent;
@@ -8,6 +10,7 @@ describe('ProfilesComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+      imports: [MaterialModule, ComponentsModule],
       declarations: [ProfilesComponent],
     }).compileComponents();
   }));

apps/docs/src/app/react-components/react-dot/react-dot.component.html

@@ -1,8 +0,0 @@
-<ReactDot
-  [dynamicStyle]="style"
-  [text]="text"
-  (onMouseEnter)="onMouseEnter($event)"
-  (onMouseLeave)="onMouseLeave($event)"
->
-  <react-content> <ng-content></ng-content> </react-content>
-</ReactDot>

apps/docs/src/app/react-components/react-dot/react-dot.component.scss

@@ -1,3 +0,0 @@
-:host {
-  display: block;
-}

apps/docs/src/app/react-components/react-dot/react-dot.component.spec.ts

@@ -1,6 +1,8 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { AngularReactBrowserModule } from '@angular-react/core';
 
 import { ReactDotComponent } from './react-dot.component';
+import { ReactComponentsModule } from '../react-components.module';
 
 describe('ReactDotComponent', () => {
   let component: ReactDotComponent;
@@ -8,7 +10,7 @@ describe('ReactDotComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ReactDotComponent],
+      imports: [AngularReactBrowserModule, ReactComponentsModule],
     }).compileComponents();
   }));
 

apps/docs/src/app/react-components/react-dot/react-dot.component.ts

@@ -1,23 +1,52 @@
 // tslint:disable:no-input-rename
 // tslint:disable:no-output-rename
-import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter, OnChanges } from '@angular/core';
+import {
+  Component,
+  ChangeDetectionStrategy,
+  Input,
+  Output,
+  EventEmitter,
+  ElementRef,
+  ViewChild,
+  ChangeDetectorRef,
+  Renderer2,
+  NgZone,
+} from '@angular/core';
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import { ReactWrapperComponent } from '@angular-react/core';
 
 @Component({
   selector: 'app-react-dot',
-  templateUrl: './react-dot.component.html',
-  styleUrls: ['./react-dot.component.scss'],
+  template: `
+    <ReactDot
+      #reactNode
+      [text]="text"
+      (onMouseEnter)="onMouseEnter($event)"
+      (onMouseLeave)="onMouseLeave($event)"
+      [styles]="{
+        width: size,
+        lineHeight: size,
+        height: size,
+        left: x,
+        top: y,
+        color: color,
+        backgroundColor: backgroundColor,
+        fontSize: size
+      }"
+    >
+      <react-content> <ng-content></ng-content> </react-content>
+    </ReactDot>
+  `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   styles: ['react-renderer'],
 })
-export class ReactDotComponent implements OnChanges {
-  style: ReactDotStyle;
+export class ReactDotComponent extends ReactWrapperComponent<ReactDotProps> {
+  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
 
   @Input() x: string;
   @Input() y: string;
   @Input() size: string;
-  @Input('text') _text: string;
+  @Input() text: string;
   @Input() color: string;
   @Input() backgroundColor: string;
   @Input() textOverride: string;
@@ -28,63 +57,44 @@ export class ReactDotComponent implements OnChanges {
   onMouseEnter = (ev: MouseEvent) => this.mouseEnter.emit(ev);
   onMouseLeave = (ev: MouseEvent) => this.mouseLeave.emit(ev);
 
-  get text() {
-    return this.textOverride && this._text ? this.textOverride : this._text;
+  get computedText() {
+    return this.textOverride && this.text ? this.textOverride : this.text;
   }
 
-  ngOnChanges() {
-    this.style = {
-      width: this.size,
-      lineHeight: this.size,
-      height: this.size,
-      left: this.x,
-      top: this.y,
-      color: this.color,
-      backgroundColor: this.backgroundColor,
-      fontSize: this.size,
-    };
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
+    super(elementRef, changeDetectorRef, renderer, { ngZone, setHostDisplay: true });
   }
 }
 
-interface ReactDotStyle {
-  display?: string;
-  position?: string;
-  textAlign?: string;
-  borderRadius?: string;
-  cursor?: string;
-
-  width?: string;
-  lineHeight?: string;
-  height?: string;
-  left?: string;
-  top?: string;
-  color?: string;
-  backgroundColor?: string;
-  fontSize?: string;
-}
-
 interface ReactDotProps {
-  style: ReactDotStyle;
-  onMouseEnter?: (ev) => void;
-  onMouseLeave?: (ev) => void;
+  onMouseEnter?: (ev: MouseEvent) => void;
+  onMouseLeave?: (ev: MouseEvent) => void;
+  text: string;
+  styles?: object;
 }
 
-export class ReactDot extends React.Component {
-  private propsOut: ReactDotProps = {
-    style: {
-      display: 'block',
-      position: 'absolute',
-      textAlign: 'center',
-      borderRadius: '30%',
-      cursor: 'pointer',
-    },
+export class ReactDot extends React.Component<ReactDotProps> {
+  private static defaultStyle = {
+    display: 'block',
+    position: 'absolute',
+    textAlign: 'center',
+    borderRadius: '30%',
+    cursor: 'pointer',
   };
 
   render() {
-    this.propsOut.style = { ...this.propsOut.style, ...this.props['dynamicStyle'] };
-    this.propsOut.onMouseEnter = this.props['onMouseEnter'];
-    this.propsOut.onMouseLeave = this.props['onMouseLeave'];
+    const { text, styles, ...rest } = this.props;
 
-    return React.createElement('div', this.propsOut, [this.props['text'], ...(this.props.children as any)]);
+    return React.createElement(
+      'div',
+      {
+        ...rest,
+        style: {
+          ...ReactDot.defaultStyle,
+          ...styles,
+        },
+      },
+      [this.props['text'], ...(this.props.children as any)]
+    );
   }
 }

apps/docs/src/app/shared/sub-nav.directive.spec.ts

@@ -1,8 +1,28 @@
 import { SubNavDirective } from './sub-nav.directive';
+import { TestBed } from '@angular/core/testing';
+import { SubNavService } from './sub-nav.service';
+
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  // tslint:disable-next-line: component-selector
+  selector: 'test-component',
+  template: `
+    <div *subnav></div>
+  `,
+})
+class TestComponent {}
 
 describe('SubNavDirective', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TestComponent],
+      providers: [SubNavService],
+    });
+  });
+
   it('should create an instance', () => {
-    const directive = new SubNavDirective();
-    expect(directive).toBeTruthy();
+    const testComponent = TestBed.createComponent(TestComponent);
+    expect(testComponent.componentInstance).toBeTruthy();
   });
 });

apps/docs/src/app/shared/sub-nav.directive.ts

@@ -9,13 +9,15 @@ import { SubNavService } from './sub-nav.service';
 export class SubNavDirective implements OnInit, OnDestroy {
   private _viewRef: ViewRef;
 
-  constructor(private subNavService: SubNavService, public tpl: TemplateRef<any>) {}
+  constructor(private readonly subNavService: SubNavService, public readonly tpl: TemplateRef<any>) {}
 
   ngOnInit() {
-    this._viewRef = this.subNavService.vcr.createEmbeddedView(this.tpl);
+    this._viewRef = this.subNavService.vcr && this.subNavService.vcr.createEmbeddedView(this.tpl);
   }
 
   ngOnDestroy() {
-    this._viewRef.destroy();
+    if (this._viewRef) {
+      this._viewRef.destroy();
+    }
   }
 }

apps/docs/src/app/shared/sub-nav.service.spec.ts

@@ -1,13 +1,13 @@
-import { TestBed, inject } from '@angular/core/testing';
+import { TestBed, inject, async } from '@angular/core/testing';
 
 import { SubNavService } from './sub-nav.service';
 
 describe('SubNavService', () => {
-  beforeEach(() => {
+  beforeEach(async(() => {
     TestBed.configureTestingModule({
       providers: [SubNavService],
-    });
-  });
+    }).compileComponents();
+  }));
 
   it('should be created', inject([SubNavService], (service: SubNavService) => {
     expect(service).toBeTruthy();

apps/docs/src/app/shared/sub-nav.service.ts

@@ -1,6 +1,6 @@
 import { Injectable, ViewContainerRef } from '@angular/core';
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class SubNavService {
   vcr: ViewContainerRef;
 }

libs/core/karma.conf.js

@@ -1,37 +1,5 @@
-// Copyright (c) Microsoft Corporation. All rights reserved.
-// Licensed under the MIT License.
-
-// Copyright (c) Microsoft Corporation. All rights reserved.
-// Licensed under the MIT License.
-
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
+const baseConfig = require('../../test/karma.conf');
 
 module.exports = function(config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma'),
-    ],
-    client: {
-      clearContext: false, // leave Jasmine Spec Runner output visible in browser
-    },
-    coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, '../../coverage'),
-      reports: ['html', 'lcovonly'],
-      fixWebpackSourcePaths: true,
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false,
-  });
+  baseConfig(config);
 };

libs/fabric/karma.conf.js

@@ -1,34 +1,5 @@
-// Copyright (c) Microsoft Corporation. All rights reserved.
-// Licensed under the MIT License.
-
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
+const baseConfig = require('../../test/karma.conf');
 
 module.exports = function(config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma'),
-    ],
-    client: {
-      clearContext: false, // leave Jasmine Spec Runner output visible in browser
-    },
-    coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, '../../coverage'),
-      reports: ['html', 'lcovonly'],
-      fixWebpackSourcePaths: true,
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false,
-  });
+  baseConfig(config);
 };

libs/semantic-ui/karma.conf.js

@@ -1,34 +1,5 @@
-// Copyright (c) Microsoft Corporation. All rights reserved.
-// Licensed under the MIT License.
-
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
+const baseConfig = require('../../test/karma.conf');
 
 module.exports = function(config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma'),
-    ],
-    client: {
-      clearContext: false, // leave Jasmine Spec Runner output visible in browser
-    },
-    coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, '../../coverage'),
-      reports: ['html', 'lcovonly'],
-      fixWebpackSourcePaths: true,
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false,
-  });
+  baseConfig(config);
 };

package.json

@@ -48,6 +48,7 @@
     "lint": "./node_modules/.bin/nx lint && ng lint",
     "ng": "ng",
     "test": "ng test",
+    "test:ci": "ng test --no-watch --no-progress --browsers=ChromeHeadlessCI",
     "dep-graph": "./node_modules/.bin/nx dep-graph",
     "affected:dep-graph": "./node_modules/.bin/nx affected:dep-graph",
     "workspace-schematic": "./node_modules/.bin/nx workspace-schematic",

test/karma.conf.js

@@ -0,0 +1,36 @@
+// Base Karma configuration file
+
+module.exports = function(config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma'),
+    ],
+    client: {
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage'),
+      reports: ['html', 'lcovonly'],
+      fixWebpackSourcePaths: true,
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    customLaunchers: {
+      ChromeHeadlessCI: {
+        base: 'ChromeHeadless',
+        flags: ['--no-sandbox'],
+      },
+    },
+    singleRun: false,
+  });
+};