angularjs+jasmine单元测试入门

  使用cordova、angularjs、ionic开发hybrid
App有一段时间了。为了做单元测试,在此以前从来是把要测的某一有个别产品代码复制到另四个独立的工程中来写测试代码,测好了未来再复制回去。弊端可想而知。于是就想,能否在同一份产品代码上做单元测试呢?

  搜百度,结果千篇一律,而且语焉不详,一点执行意义都未曾。还是谷歌(谷歌)好,给出了三篇尤其现实的辅导小说,请看附录。

 

一 、小编的工程轮廓

  因为是cordova工程,所以除了www之外还有其余很多索引,那里不一一列出。以下只看www目录:

+ www/

  + lib/      库根目录

    + angular/     放angular库

    + ionic/       放ionic库(一般已包含了angular库)

  + app/      app控制器、视图模板,按大功能块再分子目录

  + app.services/   app相关的service

  + app.directives/  app相关的directive

  + test/      测试代码根目录

    + lib/       测试用到的库

      + jasmine-2.4.1/    放jasmine库

      + angular/          放angular-mock等依赖项

    + spec/      测试用例

    SpecRunner.html  测试运行器页面

 

【注1】Jasmine库具体是怎样文件呢?请后参考资料:2. Jasmine独立包下载页面: https://github.com/jasmine/jasmine/releases

【注2】测试运营器页面 SpecRunner.html 也足以效仿
Jasmine库的演示来写,例如:

    <!-- jasmine -->
    <link rel="shortcut icon" type="image/png" href="lib/jasmine-2.4.1/jasmine_favicon.png">
    <link rel="stylesheet" href="lib/jasmine-2.4.1/jasmine.css">
    <script src="lib/jasmine-2.4.1/jasmine.js"></script>
    <script src="lib/jasmine-2.4.1/jasmine-html.js"></script>
    <script src="lib/jasmine-2.4.1/boot.js"></script>

    <!-- angular -->
    <script src="../lib/ionic/js/ionic.bundle.js"></script>
    <script src="lib/angular/angular-mocks.js"></script>

    <title>测试运行器</title>

    <!-- 被测源码 -->
    <script src="../app.services/constService.js"></script>

    <!-- 测试用例 -->
    <script src="spec/app.services/constServiceSpec.js"></script>

【注3】test目录不需求出现在终极包装后的Android
apk中,所以要铲除掉,方法如下:

  找到cordova工程中platforms\android\ant.properties文件,添加一句:

aapt.ignore.assets=&lt;dir&gt;test:

相当于:

aapt.ignore.assets=<dir>test:

 

 

二、测试Service

假若www/app.services/目录下有个constService.js文件:

angular.module("app.services").service("constService", function(){

  this.one = 1;

});

 

今昔编写制定测试Spec,文件名为constServiceSpec.js,位于www/test/spec/app.services/目录,内容如下:

describe("constService", function () {
    var out;                                     // 被测对象
    beforeEach(function () {
        module('app.services');                 // 导入模块
     inject(function (constService) {        // 注入依赖
          out = constService;                   // 关联被测对象实例
    }));

    it("one == 1", function () {
        expect(out.one).toEqual(1);
    });
});        

 

接下来在 SpecRunner.html中添加该Spec文件的引用:

    <!-- 测试用例 -->
    <script src="spec/app.services/constServiceSpec.js"></script>

 

说到底运营SpecRunner.html即可,输出如下:

图片 1

 

三、测试Controller

待续…

 

参考资料:

  1. Jasmine官网:
    http://jasmine.github.io/
  2. Jasmine独立包下载页面: https://github.com/jasmine/jasmine/releases
  3. Unit Testing in AngularJS:
    Services, Controllers &
    Providers
  4. Mocking Dependencies in AngularJS
    Tests
  5. Unit Testing Services in AngularJS for Fun and for
    Profit

 

相关文章