在 angularjs 中测试 $scope 变量

Question

我有一段 angular 代码如下：

$scope.someFunction = function(){
   $scope.val = $scope.value2.length;
}

我想测试上面的代码，为此我正在做如下的事情：

describe('test that', function() {
    beforeEach(module('waldo'));
    describe('MainController', function () {
        var $scope, createController;

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

            createController = function (value2) {
                return $controller('MainController', {
                     $scope: $scope,
                     value2: value2
                });
            };
        }));

        it('exists', function () {
            var value2 = ["google", "yahoo"];
            var controller = createController(value2);
            expect(controller).not.toBeNull();
            $scope.val = 10;
            $scope.someFunction();
            assert.equal($scope.val, value2.length);      
        });
    });
});

我收到如下错误：

TypeError: Cannot read property 'length' of undefined
        at Scope.MainController.$scope.someFunction (absolute/home/guru/app/controllers/MainController.js?131fd944e9e94b3a4ee4eb524e48e17a87dd4820:43:51)

Answer 1

createController = function (value2) {
    $scope.value2 =  value2;
    return $controller('MainController', {
         $scope: $scope
    });
};

Answer 2

每个 Angular 控制器都有一个关联的 $scope 对象。

  angular.module('formExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.master = {};

      $scope.update = function(user) {
        $scope.master = angular.copy(user);
      };

      $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
      };

      $scope.reset();
    }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="formExample">
<div ng-controller="ExampleController">
  <form novalidate class="simple-form">
    Name: <input type="text" ng-model="user.name" /><br />
    E-mail: <input type="email" ng-model="user.email" /><br />
    Gender: <input type="radio" ng-model="user.gender" value="male" />male
    <input type="radio" ng-model="user.gender" value="female" />female<br />
    <input type="button" ng-click="reset()" value="Reset" />
    <input type="submit" ng-click="update(user)" value="Save" />
  </form>
  <pre>user = {{user | json}}</pre>
  <pre>master = {{master | json}}</pre>
</div>
</body>

参考： https://docs.angularjs.org/guide/forms

在 angularjs 中测试 $scope 变量

Testing $scope variables in angularjs

javascript

angularjs

karma-runner

karma-mocha