I have a example AngularJS directive like this <div some-dir="5" />
How would I access this directive attribute value of 5 inside my test?
describe("some-dir", function() {
var element, scope;
beforeEach(module('app'));
beforeEach(inject(function($rootScope, $compile) {
scope = $rootScope;
element = angular.element('<div><div id="el1" some-dir="5" /></div>');
$compile(element)(scope);
scope.$digest();
}));
it('should be able to get the attribute value', function(){
// get the attr value of some-dir
});
});
You can check scope values of element using its isolateScope method. But this won't work when you pass a value right next to directive attribute, as those values are not copied into isolated scope.
In that case, it's possible to get and test that value using element.attributes method.
First compile your directive html:
var element;
beforeEach(inject(function (_$compile_, _$rootScope_) {
var $compile = _$compile_,
$scope = _$rootScope_;
element = $compile('<div my-directive="4" some-value="5"></div>')($scope);
$scope.$digest();
}));
Then you can expect element's isolateScope to return an object with someValue property.
it('should expect some-value as 5', function () {
inject(function ($injector) {
// check attribute values using isolateScope
expect(element.isolateScope().someValue).toEqual(5);
// check the value right after directive attribute
expect(element.attr('my-directive')).toEqual('4');
});
});
Here is an example plunker.
Related
I am trying to unit test a directive with a two-way bound property (=). The directive works in my app, but I can't get a unit test working that tests the two-way binding.
I have been trying to get this working for days. I've read MANY examples that use some but not all of the features I want to use: controllerAs, bindToController & isolateScope(). (Forget about templateURL, which I also need. I will add that if I can get this working! :)
I'm hoping someone can tell me how to show a change in the parent scope reflected in the isolate scope.
Here is a plunkr that contains the code below:
http://plnkr.co/edit/JQl9fB5kTt1CPtZymwhI
Here is my test app:
var app = angular.module('myApp', []);
angular.module('myApp').controller('greetingController', greetingController);
greetingController.$inject = ['$scope'];
function greetingController($scope) {
// this controller intentionally left blank (for testing purposes)
}
angular.module('myApp').directive('greetingDirective',
function () {
return {
scope: {testprop: '='},
restrict: 'E',
template: '<div>Greetings!</div>',
controller: 'greetingController',
controllerAs: 'greetingController',
bindToController: true
};
}
);
And here is the spec:
describe('greetingController', function () {
var ctrl, scope, rootScope, controller, data, template,
compile, isolatedScope, element;
beforeEach(module('myApp'));
beforeEach(inject(function ($injector) {
rootScope = $injector.get('$rootScope');
scope = rootScope.$new();
controller = $injector.get('$controller');
compile = $injector.get('$compile');
data = {
testprop: 1
};
ctrl = controller('greetingController', {$scope: scope}, data);
element = angular.element('<greeting-directive testprop="testprop"></greeting-directive>');
template = compile(element)(scope);
scope.$digest();
isolatedScope = element.isolateScope();
}));
// PASSES
it('testprop inital value should be 1', function () {
expect(ctrl.testprop).toBe(1);
});
// FAILS: why doesn't changing this isolateScope value
// also change the controller value for this two-way bound property?
it('testprop changed value should be 2', function () {
isolatedScope.testprop = 2;
expect(ctrl.testprop).toBe(2);
});
});
You have to correct the way you're testing your directive. You're directly changing isolatedScope of an object and thereafter verifying the ctrl object which unrelated DOM which you had compiled.
Basically what you should be doing is as soon as you compiled a DOM with scope (here it is <greeting-directive testprop="testprop"></greeting-directive>). So that scope will hold the context of compiled do. In short you can play testprop property value. or same thing will be available inside element.scope(). As soon as you change any value in scope/currentScope. You can see the value gets updated inside directive isolatedScope. One more thing I'd like to mention is when you do controllerAs with bindToController: true, angular adds property with controller alias inside scope that's we verified isolatedScope.greetingController.testprop inside assert
Code
describe('greetingController', function() {
var ctrl, scope, rootScope, controller, data, template,
compile, isolatedScope, currentScope, element;
beforeEach(module('myApp'));
beforeEach(inject(function($injector) {
rootScope = $injector.get('$rootScope');
scope = rootScope.$new();
controller = $injector.get('$controller');
compile = $injector.get('$compile');
data = { testprop: 1 };
ctrl = controller('greetingController', { $scope: scope }, data);
element = angular.element('<greeting-directive testprop="testprop"></greeting-directive>');
template = compile(element)(scope);
scope.$digest();
currentScope = element.scope();
//OR
//currentScope = scope; //both are same
isolatedScope = element.isolateScope();
}));
// First test passes -- commented
it('testprop changed value should be 2', function() {
currentScope.testprop = 2; //change current element (outer) scope value
currentScope.$digest(); //running digest cycle to make binding effects
//assert
expect(isolatedScope.greetingController.testprop).toBe(2);
});
});
Demo Plunker
I would like to test a directive, which has a filter dependency. I would like to inject actual filter, instead of using a mock.
Here is my mocked beforeEach. How do I go about injecting actual filter? I've tried injecting as part of the inject function, but this does not seems to work.
beforeEach(function() {
// filter mock
someFilterMock = function(value) {
return value;
};
// get app
module('app');
// get html templates
module('templates');
// replace filter with a mock
module(function($provide) {
$provide.value('someFilterFilter', someFilterMock);
});
// inject & compile
inject(function($rootScope, $compile) {
// create scope
scope = $rootScope.$new();
// create element using directive
element = angular.element('<this-is-directive />');
$compile(element)(scope);
scope.$digest();
});
});
I am doing something like this in my tests:
it('uses a filter', inject(function ($filter) {
var result = $filter('filterName')(params);
expect(result).toBe('something');
}));
Perhaps it does help?
I am relatively new to jasmine tests, and I've got some problem with it. I try to test this directive :
DIRECTIVE
myApp.LoadingsDirective = function() {
return {
restrict: 'E',
replace: true,
template: '<div class="loading"><img src="http://www.nasa.gov/multimedia/videogallery/ajax-loader.gif" width="20" height="20" /></div>',
link: function (scope, element, attrs) {
scope.$watch(
function(scope) {
return scope.$eval(attrs.show);
},
function(val) {
if (val){
$(element).show();
}
else{
$(element).hide();
}
})
}
}
}
myApp.directive('loading', myApp.LoadingsDirective);
This directive just show a loading icon until the result of a asynchronious request replace it.
I try something like this :
TEST
describe('Testing directives', function() {
var $scope, $compile, element;
beforeEach(function() {
module('myApp');
inject(function($rootScope, _$compile_) {
$scope = $rootScope.$new();
$compile = _$compile_;
});
});
it('ensures directive show the loading when show attribut is true', function() {
// GIVEN
var element = $compile('<div><loading show="true"> </loading></div>')($scope);
var loadingScope = element.find('loading').scope();
// WHEN
loadingScope.$watch();
// THEN
expect(loadingScope.show).toBe('true');
});
});
What is the best way to test this type of directive ? How to get access to attributs and test it ?
I always do it this way (coffeescript, but you'll get the idea):
'use strict';
describe 'Directive: yourDirective', ->
beforeEach module('yourApp')
# angular specific stuff
$rootScope = $compile = $scope = undefined
beforeEach inject (_$rootScope_, _$compile_) ->
$rootScope = _$rootScope_
$scope = $rootScope.$new()
$compile = _$compile_
# object specific stuff
element = createElement = undefined
beforeEach inject () ->
createElement = () ->
element = angular.element("<your-directive></your-directive>")
$compile(element)($scope)
$scope.$digest()
it "should have a headline", ->
createElement()
element.find("a").click()
$scope.$apply()
expect(element.find("input").val()).toEqual("foobar")
expect($scope.inputModel).toEqual("foobar")
And this could be the directive:
<your-directive>
<a ng-click="spanModel='foobar'">set inputModel</a>
<input ng-model="inputModel">
</your-directive>
First, I extract the creation of your element into a function. This allows you to do some initial setup before the directive is created.
Then I perform some actions on my directive. If you want to apply this actions into your scope (remember in jasmine you are NOT inside angulars' digest circle), you have to call $scope.$apply() or $scope.$digest() (can't remember right now what the exact difference was).
In the example above, you click on the <a> element, and this has a ng-click attached. This sets the inputModel scope variable.
Not tested, but you'll get the idea
After giving up on ngMockE2E being able to supply proper passThrough() from the $httpBackend, I've resorted to adding the templates to the cache manually. This seems to work great, if I want to just 'test' my template. However, say I want to test some conditions on the controller that get invoked (via directive), how do a I get a reference to it?
describe('RedactedFilter ', function() {
var ctrl, filterModel,createController;
var $httpBackend,$scope,template, $templateCache,$compile,$rootScope, $compile;
beforeEach(module('RedactedApp.Services'));
beforeEach(module('RedactedApp.Controllers'));
beforeEach(module('RedactedApp.Models'));
beforeEach(inject(function($templateCache,_$compile_,_$rootScope_) {
//assign the template to the expected url called by the directive and put it in the cache
template = $templateCache.get('src/main/app/components/redactedFilter/redacted-filter.tpl.html');
$templateCache.put('src/main/app/components/redactedFilter/redactedFilter-filter.tpl.html',template);
$compile = _$compile_;
$rootScope = _$rootScope_;
}));
beforeEach(inject(function ($controller, $rootScope,_$q_, $injector, _$compile_) {
$scope = $rootScope.$new();
$httpBackend = $injector.get('$httpBackend');
$compile = _$compile_;
filterModel = $injector.get('RedactedFilterModel');
}));
it('should default to tab 0', function() {
var formElement = angular.element('<redacted-filter></redacted-filter>');
var element = $compile(formElement)($rootScope);
$rootScope.$digest();
var ctrl = element.controller();
//ctrl is undefined
expect(ctrl.selectedTab).toEqual(0);
});
});
Note that it does not say function controller() is undefined, but the result of calling it. My directive has replace set to false so I don't think it's an issue with the transclusion hiding the element.
Here's my directive for good measure:
angular.module('RedactedApp.Directives').directive('redactedFilter', function(){
return {
restrict: 'E',
replace: false,
templateUrl: '../../main/app/components/redactedFilter/redacted-filter.tpl.html'
};
});
First, use ng-html2j or ng-templates to shove your templates into your template cache before you run tests.
Then compile the templates into elements, and shove them into your controller for testing:
beforeEach(inject(function($templateCache,_$compile_,_$rootScope_, _$controller_) {
//get the template from the cache
template = $templateCache.get('src/main/app/components/someController/widget-search.tpl.html');
$compile = _$compile_;
$rootScope = _$rootScope_;
$controller = _$controller_;
//compile it
element = $compile(template)($rootScope);
}));
//then shove your compiled element into your controller instance
it( 'should be instantiated since it does not do much yet', function(){
ctrl = $controller('SomeController',
{
$scope: $rootScope.$new(),
$element: element
});
expect( ctrl.hasInstance).toBeTruthy();
});
My <custom-directive> has replace:true and template: '<img />'.
How can I write a unit test for it? I think I want to test that it actually replaces custom-directive with img.
it('should be transformed to <img>', function(){
var elm = $compile('<custom-directive></custom-directive>')(scope);
scope.$digest();
var t = elm.find('img'); // wrong! it replaces the element. it won't find another one inside
//expect(elm).toBeAnImgElement ?
});
I can't find the correct matcher.
The closest case I've seen is checking the contents (elm.html() or elm.text()) but my tag is empty.
wrap your directive in a div like:
describe('Directive: custom', function () {
beforeEach(module('App'));
var element, $scope;
it('should be transformed to <img>', inject(function ($rootScope, $compile) {
$scope = $rootScope.$new();
element = angular.element('<div><custom-directive></custom-directive></div>');
element = $compile(element)($scope);
expect(element.children('img').length).toBe(1);
}));
});
You can get the actual HTMLElement object and check its tagname. Get at the actual HTMLElement with elm[0]:
expect(elm[0].tagName).toEqual('A');