Right click on the project and add an HTML file called index.html<\/b><\/li>\n<\/ul>\n\n\n\n In this step, we have added new files to write code, unit test and display test results.<\/p>\n\n\n\n
Step 12<\/h2>\n\n\n\n In this step, we will setup SpecRunner.html. This will render test results in the browser. So, open SpecRunner.html and add the following references.<\/p>\n\n\n\n
Jasmine Test Results\n <meta charset=\"utf-8\" \/>\n <link href=\"node_modules\/jasmine-core\/lib\/jasmine-core\/jasmine.css\" rel=\"stylesheet\" \/>\n <script src=\"node_modules\/jasmine-core\/lib\/jasmine-core\/jasmine.js\"><\/script>\n <script src=\"node_modules\/jasmine-core\/lib\/jasmine-core\/jasmine-html.js\"><\/script>\n <script src=\"node_modules\/jasmine-core\/lib\/jasmine-core\/boot.js\"><\/script>\n\n <script src=\"node_modules\/angular\/angular.js\"><\/script>\n <script src=\"node_modules\/angular-mocks\/angular-mocks.js\"><\/script>\n\n <script src=\"app\/CalculatorApp.js\">\n <script src=\"tests\/CalculatorAppTest.js\"><\/script><\/pre>\n\n\n\nStep 13 – Writing Tests for AngularJS filter<\/h2>\n\n\n\n Finally, we have reached to step in which we will write some tests! Let\u2019s start by writing tests for the AngularJS filter. Add following test to CalculatorAppTest.js<\/b>.<\/p>\n\n\n\ndescribe('Calculator App Tests', function () {\n\n beforeEach(module('MyApp'));\n\n describe('reversestringfiltertest', function () {\n\n var reverse;\n beforeEach(inject(function ($filter) { \/\/initialize filter\n reverse = $filter('reverse', {});\n }));\n\n it('Should reverse a string', function () { \n expect(reverse('india')).toBe('aidni'); \/\/pass test\n expect(reverse('don')).toBe('don'); \/\/fail test\n });\n });\n});<\/pre>\n\n\n\nIn the above code snippet, we are creating a proxy of the module and filter using ng-mock. We have written tests for the filter name \u2018reverse\u2019 from module \u2018MyApp\u2019 and we are injecting the filter using the $filter service of ng-mock.<\/p>\n\n\n\n
At this point, if we go ahead and run the SpecRunner.html, we will get a failed test result because we have not created the AngularJS filter or the \u2018MyApp\u2019 module.<\/p>\n\n\n\nSo now let us go ahead and create an AngularJS Module \u2018MyApp\u2019 with filter \u2018reverse\u2019. We will create these in the App\/CalculatorApp.js<\/b><\/p>\n\n\n\nvar MyApp = angular.module(\"MyApp\", []);\n\nMyApp.filter('reverse', [function () {\n return function (string) {\n return string.split('').reverse().join('');\n }\n}]);<\/pre>\n\n\n\nNow go back and run once again, run SpecRunner.html. We will find, once again test is failed. As it is showing in test failure message that \u2013 Expected \u2018nod\u2019 to be \u2018don\u2019<\/p>\n\n\n\nIf you remember, we deliberately wrote a failed test. So now let\u2019s go ahead and fix the test in CalculatorAppTest.js<\/p>\n\n\n\n
describe('Calculator App Tests', function () {\n\n beforeEach(module('MyApp'));\n\n describe('reversestringfiltertest', function () {\n\n var reverse;\n beforeEach(inject(function ($filter) { \/\/initialize filter\n reverse = $filter('reverse', {});\n }));\n\n it('Should reverse a string', function () { \n expect(reverse('india')).toBe('aidni');\n expect(reverse('don')).toBe('nod'); \n });\n });\n});<\/pre>\n\n\n\nWhen we run the test in SpecRunner.html, we\u2019ll find all tests are passed as shown in the image below.<\/p>\n\n\n\n
In this step, we wrote a test for AngularJS filter and ran that using Jasmine SpecRunner.html.<\/p>\n\n\n\n
Problems in running test using SpecRunner.html <\/h3>\n\n\n\n You may have noticed the only problem in the approach above is that each time we change the test code or source code, we need to go back and either load SpecRunner.html again or refresh it manually to see the updated test result. In real project development, this could be a pain. We need a mechanism in which whenever the code changes, tests should be executed automatically. To do this, we have test runner. We have already installed the Karma<\/b> test runner to automatically run tests whenever code changes, so now let\u2019s configure it to do that.<\/p>\n\n\n\nStep 14<\/h2>\n\n\n\n
To configure Karma, we need to run command Karma init.<\/p>\n\n\n\n
karma init<\/pre>\n\n\n\nYou will be prompted with many questions to answer, use the following answers as displayed below:<\/p>\n\n\n\nKarma.cnf.js file has been created after answering those questions. Next, let us open Visual Studio and include the newly created file Karma.conf.js<\/b> in project. Open Karma.conf.js and add references of Angular and Angular Mock. Your Files sections should look like the image below:<\/p>\n\n\n\nfiles: [\n 'node_modules\/angular\/angular.js',\n 'node_modules\/angular-mocks\/angular-mocks.js',\n 'app\/*.js',\n 'tests\/*Test.js'\n ],<\/pre>\n\n\n\nNext go back to command prompt and run the command<\/p>\n\n\n\n
karma start <\/pre>\n\n\n\nAs soon as we run the karma start command, tests will start executing and we can see test results on the command prompt as shown in the image below. As you change the code and save the file, the test will be executed automatically.<\/p>\n\n\n\nStep 15<\/h2>\n\n\n\n Now let\u2019s write a unit test for the AngularJS Controller. Add the following test to CalculatorAppTest.js<\/b> and add a test for the controller below to the filter test or below the filter test describe.<\/p>\n\n\n\ndescribe('addcontrollertest', function () {\n var $controller;\n beforeEach(inject(function (_$controller_) {\n $controller = _$controller_;\n }));\n it('1 + 1 should equal 2', function () {\n var $scope = {};\n var controller = $controller('CalculatorController', { $scope: $scope });\n $scope.num1 = 1;\n $scope.num2 = 2;\n $scope.add();\n expect($scope.sum).toBe(3);\n });\n });<\/pre>\n\n\n\nWe are creating a proxy of the controller and injecting that using ng-mock $controller service. Once the controller is injected, take the reference of CalculatorController (controller in the test here) and calling the add method. At this point the test will fail, since we have not written controller yet. Karma is giving the failure message that CalculatorController is not a function.<\/p>\n\n\n\nNext let us go ahead and write the controller in the \u2018MyApp\u2019 module.<\/p>\n\n\n\n
MyApp.controller('CalculatorController', function ($scope) {\n $scope.add = function () {\n $scope.sum = $scope.num1 + $scope.num2;\n }\n});<\/pre>\n\n\n\nAs soon as we save the CalculatorApp.js file after writing the controller, the test will pass as shown in the image below:<\/p>\n\n\n\nStep 16: Testing AngularJS Factory with local data \u00a0<\/h2>\n\n\n\n Let us say that we have created an AngularJS service using factory method name PlayerLocalApi. This service is returning local data which is hard coded as of now. The Service is created as shown in the listing below:<\/p>\n\n\n\n
MyApp.factory('PlayerLocalApi', function () {\n \/\/var data = [{ \"Name\": \"Dhananjay Kumar\", \"Age\": 33.0 }];\n var data = [{ \"Id\": \"1\", \"Name\": \"Dhananjay Kumar\", \"Age\": 33.0 }, { \"Id\": \"2\", \"Name\": \"Sachin Tendulkar\", \"Age\": 22.0 }, { \"Id\": \"6\", \"Name\": \"rahul dravid\", \"Age\": 60.0 }];\n var PlayerLocalApi = {};\n PlayerLocalApi.getPlayers = function () {\n return data;\n }\n\n return PlayerLocalApi;\n});<\/pre>\n\n\n\nWe can write a unit test to test the service as shown in the listing below:<\/p>\n\n\n\n
describe('playerservicetest', function () {\n var data = [{ \"Id\": \"1\", \"Name\": \"Dhananjay Kumar\", \"Age\": 33.0 }, { \"Id\": \"2\", \"Name\": \"Sachin Tendulkar\", \"Age\": 22.0 }, { \"Id\": \"6\", \"Name\": \"rahul dravid\", \"Age\": 60.0 }];\n var PlayerLocalApi = {};\n\n beforeEach(inject(function (_PlayerLocalApi_) {\n PlayerLocalApi = _PlayerLocalApi_;\n }));\n it('should return search player data', function () {\n expect(PlayerLocalApi.getPlayers()).toEqual(data);\n\n });\n });<\/pre>\n\n\n\nIn the above code snippet, we are injecting the service PlayerLocalApi and then calling getPlayers on that. Also, we have exact test data to test the data returns from the service. This test will pass.<\/p>\n\n\n\nJust to make sure that we have written the test correctly, go back to service and comment the second data and uncomment the first data so the modified service is as listed below:<\/p>\n\n\n\n
MyApp.factory('PlayerLocalApi', function () {\n var data = [{ \"Name\": \"Dhananjay Kumar\", \"Age\": 33.0 }];\n \/\/var data = [{ \"Id\": \"1\", \"Name\": \"Dhananjay Kumar\", \"Age\": 33.0 }, { \"Id\": \"2\", \"Name\": \"Sachin Tendulkar\", \"Age\": 22.0 }, { \"Id\": \"6\", \"Name\": \"rahul dravid\", \"Age\": 60.0 }];\n var PlayerLocalApi = {};\n PlayerLocalApi.getPlayers = function () {\n return data;\n }\n\n return PlayerLocalApi;\n});<\/pre>\n\n\n\nNow the service is returning data which is not the same as test data in the test so we will get a failed test as shown in the image below:<\/p>\n\n\n\nAnd that\u2019s how to write unit tests for services returning local data.<\/p>\n\n\n\n
Conclusion <\/h2>\n\n\n\n In this post we covered a lot! We learned how to:<\/p>\n\n\n\n
\nSet up a development environment<\/li>\n\n\n\n Set up a test environment for jasmine<\/li>\n\n\n\n Setup a karma test runner environment<\/li>\n\n\n\n Write unit tests for filter, controller, and service<\/li>\n<\/ul>\n\n\n\nIn further posts, we will see how to write unit tests for $http, $q services etc. I hope you find this post useful. Thanks for reading!<\/p>\n","protected":false},"excerpt":{"rendered":"
Learn how to write unit tests with jasmine, how to run them with karma, and how to create proxies of AngularJS controls like filter, controller, and more.<\/p>\n","protected":false},"author":65,"featured_media":2366,"comment_status":"publish","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,17],"tags":[],"class_list":["post-595","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-how-to"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/595","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=595"}],"version-history":[{"count":2,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/595\/revisions"}],"predecessor-version":[{"id":2007,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/595\/revisions\/2007"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/2366"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=595"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=595"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"](\"\/community\/cfs-filesystemfile\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.angularunittest2\/4503.pic1.png\" "\\"At")
<\/figure>\n\n\n\n![\"New](\"\/community\/cfs-filesystemfile\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.angukarjsunittest\/1234.pic2.png\" "\\"New")
<\/figure>\n\n\n\n![\"](\"\/community\/cfs-filesystemfile\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.angularunittest2\/3426.pic2.png\" "\\"Once")
<\/figure>\n\n\n\n![\"](\"\/community\/cfs-filesystemfile\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.angularunittest2\/6574.pic3.png\" "\\"we")
<\/figure>\n\n\n\n![\"](\"\/community\/cfs-filesystemfile\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.angularunittest2\/8233.pic4.png\" "\\"this")
<\/figure>\n\n\n\n![\"](\"\/community\/cfs-filesystemfile\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.angularunittest2\/3438.pic5.png\" "\\"In")
<\/figure>\n\n\n\n![\"](\"\/community\/cfs-filesystemfile\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.angularunittest2\/2055.pic6.png\" "\\"In")
<\/figure>\n\n\n\n![\"](\"\/community\/cfs-filesystemfile\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.angularunittest2\/2870.pic7.png\" "\\"In")
<\/figure>\n\n\n\n![\"](\"\/community\/cfs-filesystemfile\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.angularunittest2\/4024.pic8.png\" "\\"we")
<\/figure>\n\n\n\n![\"](\"\/community\/cfs-filesystemfile\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.angukarjsunittest\/7103.pic11.png\" "\\"In")
<\/figure>\n\n\n\n![\"](\"\/community\/cfs-filesystemfile\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.angukarjsunittest\/0257.pic12.png\" "\\"At")
<\/figure>\n\n\n\n![\"](\"\/community\/cfs-filesystemfile\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.angukarjsunittest\/4035.pic13.png\" "\\"We")
<\/figure>\n\n\n\n![\"](\"\/community\/cfs-filesystemfile\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.angularunittest2\/3022.pic9.png\" "\\"configure")
<\/figure>\n\n\n\n![\"](\"\/community\/cfs-filesystemfile\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.angularunittest2\/0726.pic10.png\" "\\"You")
<\/figure>\n\n\n\n![\"](\"\/community\/cfs-filesystemfile\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.angularunittest2\/4431.pic11.png\" "\\"As")
<\/figure>\n\n\n\n![\"](\"\/community\/cfs-filesystemfile\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.angularunittest2\/0726.pic12.png\" "\\"At")
<\/figure>\n\n\n\n![\"](\"\/community\/cfs-filesystemfile\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.angularunittest2\/7242.pic13.png\" "\\"As")
<\/figure>\n\n\n\n![\"](\"\/community\/cfs-filesystemfile\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.angularunittest2\/0207.pic14.png\")
<\/figure>\n\n\n\n![\"](\"\/community\/cfs-filesystemfile\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.angularunittest2\/7651.pic15.png\" "\\"Now")
<\/figure>\n\n\n\n