{"id":1847,"date":"2015-01-02T13:15:20","date_gmt":"2015-01-02T11:15:20","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=1847"},"modified":"2014-12-29T15:03:35","modified_gmt":"2014-12-29T13:03:35","slug":"learning-angular-unit-testing-watch-expressions","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/learning-angular-unit-testing-watch-expressions\/","title":{"rendered":"Learning Angular: Unit Testing watch expressions"},"content":{"rendered":"

<\/p>\n

Today I wanted to write a unit test for a watch expression on my controller. What seemed quite obvious initially, turned out to be quite nasty. Anyway, thx to a nice community member on the Angular IRC, I was able to quickly resolve the issue. So, here’s the story.<\/p>\n

 <\/p>\n

This article is part of my “Learning NG” series<\/strong>, presenting some of my adventures while learning Angular. Check out the series intro and other articles<\/a>. Note,<\/strong> I’m an Angular newbie, so I’m more than happy for any kind of feedback and improvement suggestions from more experienced people than me.<\/p><\/blockquote>\n

 <\/p>\n

Background<\/h2>\n

The new Angular best practices suggest to use the – what they call – “controller as” syntax. So, instead of writing the controller like<\/p>\n

module.controller('MainCtrl', function($scope){\r\n    $scope.someScopeVariable = 'Hello, world!';\r\n});<\/pre>\n
..you should instead write it like this.<\/p>\n
module.controller('MainCtrl', function(){\r\n    var vm = this; \/\/ this is a best practice approach\r\n    vm.someScopeVariable = 'Hello, world!';\r\n});<\/pre>\n
On the HTML side, you normally include the controller using a similar syntax.<\/p>\n
<div ng-controller='MainCtrl as vm'>\r\n    {{ vm.someScopeVariable }}\r\n<\/div><\/pre>\n
Problem<\/h2>\n
Now consider we have some watch expression defined in the controller, which we’d like to test.<\/p>\n
app.controller('MainCtrl', function($scope) {\r\n  var vm = this;\r\n  var previousSelection = null;\r\n\r\n  vm.currentSelection = null;\r\n\r\n  $scope.$watch('vm.currentSelection', function(newVal, oldVal){\r\n    \/\/ we'd like to test THIS LINE HERE\r\n    previousSelection = oldVal;\r\n  });\r\n\r\n  vm.changeSelection = function(shouldRevert){\r\n    if(shouldRevert){\r\n      vm.currentSelection = previousSelection;\r\n    }\r\n  };\r\n});<\/pre>\n
Note that I’m injecting $scope<\/code> which might make it appear like I’m using the $scope controller syntax. In reality it’s for being able to register the $watch<\/code>.
\nAlso, the above is a simple demo, which, slightly modified, can be useful for reverting a user selection on a dropdown for instance, using ng-change<\/code>.<\/p>\n
Anyway, if we want to the the above, we could write the following test scenario.<\/p>\n
describe('Testing $watch expressions', function() {\r\n  var $scope = null;\r\n  var ctrl = null;\r\n\r\n  \/\/you need to indicate your module in a test\r\n  beforeEach(module('plunker'));\r\n\r\n  describe('using the controller as syntax', function() {\r\n\r\n    beforeEach(inject(function($rootScope, $controller) {\r\n      $scope = $rootScope.$new();\r\n\r\n      ctrl = $controller('MainCtrl', {\r\n        $scope: $scope\r\n      });\r\n\r\n    }));\r\n\r\n    it('test using $digest', function() {\r\n      \/\/ make an initial selection\r\n      ctrl.currentSelection = 'Hi';\r\n      $scope.$digest();\r\n\r\n      \/\/ make another one\r\n      ctrl.currentSelection = 'New';\r\n      $scope.$digest();\r\n\r\n      \/\/ simulate a ng-change which should revert to the previous value\r\n      ctrl.changeSelection(true);\r\n\r\n      expect(ctrl.currentSelection).toEqual('Hi');\r\n    });\r\n\r\n  });\r\n\r\n});<\/pre>\n
Note that I’m using $scope.$digest()<\/code> after setting the currentSelection<\/code> on the controller. This is needed to trigger a “digest cycle” which invokes the $watch<\/code> expression I’ve defined. Unfortunately it doesn’t work!<\/strong>. The watch expression gets invoked, but newVal<\/code> and oldVal<\/code> are both undefined.<\/p>\n
Instead, if I reverted my controller to the “old” $scope syntax..<\/p>\n
app.controller('MainCtrl', function($scope) {\r\n  var previousSelection = null;\r\n\r\n  $scope.currentSelection = null;\r\n\r\n  $scope.$watch('currentSelection', function(newVal, oldVal){\r\n    previousSelection = oldVal;\r\n  });\r\n\r\n  $scope.changeSelection = function(shouldRevert){\r\n    if(shouldRevert){\r\n      $scope.currentSelection = previousSelection;\r\n    }\r\n  };\r\n});<\/pre>\n
…and adjusted my tests accordingly:<\/p>\n
it('test using $digest', function() {\r\n    \/\/ make an initial selection\r\n    $scope.currentSelection = 'Hi';\r\n    $scope.$digest();\r\n\r\n    \/\/ make another one\r\n    $scope.currentSelection = 'New';\r\n    $scope.$digest();\r\n\r\n    \/\/ simulate a ng-change which should revert to the previous value\r\n    $scope.changeSelection(true);\r\n\r\n    expect($scope.currentSelection).toEqual('Hi');\r\n});<\/pre>\n
..then the $watch expression got called with the correct value and the tests passed as expected.<\/p>\n
Alternatively, I could leave the “controller As” syntax of before, and instead of calling $scope.$digest()<\/code> in my tests, call $scope.$apply('...')<\/code>:<\/p>\n
it('test using $scope.$apply(...)', function() {\r\n    \/\/ make an initial selection\r\n    $scope.$apply('vm.currentSelection='Hi'');\r\n\r\n    \/\/ make another one\r\n    $scope.$apply('vm.currentSelection='New'');\r\n\r\n    \/\/ simulate a ng-change which should revert to the previous value\r\n    ctrl.changeSelection(true);\r\n\r\n    expect(ctrl.currentSelection).toEqual('Hi');\r\n});<\/pre>\n
That worked as well. What’s wrong here??<\/strong><\/p>\n
I posted on the IRC channel<\/a>..<\/p>\n
[14:32:52]  Interesting, when unit testing $watch expressions it makes a difference whether you used the 'controller as' syntax or not. http:\/\/plnkr.co\/edit\/MVOgfmXVG1MzUg6nfM6W?p=preview\r\n[14:34:01]  of course - watch expressions watch on the scope.\r\n[14:36:46]  sacho: yep, but by executing $scope.$digest() in the tests I'd expect that the $watch expression is executed...which, btw it is, but not with the correct values\r\n[14:37:17]  sacho: Instead, it seems that in that case you have to do something like $scope.$apply('someScopeVar = 'some new value'');\r\n[14:37:26]  then it fires as well, but with the passed new value\r\n[14:37:35]  that's kinda odd..\r\n[14:38:09]  while, when using the $scope syntax, I can simply call $scope.$digest() and everything works as expected...\r\n[14:38:13]  huh?\r\n...\r\n[14:46:08]  juristr, well, you're not placing the controller on the scope, anywhere.\r\n[14:46:26]  so you're not using controllerAs.<\/pre>\n
Oh..!<\/strong> The problem is in the beforeEach<\/code>. While I was assuming the following lines attach the controller to the $scope<\/code><\/p>\n
beforeEach(inject(function($rootScope, $controller) {\r\n    $scope = $rootScope.$new();\r\n\r\n    ctrl = $controller('MainCtrl', {\r\n        $scope: $scope\r\n    });\r\n}));<\/pre>\n
..which they do…but the controller\/scope is not attached on the vm<\/code> property, which the $watch<\/code> expression expects…<\/p>\n
Thus, changing to…<\/p>\n
beforeEach(inject(function($rootScope, $controller) {\r\n    $scope = $rootScope.$new();\r\n\r\n    ctrl = $controller('MainCtrl', {\r\n        $scope: $scope\r\n    });\r\n\r\n    \/\/ THIS was missing\r\n    $scope.vm = ctrl;\r\n}));<\/pre>\n
..makes everything work as expected, even when using $scope.$digest()<\/code>.<\/p>\n
You can play around with it by yourself in this Plunkr.<\/p>\n