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 960 of the free egghead.io lessons, plus get Angular 1.x content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Unit Testing Directive Scope

1:57 Angular 1.x lesson by

Unit test your AngularJS directives that make changes to $scope as well as their own isolated scopes.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Unit test your AngularJS directives that make changes to $scope as well as their own isolated scopes.

Avatar
Martin

how do you get browserTrigger to work. When I add angular-scenario to my karma config all the tests stop running (at all).

New to this, so what am I missing?

New pro subscriber - so it has been a blast catching up with your material. Thanks.

In reply to egghead.io
Avatar
Ang

Martin, I had the same issue when I included angular-scenario.js in the 'files' section in karma.conf.js. Instead of adding angular-scenario.js to files, using the package https://npmjs.org/package/karma-ng-scenario fixed the problem for me. In short:
npm install karma-ng-scenario, then add 'ng-scenario' to the 'frameworks' section in karma.conf.js.

In reply to Martin
Avatar
Ang

As of Angular 1.2, to retrieve the isolated scope, one needs to use element.isolateScope() instead of element.scope()
http://code.angularjs.org/1.2.0/docs/api/angular.element

In reply to egghead.io
Avatar
Martin

Makes sense. Thanks for clearing that up. Much appreciated.

In reply to Ang
Avatar
marcek
ReferenceError: browserTrigger is not defined

I'm testing using version 1.3.4 of angularJS and what works for me is

element.triggerHandler 'click'

according to: https://docs.angularjs.org/api/ng/function/angular.element

In reply to egghead.io
Avatar
Marian

I've used isolateScope() to work:
expect(element.isolateScope().clicked).toBeTruthy();

John Lindquist: If I want to test the scope of the directive I can do something like, "Should respond to a click." And then when I click on the element I'm going to use a browser trigger utility which is actually shipped within Angular JS source code so I'll say "Click."

Once I trigger that, I expect the scope clicked to be true. This scope is simply the scope that I injected into the element and I can just expect it to be true if I say, "Element bind click," and then, "Scope click is true." This should pass justifying because that's the scope I injected and that's the same as the scope that's being set here.

Now where you may run into a problem is if you isolate the scope. So say, for example, we'll return a link function here using the directive descriptors. And then we'll isolate the scope and you can see that our tests are going to start failing because our scope is isolated. We'll get more into testing those later but you just need to realize that you can no longer test the injected scope.

You have to get the scope off of the element using this syntax, "Element.scope," and then check the property on that because this is the scope that the directive created for it, the isolated scope instead of the scope that you injected.

Big difference. Very important to know.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?