为什么在将 Jasmine 与 Angular 一起使用时会出现“注入”未定义错误？答案

【问题标题】：why do I get 'inject' undefined error when using Jasmine with Angular?为什么在将 Jasmine 与 Angular 一起使用时会出现“注入”未定义错误？
【发布时间】：2013-04-04 03:28:02
【问题描述】：

我是 Jasmine/AngularJS 单元测试新手。我创建了一个简单的 Angular 应用程序来添加两个数字，以便我可以学习如何为 Angular 应用程序编写单元测试。 Angular Doc on unit test is incomplete.基于博客和堆栈溢出的答案，我构建了我的第一个测试，我遇到了“注入器”未定义的错误。我正在使用 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>

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

【问题讨论】：

标签： angularjs jasmine

【解决方案1】：

发现问题了，我用来访问 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>

现在它在方法上失败了。

【讨论】：

对于 AngularJS 1.2.5，angular-mocks.js 可以作为托管库在这里ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-mocks.js，因此，无需使用 code.angularjs.org 网站。

【解决方案2】：

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

http://plnkr.co/edit/KZGKM6

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

【讨论】：

这是我一直在寻找的东西 :)