13

我是 Jasmine/AngularJS 单元测试新手。我创建了一个简单的 Angular 应用程序来添加两个数字，以便我可以学习如何为 Angular 应用程序编写单元测试。关于单元测试的Angular 文档不完整。根据博客和堆栈溢出答案，我构建了我的第一个测试，但遇到了“注入器”未定义错误。我正在使用 Jasmine 框架进行单元测试。
HTML

<body>
<div ng-controller="additionCtrl">
    First Number: <input ng-model="NumberOne"/><br/>
    Second Number: <input ng-model="NumberTwo"/>
    <button ng-click="add(NumberOne, NumberTwo)">Add</button><br/>
    Result: {{Result}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src="Scripts/additionCtrl.js"></script>
</body>

控制器：

function additionCtrl($scope) {
$scope.NumberOne = 0;
$scope.NumberTwo = 0;
$scope.Result = 0;
$scope.add = function (a, b) {
};
}

茉莉花规格文件。

describe("Addition", function () {
var $scope, ctrl;

beforeEach(inject(function ($rootScope, $controller) {
    this.scope = $rootScope.$new();
    ctrl = $controller('additionCtrl', {
       $scope: this.scope 
    });
}));

it("should add two integer numbers.", inject(function ($controller) {        
    expect(ctrl.add(2, 3)).toEqual(5);
}));
});

Specrunner.html

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
  <script type="text/javascript" src="lib/angular-mocks.js"></script>
  <script type="text/javascript" src="lib/jasmine-1.3.1/jasmine.js"></script>
  <script type="text/javascript" src="lib/jasmine-1.3.1/jasmine-html.js"></script>

  <!-- include source files here... -->
  <script type="text/javascript" src="../App/Scripts/additionCtrl.js"></script>

  <!-- include spec files here... -->
  <script type="text/javascript" src="spec/addition.spec.js"></script>

这是一个失败的测试，一旦测试以预期的结果失败，那么我可以修改代码以使其通过，但我面临的问题是，角度模拟没有得到注入器。
我看到了一个例子，我可以更新控制器而不是使用注入器，但我想尝试学习使用注入器，以便设置更复杂的测试。
我可能在这里遗漏了一些简单的东西。请指导我写我可能错过的任何文章。
谢谢

4

2 回答 2

11

发现问题了，我用来访问 angular-mock 的 url 是错误的。我将其更改为“ http://code.angularjs.org/1.0.6/angular-mocks.js ”并将脚本标签的顺序更改为

<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine-html.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.0.6/angular-mocks.js"></script>

现在它在方法上失败了，因为它应该是。

于 2013-04-11T19:51:51.503 回答
11

供将来参考，这里有一个带有完整单元测试设置的 Plunker（对于我即将发布的问题的答案）

http://plnkr.co/edit/KZGKM6

使此设置可用于共享测试场景很有用。

于 2013-04-11T20:05:07.940 回答