How to test change on scope executed in directive controller - angularjs

Question

I have directive myItem. I want to change one property that is passed from parent to directive, so I use controller in myItem where I divide value by 60.
Everything works fine on the website.
Directive
define(['angular',
'core',
'ui-bootstrap',
],
function(angular, coreModule, uiBootStrap) {
'use strict';
function myItemDirective(APPS_URL) {
return {
restrict: 'E',
replace: 'true',
scope: {
item: '='
},
templateUrl: APPS_URL.concat('item.tpl.html'),
controller: ['$scope', function($scope) {
$scope.item.property = Math.round($scope.item.property / 60);
}]
};
}
return angular.module('apps.myItemModule', [coreModule.name])
.directive('myItem', ['APPS_URL', myItemDirective]); });
Now I would like to write a test where I can check that rendered value in directive is value passed from parent divided by 60.
Unit Test
define([
'angular',
'angularMocks',
'apps/directives/mydirective' ], function (angular, mocks, myItemDirective) {
var $httpBackend, $controller, $rootScope, $scope, directive,
item = {
property: 60
};
describe('my directive', function () {
beforeEach(function() {
mocks.module(myItemDirective.name);
mocks.inject(function(_$rootScope_, $injector, $window) {
$rootScope = _$rootScope_;
$scope = $rootScope.$new();
$compile = $injector.get('$compile');
compileDirective();
});
});
afterEach(function() {
$scope.$destroy();
element.remove();
});
function compileDirective() {
element = angular.element('<my-item item=' + JSON.stringify(item) + '></my-item>');
directive = $compile(element)($scope);
$scope.$digest();
directiveScope = element.isolateScope();
}
it('test', function(){
// console.log(element.find('#item-holder').innerText)
// > 60
expect(element.find('#item-holder').innerText).toEqual(Math.round(item.propert/60));
// this will fail because item.property was not divided by 60
});
}); });
Problem
I am not able to render directive in unit test with value divided by 60. I can see in console that controller in directive has been called but the value is not changed.

Answer 1

The problem was related to tests using the same reference to object item.
To fix this:
moved item to beforeEach
changed the way to create element
changed the way to get directive scope
use $scope.$apply()
So test looks like:
define([
'angular',
'angularMocks',
'apps/directives/mydirective' ], function (angular, mocks, myItemDirective) {
var $httpBackend, $controller, $rootScope, $scope, directive,
item;
describe('my directive', function () {
beforeEach(function() {
item = {
property: 60
};
mocks.module(myItemDirective.name);
mocks.inject(function(_$rootScope_, $injector, $window) {
$rootScope = _$rootScope_;
$scope = $rootScope.$new();
$compile = $injector.get('$compile');
compileDirective();
});
});
afterEach(function() {
$scope.$destroy();
element.remove();
});
function compileDirective() {
$scope.item = item;
element = angular.element('<my-item item="item"></my-item>');
directive = $compile(element)($scope);
$scope.$apply();
directiveScope = directive.isolateScope();
}
it('test', function(){
// console.log(element.find('#item-holder').innerText)
// > 60
expect(element.find('#item-holder').innerText).toEqual(Math.round(item.propert/60));
// this will fail because item.property was not divided by 60
});
}); });