【angularjs】自动化测试流程

目录结构:

首先我们来看一下一个project创建好之后,整个工程的目录结构:

web目录结构.png

其中工具会自动生成test目录,其中放置对controllers的单元测试代码,main.js和about.js都是自动生成的。一般情况下,app/scripts/controllers下的每个文件都对应一个测试代码。

代码逻辑:

业务代码:

/**
 * Created by jrzhaoxueyong on 2017/3/8.
 */
'use strict';

angular.module('webApp')
  .controller('LoginCtrl', function ($rootScope, $location, $scope, AuthService) {
    $scope.loginUser = function (credentials) {
      $scope.credentials = {
        username : '',
        password : ''
      };
      console.log('login:', credentials);
      AuthService.login(credentials);
      $location.path('/natgw')
    };

    $rootScope.isUserAuthenticated = function () {
      return AuthService.isAuthenticated();
    }
  });

测试代码:

'use strict';

describe('Controller: LoginCtrl', function () {

  // load the controller's module
  beforeEach(module('webApp'));

  it('should have a method to check user is authenticated', function () {
    // Initialize the controller and a mock scope
    inject(function ($controller, $rootScope, $location) {
      var scope = $rootScope.$new();
      var authService = {
        isAuthenticated: function () {
          return true;
        }
      };
      $controller('LoginCtrl', {
        $scope: scope,
        // place here mocked dependencies
        AuthService: authService,
        $rootScope: $rootScope,
        $location: $location
      });
      expect($rootScope.isUserAuthenticated()).toBe(true);
    });
  });
});

上述是最简单的测试套,针对Controller做相关测试其他如DirectivesFiltersFactories可以参考文章结尾的参考资料。代码样例是验证isUserAuthenticated方法的。下面对这段代码做一个解剖:

  • describe属性:

    describe参数是一个全局的Jasmine方法,定义了一个测试套。其中有两个参数:一个字符串表示这个测试套的标题;一个函数是实现这个测试套的具体代码块。

    describe("A Test Suite", function() {
    })
    
  • beforeEach属性:

    主要用来设置测试套的前置规则,相当于setup,与afterEach作用相似,afterEach作用于teardown相似。

    beforeEach(module('webApp')); //module即加载了webApp模块
    
  • it属性:

    一般一个it对应一个用例可以包含一个或多个expect方法,it有两个入参,第一个字符串表示这个用例的标题,第二个函数是这个用例的具体实现。

    it('should have a method to check user is authenticated', function () {
      });
    
  • inject属性:

    打桩一些参数和方法,比如业务代码中需要$scope$rootScope$locationAuthService四个入参,其中需要对AuthService进行打桩,因为这是自定义Service,此外$scope是局部参数,这里需要从$rootScope生成。其他两个参数都是全局参数,且不涉及自定义的属性。

    var scope = $rootScope.$new();
    var authService = {
      isAuthenticated: function () {
        return true;
      }
    };
    
  • $controller属性:

    这个属性很重要,它用来实例化controller,并把自己定义好的桩函数传递进去。这样后续expect就能得到想要的结果了。

    $controller('LoginCtrl', {
      $scope: scope,
      // place here mocked dependencies
      AuthService: authService,
      $rootScope: $rootScope,
      $location: $location
    });
    
  • expect属性:

    主要的测试函数,执行一个表达式,并对结果做验证。其中,验证的方法包括这里用到的toBetoEqualtoContaintoMatchtoBeDefined等。

    expect($rootScope.isUserAuthenticated()).toBe(true);
    

执行用例:

至此,整个测试用例就写完了,下面看看运行结果:

Controller\web> grunt test
测试结果.png

参考资料:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,440评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,814评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,427评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,710评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,625评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,014评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,511评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,162评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,311评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,262评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,278评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,989评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,583评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,664评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,904评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,274评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,856评论 2 339

推荐阅读更多精彩内容

  • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
    200813阅读 1,580评论 0 3
  • Angular面试题 一、ng-show/ng-hide与ng-if的区别? 第一点区别是,ng-if在后面表达式...
    w_zhuan阅读 5,504评论 0 26
  • AngularJS是什么 AngularJS的官方文档这样介绍它: 完全使用JavaScript编写的客户端技术。...
    oWSQo阅读 1,303评论 0 10
  • 通过AngularJS仿豆瓣一刻的案例:https://github.com/zhongxiaolian/doub...
    中小恋阅读 1,747评论 1 21
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,561评论 18 139