karma + jasmine + angular + http GET 在每个测试中

Question

作为应用引导程序的一部分，它通过一系列 HTTP GET 来加载资产。

如果我不考虑获取，我的单元测试将抛出“意外的 GET 请求”。问题是我必须在每个测试中包含 GET。下面大约有十几个。

$httpBackend.when('GET', 'assets/iconsets/action-icons.svg').respond('ok');

我的问题是；有没有更好的全局方法来在一个地方解释 GET 并将该调用包含在我的所有测试中？

编辑：

下面是我必须包含在每个规范文件中的整个假设块。我宁愿在某个地方声明这个块一次，可能是全局代码可以执行的地方。

$httpBackend.when('GET', 'assets/iconsets/action-icons.svg').respond('ok');
$httpBackend.when('GET', 'assets/iconsets/alert-icons.svg').respond('ok');
$httpBackend.when('GET', 'assets/iconsets/av-icons.svg').respond('ok');
$httpBackend.when('GET', 'assets/iconsets/communication-icons.svg').respond('ok');
$httpBackend.when('GET', 'assets/iconsets/content-icons.svg').respond('ok');
$httpBackend.when('GET', 'assets/iconsets/device-icons.svg').respond('ok');
$httpBackend.when('GET', 'assets/iconsets/editor-icons.svg').respond('ok');
$httpBackend.when('GET', 'assets/iconsets/file-icons.svg').respond('ok');
$httpBackend.when('GET', 'assets/iconsets/hardware-icons.svg').respond('ok');
$httpBackend.when('GET', 'assets/iconsets/image-icons.svg').respond('ok');
$httpBackend.when('GET', 'assets/iconsets/maps-icons.svg').respond('ok');
$httpBackend.when('GET', 'assets/iconsets/mdi-icons.svg').respond('ok');
$httpBackend.when('GET', 'assets/iconsets/navigation-icons.svg').respond('ok');
$httpBackend.when('GET', 'assets/iconsets/notification-icons.svg').respond('ok');
$httpBackend.when('GET', 'assets/iconsets/social.svg').respond('ok');
$httpBackend.when('GET', 'assets/iconsets/social-icons.svg').respond('ok');
$httpBackend.when('GET', 'assets/iconsets/toggle-icons.svg').respond('ok');
$httpBackend.when('GET', 'assets/iconsets/editor-icons.svg').respond('ok');

Answer 1

$httpBackend.when 接受一个函数作为 url 部分，如 api 文档 here 中所述，因此如果您不介意将其放在每个规范的顶部，您可以这样做：

$httpBackend.when('GET', function(url){
   //do your custom evaluations here (or just return true for everything...)
   if(url_is_like_any_of_yours){
     return true;
   }
}).respond('ok');

如果你想让它全局化，另一个选择是你可以使用装饰器直接拦截 $http 调用。在我的示例中，其 url 在列表中的每个 $http.get 调用都将返回文本“ok”。您可以将此文件包含在您的 karma.conf 中，就像它是一个规范一样，它应该为每个测试运行。

angular.module('app').config(function($provide) {
    $provide.decorator('$http', function($delegate, $injector) {
        var originalGet = $delegate.get;
        //override the get function of $http and return a resolved promise
        $delegate.get = function(url, config) {
            var ignoreUrls = ['assets/iconsets/alert-icons.svg', 'assets/iconsets/av-icons.svg'];
            //if the url is not one that we are trying to ignore, let the request go through.
            if (ignoreUrls.indexOf(url) === -1) {
                return originalGet(url, config);
            }

            //the url is one we would like to ignore, so just return a promise with a fake http response 
            var fakeHttpResponse = {
                "data": "ok",
                "status": 200,
            };
            var $q = $injector.get('$q');
            var deferred = $q.defer();
            deferred.resolve(fakeHttpResponse);
            return deferred.promise;
        }
        return $delegate;
    });
});

只需确保将此文件包含在 angular.js 文件之后以及模块声明 angular.module('nameOfYourModule', []) 之后。

这是我用来测试的 karma 文件的一部分。

module.exports = function(config) {
  config.set({
    // list of files / patterns to load in the browser
    files: [
        //include angular and angular-mocks first
        'lib/angular/angular.js',
        'lib/angular/angular-mocks.js',
        //include your module declaration, the file with angular.module('app', []) in it
        'src/app.js',
        //include the http decorator file
        'specs/httpDecorator.js',
        //now include the rest of your source files and specs
        'src/**/*.js',
        'specs/**/*.js'
    ]
  });
}