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

Author: bengry

.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,13 +1,35 @@
 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;
   let fixture: ComponentFixture<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,14 +1,20 @@
 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;
   let fixture: ComponentFixture<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

@@ -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/sub-nav/sub-nav.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/components/triangle/triangle.component.ts

@@ -1,14 +1,19 @@
 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;
   let fixture: ComponentFixture<ComponentDocsComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ComponentDocsComponent],
+      imports: [RouterTestingModule, MaterialModule],
+      declarations: [ComponentDocsComponent, SubNavComponent],
     }).compileComponents();
   }));