为什么我在测试没有 AJAX 关联调用的 angular 指令时收到意外请求错误？

Question

我正在尝试测试一个（简单的）指令来验证文本字段以查看输入的值是否小于另一个控制器的变量最大值。

这是我的错误：

IE 11.0.0 (Windows 7) Maximum value validator should be valid initially FAILED
    Error: Unexpected request: GET app/layout/shell.html
    No more request expected
       at $httpBackend (C:/Projects/myProj/myProj/scripts/angular-mocks.js:1218:5)
       at sendReq (C:/Projects/myProj/myProj/scripts/angular.js:9462:9)
       at serverRequest (C:/Projects/myProj/myProj/scripts/angular.js:9179:9)
       at processQueue (C:/Projects/myProj/myProj/scripts/angular.js:12914:11)
       at Anonymous function (C:/Projects/myProj/myProj/scripts/angular.js:12930:27)
       at Scope.prototype.$eval (C:/Projects/myProj/myProj/scripts/angular.js:14123:9)
       at Scope.prototype.$digest (C:/Projects/myProj/myProj/scripts/angular.js:13939:15)
       at Anonymous function (C:/Projects/myProj/myProj.test/directiveTests.js:11:3)
       at invoke (C:/Projects/myProj/myProj/scripts/angular.js:4152:7)
       at workFn (C:/Projects/myProj/myProj/scripts/angular-mocks.js:2255:11)

因此环顾四周，这似乎与未设置 AJAX 呼叫有关。除了，正如您在下面看到的，我的指令根本没有任何关联的服务调用。另外，为什么它要尝试对 shell html 文件发出 GET 请求？那是从哪里来的？

到目前为止，我只编写了几个测试，因为我刚刚开始这个项目，但我的其他测试工作得很好。我是运行业力如果这可能有所作为。不过，我很难过，因为我的测试看起来像那里的示例测试。如果我调试通过，在测试结束时一切似乎都很好，但在测试完成后我收到错误并且测试失败并出现此错误。

OK代码时间。

我的指令：

(function() {
'use strict';

var app = angular.module('app');
app.directive('maxValue', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, ele, attrs, ctrl) {
            ctrl.$parsers.unshift(function(value) {
                var valid;
                if (value) {
                    var maxValue = scope.$eval(attrs.maxValue);
                    valid = parseInt(value, 10) <= maxValue;
                }
                return valid ? valid : undefined;
            });
        }
    };
});
})();

和我的测试：

describe("Maximum value validator", function() {
var $scope, form;

beforeEach(module('app'));

beforeEach(inject(function($compile, $rootScope) {
    var element = angular.element('<form name="form"><input type="text" name="value" ng-model="value" max-value="maxValue" /></form>');
    $scope = $rootScope;
    $scope.value = 0;
    $scope.maxValue = 100;
    $compile(element)($scope);
    $scope.$digest();
}));

it('should be valid initially', function () {
    expect($scope.form.value.$valid).toBe(true);
});

it('should be valid when value is the same as the max value', function() {
    $scope.form.value.$setViewValue('100');
    expect($scope.form.value.$valid).toBe(true);
});

it('should be invalid when the value is greater than the max value', function() {
    $scope.form.value.$setViewValue('101');
    expect($scope.form.value.$valid).toBe(false);
});
});

Answer 1

@rball 和我得出的结论是以下修复了 "module not found" 错误：

var mod = angular.module('uiRouterNoop', []); 
mod.service('$state', function () { 
    return {} 
});
mod.service('$urlRouter', function () { 
    return {}; 
});

然后在规范中

beforeEach(module('uiRouterNoop'));

angular 在需要的地方分离模块是一个重要的做法。大多数 SPA 将每个模块都绑定到同一个模块，例如 'app'。但是为了这些测试目的将它们分开是很好的，并且可以防止由于复杂的模拟场景而在测试时出现依赖性问题。

为什么我在测试没有 AJAX 关联调用的 angular 指令时收到意外请求错误？

Why am I getting an Unexpected request error when testing an angular directive with no AJAX calls associated with it?

angularjs-directive

karma-jasmine