javascript - AngularJS:带有从服务返回的 Promise 的单元测试指令

Question

我有一个使用服务的指令，调用返回 promise 的服务方法，并在随后的“then”(下面的 myTestDirective)中修改 DOM。

我正在尝试对该指令进行单元测试，当我运行测试时，“then”内部没有任何内容被调用: promise 被拒绝或决议未传播？

我遵循了 this post 中的所有步骤设置我的单元测试

当我在浏览器中加载指令时，我看到两条消息，OUTSIDE D3 然后是 INSIDE D3，如你所料。

但是在单元测试中，元素只更新第一条消息，像这样:
<my-test-directive>***OUTSIDE D3***</my-test-directive> .
在浏览器中，我看到了两条消息。

有谁知道这里发生了什么，我需要注入(inject) mock 或 spyOn 什么东西吗？这是在脚本标记完成加载之前运行测试的异步问题吗？我看到单元测试正在访问 d3.v3.js，所以脚本标签似乎出现了。我还单独对 d3Service 进行了单元测试，并且它有效。偶尔，我实际上在根本不更改测试的情况下看到了正确的结果。

我在这个问题中看到了线索，但无法理解如何在我的情况下应用它:Angularjs promise not being resolved in unit test

代码如下:

d3Service:

var d3 = angular.module('d3', []);

d3.factory('d3Service', ['$document', '$q', '$rootScope', '$window',
    function($document, $q, $rootScope, $window) {
        var d = $q.defer();

        function onScriptLoad() {
            $rootScope.$apply(function() { d.resolve(window.d3); });
        }

        var scriptTag = $document[0].createElement('script');
        scriptTag.type = 'text/javascript'; 
        scriptTag.async = true;
        scriptTag.src = 'lib/d3.v3.js';

        scriptTag.onreadystatechange = function () {
            if (this.readyState == 'complete') onScriptLoad();
        }

        scriptTag.onload = onScriptLoad;

        var s = $document[0].getElementsByTagName('body')[0];
        s.appendChild(scriptTag);

        return {
            d3: function() { return d.promise; }
        };

    }]);

指令

var myDirectives = angular.module('myDirectives', ['d3']);

myDirectives.directive('myTestDirective', ['d3Service', '$window', 
    function(d3Service, $window) {
        return {
            restrict: 'EA',

            link: function(scope, ele, attrs) {

                var f = angular.element(ele[0])
                f.append('**OUTSIDE D3***')

                d3Service.d3().then(function(d3){    // Nothing here runs at all.
                    var e = angular.element(ele[0])  // In browser it works, but
                    e.append('***INSIDE D3***')      // not in the unit test.
                })
            }
        }           
    }])

单元测试

describe('Test Directive', function(){

    var $scope, elem, compiled, html;

  beforeEach(function (){      
    module('myDirectives');    
    html = '<my-test-directive></my-test-directive>'; 
    inject(function($compile, $rootScope) {
      $scope = $rootScope;
      elem = angular.element(html);
      compiled = $compile(elem)($scope);

      $scope.$digest();      
    });
  });   

    it('should create an svg element with its data', function(){
        console.log(elem) //outputs the element with only ***OUTSIDE D3***
    })

})

感谢任何提示或信息!!!!!!

Answer 1

我所做的是在我的 karma.conf 中加载 d3.v3.js，然后在返回 promise 的单元测试中创建 mockd3Service。如果有人知道更好的解决方案，请告诉我。

这是正在运行的新单元测试:

    describe('d3 Directives', function(){

        var $compile, $rootScope, $window, mockd3Service, $q, html, element, data;

        //setup test
        beforeEach(function(){
            mockd3Service = {}
            module('myDirectives')

            module(function($provide){
                $provide.value('d3Service', mockd3Service)
            })

            inject(function(_$compile_, _$rootScope_, _$window_, _$q_) {
                $window = _$window_;
                $compile = _$compile_;
                $rootScope = _$rootScope_;
                $q = _$q_
            });

            mockd3Service.d3 = function() {
                var deferred = $q.defer();
                deferred.resolve($window.d3)
                return deferred.promise;
            }

        });

        //run test
        it('make test', function(){
            html = '<my-directive data="testData"></my-directive>'
            element = angular.element(html)
            element = $compile(html)($rootScope)        
            $rootScope.testData = somedata
            $rootScope.$digest();

            expect(element...)

        })
    })