<\/p>\n
Last time I demonstrated how to Consume RESTful API With Angular-HAL<\/a>, and now I want to show you how to unit test my AngularJS controller code withJasmine<\/a>, a behavior-driven development framework for testing JavaScript code.<\/p>\n I’m a big fan of Test-Driven Development (TDD)<\/a>. And I always want to write unit test for my code. But not everyone agrees with me. There is a cost to write unit tests, and the benefit is in the long term, so it is not easy to convince others, especially managers or clients, that time spent on unit test will improve software quality and save money in the future. It is harder when developers write unit tests which don’t make sense. Sometime I even got frustrated when I tried to write unit test code for the sake of unit testing.<\/p>\n So what exactly shall I test? How shall I write unit tests? Dan North introduced Behavior-driven development<\/a>, and he answered lots of my questions regarding the unit test. So what is Behavior-Driven Development<\/a>?<\/p>\n Behavior-driven development is about implementing an application by describing its behavior from the perspective of its stakeholders.<\/p><\/blockquote>\n My understanding is, “BDD is TDD done right”. When we try to unit test a component, the first thing to think is how we want this component to behave, which is under different conditions, we expect it to do something or not to do something, to be in certain state or not to be in certain state.<\/p>\n There are many JavaScript frameworks for unit test, like QUint<\/a>, Mocha<\/a>, and Jasmine<\/a>. The reason I choose Jasmine is the AngularJS example project angular-seed<\/a> uses Jasmine for unit test. And I love it right after I figured out how to use it.<\/p>\n With Jasmine, we first The best way to learn is to practice. Let’s start with a very simple AngularJS controller, for my About<\/a>\u00a0page.<\/p>\n AboutController.js<\/a><\/b><\/p>\n This is the simplest page in my blog application, and no complex logic in the controller code. It only sets the active menu item, shows the title and sets page title with description.<\/p>\n The unit test for this controller will be also simple. We expect the page to do exactly what we designed, which are to set the “About” menu item as active, to show the title, and to have correct page title and description.<\/p>\n AboutControllerSpec.js<\/a><\/b><\/p>\n In unit test code, we call Jasmine function The first OK, the BlogListController.js<\/a><\/b><\/p>\n Here we have BlogListControllerSpec.js<\/a><\/b><\/p>\n The trick is to use AngularJS deferred object by calling Writing unit test is not easy. But it is so important, because writing unit test can actually make you think hard to write clean and elegant code.<\/p>\n With behavior-driven development<\/a>, we can describe our test cases in a more understandable way, and it helps better communication between developers and business. Business can tell user stories, and developer can translate those stories into unit test, so when requirements change, we can easily find out what part of code we need to change as well.<\/p>\n My experience with BDD and Jasmine is very pleasant, and later I will explore more about end to end test with Protractor<\/a>.<\/p>\nBDD and Jasmine<\/h2>\n
describe<\/code> our test suite, and then use it<\/code> function to give our test case specification. In the spec, we expect<\/code> the behaviors of our testing target. We also use beforeEach<\/code>and afterEach<\/code> to setup or tear down test environment for our spec.<\/p>\nTest Simple Controller<\/h2>\n
\r\n'use strict';\r\n\r\nangular.module('jiwhizWeb').controller('AboutController',\r\n['$rootScope', '$scope',\r\nfunction($rootScope, $scope) {\r\n $rootScope.activeMenu = {\r\n 'home' : '',\r\n 'blog' : '',\r\n 'about' : 'active',\r\n 'contact' : '',\r\n 'admin' : ''\r\n };\r\n $rootScope.showTitle = true;\r\n\r\n $rootScope.page_title = 'About Me';\r\n $rootScope.page_description = 'Here is my story.';\r\n}\r\n]); <\/pre>\n\r\n'use strict';\r\n\r\ndescribe('Controller: public\/AboutController', function() {\r\n\r\n var $rootScope, $scope, $controller;\r\n\r\n beforeEach(module('jiwhizWeb'));\r\n\r\n beforeEach(inject(function(_$rootScope_, _$controller_){\r\n $rootScope = _$rootScope_;\r\n $scope = $rootScope.$new();\r\n $controller = _$controller_;\r\n\r\n $controller('AboutController', {'$rootScope' : $rootScope, '$scope': $scope});\r\n }));\r\n\r\n it('should make about menu item active.', function() {\r\n expect($rootScope.activeMenu.about == 'active');\r\n });\r\n\r\n it('should show title.', function() {\r\n expect($rootScope.showTitle == true);\r\n });\r\n\r\n it('should have correct page title.', function() {\r\n expect($rootScope.page_title).toEqual('About Me');\r\n });\r\n\r\n it('should have correct page description.', function() {\r\n expect($rootScope.page_description).toEqual('Here is my story.');\r\n });\r\n}); <\/pre>\ndescribe<\/code> for our test suite, and we pass the suite title string and function of our test suite. And inside this suite function, we call Jasmine function it<\/code> for our test specs, and we also pass the spec title string and spec function. Inside our spec functions, we callexpect<\/code> function with actual value, which is chained with a Matcher function, which takes the expected value. Here I used toEqual<\/code> matcher function. See Jasmine Documentation<\/a> for more matcher functions and how to define your custom matcher functions.<\/p>\nbeforeEach<\/code> is to load our application module – jiwhizWeb<\/code>. And the second beforeEach<\/code> is to inject dependencies from AngularJS, like $rootScope<\/code>. Since we want to use same variable name\"$rootScope\"<\/code> in our suite function, and let $rootScope<\/code>be used by our spec functions, we have to apply a trick, that is to use underscore to wrap the in-coming parameter _$rootScope_<\/code>, and AngularJS Mock will correctly resolve it to the reference to actual $rootScope<\/code>. We can use it to create our suite variable $scope<\/code> by $scope = $rootScope.$new();<\/code>. Last, we use $controller<\/code> to initialize our AboutController<\/code> and inject all dependencies.<\/p>\nTest Controller with Promise<\/h2>\n
AboutController<\/code> is too simple. Let’s try another more complicated controller,BlogListController<\/code>, which uses promise<\/a> to Consume RESTful API With Angular-HAL<\/a>.<\/p>\n\r\n'use strict';\r\n\r\nangular.module('jiwhizWeb').controller('BlogListController',\r\n['$rootScope', '$scope', '$timeout', 'WebsiteService',\r\nfunction($rootScope, $scope, $timeout, WebsiteService) {\r\n $rootScope.activeMenu = {\r\n 'home' : '',\r\n 'blog' : 'active',\r\n 'about' : '',\r\n 'contact' : '',\r\n 'admin' : ''\r\n };\r\n $rootScope.showTitle = true;\r\n\r\n $rootScope.page_title = 'My Personal Blog';\r\n $rootScope.page_description = 'Some of my thoughts and experiences.';\r\n\r\n var setup = function( pageNumber ) {\r\n WebsiteService.load()\r\n .then( function( websiteResource ) {\r\n return websiteResource.$get('blogs', {'page': pageNumber, 'size':10, 'sort':null});\r\n })\r\n .then( function( resource )\r\n {\r\n $scope.page = resource.page;\r\n $scope.page.currentPage = $scope.page.number + 1;\r\n return resource.$get('blogPostList');\r\n })\r\n .then( function( blogPostList )\r\n {\r\n $scope.blogs = blogPostList;\r\n blogPostList.forEach( function( blog ) {\r\n blog.contentFirstParagraph = getFirstSection(blog.content);\r\n\r\n \/\/ load author profile\r\n blog.$get('author').then(function(author) {\r\n blog.author = author;\r\n });\r\n\r\n });\r\n\r\n })\r\n ;\r\n\r\n };\r\n\r\n setup(0);\r\n\r\n $scope.selectBlogPage = function(pageNumber) {\r\n setup(pageNumber-1); \/\/Spring HATEOAS page starts with 0\r\n };\r\n}\r\n]); <\/pre>\nsetup<\/code> function to load list of blogs for specific page, and load each blog author. The challenge is how to test those chain of promises, which are asynchronous JavaScript operations. By searching Stack Overflow<\/a> and reading other developers’ blog<\/a>, I found the way to use AngularJS$q.defer()<\/code> to resolve the promise in unit test.<\/p>\n\r\n'use strict';\r\n\r\ndescribe('Controller: public\/BlogListController', function() {\r\n var $rootScope, $scope;\r\n var $controller, service;\r\n\r\n var mockWebsite = {\r\n $get: function(rel) {}\r\n };\r\n\r\n var mockResource = {\r\n page: {\r\n size: 10,\r\n totalElements: 100,\r\n totalPages: 4,\r\n number: 0\r\n },\r\n $get: function(rel) {}\r\n };\r\n\r\n var mockBlogPostList = [\r\n {\r\n title: 'Test Blog',\r\n content: '<p>This is first paragraph.<\/p> Other parts...',\r\n $get: function(rel) {}\r\n },\r\n {\r\n title: 'Another Blog',\r\n content: '<p>I came second.<\/p>',\r\n $get: function(rel) {}\r\n }\r\n ];\r\n\r\n var mockAuthor = {\r\n displayName: 'author'\r\n };\r\n\r\n beforeEach(module('jiwhizWeb'));\r\n\r\n beforeEach(inject(function(_$rootScope_, _$controller_, _$q_, _WebsiteService_) {\r\n $rootScope = _$rootScope_;\r\n $scope = $rootScope.$new();\r\n $controller = _$controller_;\r\n service = _WebsiteService_;\r\n\r\n var websiteDeferred = _$q_.defer();\r\n websiteDeferred.resolve(mockWebsite);\r\n spyOn(service, 'load').andReturn(websiteDeferred.promise);\r\n\r\n var blogsDeferred = _$q_.defer();\r\n blogsDeferred.resolve(mockResource);\r\n spyOn(mockWebsite, '$get').andReturn(blogsDeferred.promise);\r\n\r\n var blogListDeferred = _$q_.defer();\r\n blogListDeferred.resolve(mockBlogPostList);\r\n spyOn(mockResource, '$get').andReturn(blogListDeferred.promise);\r\n\r\n var authorDeferred = _$q_.defer();\r\n authorDeferred.resolve(mockAuthor);\r\n spyOn(mockBlogPostList[0], '$get').andReturn(authorDeferred.promise);\r\n spyOn(mockBlogPostList[1], '$get').andReturn(authorDeferred.promise);\r\n\r\n $controller('BlogListController',\r\n {'$rootScope' : $rootScope, '$scope': $scope, 'WebsiteService': service});\r\n $rootScope.$apply(); \/\/ promises are resolved\/dispatched only on next $digest cycle\r\n }));\r\n\r\n it('should make Blog menu item active.', function() {\r\n expect($rootScope.activeMenu.blog == 'active');\r\n });\r\n\r\n it('should have selectBlogPage() function.', function() {\r\n expect($scope.selectBlogPage).toBeDefined();\r\n });\r\n\r\n describe('BlogListController setup(pageNumber) function', function() {\r\n\r\n it('should have currentPage set to 1.', function() {\r\n expect($scope.page.currentPage).toBe(1);\r\n });\r\n\r\n it('should have two blogs and first one is Test Blog.', function() {\r\n expect($scope.blogs.length).toEqual(2);\r\n expect($scope.blogs[0].title).toEqual('Test Blog');\r\n });\r\n\r\n it('should have first blog with title "Test Blog" and author "author"', function() {\r\n expect($scope.blogs[0].title).toEqual('Test Blog');\r\n expect($scope.blogs[0].author.displayName).toEqual('author');\r\n });\r\n\r\n it('should have second blog with title "Another Blog" and author "author"', function() {\r\n expect($scope.blogs[1].title).toEqual('Another Blog');\r\n expect($scope.blogs[1].author.displayName).toEqual('author');\r\n });\r\n\r\n });\r\n}); <\/pre>\n$q.deferred()<\/code>, and use deferred APIresolve(value)<\/code> to return our mock resources. Then use Jasmine spyOn()<\/code> function to stub our resource function and return promise object associated with the deferred object. After we setup all the mock up resources along the chain of promises, and initialize BlogListController<\/code>, we have to do a final step $rootScope.$apply();<\/code> to trigger AngularJS $digest cycle programmatically, so our promises can be resolved.<\/p>\nConclusion<\/h2>\n