ionic之如何应用karma进行单元测试

所有文章，首发于CSDN

原文链接地址

karma测试

1. 创建ionic项目

ionic start ionic-testing tabs

cd ionic-testing

2. 安装karma插件

npm install karma karma-jasmine karma-phantomjs-launcher --save-dev --registry=https://registry.npm.taobao.org

3. 为了能更方便的直接使用karma命令

npm install -g karma-cli --registry=https://registry.npm.taobao.org

npm install --registry=https://registry.npm.taobao.org 

bower install angular-mocks --save-dev --registry=https://registry.npm.taobao.org

4. 创建test文件夹

mkdir tests

cd tests

5. 初始化karma的配置文件

karma init my.conf.js

6. 修改my.conf.js文件

// list of files / patterns to load in the browser
files: [
  '../www/lib/angular/angular.js',
  '../www/js/*.js',
  '../www/lib/angular-mocks/angular-mocks.js',
  '**/*tests.js'
],

7. 修改gulpfile.js

// Import at the top of the file
var karma = require('karma').server;

/**
* Test task, run test once and exit
*/
gulp.task('test', function(done) {
    karma.start({
        configFile: __dirname + '/tests/my.conf.js',
        singleRun: true
    }, function() {
        done();
    });
});

8. 在tests目录下创建Controllers，然后在该目录下创建controllers.tests.js

describe('Controllers', function(){
  var scope;

  // load the controller's module
  beforeEach(module('starter.controllers'));

  beforeEach(inject(function($rootScope, $controller) {
    scope = $rootScope.$new();
    $controller('AccountCtrl', {$scope: scope});
  }));

  // tests start here
  it('should have enabled friends to be true', function(){
    expect(scope.settings.enableFriends).toEqual(true);
  });
});

9. 使用karma start tests/my.conf.js启动测试

karma start tests/my.conf.js

10. 返回测试结果。

11. 在tests目录下创建Services，然后在该目录下创建services.tests.js

/**
 * Created by xuek on 2016/8/17.
 */
describe('Chats Unit Tests', function(){
  var Chats;
  beforeEach(module('starter.services'));

  beforeEach(inject(function (_Chats_) {
    Chats = _Chats_;
  }));

  it('can get an instance of my factory', inject(function(Chats) {
    expect(Chats).toBeDefined();
  }));

  it('has 5 chats', inject(function(Chats) {
    expect(Chats.all().length).toEqual(5);
  }));

  it('has Max as friend with id 1', inject(function(Chats) {
    var oneFriend = {
      id: 1,
      name: 'Max Lynx',
      notes: 'Hey, it\'s me',
      face: 'img/max.png'
    };

    expect(Chats.get(1).name).toEqual(oneFriend.name);
  }));
});

12. 运行测试结果

13. 修改service.test.js

expect(Chats.all().length).toEqual(4); //将数量改为4

14. 结果

问题汇总

出现警告

npm WARN optional Skipping failed optional dependency /browser-sync/chokidar/fsevents:                            
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.8                            
npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.8 

解决问题

fsevent是mac osx系统的，你是在win或者Linux下使用了 所以会有警告，忽略即可

出现错误

Cannot find module 'jasmine-core'

解决

npm install jasmine-core --save-dev --registry=https://registry.npm.taobao.org

出现错误

 No binary for PhantomJS browser on your platform.
  Please, set "PHANTOMJS_BIN" env variable.

解决问题

参考其他教程里面，都有这样一句话

browsers: ['PhantomJS'],

将该测试平台，重新改为chrome就可以了，后续将继续跟进改问题，看为什么PhantomJS用不了