Question

如果文件不存在且返回404，我有一个angular指令替换元素的图像src。这是：

myApp.directive('fallBackSrc', function() {
    var fallBackSrc = {
        link: function postLink(scope, element, attrs) {
            element.bind('error', function () {
                angular.element(this).attr("src", '/images/image-not-available.png');
            });
        }
    }
    return fallBackSrc;
}]);

这可以按预期工作，但现在我正在尝试对此指令进行单元测试，我将如何触发错误＆＃39;这个函数在jasmine中绑定了吗？

Answer 1

为了测试这个，你需要使用Jasmine对element.bind进行spyOn，并使用Jasmines 2.0 done函数。

所以在jsfiddle的示例中，我添加了一个占位符图像作为替换图像，以阻止它导致错误。

angular.module('components', [])
    .directive('fallBackSrc', function() {
        var fallBackSrc = {
            link: function postLink(scope, element, attrs) {
                element.bind('error', function () {
                    angular.element(this).attr("src", 'http://placehold.it/350x150');
                });
            }
        }
        return fallBackSrc;
    });

在测试中我们可以spyOn element.bind并在调用时返回error

spyOn(element, 'bind').and.returnValue('error');

我们还需要使用done函数来运行需要测试异步操作的规范，方法是将其传递给要在setTimeOut中使用的测试。

describe('Directive: fallBackSrc', function() {
        describe('if the image does not exist it', function() {

        var element, scope;

        beforeEach(module('components'));

        beforeEach(inject(function($rootScope, $compile) {
            element = angular.element('<img fall-back-src src="images/no-image.jpg" />');
            spyOn(element, 'bind').and.returnValue('error');
            scope = $rootScope;
            $compile(element)(scope);
            scope.$digest();
        }));

        it("should contain the place holder img src", function(done) {          
            setTimeout(function(){  
                console.log(element.attr('src'));
                expect(element.attr('src')).toEqual('http://placehold.it/350x150'); 
                done();
            }, 2000);
        });
    });

});

如何对具有绑定的角度指令进行单元测试（'error'，function（）{}）？

1 个答案: