Ionic2,Jasmine,Karma 单元测试答案

【问题标题】：Ionic2,Jasmine,Karma unit testIonic2,Jasmine,Karma 单元测试
【发布时间】：2017-05-27 15:27:43
【问题描述】：

我们正在为我们的 Ionic2 项目建立一个单元测试框架在运行 npm test 时，我们面临以下错误。我在下面给出 src/.ts 和 src/.spec.ts 以及 cmd 窗口错误
请帮忙解决

Chrome 55.0.2883 (Windows 8.1 0.0.0) 错误：错误{拒绝：'失败加载 app.html'，promise : ZoneAwarePromise{__zone_symbol__state: 0, __zone_symbol__value: '未能加载 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：...}}，任务：ZoneTask{ runCount：1，类型：'microTask'，区域：Zone{_properties：...， _parent: ..., _name: ..., _zone 委托： ...}，来源：'Promise.then'，数据：未定义，scheduleFn：未定义， cancelFn: null, 回调: function () { ... }, 调用: function () { ... }}}

Chrome 55.0.2883 (Windows 8.1 0.0.0) DashboardService 应该返回一个非空数组失败类型错误：无法读取属性“assertPresent” 在 resetFakeAsyncZone 未定义 (C:/Users/user/AppData/Local/Temp/karma-typescript-bundle -66485eOt1ZMUGTWZ.js:143884:22) 在对象。 (C:/Users/user/AppData/Local/Temp/karma-typescript-bundle -66485eOt1ZMUGTWZ.js:144536:13) 错误：async() 测试助手需要ProxyZoneSpec，但找不到。请确保您的环境包括 runInTestZone 中的 zone.js/dist/proxy.js (C:/Users/user/AppData/Local/Temp/karma-typescript-bundle-6648 5eOt1ZMUGTWZ.js:143659:19) 在对象。 (C:/Users/user/AppData/Local/Temp/karma-typescript-bundle -66485eOt1ZMUGTWZ.js:143633:17) 类型错误：无法在对象处读取 null 的属性“getData”。 (src/pages/dashboard/dashboard.spec.ts:47:35

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"}
    ];
  }

}

【问题讨论】：

标签： jasmine ionic2 karma-jasmine

【解决方案1】：

我对 Jasmine 和 Karma 也有同样的问题。

在我的 karma.conf 中，我将一些附加文件加载到浏览器中：

// 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
    ],

【讨论】：