Angular testing
3 likes2,301 views
This document provides an overview of various tools for testing AngularJS applications, including testing frameworks like Jasmine and Mocha, unit testing with Karma and ngMock, end-to-end testing with Protractor, and automating tasks with Grunt. It describes the purpose and basic usage of these tools, provides code examples, and lists additional resources for learning more.
![Mocha
Example
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/angulartesting1-150224232540-conversion-gate01/85/Angular-testing-7-320.jpg)
![Karma
● Instalation
# Install Karma:
$ npm install karma karma-cli --save-dev
# Install plugins that your project needs:
$ npm install karma-jasmine karma-phantomjs-launcher karma-
coverage karma-mocha-reporter --save-dev
● Configuration
# Initialize a config file:
$ node ./node_modules/karma-cli/bin/karma init [<configFile>]](https://image.slidesharecdn.com/angulartesting1-150224232540-conversion-gate01/85/Angular-testing-25-320.jpg)
![Karma
● Configuration file ( karma.conf.js )
module.exports = function(config) {
config.set({
frameworks: ["jasmine"],
files: ["src/*.js","test/*.js"],
plugins: ["karma-jasmine","karma-phantomjs-launcher",
"karma-coverage","karma-mocha-reporter"],
browsers: ["PhantomJS"],
reporters: ["mocha","coverage"],
preprocessors: {"src/*.js": "coverage"},
coverageReporter: { type : "html", dir : "coverage"},
display: "full",
isVerbose: true,
showColors: true,
includeStackTrace: true
});
};](https://image.slidesharecdn.com/angulartesting1-150224232540-conversion-gate01/85/Angular-testing-26-320.jpg)
![● Gruntfile
grunt.initConfig({
...
unit: {
configFile: "karma.conf.js",
singleRun: true,
browsers: ["PhantomJS"]
}
});
...
grunt.loadNpmTasks("grunt-karma");
grunt.registerTask("unit", "Run unit test",["karma"]);
Grunt Task for Karma](https://image.slidesharecdn.com/angulartesting1-150224232540-conversion-gate01/85/Angular-testing-28-320.jpg)
![Protractor
● Configuration file(protractor.conf.js):
exports.config = {
capabilities: {
"browserName": "chrome"
},
directConnect: true, /* bypass selenium webdriver */
specs: ["spec/javascripts/e2e/**/*.js"],
baseUrl: "http://local.ntp.uff.br:4000",
framework: "jasmine"
}](https://image.slidesharecdn.com/angulartesting1-150224232540-conversion-gate01/85/Angular-testing-35-320.jpg)
![● Gruntfile
...
grunt.loadNpmTasks("grunt-rails-server");
grunt.loadNpmTasks("grunt-protractor-runner");
...
grunt.registerTask("e2e", "Run e2e test",
["rails", "protractor"]);
Grunt Task for Protractor](https://image.slidesharecdn.com/angulartesting1-150224232540-conversion-gate01/85/Angular-testing-38-320.jpg)
Angular testing
- 1. Testing with AngularJS Raissa Ferreira [email protected]
- 2. Testing Tools ● Testing Frameworks ○ Jasmine ● Karma (Unit Test) ● Grunt ● Protractor (E2E Test) ● Bower ● NVM
- 3. Testing Frameworks ● QUnit ● Jasmine ● Mocha
- 4. QUnit Example 1 test('test', function() { equals( {}, {}, 'fails, these are different objects'); }); Example 2 module('Module A'); test('a test',function() {}); test('an another test', function() {}); module('Module B'); test('a test', function() {}); test('an another test', function() {});
- 5. Jasmine Example describe("A spec", function() { var foo; beforeEach(function() { foo = 0; foo += 1; }); it("is just a function, so it can contain any code",function(){ expect(foo).toEqual(1); }); });
- 6. Jasmine X QUnit ● Nested describes ● Less vulnerable to changes, less setup ● Modules(can’t be nested) ● Massive amount of setup to cover all different paths
- 7. Mocha Example 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)); }); }); });
- 8. Jasmine X Mocha ● Runner ● Nested describes ● Built-in: ○ Assertion library ○ Mocking library ● Runner ● Nested describes ● You can choose: ○ Assertion library (eg. Chai) ○ Mocking library (eg. Sinon) ● Pick syntax
- 9. Jasmine ● Behavior Driven Development testing framework for JavaScript ● Does not depend on any other JavaScript frameworks ● Does not require a DOM ● Clean syntax
- 10. Suites ● Begins with global Jasmine function describe ○ Takes two parameters: ■ string - a name or title for a spec suite, what is being tested ■ function - Block of code that implements the suite Jasmine
- 11. Specs ● Begins with global Jasmine function it. ○ Takes two parameters: ■ string - title of the spec ■ function - the spec, or test ○ Can contains one or more expectations ■ Expectation - assertion that is either true or false ○ Passing spec - all true expectations ○ Failing spec - one or more false expectations Jasmine
- 12. Expectations ● Built with function expect ○ Takes the actual value ● Chained with a matcher function ○ Takes the expected value Eg. expect(actualValue).toEqual(expectedValue); Jasmine
- 13. Matchers ● Implement boolean comparison between actual and expected value ● Responsible for reporting to Jasmine if expectation is true or false ○ Based on this, Jasmine will pass or fail the spec ● Matcher can evaluate to a negative assertion by chaining the call to expect with a not Eg. expect(a).not.toBe(null); Jasmine
- 14. Matchers ● Included Matchers ○ toBe(===), toEqual, toBeNull, toBeDefined, toBeUndefined ○ Boolean Casting - toBeFalsy, toBeTruthy ○ String/Regex - toMatch ○ Array - toContain ○ Math - toBeLessThen, toBeGreaterThan ○ Precision Math - toBeClose ○ Check if function throws exception - toThrow Jasmine
- 15. Spies ● Test double functions ● Can stub any function ● Tracks calls to it and all arguments ● Only exists in describe and it blocks it is defined ■ Will be removed after each spec ● Matchers ■ toHaveBeenCalled - if the spy was called ■ toHaveBeenCalledWith - if argument list matches any of the recorded calls to the spy Jasmine
- 16. Jasmine Asynchronous Support ● beforeEach, it and afterEach can take optional single argument to be called when the async work is complete
- 17. Jasmine Asynchronous Support describe("Asynchronous specs", function() { var value; beforeEach(function(done) { setTimeout(function() { value=0; done(); }, 1); }); it("should support async execution of test preparation and expectations", function(done) { value++; expect(value).toBeGreaterThan(0); done(); }); });
- 18. ngMock ● Provides support to inject and mock Angular services into unit tests ● Extends various core ng services ○ $exceptionHandler ○ $log ○ $interval ○ $httpBackend ○ $timeout ● Instalation (via Bower) $ bower install angular-mocks --save-dev
- 19. ngMock Functions (declared ONLY in jasmine or mocha) ● angular.mock.module ○ Registers a module configuration code ○ Collects configuration information to be used when the injector is created by inject ● angular.mock.inject ○ Wraps a function into an injectable function ○ Creates new instance of $injector per test to be used for resolving references ○ $injector is used to retrieve object instances as defined by provider, instantiate types, invoke methods, and load modules
- 20. Unit Test (Service) describe("Auth", function() { beforeEach(module("app")); var Auth, $httpBackend; beforeEach(inject(function(_Auth_, _$httpBackend_) { Auth = _Auth_; $httpBackend = _$httpBackend_; })); afterEach(function() { $httpBackend.verifyNoOutstandingRequest(); });
- 21. Unit Test (Service) describe(".logout", function() { describe("given a valid token", function() { var Session, token = "9664bbf375"; beforeEach(inject(function(_Session_) { Session = _Session_; $httpBackend. whenGET("api/auth/logout.json?token="+token). respond(200, { invalid: true }); spyOn(Session, "clear"); })); it("should erase user’s token", function() { Auth.logout(token); $httpBackend.flush();/* explicitly flush pending requests */ expect(Session.clear).toHaveBeenCalled(); }); }); });
- 22. Unit Test (Controller) describe("AuthController", function() { beforeEach(module("app")); var $scope, controller, $httpBackend; beforeEach(inject( function($controller, $injector, _$httpBackend_) { $httpBackend = _$httpBackend_; $scope = $injector.get("$rootScope").$new(); controller = $controller("AuthController", { $scope: $scope }); })); afterEach(function() { $httpBackend.verifyNoOutstandingRequest(); });
- 23. Unit Test (Controller) describe(".login", function() { var $state, httpBackend; describe("given valid user"s credentials", function() { beforeEach(inject(function(_$state_) { $state = _$state_; $httpBackend.whenPOST("api/auth/login.json").respond(200,{}); spyOn($state, "go"); $scope.login(); $httpBackend.flush(); })); it("should go to role selection state", function() { expect($state.go).toHaveBeenCalledWith("role_selection"); }); }); }); });
- 24. Karma ● Testing Engine ○ Launches a HTTP server and generates the test runner HTML file ■ Runs in browser ■ Can run in multiple real browsers (can also run in a headless one - PhantomJS) ■ Show output in command line ■ Developed by the AngularJS team
- 25. Karma ● Instalation # Install Karma: $ npm install karma karma-cli --save-dev # Install plugins that your project needs: $ npm install karma-jasmine karma-phantomjs-launcher karma- coverage karma-mocha-reporter --save-dev ● Configuration # Initialize a config file: $ node ./node_modules/karma-cli/bin/karma init [<configFile>]
- 26. Karma ● Configuration file ( karma.conf.js ) module.exports = function(config) { config.set({ frameworks: ["jasmine"], files: ["src/*.js","test/*.js"], plugins: ["karma-jasmine","karma-phantomjs-launcher", "karma-coverage","karma-mocha-reporter"], browsers: ["PhantomJS"], reporters: ["mocha","coverage"], preprocessors: {"src/*.js": "coverage"}, coverageReporter: { type : "html", dir : "coverage"}, display: "full", isVerbose: true, showColors: true, includeStackTrace: true }); };
- 27. ● Javascript Task Runner ● Automation of repetitive tasks: ○ Minification ○ Compilation ○ Unit Testing ... ● Instalation # install Grunt $ npm install grunt # install Grunt’s command line interface globally $ npm install -g grunt-cli Grunt
- 28. ● Gruntfile grunt.initConfig({ ... unit: { configFile: "karma.conf.js", singleRun: true, browsers: ["PhantomJS"] } }); ... grunt.loadNpmTasks("grunt-karma"); grunt.registerTask("unit", "Run unit test",["karma"]); Grunt Task for Karma
- 29. Protractor ● Acceptance tests ● Integration Tests ● Main paths ● Takes longer to run(compared to unit testing) ● WebdriverJS (Binding for Selenium Webdriver) ● Works better with Jasmine ● Currently does not support PhantomJS
- 30. Protractor API (Most Common functions) ● element Eg. element(locator) ○ isPresent ● element.all ● browser ○ waitForAngular ○ get ○ pause ○ debugger
- 31. API (Most Common functions) ● Protractor’s locators ○ by ■ binding ■ model ■ css ■ cssContainingText ■ buttonText ● getText ● sendKeys ● clear ● getAttribute Protractor
- 32. Protractor ● Example describe("angularjs homepage", function() { it("should add one and two", function() { browser.get("http://juliemr.github.io/protractor- demo/"); element(by.model("first")).sendKeys(1); element(by.model("second")).sendKeys(2); element(by.id("gobutton")).click(); expect(element(by.binding("latest")).getText()). toEqual("3"); }); }); });
- 33. ngMockE2E ● Fake HTTP backend implementation suitable for end-to-end testing ○ $httpBackend ● Can be used via: ● when API - when(<HTTPMETHOD>, url, params).respond (statusCode, data) ○ shortcuts (whenGET, whenPOST,..) ● Can pass through requests to the real $httpBackend (passThrough function) ● Flushes mocked out requests automatically ● Instalation (via Bower) $ bower install angular-mocks --save-dev
- 34. ● Instalation # Install Protractor: $ npm install protractor --save-dev # Install webdriver-manager, helper tool to get an instance of a Selenium Server running: $ node node_modules/protractor/bin/webdriver-manager update # Install Grunt Protractor Task $ npm install grunt-protractor-runner --save-dev # Install Rails Server Task $ npm install grunt-rails-server--save-dev Protractor
- 35. Protractor ● Configuration file(protractor.conf.js): exports.config = { capabilities: { "browserName": "chrome" }, directConnect: true, /* bypass selenium webdriver */ specs: ["spec/javascripts/e2e/**/*.js"], baseUrl: "http://local.ntp.uff.br:4000", framework: "jasmine" }
- 36. ● Gruntfile grunt.initConfig({ ... rails: { /* Backend Task */ options: { port: 4000, environment: "test", keepAlive: false }, your_target: { } } ... Grunt Task for Protractor
- 37. ● Gruntfile protractor: { options: { configFile: "node_modules/protractor/referenceConf.js", keepAlive: false, noColor: false, }, your_target: { options: { configFile: "protractor.conf.js", args: {} } } } Grunt Task for Protractor
- 38. ● Gruntfile ... grunt.loadNpmTasks("grunt-rails-server"); grunt.loadNpmTasks("grunt-protractor-runner"); ... grunt.registerTask("e2e", "Run e2e test", ["rails", "protractor"]); Grunt Task for Protractor
- 39. NVM ● Instalation # Install nvm (Node Version Manager) $ curl https://raw.githubusercontent.com/creationix/nvm/v0.23.3 /install.sh | bash # To source it from your shell, this line can be added to ~/. bashrc, ~/.profile, or ~/.zshrc $ source ~/.nvm/nvm.sh # To install a node version $ nvm install 0.10 # In your project folder, you can include a .nvmrc file to choose the desired node version $ nvm use 0.10
- 40. Bower Package Manager for Web ● Instalation # Install Bower globally $ npm install -g bower # Interactively create a bower.json file $ bower init # Install a package $ bower install <package-name> # List all installed packages and check for new versions $ bower list # Clean local unused packages $ bower prune
- 41. Bower ● Configuration bower.json { "name": "assets", "dependencies": { "jquery": "latest", "bootstrap": "latest", "angular": "1.3.4" ... } .bowerrc { "directory": "vendor/assets/bower_components" }
- 42. Resources Testing Frameworks ● QUnit http://qunitjs.com/ ● Jasmine http://jasmine.github.io/2.2/introduction.html ● Mocha http://mochajs.org/ Assertion library ● Chai http://chaijs.com/ Mocking library ● Sinon http://sinonjs.org/
- 43. Resources Unit Testing ● Unit Testing https://docs.angularjs.org/guide/unit-testing ● Jasmine http://jasmine.github.io/2.2/introduction.html ● ngMock https://docs.angularjs.org/api/ngMock
- 44. Resources Test Runner ● Karma http://karma-runner.github.io/ ● Karma Jasmine https://www.npmjs.com/package/karma-jasmine ● Karma PhantomJS Launcher https://github.com/karma-runner/karma-phantomjs-launcher ● Karma Mocha Reporter https://www.npmjs.com/package/karma-mocha-reporter ● Karma Coverage https://github.com/karma-runner/karma-coverage ● PhantomJS https://github.com/ariya/phantomjs
- 45. E2E Testing ● E2E Test https://docs.angularjs.org/guide/e2e-testing ● Protractor http://angular.github.io/protractor ● ngMockE2E https://docs.angularjs.org/api/ngMockE2E ● HTTP Backend Proxy https://www.npmjs.com/package/http-backend-proxy Resources
- 46. Automate Tasks ● Grunt http://gruntjs.com/ ● Grunt Karma https://github.com/karma-runner/grunt-karma ● Grunt Protractor Runner https://www.npmjs.com/package/grunt-protractor-runner Resources
- 47. Interesting Podcasts ● Adventures in Angular Podcast http://devchat.tv/adventures-in-angular/026-aia-testing-tools http://devchat.tv/adventures-in-angular/025-aia-testing-with- ward-bell Resources