非常具有挑战性的指令 - 寻找有关如何进行单元测试的指导

Question

我刚刚意识到我为我的指令编写的测试都没有以实际测试任何东西的方式工作，所以我正在重写它们。问题是我无法找到测试链接功能的方法。

如果有人有任何建议，我真的很感激。

感谢您寻找

angular.module('pb.webSites.directives')
    .directive('pbOrganizationImagePicker', [ function () {

        return {
            restrict: "E",
            template: '<img data-ng-src="{{ imageSource }}" width="{{width}}" height="{{height}}" alt="Image Picker" class="img-rounded" />',
            scope: {
                fileId: '=pbFileId',
                defaultSrc: '@pbDefaultSrc',
                width: '@pbWidth',
                height: '@pbHeight'
            },
            controller: 'pbOrganizationImagePickerController',

            link: function (scope, element, attrs) {
                scope.$watch('defaultSrc', function (value) {
                    if (value !== undefined) {
                        scope.imageSource = value;
                    }
                });

                element.on('click', function () {
                    scope.pickImage().then(function (image) {
                        scope.imageSource = image.storageUrl;
                        scope.fileId = image.fileId;
                    }, function () {
                        console.log('Modal dismissed at: ' + new Date());
                    });
                });
            }
        };
    }]);

有人问我到目前为止做了什么来测试这个指令。现在链接部分测试很乱，但我想我会在这里发布，以防其他人好奇。

describe('pbOrganizationImagePicker', function () {

    beforeEach(module('pb.webSites.controllers'));
    beforeEach(module('pb.webSites.directives'));
    beforeEach(module('ui.router'));
    beforeEach(module('ui.bootstrap'));

    var compile;
    var scope;
    var html = angular.element('<pb-organization-image-picker data-pb-default-src="{{ webSite.profileImageUrl || \'/content/img/placeholder-lg.jpg\' }}" data-pb-file-id="webSite.profileImageId" data-pb-width="200"></pb-organization-image-picker>');

    beforeEach(inject(function ($compile, $rootScope) {
        compile = $compile
        scope = $rootScope.$new();
    }));


    beforeEach(inject(function ($q, $injector) {

        $httpBackend = $injector.get('$httpBackend');
        $httpBackend.whenGET('/app/webSites/directives/OrganizationImagePicker.html').respond(200, '');

        scopeObject = {
            profileImageUrl: 'http://www.gravatar.com/avatar/12345?s=40&d=identicon',
            profileImageId: 54634
        };

        scope.webSite = {
            profileImageId: 6436
        };

        scope.pickImage = function () {
            var defer = $q.defer();
            defer.resolve(scopeObject);
            return defer.promise;
        };

    }));


    describe('template with profileImageUrl', function () {

        beforeEach(function () {
            scope.webSite.profileImageUrl = 'http://www.gravatar.com/avatar/12345?s=40&d=identicon';
            element = compile(html)(scope);
        });

        it('should render HTML based on scope correctly', function () {
            expect(element.isolateScope().width).toEqual('200');
            expect(element.isolateScope().fileId).toEqual(scope.webSite.profileImageId);
            expect(element.isolateScope().defaultSrc).toEqual(scope.webSite.profileImageUrl);
        });
    });

    describe('template without profileImageUrl', function () {

        beforeEach(function () {
            element = compile(html)(scope);
        });

        it('use default URL if there is no  profileImageUrl', function () {
            expect(element.isolateScope().defaultSrc).toEqual('/content/img/placeholder-lg.jpg');
        });

    });

    describe('element.click()', function () {
        beforeEach(function () {
            var html = angular.element('<img data-ng-src="{{ imageSource }}" width="{{width}}" height="{{height}}" alt="Image Picker" class="img-rounded" />');
        });

        it('should assign value to scope variables', function () {
            template = compile(html)(scope);
            template.triggerHandler('click');
            template.scope().$apply();
            scope.pickImage();
            scope.$digest();
            expect(scope.imageSource).toEqual(scopeObject.profileImageUrl);
            expect(template.isolateScope().fileId).toEqual(scopeObject.profileImageId);
        });

    });

    describe('$watch', function () {

        beforeEach(function () {
            element.isolateScope().defaultSrc = 'foobar';
            element = compile(html)(scope);
        });

        it('should have expected watchers added to the child scope', function () {
            expect(element.isolateScope().$$watchers[0].exp).toBe('defaultSrc');
        });

        it('$watch should watch for changes on defaultSrc', function () {
           element.isolateScope().defaultSrc = "barfoo";
           element.isolateScope().$apply();
           expect(scope.imageSource).toEqual('barfoo');
        });

    });

});