Ionic 单元测试

1 简介

    Ionic 基于AngularJS ，所以可以使用angularJS 的单元测试工具来进行Ionic 的单元测试。

    首先，我们先了解下这几个工具的用途，当然，在https://docs.angularjs.org/guide/unit-testing， 官方文档有详细的说明。

Karma：Karma是一个JS命令行工具，可以创建一个服务来运行你的代码和执行你的单元测试。通过配置Karma，可以在不同浏览器上执行。（这里意思是在浏览器上执行，但是测试结果是在命令行中显示），若是程序需要兼容不同的浏览器，都可以通过配置来测试。Karma 是一个NodeJS 程序，所以必须先安装npm 。

Jasmine :

   它是最受欢迎的Angular测试框架，提供方法去帮助你构建你的测试和作出断言，随着测试程序的增加，Jasmine可以帮助你保持良好的结构和记录。

使用describe 方法构建测试程序。

describe('test my app',function(){
//单个测试程序
})

每个测试都写在it 方法内

describe('test my app', function() {
  it('first test', function() {
    // 测试断言
  });});

最后，通过匹配toEqual 来作出断言。

describe('test my app', function() {
  it('first test', function() {
  var users = ['jack', 'igor', 'jeff'];
    var sorted = sortUsers(users);
    expect(sorted).toEqual(['jeff', 'jack', 'igor']);
  });});

angular-mocks

 Angular 提供了ngMock 模块，可以模拟你的测试。

2 安装工具

 首先，我们先建立一个ionic 的工程并进入工程目录，执行命令。

ionic start  ionicTest 
cd ionicTest

 安装karma ,karma-jasmine, angular-mocks ,（注：--save-dev 自动添加模块和版本号）

npm install karma --save-dev
npm install karma-jasmine --save-dev
bower install angular-mocks --save-dev

创建测试文件

在工程目录下 新建文件夹 tests，并生成一个测试配置文件test.conf.js

md tests
karma init test.conf.js

生成的test.conf.js中需要自己配置关联文件。 files[]中要加入js的文件路径。

// Karma configuration
// Generated on Tue Dec 22 2015 17:07:44 GMT+0800 (中国标准时间)

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],


    // list of files / patterns to load in the browser
    //此处需要自己配置，添加angular angular-mocks 自己的js代码路径，测试代码路径
    files: [
      '../www/lib/angular/angular.js',
      '../www/js/*.js',
      '../www/lib/angular-mocks/angular-mocks.js',
      '**/*tests.js'
    ],


    // list of files to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    //这里配置执行的浏览器
    browsers: ['Chrome'],
    //browsers: ['PhantomJS'],

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultanous
    concurrency: Infinity
  })
}

    现在来编写测试代码，在tests文件下建立Controllers文件夹，创建一个controllers.test.js来测试controllers.js 的下面一段代码

.controller('AccountCtrl', function($scope) {
  $scope.settings = {
    enableFriends: true
  };
});

测试代码controllers.test.js内容如下

describe('Controllers', function () {
  var scope;
  beforeEach(module('starter.controllers'));
  beforeEach(inject(function ($rootScope,$controller) {
    scope=$rootScope.$new();
    $controller('AccountCtrl',{$scope:scope})
  }));
  it('should have enableed', function () {
    expect(scope.settings.enableFriends).toEqual(true);
  })
})

返回到test.conf.js文件所在的目录并执行命令

karma start test.conf.js

执行后chrome浏览器会自动启动。会在命令行中显示

Chrome ：Executed 1 of 1 SUCCESS <0 secs/0.025 second>

表示你的测试通过了。

若是更改controllers.test.js的测试程序，将

toEqual(true)改为toEqual(false)

执行命令后，则会显示

Chrome ：Executed 1 of 1 <1 FAILED> <0 secs/0.025 second>

表示你的测试不通过。

3总结

这里只是简单的一个ionic的单元测试，和AngularJS大同小异。官方文档还提供了其他方法的Jasmin的写法。

转载于:https://my.oschina.net/wxp3967/blog/549182