Add firefox browser as default for testing and add travis configuration for running UI tests.

.travis.yml

@@ -14,9 +14,11 @@ cache:
 before_install:
   - nvm install $NODE_VERSION
   - npm install -g @angular/cli >/dev/null 2>&1
+  - export DISPLAY=:99.0
+  - sh -e /etc/init.d/xvfb start
 install:
   - (cd workplace && npm install --no-progress && ng build --environment=prod --no-progress)
-    && (cd admin && npm install --no-progress && ng build --environment=prod --no-progress)
+    && (cd admin && npm install --no-progress && ng build:prod && npm run test)
     && (cd monitor && npm install --no-progress && ng build --environment=prod --no-progress)
     && mvn clean install -q -f lib/ -DskipTests=true -Dmaven.javadoc.skip=true -B
     && mvn clean install -q -f rest/ -DskipTests=true -B

admin/karma.conf.js

@@ -10,7 +10,8 @@ module.exports = function (config) {
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
-      require('@angular/cli/plugins/karma')
+      require('@angular/cli/plugins/karma'),
+      require('karma-firefox-launcher')
     ],
     client:{
       clearContext: false // leave Jasmine Spec Runner output visible in browser
@@ -38,7 +39,7 @@ module.exports = function (config) {
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['Chrome'],
+    browsers: ['Chrome', 'Firefox'],
     singleRun: false
   });
 };

admin/package-lock.json

@@ -6567,6 +6567,12 @@
         "minimatch": "3.0.4"
       }
     },
+    "karma-firefox-launcher": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/karma-firefox-launcher/-/karma-firefox-launcher-1.1.0.tgz",
+      "integrity": "sha512-LbZ5/XlIXLeQ3cqnCbYLn+rOVhuMIK9aZwlP6eOLGzWdo1UVp7t6CN3DP4SafiRLjexKwHeKHDm0c38Mtd3VxA==",
+      "dev": true
+    },
     "karma-jasmine": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/karma-jasmine/-/karma-jasmine-1.1.1.tgz",

admin/package.json

@@ -6,8 +6,9 @@
     "ng": "ng",
     "start": "ng serve",
     "build": " ng build --env=dev",
-    "build:prod": "npm run test && ng build --environment=prod --no-progress",
+    "build:prod": "ng build --environment=prod --no-progress",
-    "test": "ng test --single-run",
+    "test": "./node_modules/.bin/karma start --single-run --browsers Firefox",
+    "test:watch": "./node_modules/.bin/karma start --browsers Firefox",
     "lint": "ng lint",
     "e2e": "ng e2e"
   },
@@ -48,6 +49,7 @@
     "karma-jasmine": "1.1.1",
     "karma-jasmine-html-reporter": "0.2.2",
     "karma-coverage-istanbul-reporter": "1.3.3",
+    "karma-firefox-launcher": "1.1.0",
     "protractor": "5.2.2",
     "ts-node": "4.1.0",
     "tslint": "5.9.1",

admin/src/app/workbasket/list/workbasket-list.component.spec.ts

@@ -5,7 +5,7 @@ import { AngularSvgIconModule } from 'angular-svg-icon';
 import { HttpClientModule } from '@angular/common/http';
 import { WorkbasketSummary } from '../../model/workbasketSummary';
 import { WorkbasketService } from '../../services/workbasketservice.service';
-import { HttpModule, JsonpModule } from '@angular/http';
+import { HttpModule } from '@angular/http';
 import { Router, Routes } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { Observable } from 'rxjs/Observable';
@@ -40,21 +40,23 @@ describe('WorkbasketListComponent', () => {
       
       imports:[
         AngularSvgIconModule,
-        HttpClientModule,
         HttpModule,
+        HttpClientModule,
         RouterTestingModule.withRoutes(routes)
       ],
       providers:[WorkbasketService]
     })
     .compileComponents();
+    
 
     fixture = TestBed.createComponent(WorkbasketListComponent);
     component = fixture.componentInstance;
     debugElement = fixture.debugElement.nativeElement;
-    fixture.detectChanges();
     workbasketService = TestBed.get(WorkbasketService);
     spyOn(workbasketService, 'getWorkBasketsSummary').and.returnValue(Observable.of(workbasketSummary));   
     spyOn(workbasketService, 'getSelectedWorkBasket') .and.returnValue(Observable.of('2'));
+
+    fixture.detectChanges();
   }));
 
   afterEach(() =>{
@@ -74,35 +76,22 @@ describe('WorkbasketListComponent', () => {
   });
 
   it('should have wb-action-toolbar, wb-search-bar, wb-list-container and wb-pagination created in the html', fakeAsync( () => {
-    component.ngOnInit();
     expect(debugElement.querySelector('#wb-action-toolbar')).not.toBeNull();
     expect(debugElement.querySelector('#wb-search-bar')).not.toBeNull();
     expect(debugElement.querySelector('#wb-pagination')).not.toBeNull();
     expect(debugElement.querySelector('#wb-list-container')).not.toBeNull();
-    expect(debugElement.querySelectorAll('#wb-list-container > li').length).toBe(2);
+    expect(debugElement.querySelectorAll('#wb-list-container > li').length).toBe(4);
-    workbasketService.getWorkBasketsSummary().subscribe(value => {
-      fixture.detectChanges();
-      expect(debugElement.querySelectorAll('#wb-list-container > li').length).toBe(4);
-    });
   }));
 
   it('should have two workbasketsummary rows created with the second one selected.', fakeAsync( () => {
-    component.ngOnInit();
+    expect(debugElement.querySelectorAll('#wb-list-container > li').length).toBe(4);
-    workbasketService.getWorkBasketsSummary().subscribe(value => {
+    expect(debugElement.querySelectorAll('#wb-list-container > li')[2].getAttribute('class')).toBe('list-group-item');
-      fixture.detectChanges();
+    expect(debugElement.querySelectorAll('#wb-list-container > li')[3].getAttribute('class')).toBe('list-group-item active');
-      expect(debugElement.querySelectorAll('#wb-list-container > li').length).toBe(4);
-      expect(debugElement.querySelectorAll('#wb-list-container > li')[2].getAttribute('class')).toBe('list-group-item');
-      expect(debugElement.querySelectorAll('#wb-list-container > li')[3].getAttribute('class')).toBe('list-group-item active');
-    });
   }));
 
   it('should have two workbasketsummary rows created with two different icons: user and users', fakeAsync( () => {
-    component.ngOnInit();
+    expect(debugElement.querySelectorAll('#wb-list-container > li')[2].querySelector('svg-icon').getAttribute('ng-reflect-src')).toBe('./assets/icons/user.svg');
-    workbasketService.getWorkBasketsSummary().subscribe(value => {
+    expect(debugElement.querySelectorAll('#wb-list-container > li')[3].querySelector('svg-icon').getAttribute('ng-reflect-src')).toBe('./assets/icons/users.svg');
-      fixture.detectChanges();
-      expect(debugElement.querySelectorAll('#wb-list-container > li')[2].querySelector('svg-icon').getAttribute('ng-reflect-src')).toBe('./assets/icons/user.svg');
-      expect(debugElement.querySelectorAll('#wb-list-container > li')[3].querySelector('svg-icon').getAttribute('ng-reflect-src')).toBe('./assets/icons/users.svg');
-    });
   }));
 
 });