Unit Testing a Directive

AngularJS - Unit Testing a DirectiveAngularJS Video Tutorial by John Lindquist

In this lesson you will unit test a simple AngularJS directive


The ability to reply to discussions is limited to PRO subscribers. Want to join in the discussion? Click here to subscribe now.
egghead.io
Avatar

In this lesson you will unit test a simple AngularJS directive


index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
  <title>AngularJS Tutorials</title>
  <link rel="stylesheet" href="vendor/foundation/foundation.min.css">
</head>
<body ng-app="app">

  <div>
    Unit Testing a Directive
  </div>

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
  <script type="text/javascript" src="app/app.js"></script>
</body>
</html>

app.js

var app = angular.module("app", []);

app.directive("ehSimple", function() {
    return function(scope, element) {
        element.addClass("plain");
    }
})

directive.spec.js

describe("Hello world", function() {
    var element;
    var $scope;
    beforeEach(module("app"))
    beforeEach(inject(function($compile, $rootScope) {
        $scope = $rootScope;
        element = angular.element("<div eh-simple>{{2 + 2}}</div>");
        $compile(element)($rootScope)
    }))

    it('should equal 4', function() {
    $scope.$digest();
    expect(element.html()).toBe("4");
  })

  describe("ehSimple", function() {
    it("should add a class of plain", function() {
        expect(element.hasClass("plain")).toBe(true);
    })
  })
})

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.

Tech logo bar

Don't miss out on the latest PRO lessons.

Get Your PRO Subscription Now

Because you like code... not PowerPoint slides.