AngularJS 单元测试。 HttpBackend

Question

我有包含单元测试的 AngularJS 应用程序。我在检查用户身份验证的应用程序的 .run 部分中又添加了一个 http 请求。现在大约 60% 的测试失败了，因为他们发现了“意外的 http 请求”。甚至指令测试也失败了。如何避免在测试中运行此请求？如何在所有测试中轻松模拟此请求？我尽量不放httpBackend.expect('GET', 'URL')对每个测试 - 这是太多的工作。

使用 Jasmine + Karma 进行测试

谢谢。如果需要，我可以提供更多详细信息。

Answer 1

有几种方法可以做到这一点:

1.) 包括 Tim Castelijns 建议的 beforeEach，但对于每个规范文件
2.) 将 beforeEach 包含在一个名为 app-mocks.js 的单独文件中并包含在你的 karma.conf.js 中(我猜你有一个)。

业力.conf.js

files: [
    'location/of/app-mocks.js',
    'src/app/**/*.js'
],

应用程序-mocks.js

(function () {
    'use strict';

    beforeEach(inject(function ($httpBackend) {
        $httpBackend.whenGET('blahblahblah.com/cat/:id/food').respond('');
    }));
})();

3.) 将用户身份验证逻辑从核心应用程序中分离出来，并创建一个 $http 包装服务( 建议 )。因此，您可以拥有(简化示例):

应用程序.js

angular.module('myApp', ['myApp.services']);

用户服务.js

angular.module('myApp.services', [])
    .factory('User', function ($http) {
        function authenticate() {
            // authenticate user
        }

        return {
            authenticate: authenticate
        };
    });

对于您的指令、 Controller 等也是如此。这样，您可以单独对所有组件进行单元测试，而不必担心实际上特定于一种功能的相互交织的逻辑。另外，当您 做测试核心应用程序功能，您可以模拟或监视您的用户服务。在您的规范文件中，您将只注入(inject)您正在测试的模块和功能。因此，您无需注入(inject)整个核心应用程序模块，而是:

测试服务

beforeEach(module('myApp.services'));

测试指令

beforeEach(module('myApp.directives'));

等等

注意:当您的应用程序开始变大时，我会考虑根据功能而不是像上面的示例那样按类型来组织您的应用程序组件。