Ionic3 使用Karma和Jamine进行单元测试

一、测试环境Karma和测试用例Jamie

1. Karma是一个基于Node.js的JavaScript测试执行过程管理工具（Test Runner）

2. Jasmine是单元测试框架，可以编写测试用例。
   Jasmine介绍: https://jasmine.github.io/2.4/introduction.html

二、Ionic单元测试实例

1. 创建Ionic工程

ionic start projectname

cd projectname

2.安装karma插件

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

3. 为了能使用karma命令

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

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

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

第三条出现如下错误

bower ENOGIT git is not installed or not in the PATH

解决方法：

安装Git，并配置Git环境变量。 或者使用Git命令行工具进入projectname路径下执行

4. 创建测试文件夹

mkdir tests
cd tests

5. 初始化karma的配置文件

karma init my.conf.js

修改my.conf.js 文件

files: [
     '../www/build/polyfills.js',
     '../www/build/vendor.js',
     '../www/build/main.js',
     '../www/build/0.js',
     '**/*tests.js'
   ],

完整的配置

// Karma configuration
// Generated on Sun Jan 28 2018 20:59:56 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
    files: [
      '../www/build/polyfills.js',
      '../www/build/vendor.js',
      '../www/build/main.js',
      '../www/build/0.js',
      '**/*tests.js'
    ],
 
 
    // list of files / patterns 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'],
 
 
    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,
 
    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

6. 在tests目录下创建Controller文件夹

创建controllers.tests.js

describe("A spec ( with setup and tear-down)", function () {
  var foo;
  //在测试用例执行前加载
  beforeEach(function () {
    foo = 0;
    foo += 1;
  });
  //在测试用例执行后加载
  afterEach(function () {
    foo = 0;
  });
  //测试用例
  it("is just a function, so it can contain any code", function () {
    //except 括号中是需要测试的函数，或是变量
    //toEqual括号中是期望的函数防止或者变量
    expect(foo).toEqual(1);
  });
  //测试用例--单个测试用例中，可以增加多个测试项
  it("can have more than one expectation", function () {
    expect(foo).toEqual(1);
    expect(true).toEqual(true);
  });
   
});

7. 运行测试

karma start tests/my.conf.js

出现错误：

Cannot load browser "Chrome": it is not registered! Perhaps you are missing some plugin?

解决方法：

npm install karma-chrome-launcher --registry=https://registry.npm.taobao.org

8. 返回测试结果

image