如何使用茉莉花在angularJS中為控制器編寫測試用例

Question

我在單獨的文件userModule.js中有一個角度模塊

'use strict';
angular.module('users', ['ngRoute','angular-growl','textAngular','ngMaterial','ngMessages','ngImgCrop','ngFileUpload'])
.run(function ($rootScope, $location, $http) {
    $http.get('/token')
        .success(function (user, status) {
        if (user) {
            $rootScope.user = user;
        }
    });
})

我在使用此模塊的另一個文件中有一個控制器：

userController.js

'use strict';
var usersApp = angular.module('users');

usersApp.controller('usersControllerMain', ['$scope', '$http', '$routeParams','$location', 'growl','$rootScope','$mdDialog','API',
  function($scope, $http, $routeParams, $location,growl,$rootScope,$mdDialog,API) {
    $scope.action = "none";
    $scope.password = '',
    $scope.grade = function() {
      var size = $scope.password.length;
      if (size > 8) {
        $scope.strength = 'strong';
      } else if (size > 3) {
        $scope.strength = 'medium';
      } else {
        $scope.strength = 'weak';
      }
    };

我在控制器中為其他用途定義了一些依賴項。

現在我需要測試這個控制器。 所以我寫了一個規范文件，我將直接在瀏覽器中運行。 我不想使用像業力這樣的測試跑步者： jasmine.html

<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine-html.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/boot.js"></script>
    <script type="text/javascript" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <script type="text/javascript" src="https://code.angularjs.org/1.4.8/angular-mocks.js"></script>
    <script type="text/javascript">
    describe('userControllerMain testing', function(){

      beforeEach(angular.mock.module('users'));

      var $controller;

      beforeEach(angular.mock.inject(function(_$controller_){
            $controller = _$controller_;
        }));
          describe('$scope.grade', function() {
            it('sets the strength to "strong" if the password length is >8 chars', function() {
                var $scope = {};
                var controller = $controller('usersControllerMain', { $scope: $scope });
                $scope.password = 'longerthaneightchars';
                $scope.grade();
                expect($scope.strength).toEqual('strong');
            });
          });
        });
    </script>
</head>
<body>
</body>
</html>

我從angular docs那里得到了這個例子。 但是，當我在瀏覽器中運行jasmine.html時，它會拋出一個注入器模塊錯誤，如下所示： 。 我在這里做錯什么了嗎？

Answer 1

您在此處采用的方法存在嚴重錯誤。 您應該在beforeEach塊而不是it塊中beforeEach控制器。

因此，這就是您的測試文件應為：

describe('userControllerMain testing', function(){
    beforeEach(module('users'));

    beforeEach(inject(function($controller, $rootScope) {
        $scope = $rootScope.$new();

        usersControllerMain = $controller('usersControllerMain', {
            $scope: $scope
        });
    }));

    describe('$scope.grade', function() {
        it('sets the strength to "strong" if the password length is >8 chars', function() {
            $scope.password = 'longerthaneightchars';
            $scope.grade();
            expect($scope.strength).toEqual('strong');
        });
    });
});

希望這可以幫助。

如何使用茉莉花在angularJS中為控制器編寫測試用例

問題描述

1 個解決方案

解決方案1
0 已采納 2016-09-22 08:48:31

如何使用茉莉花在angularJS中為控制器編寫測試用例

問題描述

1 個解決方案

解決方案1 0 已采納 2016-09-22 08:48:31

解決方案1
0 已采納 2016-09-22 08:48:31