文档章节

Ionic 单元测试

点岩喵
 点岩喵
发布于 2015/12/22 18:59
字数 928
阅读 100
收藏 0

1 简介

    Ionic 基于AngularJS ,所以可以使用angularJS 的单元测试工具来进行Ionic 的单元测试。

    首先,我们先了解下这几个工具的用途,当然,在https://docs.angularjs.org/guide/unit-testing, 官方文档有详细的说明。

Karma:Karma是一个JS命令行工具,可以创建一个服务来运行你的代码和执行你的单元测试。通过配置Karma,可以在不同浏览器上执行。(这里意思是在浏览器上执行,但是测试结果是在命令行中显示),若是程序需要兼容不同的浏览器,都可以通过配置来测试。Karma 是一个NodeJS 程序,所以必须先安装npm 。

Jasmine :

   它是最受欢迎的Angular测试框架,提供方法去帮助你构建你的测试和作出断言,随着测试程序的增加,Jasmine可以帮助你保持良好的结构和记录。

使用describe 方法构建测试程序。

describe('test my app',function(){
//单个测试程序
})

每个测试都写在it 方法内

describe('test my app', function() {
  it('first test', function() {
    // 测试断言
  });});

最后,通过匹配toEqual 来作出断言。

describe('test my app', function() {
  it('first test', function() {
  var users = ['jack', 'igor', 'jeff'];
    var sorted = sortUsers(users);
    expect(sorted).toEqual(['jeff', 'jack', 'igor']);
  });});

angular-mocks

 Angular 提供了ngMock 模块,可以模拟你的测试。

2 安装工具

 首先,我们先建立一个ionic 的工程并进入工程目录,执行命令。

ionic start  ionicTest 
cd ionicTest

 安装karma ,karma-jasmine, angular-mocks ,(注:--save-dev 自动添加模块和版本号)

npm install karma --save-dev
npm install karma-jasmine --save-dev
bower install angular-mocks --save-dev

创建测试文件

在工程目录下 新建文件夹 tests,并生成一个测试配置文件test.conf.js

md tests
karma init test.conf.js

生成的test.conf.js中需要自己配置关联文件。 files[]中要加入js的文件路径。

// Karma configuration
// Generated on Tue Dec 22 2015 17:07:44 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
    //此处需要自己配置,添加angular angular-mocks 自己的js代码路径,测试代码路径
    files: [
      '../www/lib/angular/angular.js',
      '../www/js/*.js',
      '../www/lib/angular-mocks/angular-mocks.js',
      '**/*tests.js'
    ],


    // list of files 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'],
    //browsers: ['PhantomJS'],

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultanous
    concurrency: Infinity
  })
}

    现在来编写测试代码,在tests文件下建立Controllers文件夹,创建一个controllers.test.js来测试controllers.js 的下面一段代码

.controller('AccountCtrl', function($scope) {
  $scope.settings = {
    enableFriends: true
  };
});

测试代码controllers.test.js内容如下

describe('Controllers', function () {
  var scope;
  beforeEach(module('starter.controllers'));
  beforeEach(inject(function ($rootScope,$controller) {
    scope=$rootScope.$new();
    $controller('AccountCtrl',{$scope:scope})
  }));
  it('should have enableed', function () {
    expect(scope.settings.enableFriends).toEqual(true);
  })
})

返回到test.conf.js文件所在的目录并执行命令

karma start test.conf.js

执行后chrome浏览器会自动启动。会在命令行中显示

Chrome :Executed 1 of 1 SUCCESS <0 secs/0.025 second>

表示你的测试通过了。

若是更改controllers.test.js的测试程序,将

toEqual(true)改为toEqual(false)

执行命令后,则会显示

Chrome :Executed 1 of 1 <1 FAILED> <0 secs/0.025 second>

表示你的测试不通过。

3总结

这里只是简单的一个ionic的单元测试,和AngularJS大同小异。官方文档还提供了其他方法的Jasmin的写法。

© 著作权归作者所有

点岩喵
粉丝 1
博文 21
码字总数 9566
作品 0
西安
程序员
私信 提问
使用 Angular2 和 Ionic3 开发 iOS 应用

使用 Angular2 和 Ionic3 开发 iOS 应用 虞 里杉 2018 年 1 月 10 日发布 从 Angular1 到 Angular2 Angular2 作为著名前端 MVVM 架构 Angular1 的继承者,从一定程度上说,引领了新一代 Web ...

虞 里杉
2018/01/10
0
0
ionic4+vue+cordova开发混合应用

摘要 ionic是可以让我们使用web开发即使来移动应用的框架。ionic4之前,ionic只能和angular搭配使用,ionic4后把ionic抽离成四个版本,@ionic/core,@ionic/angular,@ionic/react,@ionic/...

论前端搬砖工的自我修养
04/17
0
0
(2)ionic2--初体验

所有这一切都是在node环境下完成的,所有你需要先安装node,百度google,哪个喜欢用哪个 安装ionic2 因为还没有发布,现在的版本叫做alpha,这个版本的ionic有好多新特性,最刺激的是它完全集成了m...

boogoogle
2015/12/01
1K
0
Windows 下 bat 自动打包 ionic ,但 ionic 执行完不会返回继续执行 

Windows 下 bat 自动打包 ionic ,但 ionic 执行完不会返回继续执行 我把步骤放在 bat 里 然后执行。 但是 ionic 执行完,并不会退回 cmd ,继续后续步骤。 比如: ionic start -a 测试应用名...

wkl17
2017/02/16
301
0
ionic 第一个APP示例

因为项目主要方向是信息系统,APP开发对于我们来说属于辅助性质的,并不是核心业务。所以一直采用APICLOUD平台进行手机端应用的开发。一直以来感觉也挺好,简单上手快。 今年以来项目规模扩大...

雷斯林
2016/11/30
219
0

没有更多内容

加载失败,请刷新页面

加载更多

Qt程序打包发布方法(使用官方提供的windeployqt工具)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/toTheUnknown/article/details/81748179 如果使用到了Qt ...

shzwork
31分钟前
4
0
MainThreadSupport

MainThreadSupport EventBus 3.0 中的代码片段. org.greenrobot.eventbus.MainThreadSupport 定义一个接口,并给出默认实现类. 调用者可以在EventBus的构建者中替换该实现. public interface ...

马湖村第九后羿
51分钟前
3
0
指定要使用的形状来代替文字的显示

控制手机键盘弹出的功能只能在ios上实现,安卓是实现不了的,所以安卓只能使用type类型来控制键盘类型,例如你要弹出数字键盘就使用type="number",如果要弹出电话键盘就使用type="tel",但这...

前端老手
今天
6
0
总结:Raft协议

一、Raft协议是什么? 分布式一致性算法。即解决分布式系统中各个副本数据一致性问题。 二、Raft的日志广播过程 发送日志到所有Followers(Raft中将非Leader节点称为Follower)。 Followers收...

浮躁的码农
今天
7
0
Flask-admin Model View字段介绍

Model View字段介绍 can_create = True 是否可以创建can_edit = True 是否可以编辑can_delete = True 是否可以删除list_template = 'admin/model/list.html' 修改显......

dillonxiao
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部