Testing Directives in Angluar

This is my first time testing directives. Does anyone know how I should get started on this or know of any good resources for finding out how to test directives? The angular docs where not a great help

 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 was trying to do something like the following but im not sure if im on the right track or how to proceed.

describe('pbImagePicker', function () {
    beforeEach(module('pb.campaigns.directives'));
    beforeEach(module('ui.router'));
    beforeEach(module('ui.bootstrap'));
    var $compile;
    var $rootScope;
    beforeEach(inject(function (_$compile_, _$rootScope_, _$document_) {
        $compile = _$compile_;
        $rootScope = _$rootScope_;
        $document = _$document_;
    }));
    describe('', function () {
        it('Replaces the element with the appropriate content', function () {
            // Compile a piece of HTML containing the directive
            var element = $compile("<pb-image-picker></pb-image-picker>")($rootScope);
            // fire all the watches, so the scope expression {{1 + 1}} will be evaluated
            $rootScope.$digest();
            // Check that the compiled element contains the templated content
            expect(element.html()).toEqual('<img data-ng-src="{{ imageSource }}" width="{{width}}" height="{{height}}" alt="Image Picker" class="img-rounded" />');
        });
    });
    describe('element.click()', function () {
        beforeEach(function () {
            element = angular.element('<img data-ng-src="{{ imageSource }}" width="{{width}}" height="{{height}}" alt="Image Picker" class="img-rounded" />');
            compiled = $compile(element)($rootScope);
            compiled.triggerHandler('click');
            expect().toEqual();
        });
        it('should resolve a promise when clicked', function () {
            spyOn($rootScope, 'pickImage');
            $rootScope.$digest();
            expect($rootScope.pickImage).toHaveBeenCalled();
        });
        it('should assign data from resolved promise when clicked', function () {
            $rootScope.$digest();
            expect($rootScope.imageSource).toEqual();
            expect($rootScope.fileId).toEqual();
        });
    });
});