AngularJS directive testing

Question

I am trying to test the following directive.

angular.module('myModule.directives', [])
  .directive('test', function() {
    return {
      restrictions: 'E',
      scope: {},
      transclude: true,
      replace: true,
      template: '<div><ui><li>a</li></ul></div>'
    }
});

In my test:

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

    beforeEach(module('myModule.directives'));
    beforeEach(inject(function ($compile, $rootScope) {

    compile = $compile;
    scope = $rootScope;
    test = angular.element('<test></test>');
    compile(test)(scope);
    scope.$digest();

    it('should render the test directive', function () {
        var lis = test.find('li');
        console.log(lis.length); // should output 1
    });

}));

Test fails and outputs 0. I am curious as to whether compile is actually doing anything. If I replace test with

  test = angular.element("<test><li></li></test>");.

Then the 'find' does find the li within the test element, which goes to show that compile is not rendering to

  '<div><ui><li>a</li></ul></div>'

as it should. Any ideas? I looked at the following vid for guidance (http://www.youtube.com/watch?v=rB5b67Cg6bc).

Shai Reznik - HiRez.io · Accepted Answer · 2013-04-18 16:23:38Z

1

You need to change "restrictions" to "restrict"

edited Apr 18, 2013 at 16:23

answered Apr 18, 2013 at 16:10

Shai Reznik - HiRez.io

9,0082 gold badges37 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Apples Over a year ago

I never realized that mistake. That didn't fix it. I also tried outputting to a variable like you initially commented.

Shai Reznik - HiRez.io Over a year ago

@aaron Did you take a look at the plunkr I made?

Apples Over a year ago

Thanks for setting up that example. When I figure out why it doesn't work in my environment, I'll post here. Thanks again.

Collectives™ on Stack Overflow

AngularJS directive testing

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related