【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

参考资料:

推荐阅读更多精彩内容

  • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
    200813阅读 1,119评论 0 3
  • Angular面试题 一、ng-show/ng-hide与ng-if的区别? 第一点区别是,ng-if在后面表达式...
    w_zhuan阅读 4,963评论 0 26
  • AngularJS是什么 AngularJS的官方文档这样介绍它: 完全使用JavaScript编写的客户端技术。...
    oWSQo阅读 1,013评论 0 10
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 121,995评论 17 134
  • 模具工程内部衔接钳工,发号指令。外部对接项目与客户,接收任务。它是模具部的一个枢纽,也如整个模房作战指挥部。 那么...
    止戈魏阅读 215评论 0 0