Resolve CI issues (peer dependencies, version support, end-to-end testing)

.travis.yml

@@ -1,17 +1,29 @@
 language: "node_js"
 node_js:
-  - "7"
+  - "9"
+  - "8"
   - "6"
-  - "5"
-  - "4"
+
+  # fail buils early.
+matrix:
+  fast_finish: true
+  allow_failures:
+    - node_js: "9"
 
 before_install:
   - "npm install coveralls"
 
+before_script:
+  # Generate a virtual framebuffer X server to collect Electron windows
+  - export DISPLAY=:99.0
+  - sh -e /etc/init.d/xvfb start
+  # Wait for Xvfb to start
+  - sleep 3
+
 script:
   - "commitlint-travis"
   - "npm run lint"
-  - "npm run test"
-  - "cat ./reports/coverage/lcov.info | ./node_modules/.bin/coveralls"
+  - "npm run test-travis"
+  - "cat ./coverage/lcov.info | ./node_modules/.bin/coveralls"
 
 sudo: false

karma.conf.js

@@ -7,27 +7,28 @@ module.exports = function (config) {
     frameworks: ['jasmine', '@angular/cli'],
     plugins: [
       require('karma-jasmine'),
-      require('karma-chrome-launcher'),
+      require('karma-electron'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
       require('@angular/cli/plugins/karma')
     ],
     client:{
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
+      useIframe: false // launch in a new windows instead of iframe so nodeIntegration will work.
     },
     coverageIstanbulReporter: {
-      reports: [ 'html', 'lcovonly' ],
+      reports: [ 'text-summary' ],
       fixWebpackSourcePaths: true
     },
     angularCli: {
       environment: 'dev'
     },
-    reporters: ['progress', 'kjhtml'],
+    reporters: ['progress', 'kjhtml', 'coverage-istanbul'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false
+    browsers: ['Electron'],
+    singleRun: false,
   });
 };

package.json

@@ -8,7 +8,8 @@
     "ng": "ng",
     "start": "electron . | ng serve",
     "build": "ng build --prod",
-    "test": "ng test",
+    "test": "ng test --cc",
+    "test-travis": "ng test -c travis.karma.conf.js --cc",
     "lint": "ng lint",
     "e2e": "ng e2e",
     "pack": "npm run build && electron-packager . --platform=darwin,win32,linux --arch=x64 --overwrite --out=bin"
@@ -28,7 +29,7 @@
     "email": "[email protected]"
   },
   "engines": {
-    "node": ">= 0.12.0"
+    "node": ">= 6.4.0"
   },
   "commitlint": {
     "extends": [
@@ -41,6 +42,7 @@
   },
   "homepage": "https://github.com/fh1ch/node-bacstack-browser#readme",
   "dependencies": {
+    "@angular-devkit/core": "0.0.29",
     "@angular/animations": "^5.0.0",
     "@angular/common": "^5.0.0",
     "@angular/compiler": "^5.0.0",
@@ -50,6 +52,7 @@
     "@angular/platform-browser": "^5.0.0",
     "@angular/platform-browser-dynamic": "^5.0.0",
     "@angular/router": "^5.0.0",
+    "ajv": "^6.0.0",
     "async": "^2.6.0",
     "bacstack": "0.0.1-beta.13",
     "body-parser": "^1.18.2",
@@ -81,6 +84,7 @@
     "karma-chrome-launcher": "~2.1.1",
     "karma-cli": "~1.0.1",
     "karma-coverage-istanbul-reporter": "^1.2.1",
+    "karma-electron": "^5.2.2",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
     "protractor": "~5.1.2",

src/app/app.component.spec.ts

@@ -1,11 +1,13 @@
 import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
 describe('AppComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [
         AppComponent
       ],
+      imports: [ RouterTestingModule ]
     }).compileComponents();
   }));
   it('should create the app', async(() => {
@@ -22,6 +24,6 @@ describe('AppComponent', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
+    expect(compiled.querySelector('.navbar-brand-icon').textContent).toContain('Node BACStack Browser');
   }));
 });

src/app/pages/browse/browse.component.spec.ts

@@ -1,14 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 
 import { BrowseComponent } from './browse.component';
+import { ApiService } from '../../services/api.service';
 
 describe('BrowseComponent', () => {
   let component: BrowseComponent;
   let fixture: ComponentFixture<BrowseComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ BrowseComponent ]
+      imports: [ RouterTestingModule, HttpClientTestingModule ],
+      declarations: [ BrowseComponent ],
+      providers: [ ApiService ]
+
     })
     .compileComponents();
   }));

src/app/pages/objects/objects.component.spec.ts

@@ -1,14 +1,19 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 
 import { ObjectsComponent } from './objects.component';
+import { ApiService } from '../../services/api.service';
 
 describe('ObjectsComponent', () => {
   let component: ObjectsComponent;
   let fixture: ComponentFixture<ObjectsComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ObjectsComponent ]
+      imports: [ RouterTestingModule, HttpClientTestingModule ],
+      declarations: [ ObjectsComponent ],
+      providers: [ ApiService ]
     })
     .compileComponents();
   }));

src/app/pages/properties/properties.component.spec.ts

@@ -1,14 +1,19 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 
 import { PropertiesComponent } from './properties.component';
+import { ApiService } from '../../services/api.service';
 
 describe('PropertiesComponent', () => {
   let component: PropertiesComponent;
   let fixture: ComponentFixture<PropertiesComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ PropertiesComponent ]
+      imports: [ RouterTestingModule, HttpClientTestingModule ],
+      declarations: [ PropertiesComponent ],
+      providers: [ ApiService ]
     })
     .compileComponents();
   }));

src/app/pages/settings/settings.component.spec.ts

@@ -1,14 +1,19 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 
 import { SettingsComponent } from './settings.component';
+import { ApiService } from '../../services/api.service';
 
 describe('SettingsComponent', () => {
   let component: SettingsComponent;
   let fixture: ComponentFixture<SettingsComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ SettingsComponent ]
+      imports: [ FormsModule, HttpClientTestingModule ],
+      declarations: [ SettingsComponent ],
+      providers: [ ApiService ]
     })
     .compileComponents();
   }));

src/app/services/api.service.spec.ts

@@ -1,15 +1,27 @@
-import { TestBed, inject } from '@angular/core/testing';
-
+import { TestBed, getTestBed, inject } from '@angular/core/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 import { ApiService } from './api.service';
 
+// @see: https://medium.com/netscape/testing-with-the-angular-httpclient-api-648203820712 for
+// an example of testing http service.
+
 describe('ApiService', () => {
+  let injector: TestBed;
+  let service: ApiService;
+  let httpMock: HttpTestingController;
+
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [ApiService]
+      imports: [ HttpClientTestingModule ],
+      providers: [ ApiService ]
     });
+    injector = getTestBed();
+    service = injector.get(ApiService);
+    httpMock = injector.get(HttpTestingController);
+
   });
 
-  it('should be created', inject([ApiService], (service: ApiService) => {
+  it('should be created', () => {
     expect(service).toBeTruthy();
-  }));
+  });
 });

travis.karma.conf.js

@@ -0,0 +1,22 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+const baseConfig = require('./karma.conf');
+module.exports = function (config) {
+  // apply base config.
+  baseConfig(config);
+  // travis-ci specific overrides.
+  config.set({
+    coverageIstanbulReporter: {
+      reports: ['lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    angularCli: {
+      environment: 'dev'
+    },
+    reporters: ['progress', 'coverage-istanbul'],
+    port: 9876,
+    logLevel: config.LOG_INFO,
+    autoWatch: false,
+    singleRun: true
+  });
+};