Ionic工程搭建测试框架

首先承认，为app添加单元测试的重要性。

如果你觉得不那么重要，可参考《代码的免疫系统- 单元测试》。

选Karma作为你的运行环境的测试，Jasmine作为你实际的测试case。（当然你有其他的选择）

前端的测试分类：分为单元测试和end-to-end测试

单元测试是独立于组件的测试。

e2e是用浏览器的自动点击等行为模拟人的使用行为来测试整个app的。e2e采用的是selenium测试。

下面我们重点介绍为Ionic工程搭建单元测试的框架。

1. 首先下载一个测试的例子

ionic-unit-testing-example，因为需要从测试的例子中copy一些测试的必要的文件。

当然也可以从下面的网站中下载source code。

https://github.com/ionic-team/ionic-unit-testing-example

2. 新建一个ionic工程

$ ionic start starter-with-testing sidemenu

需要保证此工程是可运行的。

$cd starter-with-testing

$ ionic serve

3. 安装测试所需要的node modules

npm install --save-dev angular2-template-loader html-loader jasmine jasmine-spec-reporter karma karma-chrome-launcher karma-jasmine karma-jasmine-html-reporter karma-sourcemap-loader karma-webpack karma-coverage-istanbul-reporter istanbul-instrumenter-loader null-loader protractor ts-loader ts-node @types/jasmine @types/node

4. 准备测试编译的环境

给package.json中添加一些脚本，用于test的编译。

在“scripts”节点中增加

                    "test": "karma start ./test-config/karma.conf.js",

                    "test-ci": "karma start ./test-config/karma.conf.js --single-run",

                    "test-coverage": "karma start ./test-config/karma.conf.js --coverage",

                    "e2e": "npm run e2e-update && npm run e2e-test",

                    "e2e-test": "protractor ./test-config/protractor.conf.js",

                    "e2e-update": "webdriver-manager update --standalone false --gecko false"

5. 增加配置文件

从第一步中的ionic-unit-testing-example拷贝test-config目录到工程的根目录下。

6. 为你的工程增加单元测试

上面的步骤都成功之后，说明你的工程的测试框架已经搭建好，这时你可以写自己的单元测试了。

如给app.component.ts增加单元测试app.component.spec.ts，源码在下面。

7. 运行单元测试

$ npm test

可以通过karma的debug，进入source的webpack进行source code的调试。

改变源码或test，保存，测试程序会自动编译并运行。

app.component.spec.ts源码

import { async, TestBed } from '@angular/core/testing';

import { IonicModule, Platform } from 'ionic-angular';

import { StatusBar } from '@ionic-native/status-bar';

import { SplashScreen } from '@ionic-native/splash-screen';

import { MyApp } from './app.component';

import {

PlatformMock,

StatusBarMock,

SplashScreenMock

} from '../../test-config/mocks-ionic';

describe('MyApp Component', () => {

let fixture;

let component;

beforeEach(async(() => {

TestBed.configureTestingModule({

declarations: [MyApp],

imports: [

IonicModule.forRoot(MyApp)

],

providers: [

{ provide: StatusBar, useClass: StatusBarMock },

{ provide: SplashScreen, useClass: SplashScreenMock },

{ provide: Platform, useClass: PlatformMock }

]

})

}));

beforeEach(() => {

fixture = TestBed.createComponent(MyApp);

component =fixture.componentInstance;

});

it('should be created', () => {

expect(component instanceof MyApp).toBe(true);

});

it('should have two pages', () => {

expect(component.pages.length).toBe(2);

});

});

参考文献：https://leifwells.github.io/2017/08/27/testing-in-ionic-configure-existing-projects-for-testing/