Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular testing

1,493 views

Published on

Angular Testing Tools

Published in: Internet

Angular testing

  1. 1. Testing with AngularJS Raissa Ferreira rai200890@gmail.com
  2. 2. Testing Tools ● Testing Frameworks ○ Jasmine ● Karma (Unit Test) ● Grunt ● Protractor (E2E Test) ● Bower ● NVM
  3. 3. Testing Frameworks ● QUnit ● Jasmine ● Mocha
  4. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 16. Jasmine Asynchronous Support ● beforeEach, it and afterEach can take optional single argument to be called when the async work is complete
  17. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 30. Protractor API (Most Common functions) ● element Eg. element(locator) ○ isPresent ● element.all ● browser ○ waitForAngular ○ get ○ pause ○ debugger
  31. 31. API (Most Common functions) ● Protractor’s locators ○ by ■ binding ■ model ■ css ■ cssContainingText ■ buttonText ● getText ● sendKeys ● clear ● getAttribute Protractor
  32. 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. 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. 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. 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. 36. ● Gruntfile grunt.initConfig({ ... rails: { /* Backend Task */ options: { port: 4000, environment: "test", keepAlive: false }, your_target: { } } ... Grunt Task for Protractor
  37. 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. 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. 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. 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. 41. Bower ● Configuration bower.json { "name": "assets", "dependencies": { "jquery": "latest", "bootstrap": "latest", "angular": "1.3.4" ... } .bowerrc { "directory": "vendor/assets/bower_components" }
  42. 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. 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. 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. 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. 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. 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

×