Unit testing angular directive - very stuck

问题

I am having a ton of trouble testing my directive.

Right now I am stuck with these two errors

Test 'pbImagePicker template:should render HTML based on scope correctly' failed
    TypeError: 'undefined' is not a function (evaluating 'element.click')



Test 'pbImagePicker element.click():should assign data from resolved promise when clicked' failed
    TypeError: 'undefined' is not a function (evaluating 'scope.$new(true)')

Directive:

angular.module('pb.campaigns.directives')
    .directive('pbImagePicker', ['$window', '$document', function ($window, $document) {

            return {
                restrict: "E",
                template: '<img data-ng-src="{{ imageSource }}" width="{{width}}" height="{{height}}" alt="Image Picker" class="img-rounded" />',
                scope: {
                    fileId: '=pbFileId',
                    accountId: '=pbAccountId',
                    defaultSrc: '@pbDefaultSrc',
                    width: '@pbWidth',
                    height: '@pbHeight'
                },
                controller: 'pbImagePickerController',
                link: function (scope, element, attrs) {
                    scope.$watch('defaultSrc', function (value) {
                        if (value !== undefined) {
                            scope.imageSource = value;
                        }
                    });

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

I am also trying to test the element.click by using the triggerHandler but im not having any luck. Testing the link: $watch function has also proven to be impossible for me. Has anyone ever done this? I have found simular examples but none that I seem to be able to get working

this is what I currently have:

describe('pbImagePicker', function () {

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

    var compile;
    var scope;


    var mockModal = {};
   // var element = {
    //    click: function () { }
    //};

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

    }));

    describe('template', function () {

        it('should render HTML based on scope correctly', function () {
            //scope = {
            scope.fileId = '43253';
            scope.accountId = '3874';
            scope.imageSource = 'http://www.gravatar.com/avatar/12345?s=40&d=identicon';
            scope.width = '250';
            scope.height = '250';
            //};

            var html = angular.element('<pb-image-picker data-pb-default-src="{{ campaign.sponsorSmallImageUrl || \'/content/img/placeholder-sm.jpg\' }}" data-pb-file-id="campaign.sponsorSmallImageId" data-pb-account-id="currentAccountId" data-pb-height="55"></pb-image-picker>');
            compiled = compile(html)(scope);
            compiled.triggerHandler('click');
            scope.$digest();

            expect(scope.width).toEqual('250');
            expect(scope.accountId).toEqual('3874');
            expect(element.hasClass('img-rounded')).toBe(true);
            expect(element.attr('width')).toEqual('250');
            expect(element.attr('height')).toEqual('250');
            expect(element.attr('alt')).toMatch('Image Picker');

            //or even expect it to match the scope value 
            expect(element.attr('width')).toEqual(scope.width);

        });

    });

    describe('element.click()', function () {
        var image;
        beforeEach(inject(function ($q) {
            image = {
                storageUrl: 'http://www.pressboard.com/avatar/7453',
                fileId: 6432342
            };
            scope.pickImage = function (accountId) {
                var defer = $q.defer();
                defer.resolve(image);
                return defer.promise;
            };
            scope = {
                fileId: '43253',
                accountId: '3874',
                imageSource: 'http://www.gravatar.com/avatar/12345?s=40&d=identicon',
                width: '250',
                height: '250'
            };
        }));

        it('should assign data from resolved promise when clicked', function() {
            var element = compile('<pb-image-picker data-pb-default-src="{{ campaign.sponsorSmallImageUrl || \'/content/img/placeholder-sm.jpg\' }}" data-pb-file-id="campaign.sponsorSmallImageId" data-pb-account-id="currentAccountId" data-pb-height="55"></pb-image-picker>')(scope);
            element.triggerHandler('click');
            scope.$digest();
            expect(scope.imageSource).toEqual(image.storageUrl);
            expect(scope.fileId).toEqual(image.fileId);
        });

    });

});

the pickImage function is defined in my controller as

$scope.pickImage = function (accountId) {

            var modalOptions = {
                templateUrl: '/app/campaigns/directives/ImagePicker.html',
                controller: 'pbImagePickerModalController',

                resolve: {
                    accountId: function () {
                        return accountId;
                    }
                }
            };

            var modalInstance = $modal.open(modalOptions);

            return modalInstance.result;
        };

来源：https://stackoverflow.com/questions/28181725/unit-testing-angular-directive-very-stuck