具有依赖关系的单元测试角度服务答案

【问题标题】：Unit testing angular service with dependencies具有依赖关系的单元测试角度服务
【发布时间】：2017-01-10 00:13:09
【问题描述】：

我有以下 Jasmine 单元测试：

describe('myService', function () {
    var myService, $q;

    // Instantiate the app
    beforeEach(module('myApp'));

    beforeEach(inject(function (_myService_, fileSystemService, $q) {
        myService = _myService_;
        spyOn(fileSystemService, 'listFiles').and.callFake(function () {
            var deferred = $q.defer();
            deferred.resolve('mockresult');
            return deferred.promise;
        });
    }));

    it('checks the number of outbound files', inject(function ($rootScope) {
        var result;
        myService.sendOutboundFiles2().then(function (res) {
            result = res;
        });
        $rootScope.$digest();
        expect(result).toBe('mockresult');
    }));
});

测试这个非常简单的服务功能：

sendOutboundFiles2() {
     return fileSystemService.listFiles('Cached/Outbound').then(function(outfiles) {
         return outfiles;
     })
}

但是，当测试运行时，它会因为虚假的Error: Unexpected request: GET blah\blah\blah.html No more request expected at $httpBackend 错误而失败，但我不知道为什么这个测试和服务依赖项都没有对 $httpBackend 做任何事情。

更多信息

如果我注释掉我现有的控制器测试，我会收到以下错误：

如果我重新添加控制器测试，我会收到以下错误：

因此，根据我添加或删除的测试，GET 错误中的 HTML 文件会发生变化。但所有控制器测试运行良好。 WTF?!?!?!!??!?!!?

【问题讨论】：

这听起来像是 Angular 试图获取指令/组件的模板导致的错误。您是否在服务中进行任何手动编译，或运行其他测试？
我已经取出了我的其他单元测试，但我仍然得到错误。虽然奇怪的是，它现在在 GET 错误中引用了不同的 .html 文件。
您是否有任何其他服务在实例化指令时编译指令（即在构造函数中，或从中调用的方法）？或者在构造函数中发出$http 请求的那些？你可以尝试用你需要的最低限度来制作尽可能小的 Angular 模块，然后尝试测试它吗？发出 HTTP 请求的可能性是您未预料到且未尝试测试的。
我已经尽可能地剥离了服务来做这个测试。仍然得到同样的错误。把我所有的控制器单元测试放回去，它们都工作正常。只是服务测试失败了。
那么可以显示您的myService 的完整代码吗？您是否确认如果您删除此测试并重新添加所有控制器测试，它们是否可以正常工作？有时其他测试可能会通过并导致不相关的测试失败，因为它们执行了异步或其他操作。

标签： javascript angularjs unit-testing

【解决方案1】：

这个问题是由 Ionic 敏锐地将所有模板预取到缓存中引起的。不知道为什么在测试控制器时不会发生这种情况。该问题仅在我测试服务时出现。无论如何，我找到了这个线程：Karma test breaks after using ui-router，相关的修复是在注入任何依赖项之前添加这个 sn-ps：

  beforeEach(module(function($provide) {
    $provide.value('$ionicTemplateCache', function(){} );
  }));

这会存根 $ionicTemplateCache 并阻止它尝试将所有 ui-router 模板预加载到 Ionic 缓存中。

【讨论】：