Unit Testing a Directive

AngularJS Video Tutorial by

Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 350 of the free egghead.io lessons, plus get AngularJS content delivered directly to your inbox!

Existing egghead subscribers will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.

    Now Playing:
    Unit Testing a Directive
    John Lindquist 2:14

    Next up:
    Unit Testing Directive Scope
    John Lindquist 1:57

    Testing a Controller
    John Lindquist 1:12
    Unit Testing "Hello World"
    John Lindquist 2:26
    Introduction to Karma
    John Lindquist 2:45
    Unit Testing AngularJS
    John Lindquist 5:18
    Unit Testing Directive Scope Binding P
    John Lindquist 2:00

Unit Testing a Directive

2:14 AngularJS lesson by

In this lesson you will unit test a simple AngularJS directive

Get the Code Now
click to level up

egghead.io comment guidelines


In this lesson you will unit test a simple AngularJS directive


Do you have the source for this? The example doesn't work

In reply to egghead.io


The api changed so that you now need to use isolateScope() to access an isolated scope of a directive.

In reply to Joseph

John Lindquist: Let's move on from testing a "hello, world" example to testing a directive. We have our app module over here. Let's load that up using the module syntax, and then we'll do a new describe. We'll call this "ehSimple" for "egghead simple," and we'll say that it should add a class of plain. Whenever I add this ehSimple directive, it's going to add a plain class, so we'll expect our element to have class of plain.

This should be true. It's false. We want it to be true, so we'll create the directive. Let's add it here first. We'll say "ehSimple."

Now if we create this directive, we'll say "app directive ehSimple," and then we return a function scope and element. We'll just say "element add class simple." Oops, I mean "plain." I typed "plain" there. I meant to type "simple," but whatever. We got it to pass.

That's the simplest way to test a directive. You do a similar thing where you just create the element, you compile it, pass in a scope, and then you can start testing things on the element by loading up your module using this syntax.

If this is starting to look intimidating, don't worry. This stuff right here gets really repetitive on all of your tests. You're going to do this all the time, where you just inject things and then reference them throughout your tests. Writing these really isn't that difficult.

Featured course:

Getting Started with Redux

Getting Started with Redux