Ionic2,Jasmine,Karma unit test - jasmine

Question

We are setting up a unit test framework for our Ionic2 project
while running npm test , we are faced with the following error.
I give below the src/.ts and src/.spec.ts alongwith the cmd window error
Please help resolve
Chrome 55.0.2883 (Windows 8.1 0.0.0) ERROR: Error{rejection: 'Failed
to load app.html', promise : ZoneAwarePromise{__zone_symbol__state: 0,
__zone_symbol__value: 'Failed to load app.html'}, z one: Zone{_properties: Object{}, _parent: null, _name: '',
_zoneDelegate: ZoneDelegate{_t askCounts: ..., zone: ..., _parentDelegate: ..., _forkZS: ..., _forkDlgt: ..., _interceptZS: .. ., _interceptDlgt: ..., _invokeZS: ..., _invokeDlgt: ...,
_handleErrorZS: ..., _handleErrorDlgt : ..., _scheduleTaskZS: ..., _scheduleTaskDlgt: ..., _invokeTaskZS: ..., _invokeTaskDlgt: ...,
_cancelTaskZS: ..., _cancelTaskDlgt: ..., _hasTaskZS: ..., _hasTaskDlgt: ...}}, task: ZoneTask{ runCount: 1, type: 'microTask', zone: Zone{_properties: ..., _parent: ..., _name: ..., _zoneDel egate:
...}, source: 'Promise.then', data: undefined, scheduleFn: undefined,
cancelFn: null, ca llback: function () { ... }, invoke: function () {
... }}}
Chrome 55.0.2883 (Windows 8.1 0.0.0) DashboardService should return a
non empty array FAILED TypeError: Cannot read property 'assertPresent'
of undefined at resetFakeAsyncZone
(C:/Users/user/AppData/Local/Temp/karma-typescript-bundle
-66485eOt1ZMUGTWZ.js:143884:22) at Object. (C:/Users/user/AppData/Local/Temp/karma-typescript-bundle
-66485eOt1ZMUGTWZ.js:144536:13) Error: ProxyZoneSpec is needed for the async() test helper but could not be found. Plea se make sure that
your environment includes zone.js/dist/proxy.js at runInTestZone
(C:/Users/user/AppData/Local/Temp/karma-typescript-bundle-6648
5eOt1ZMUGTWZ.js:143659:19) at Object.
(C:/Users/user/AppData/Local/Temp/karma-typescript-bundle
-66485eOt1ZMUGTWZ.js:143633:17) TypeError: Cannot read property 'getData' of null at Object.
(src/pages/dashboard/dashboard.spec.ts:47:35 <- src/pages/das
hboard/dashboard.spec.js:40:31) Chrome 55.0.2883 (Windows 8.1 0.0.0):
Executed 1 of 1 (1 FAILED) ERROR (0.019 secs / 0.003 secs
import { async, ComponentFixture, TestBed } from '#angular/core/testing';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { App, Config, Form, IonicModule, Keyboard, DomController, MenuController, NavController, Platform ,NavParams} from 'ionic-angular';
import { DashboardPage } from './dashboard';
import { ConfigMock } from '../../mock';
import { AzureDatasync } from '../../app/providers/azure-datasync';
let dashboard = null;
let navCtrl: NavController;
let navParams: NavParams;
let datasync: AzureDatasync;
let fixture: ComponentFixture<DashboardPage> = null;
let instance: any = null;
describe('DashboardService', () => {
// beforeEach(() => {
// dashboard = new DashboardPage(navCtrl,navParams,datasync);
// console.log(dashboard);
// });
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [DashboardPage],
providers: [
App, DomController, Form, Keyboard, MenuController, NavController, Platform,
{provide: Config, useClass: ConfigMock},
],
imports: [
FormsModule,
IonicModule,
ReactiveFormsModule,
],
})
.compileComponents().then(() => {
fixture = TestBed.createComponent(DashboardPage);
console.log(fixture);
instance = fixture;
console.log(instance);
fixture.detectChanges();
});
}));
it('should return a non empty array', () => {
let result = dashboard.getData();
console.log(result);
expect(Array.isArray(result)).toBeTruthy;
expect(result.length).toBeGreaterThan(0);
}
);
});
import { Component, OnInit } from '#angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { AzureDatasync } from '../../app/providers/azure-datasync';
import 'zone.js/dist/async-test';
/*
Generated class for the Dashboard page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
#Component({
selector: 'page-dashboard',
templateUrl: 'dashboard.html'
})
export class DashboardPage implements OnInit {
todays: any ;
ticklers: any;
cases: any;
constructor(public navCtrl: NavController, public navParams: NavParams, public datasync: AzureDatasync) {}
ngOnInit(){
this.getData();
}
getData() {
this.todays = [
{type: "abc", name: "test", duration: "9.30 AM - 10.00 AM"},
{type: "def", name: "test2", duration: "12.45 AM - 3.10 PM"}
];
this.ticklers = [
{name: "abc", description: "A Court "},
{name: "def", description: "dd"}
];
this.cases = [
{name: "Msh", duedate: "Due on 7th Dec", priority: "PsI", timeduration: "24hrs", imgurl:"_blank.png"},
{name: "ss Smith", duedate: "Due on 11th Dec", priority: "Pris", timeduration: "30 mins ", imgurl:"./person_blank.png"}
];
}
}

Answer 1

I was having the same issue with Jasmine and Karma.
In my karma.conf I loaded some additional files into the browser:
// list of files / patterns to load in the browser
files: [
'../node_modules/zone.js/dist/zone.js', // 'Uncaught ReferenceError: Zone is not defined'
'../node_modules/zone.js/dist/proxy.js', // 'TypeError: Cannot read property 'assertPresent' of undefined'
'../node_modules/zone.js/dist/sync-test.js', // 'TypeError: Cannot read property 'assertPresent' of undefined'
'../node_modules/zone.js/dist/jasmine-patch.js', // 'TypeError: Cannot read property 'assertPresent' of undefined'
// ANY OTHER FILES TO LOAD FOR YOUR TESTS
],