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

叁歲伎倆 2022-09-25 08:27 181阅读 0赞

### 所有文章，首发于CSDN ###

### [原文链接地址][Link 1] ###

# 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. 返回测试结果。 ##

![这里写图片描述][20160817175920894]

## 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. 运行测试结果 ##

![这里写图片描述][20160817175838612]

## 13. 修改service.test.js ##

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

## 14. 结果 ##

![这里写图片描述][20160817175903659]

## 问题汇总 ##

### 出现警告 ###

![这里写图片描述][20160817175953660]

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下使用了 所以会有警告，忽略即可

### 出现错误 ###

![这里写图片描述][20160817180007442]

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用不了

[Link 1]: http://blog.csdn.net/xuexiiphone/article/details/52233289
[20160817175920894]: /images/20220718/31669abf2e0a4674a745d66280796c63.png
[20160817175838612]: /images/20220718/e2fcf2d4e2ad4070a7fe4b8ecc559f6f.png
[20160817175903659]: /images/20220718/e1e4cca1013547fb97bf3f0cae132af6.png
[20160817175953660]: /images/20220718/6faa27f608aa40bdbec876d03fba0d83.png
[20160817180007442]: /images/20220718/204ddcd216e9472da681df95e75a9c46.png