Testing in AngularJS


Published on

There are my presentation slides for the November 2013 Ottawa AngularJS meeting.

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Testing in AngularJS

  1. 1. AngularJS
  2. 2. Why AngularJS?
  3. 3. Migrating to AngularJS
  4. 4. Testing AngularJS Testing is a core value of the AngularJS development team.
  5. 5. Are Some Tests Just Stupid? Yes! You will probably write a lot of dumb tests.
  6. 6. So what is all this talk about testing? Fact is web developers did not have many tools for testing until recently. Testing is not yet a common practice in front-end development, but web apps are becoming increasingly complex so Google created tools for testing their own suite of web apps. Thanks to guys like Miško Hevery and other AngularJS team members, Google made these tools open source and available for everyone. Essentially these tools provide: proof of testing a way to catch bugs before the client does a way to ensure that new code does not break old code testable code that is more maintainable
  7. 7. Writing Testable Code Test Driven Development means that code is written to be testable. Learn to think about code in a way that makes it testable. Testable code is usually modular and easy to understand. Code that is not written to be testable is usually untestable.
  8. 8. How to Actually Test There are many testing frameworks out there. Here are 3 of the most popular: These frameworks are very much alike. Jasmine is typically used with AngularJS, but you can use whatever you like.
  9. 9. Writing Tests with Jasmine Download from GitHub: http://pivotal.github.io/jasmine Typical directory structure http://www.adobe.com/devnet/html5/articles/unit-test-javascript-applicationswith-jasmine.html
  10. 10. Writing Tests with Jasmine describe("blogCtrl", function () { it('Add a blog entry', inject(function($rootScope, $controller) { var Ctrl = $controller('blogCtrl', {$scope: $rootScope.$new()}); Ctrl.addBlogEntry({“title”:”blog”, “content”:”blah blah”}); expect(scope.blogs.length).toEqual(1); })); it('Remove a blog entry by title', inject(function($rootScope, $controller) { var Ctrl = $controller('blogCtrl', {$scope: $rootScope.$new()}); Ctrl.removeBlogbyTitle({“title”:”blog”}); expect(scope.blogs.length).toEqual(0); })); });
  11. 11. Running your Jasmine Tests Running tests can be done manually or automatically. Small, simple projects rarely need automatic testing. Test are written to run whenever any major changes are done as a way of catching bugs that you might not have expected. Complex applications that have many people are working on them generally benefit from automated tests because those tests can quickly cover the entire code base in several seconds, catching bugs in modules you may not have even been aware of.
  12. 12. Automated Testing with Karma Karma is an open source project started by developers at Google. It automates the testing process and has been used of for years to test everything from AngularJS docs to Gmail. It runs as a nodejs server and is framework agnostic meaning you can use it with any testing or application framework. Karma provides a fast way to auto-run unit tests for data models and logic. Interactivity and DOM tests are not typically done with Karma.
  13. 13. Automated Testing with Karma
  14. 14. Setting up Karma Install nodejs: http://nodejs.org Install and run Karma with 3 commands using nodejs package manager $ npm install -g karma – downloads and installs everything you need $ karma init – answer some questions about where yous test scripts are and what browser you want to use for testing $ karma start – starts the karma server
  15. 15. End to End Testing with Protractor  Used for front-end DOM testing  Built on top of WebDriverJS and Selenium Server  Installed via NodeJS  Replaces the old ngScenario test runner  Uses Jasmine or Mocha  Does not use Karma  Tests are written for DOM elements  Tests are more “expensive” than Karma tests and run much slower
  16. 16. End to End Testing with Protractor http://blog.envylabs.com/post/61403296076/testing-angularjs-apps-with-protractor describe('Say Hello', function() { ptor = protractor.getInstance(); beforeEach(function() { ptor.get('#/'); button = ptor.findElement(protractor.By.className('btn-say-hello')); button.click(); }); it('says hello', function() { message = ptor.findElement(protractor.By.className('message')); expect(message.getText()).toEqual('Hello!'); }); });
  17. 17. The Future of Front-end Testing Front-end testing is incredibly boring – a task reserved for interns or junior developers. That is because until recently, front-end testing was an entirely manual process. Most universities and colleges still do not offer courses on either front-end or back-end testing, but an increasing number of realworld programming jobs now require at least some experience with testing. Automated testing systems will improve over the next few years to bring us to an entirely new level of reality in testing. Writing code for testing scenarios will be as much a required programming skill as writing the code it is intended to test.