Question

这是我第一次测试指令。有谁知道我应该如何开始这个或知道任何好的资源，以找出如何测试指令？角度文档没有很大的帮助

 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());
                        });
                    });
                }
            };
        }]);

我试图做类似以下的事情，但我不确定我是否在正确的轨道上或如何继续。

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();
        });
    });
});

Answer 1

使用AngularJS测试规范作为参考。例如：

'use strict';

describe('style', function()
{
  var element;


  afterEach(function()
  {
dealoc(element);
  });


  it('should compile style element without binding', inject(function($compile, $rootScope)
  {
element = jqLite('<style type="text/css">.header{font-size:1.5em; h3{font-size:1.5em}}</style>');
$compile(element)($rootScope);
$rootScope.$digest();

// read innerHTML and trim to pass on IE8
expect(trim(element[0].innerHTML)).toBe('.header{font-size:1.5em; h3{font-size:1.5em}}');
  }));


  it('should compile style element with one simple bind', inject(function($compile, $rootScope)
  {
element = jqLite('<style type="text/css">.some-container{ width: {{elementWidth}}px; }</style>');
$compile(element)($rootScope);
$rootScope.$digest();

// read innerHTML and trim to pass on IE8
expect(trim(element[0].innerHTML)).toBe('.some-container{ width: px; }');

$rootScope.$apply(function()
{
  $rootScope.elementWidth = 200;
});

// read innerHTML and trim to pass on IE8
expect(trim(element[0].innerHTML)).toBe('.some-container{ width: 200px; }');
  }));


  it('should compile style element with one bind', inject(function($compile, $rootScope)
  {
element = jqLite('<style type="text/css">.header{ h3 { font-size: {{fontSize}}em }}</style>');
$compile(element)($rootScope);
$rootScope.$digest();

// read innerHTML and trim to pass on IE8
expect(trim(element[0].innerHTML)).toBe('.header{ h3 { font-size: em }}');

$rootScope.$apply(function()
{
  $rootScope.fontSize = 1.5;
});

// read innerHTML and trim to pass on IE8
expect(trim(element[0].innerHTML)).toBe('.header{ h3 { font-size: 1.5em }}');
  }));


  it('should compile style element with two binds', inject(function($compile, $rootScope)
  {
element = jqLite('<style type="text/css">.header{ h3 { font-size: {{fontSize}}{{unit}} }}</style>');
$compile(element)($rootScope);
$rootScope.$digest();

// read innerHTML and trim to pass on IE8
expect(trim(element[0].innerHTML)).toBe('.header{ h3 { font-size:  }}');

$rootScope.$apply(function()
{
  $rootScope.fontSize = 1.5;
  $rootScope.unit = 'em';
});

// read innerHTML and trim to pass on IE8
expect(trim(element[0].innerHTML)).toBe('.header{ h3 { font-size: 1.5em }}');
  }));


  it('should compile content of element with style attr', inject(function($compile, $rootScope)
  {
element = jqLite('<div style="some">{{bind}}</div>');
$compile(element)($rootScope);
$rootScope.$apply(function()
{
  $rootScope.bind = 'value';
});

expect(element.text()).toBe('value');
  }));
});

<强>参考

在Angular中测试指令

1 个答案: