angularjs - 当指令是属性时单元测试失败

Question

我有一个声明为属性的指令:

app.directive('myDirective', function() {
    return {
        restrict: 'A',
        replace: true,
        transclude: true,
        scope: {
            data: "="
        },
        template:
            '<p class="my-paragrapgh">' +
                '<label>Hello</label>' +
            '</p>'
    }
});

我有一个单元测试失败了:

describe('myDirective test', function () {
var scope, compile, element;

beforeEach(module('myModule'));

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

    element = angular.element("<div my-directive></div>");
    $compile(element);
    scope.$digest();
}));

it('should have a my-paragrapgh class', function () {
    expect($(element).find('p')[0]).toHaveClass('my-paragrapgh');
});

});

但是，如果我将指令转换为元素，并删除替换和嵌入:

app.directive('myDirective', function() {
    return {
        restrict: 'E',
        //replace: true,
        //transclude: true,
        scope: {
            data: "="
        },
        template:
            '<p class="my-paragrapgh">' +
                '<label>Hello</label>' +
            '</p>'
    }
});

我的单元测试通过了:

describe('myDirective test', function () {
var scope, compile, element;

beforeEach(module('myModule'));

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

    element = angular.element("<my-directive></my-directive>");
    $compile(element);
    scope.$digest();
}));

it('should have a my-paragrapgh class', function () {
    expect($(element).find('p')[0]).toHaveClass('my-paragrapgh');
});

});

如何成功测试声明为属性的指令？我正在使用 Karma、Jasmine 和 PhantomJS

Answer 1

当你有 transclude: true 时，你需要在模板中的某处有一个 ng-transclude ，这样 Angular 就会知道在哪里注入(inject)你的 HTML。尝试:

app.directive('myDirective', function() {
    return {
        restrict: 'A',
        replace: true,
        transclude: true,

        scope: {
            data: "="
        },

        template:
            '<div ng-transclude><p class="my-paragrapgh">' +
                '<label>Hello</label>' +
            '</p></div>'
    }
});

更新

看起来是 replace 选项导致了这个问题。

app.directive('myDirective', function() {
    return {
        restrict: 'A',

        scope: {
            data: "="
        },

        template:
            '<p class="my-paragrapgh">' +
                '<label>Hello</label>' +
            '</p>'
    }
});

使用 replace: true 你的内部 HTML 是:

失败

<label>Hello</label>

replace undefined 你有

通过

<p class="my-paragrapgh"><label>Hello</label></p>