Download to read offline
![KARMA Config file karma.conf.js module.exports = function(config) { config.set({ basePath: '../..', frameworks: ['jasmine'], autoWatch : false, browsers : [ 'PhantomJS' ] }); }; Simply run the test suite karma start](https://image.slidesharecdn.com/unittestinginangularjs-160105095324/75/Unit-Testing-in-AngularJS-CC-FE-UX-7-2048.jpg)
![PHANTOMJS KARMA CONFIGURATION Install PhantomJS launcher npm install karmaphantomjslauncher savedev Enable PhantomJS plugin plugins : ['karmajasmine', 'karmaphantomjslauncher'] Configure your browser module.exports = function(config) { config.set({ browsers : ['PhantomJS'] }); };](https://image.slidesharecdn.com/unittestinginangularjs-160105095324/75/Unit-Testing-in-AngularJS-CC-FE-UX-9-2048.jpg)
![MOCHA An example test var assert = require("assert") describe('Array', function(){ describe('#indexOf()', function(){ it('should return 1 when the value is not present', function(){ assert.equal(1, [1,2,3].indexOf(5)); assert.equal(1, [1,2,3].indexOf(0)); }) }) })](https://image.slidesharecdn.com/unittestinginangularjs-160105095324/75/Unit-Testing-in-AngularJS-CC-FE-UX-14-2048.jpg)
![KARMA COVERAGE CONFIGURATION Add a preprocessor Add a reporter Configure the reporter preprocessors = {'**/lib/*.js': 'coverage'}; reporters = ['coverage']; coverageReporter = {type : 'lcovonly',dir : 'coverage/'}](https://image.slidesharecdn.com/unittestinginangularjs-160105095324/75/Unit-Testing-in-AngularJS-CC-FE-UX-34-2048.jpg)
Uploaded byJWORKS powered by Ordina
Unit Testing in AngularJS - CC FE & UX
This document discusses unit testing in AngularJS. It introduces Karma as a test runner for JavaScript unit tests. It also covers popular testing frameworks like Jasmine, Mocha and QUnit that can be used with Karma. It demonstrates how to unit test AngularJS components like controllers, services and directives. Finally, it discusses coverage reports that can be generated with Karma and Istanbul to track testing coverage.
Unit Testing in AngularJS - CC FE & UX
- 1. UNIT TESTING INANGULARJS Dennis Jaamann — Frédéric Ghijselinck —@dennisjaamann @f_ghijselinck CC Front-end & UX
- 2. UNIT TESTING INANGULARJS Unit testing JavaScript Karma Unit testing frameworks QUnit Mocha Jasmine Unit testing AngularJS a. Controller b. Service c. Directive Coverage reports
- 3. UNIT TESTING JAVASCRIPT TestingJavaScript is hard Mixed with HTML Inline scripts No real classes No real modules Feels like wrestling a king croc
- 4. UNIT TESTING JAVASCRIPT- PITFALLS DOM interactions AJAX Event handlers Timeouts / Intervals Promises Basically everything asynchronous
- 5. UNIT TESTING JAVASCRIPT- WHAT DO WE NEED? Browser Test Runner Test framework Assertions (matchers) Ways to mock ...
- 6. KARMA Karma = unittest runner (by angular core team) configuration file test suites headless/real browser Install karma npm install karma savedev Automatically generate a config file karma init
- 7.
- 8. PHANTOMJS Headless browser No GUI Testsrun faster Only suited for unit tests, not integration tests
- 9. PHANTOMJS KARMA CONFIGURATION InstallPhantomJS launcher npm install karmaphantomjslauncher savedev Enable PhantomJS plugin plugins : ['karmajasmine', 'karmaphantomjslauncher'] Configure your browser module.exports = function(config) { config.set({ browsers : ['PhantomJS'] }); };
- 10.
- 11. UNIT TESTING FRAMEWORKS Severaloptions Qunit Mocha Jasmine All similar, choose your own flavor Karma supports all
- 12. QUNIT A minimal QUnittest setup: <html> <head> <meta charset="utf8"> <title>QUnit Example</title> <link rel="stylesheet" href="//code.jquery.com/qunit/qunit1.18.0.css"> </head> <body> <div id="qunit"></div> <div id="qunitfixture"></div> <script src="//code.jquery.com/qunit/qunit1.18.0.js"></script> <script src="tests.js"></script> </body> </html>
- 13. QUNIT The contents oftests.js QUnit.module( "group a" ); QUnit.test( "a basic test example", function( assert ) { assert.ok( true, "true succeeds" ); }); QUnit.test( "notOk test", function( assert ) { assert.notOk( false, "false succeeds" ); }); QUnit.module( "group b" ); QUnit.test( "hello test", function( assert ) { assert.ok( 1 == "1", "Passed!" ); });
- 14.
- 15. JASMINE ▪ test suitewith specs: describe("A suite", function() { it("contains spec with an expectation", function() { expect(true).toBe(true); }); }); describe("A suite is just a function", function() { var a; it("and so is a spec", function() { a = true; expect(a).toBe(true); }); });
- 16. JASMINE setup & teardown globalfunctions: beforeEach() afterEach() beforeAll() afterAll()
- 17.
- 18.
- 19.
- 20.
- 21. JASMINE - DISABLE disablingsuites with xdescribe xdescribe("A disabled suite", function() { it("with a spec", function() { expect(true).toBe(true); }); }); disabling specs with xit describe("A suite", function() { xit("with a disabled spec", function() { expect(true).toBe(true); }); });
- 22. JASMINE - EXCLUSIVETESTS run specific suites with ddescribe ddescribe("An exclusive run suite", function() { it("with a spec", function() { expect(true).toBe(true); }); }); run specific specs with iit describe("A suite", function() { iit("with a exclusive run spec", function() { expect(true).toBe(true); }); });
- 23. UNIT TESTING ANGULARJS Angular= separation of concerns Create highly cohesive, low coupled pieces of functionality Easier to test
- 24. UNIT TESTING ANGULARJS gettingthe module injecting the controller beforeEach(module('app')); beforeEach(inject(function($controller, $rootScope) { controller = $controller; scope = $rootscope.$new(); }));
- 25. UNIT TESTING ANGULARJS- CONTROLLER 'use strict'; anguler.module('app') .controller('FakeController', function($scope, someRecords) { $scope.someRecords = someRecords; });
- 26. UNIT TESTING ANGULARJS- CONTROLLER describe("FakeController", function() { var someRecords; beforeEach(module('app')); beforeEach(inject(function($rootScope, $controller) { $scope = $rootScope.$new(); givenSomeRecords(); dependencies = { $scope : $scope, someRecords : someRecords }; $controller('FakeController', dependencies); }); it('when initialized', function() { thenSomeRecordsAreOnScope(); }); function givenSomeRecords() { someRecords = { test : 'test' }; }; function thenSomeRecordsAreOnScope() { expect($scope.someRecords).toEqual(someRecords); } });
- 27. UNIT TESTING ANGULARJS- SERVICE 'use strict'; anguler.module('app') .service('FakeService', function($http) { this.getIsFake = function() { return $http.get('fakeService/isFake'); }; });
- 28. UNIT TESTING ANGULARJS- SERVICE describe('FakeService', function() { var resolved; beforeEach(module('app')); beforeEach(inject(function(_$httpBackend_, _FakeService_) { $httpBackend = _$httpBackend_; FakeService = _FakeService_; })); it('Resolver returns resolved promise', function() { givenMockIsFake(); whenGetIsFakeCalled(); thenPromiseIsResolved(); }); function givenMockIsFake() { $httpBackend.expectGET('fakeService/isFake').respond(200, 'true'); } function whenGetIsFakeCalled() { FakeService.getIsFake().then(function(promise) { resolved = true; }); $httpBackend.flush(); } function thenPromiseIsResolved() { expect(resolved).toBeTruthy(); } });
- 29.
- 30. UNIT TESTING ANGULARJS- DIRECTIVE 'use strict'; anguler.module('app').directive('fixedPhoneNumberFormat', function() { return { scope : { fixedPhoneNumberFormat : '@' }, link : function(scope, element, attrs) { attrs.$observe('fixedPhoneNumberFormat', function(fixedPhoneNumber) if (_.isEqual(fixedPhoneNumber.length, 8){ fixedPhoneNumber = "0" + fixedPhoneNumber; } element.text(fixedPhoneNumber.substring(0, 2) + " / " + fixedPhoneNumber.substring(2, 5) + " " + fixedPhoneNumber.substring(5, 7) + " " + fixedPhoneNumber.substring(7, 9)); }); } }; });
- 31. UNIT TESTING ANGULARJS- DIRECTIVE describe('FixedPhoneNumberDirective', function() { var element = {}; var formattedFixedPhoneNumber; beforeEach(module('app')); beforeEach(inject(function($rootScope, _$compile_) { $scope = $rootScope.$new(); $compile = _$compile_; })); it("formatfixedphonewithcode", function() { givenTemplate(); $scope.fixedPhoneNumber = "025021910"; //givenFixedPhoneNumberWithNineDigits(); formattedFixedPhoneNumber = "02 / 502 19 10"; //givenFormatFixedPhoneNumber(); whenFormatFixedPhoneNumber(); thenFixedPhoneNumberIsFormatted(); }); function givenTemplate() { var template = '<div datafixedphonenumberformat="{{fixedPoneNumber}}">{{fixedPhoneNumber}}< element = $compile(template)($scope); } function whenFormatFixedPhoneNumber() { $scope.$digest(); } function thenFixedPhoneNumberIsFormatted() { expect(element.text()).toBe(formattedFixedPhoneNumber); }
- 32.
- 33. COVERAGE REPORTS Karma cangenerate coverage reports Uses istanbul.js behind the scenes Multiple report types HTML LCOV Text Cobertura
- 34. KARMA COVERAGE CONFIGURATION Adda preprocessor Add a reporter Configure the reporter preprocessors = {'**/lib/*.js': 'coverage'}; reporters = ['coverage']; coverageReporter = {type : 'lcovonly',dir : 'coverage/'}
- 35.
- 36.
- 37. RESOURCES AngularJS website QUnit website Mochawebsite Jasmine website Karma website Istanbul website SinonJS website Sonar website
- 38. THAAAAAAANKS! Dennis Jaamann —Frédéric Ghijselinck —@dennisjaamann @f_ghijselinck CC Front-end & UX