http://blog.csdn.net/u010730126/article/details/51082068

目录(?)[+]

欢迎大家到我的博客查看对应内容,并关注我学习Ionic 1和Ionic 2的历程,共同学习,共同进步。

代码测试的必要性,对任何编程语言都毋需赘述,JavaScript和HTML自然不例外。本文描述如何对Ionic进行单元测试(Unit Tests)。

对于测试环境而言,目前框架很多,本文使用的是Karma,尤其是其本身就为Angular而生,故能够与Angular完美集成。 
对于测试用例而言,框架也有很多,本文使用的是Jasmine

本文工程基于ionic#1.2.4的tabs工程模板进行测试(angular#1.4.3),但是为了更加符合Angular 1编码规范,对工程的目录结构及代码的风格结构做了相应变化,大家可先熟悉源码后,再参照下文观看。

单元测试(Unit Tests)

单元测试,即Unit Tests,顾名思义,旨在测试代码中的某段独立功能。

安装测试环境

我们需要使用KarmaJasmine以及angular-mocks

$ npm install karma --save-dev
$ npm install karma-jasmine --save-dev
   
   
  • 1
  • 2
  • 1
  • 2

注意:angular-mocks的版本必须与ionic使用的angular版本相同,否则可能会出现如下错误:

Failed to instantiate module ngMock... Unknown provider: $$rAFProvider
   
   
  • 1
  • 1

本文使用的是ionic#1.2.4,其angular版本为1.4.3,故需安装angular-mocks#1.4.3:

$ bower install angular-mocks#1.4.3 --save-dev
   
   
  • 1
  • 1

为了方便地在终端中使用karma进行测试,需要安装Karma CLI:

$ npm install -g karma-cli
   
   
  • 1
  • 1

注意:类Unix系统可能需要使用suodo

$ sudo npm install -g karma-cli
   
   
  • 1
  • 1

最后,我们需要使用一种浏览器作为我们单元测试的载体,Karma支持大多数主流浏览器。这里我们使用最流行的PhantomJS

$ npm install karma-phantomjs-launcher --save-dev
   
   
  • 1
  • 1

当然,可以使用别的浏览器,只需安装karma-*-launcher即可,如:

$ npm install karma-chrome-launcher --save-dev
$ npm install karma-firefox-launcher --save-dev
...
   
   
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

配置测试环境

进行编写测试用例之前,首先需要进行测试环境的配置:

$ karma init karma.conf.js
   
   
  • 1
  • 1

执行这条语句后,终端中会依次询问各项的配置信息,可以全部回车使用其默认值,待karma.conf.js生成后,再进行手动修改: 
打开karma.conf.js,找到browsers选项,将其值修改为PhantomJS

browsers: ['PhantomJS']
   
   
  • 1
  • 1

找到files选项,根据自己的工程文件结构做出相应修改,如根据我的目录结构,其值应该类似于:

files: [
      'www/lib/ionic/js/ionic.bundle.js',
      'www/lib/angular-mocks/angular-mocks.js',
      'www/js/*.js',
      'www/views/**/*.js'
    ]
   
   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

注意:要注意js的加载顺序,ionic.bundle.js集成了ionic和angular的相关文件,需要加载于普通工程js文件之前;同理,angular-mocks.js是测试用例的先决条件,故需要加载于测试用例js文件之前。读者需要根据自身工程结构进行相应修改,如本文工程将单元测试用例js文件置于普通工程js文件一起,故使用www/views/**/*.js即可代表他们。

编写测试用例

测试Controller

我们以Chats页面的controller为例,编写测试用例,命名为tab-chats.controller.spec.js

(function () {
    'use strict';
    describe('ChatsCtrl', function () {
        var scopeMock,
            ChatsServiceMock,
            controller;

        beforeEach(module('starter'));
        beforeEach(inject(function ($rootScope, $controller, _ChatsService_) {
            scopeMock = $rootScope.$new();
            ChatsServiceMock = _ChatsService_;
            controller = $controller('ChatsCtrl', {'$scope': scopeMock, 'ChatsService': ChatsServiceMock});
        }));

        it('should have scopeMock defined', function () {
            expect(scopeMock).toBeDefined();
        });

        it('should get an instance of ChatsService', function () {
            expect(ChatsServiceMock).toBeDefined();
        });

        it('should delete a person in chats', function () {
            var chat = {
                id: 0,
                name: 'Ben Sparrow',
                lastText: 'You on your way?',
                face: 'img/ben.png'
            };
            scopeMock.remove(chat);
            expect(ChatsServiceMock.all().length).toBe(4);
            expect(scopeMock.chats.length).toBe(4);
        });
    });
})();
   
   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

说明:

1.首先使用module方法(angular-mocks.js提供)加载工程module,而且将其置于beforeEach方法(jasmine提供)中,能够保证其能够在测试用例执行之前被首先执行。 
2.然后我们使用inject方法插入了一些必要模块:  $rootScope用来实例化scope对象; $controller用来实例化controller。 
3.$controller方法接收两个参数,第一个参数为要实例化的controller的名称,第二个参数为此controller的依赖列表。 
4.测试用例也是编程,若对其语法不了解,首先需要熟悉Jasmine

执行测试:

$ karma start karma.conf.js
   
   
  • 1
  • 1

describe方法使得我们可以组合多个测试,it方法定义了实际的测试用例,注意他们的第一个参数都是说明性文字,即自述性,这样就为测试的调试提供了极大的便利,expect方法处于it方法之间,用于测试各功能点是否按照我们的预期那样执行。每个it方法中可使用任意多个expect方法,不过要酌情处理,否则不易于排错。

测试Service

我们以Chats页面的service为例,编写测试用例,命名为tab-chats.service.spec.js

(function () {
    'use strict';
    describe('ChatsService', function () {
        var ChatsService;
        beforeEach(module('starter'));

        beforeEach(inject(function (_ChatsService_) {
            ChatsService = _ChatsService_;
        }));

        it('can get an instance of ChatsService', function () {
            expect(ChatsService).toBeDefined();
        });

        it('should has 5 chats', function () {
            expect(ChatsService.all().length).toBe(5);
        });

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

            expect(ChatsService.get(1)).toEqual(friend);
        });
    });
})();
   
   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

执行测试:

$ karma start karma.conf.js
   
   
  • 1
  • 1

源码可在Github上找到。

参考文档:  
ionic工程组织文件 
Angular Unit Tests 
unit-testing-ionic-app 
write-automated-unit-tests 
ionic单元测试

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值