Testing Web Applications

2,187 views
2,016 views

Published on

Introductory overview of testing techniques for web application development. Explains where different testing methods fit in to the software development cycle.

Published in: Software, Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,187
On SlideShare
0
From Embeds
0
Number of Embeds
84
Actions
Shares
0
Downloads
63
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Testing Web Applications

  1. 1. Testing! Web Applications presented by Seth McLaughlin @sethmc
  2. 2. E N G I N E E R I N G www.shapesecurity.com
  3. 3. testing is a BIG topic.
  4. 4. how to effectively test JavaScript code in your web applications?
  5. 5. Workflow.
  6. 6. Start Commit Code Staging QA Sign-off In ProdCode Review DEV Right away! PM Build me feature X ASAP!
  7. 7. Start Commit Code Staging QA Sign-off In ProdCode Review DEV working for the man…
  8. 8. Start Commit Code Staging QA Sign-off In ProdCode Review every night and day! DEV
  9. 9. Start Commit Code Staging QA Sign-off In ProdCode Review DEV everyone’s a critic
  10. 10. Start Commit Code Staging QA Sign-off In ProdCode Review DEV hallelujah!
  11. 11. Start Commit Code Staging QA Sign-off In ProdCode Review DEV my work here is done.
  12. 12. Start Commit Code Staging QA Sign-off In ProdCode Review DEV my work here is done. QA we’ll see about that!
  13. 13. Start Commit Code Staging QA Sign-off In ProdCode Review QA ship it!
  14. 14. Start Commit Code Staging QA Sign-off In ProdCode Review CUSTOMER feature X is awesome!
  15. 15. Start Commit Code Staging QA Sign-off In ProdCode Review elapsed time: 0 days start coding!
  16. 16. Start Commit Code Staging QA Sign-off In ProdCode Review elapsed time: 7 days start code review
  17. 17. Start Commit Code Staging QA Sign-off In ProdCode Review elapsed time: 9 days commit code
  18. 18. Start Commit Code Staging QA Sign-off In ProdCode Review elapsed time: 10 days deploy code to staging
  19. 19. Start Commit Code Staging QA Sign-off In ProdCode Review elapsed time: 12 days QA finds a bug in staging
  20. 20. Start Commit Code Staging QA Sign-off In ProdCode Review elapsed time: 13 days fix bug
  21. 21. Start Commit Code Staging QA Sign-off In ProdCode Review elapsed time: 15 days code review fix
  22. 22. Start Commit Code Staging QA Sign-off In ProdCode Review elapsed time: 17 days commit fixed code
  23. 23. Start Commit Code Staging QA Sign-off In ProdCode Review elapsed time: 17 days deploy (again) to staging
  24. 24. Start Commit Code Staging QA Sign-off In ProdCode Review elapsed time: 19 days QA is happy
  25. 25. Start Commit Code Staging QA Sign-off In ProdCode Review elapsed time: 20 days shipped to production
  26. 26. Start Commit Code Staging QA Sign-off In ProdCode Review elapsed time: 6 days Dev finds the bug while coding
  27. 27. Start Commit Code Staging QA Sign-off In ProdCode Review elapsed time: 15 days could have saved over 5 days by catching bug sooner alternatively…
  28. 28. find bugs as early as possible.
  29. 29. Static Analysis Start Commit Code Staging QA Sign-off In ProdCode Review var config = {! name: this.name,! style: 'solo',! }; blows up in IE7
  30. 30. Static Analysis Start Commit Code Staging QA Sign-off In ProdCode Review function getObjs(paths) { return paths.map(function (p) { var obj = null; ! try { obj = require(p); } catch (e) { console.error('Cannot load path', p); } }).filter(function (obj) { return obj !== null; }); }
  31. 31. Static Analysis Start Commit Code Staging QA Sign-off In ProdCode Review ESLint • Find common errors and enforce coding style • Run every time you save a file! (automatically) • Fast! www.jshint.com www.eslint.org JS Hint DEV eslint ftw!
  32. 32. Unit Tests Start Commit Code Staging QA Sign-off In ProdCode Review • Test code at a granular level • Test as you develop (TDD) • Great traceability • Fast! Fun! DEV I ♥ unit tests visionmedia.github.io/mocha simple, flexible, fun jasmine.github.io www.qunitjs.com mocha
  33. 33. Continuous Integration Start Commit Code Staging QA Sign-off In ProdCode Review Pre-Commit Post-Commit example: run eslint and mocha tests example: run selenium tests hudson-ci.org Hudson jenkins-ci.org Jenkins travis-ci.org circleci.com atlassian.com Bamboo jetbrains.com TeamCity
  34. 34. End to End Tests Start Commit Code Staging QA Sign-off In ProdCode Review • Scenario driven • Tests client and server code • More “realistic” vs. Unit Tests • Less traceability vs. Unit Tests • Slower to execute vs. Unit Tests I ♥ selenium QAseleniumhq.org Selenium saucelabs.com browserstack.com
  35. 35. Techniques.
  36. 36. End to End tests with Selenium Selenium Client API Test Script Selenium WebDriver Web Browser JavaScript, Java, C#, Python, … Converts commands to HTTP requests Communicates with web browser ...
  37. 37. End to End tests with Selenium Selenium Client API Test Script Selenium Grid VM #1 VM #2 VM #5 IE 7 VM #4 IE 8 VM #6 IE 9
  38. 38. End to End tests with Selenium module.exports = { 'Get free VMs': function (browser) { browser .url('http://www.modern.ie') .assert.title('Modern.IE') .end(); } }; Nightwatch.js
  39. 39. Unit Testing with Mocha (node.js) test_file.js Node.js test_file.js code_to_test.js mocha test results
  40. 40. Unit Testing with Mocha (node.js) module.exports = { name: function (title, first, last) { return [title, first, last].join(); } }; formatter.js
  41. 41. Unit Testing with Mocha (node.js) var fmt = require('../../formatter'); var assert = require('assert'); ! describe('format', function () { it('should return full name', function () { var actual = fmt.name('Mr.', 'Bob', 'Rogers'); var expected = 'Mr. Bob Rogers'; ! assert.equal(actual, expected); }); }); formatter.spec.js
  42. 42. Unit Testing with Venus & Mocha (browser) test_file.js Venus Node.js Browser test_file.js code_to_test.js mocha test results
  43. 43. Unit Testing with Venus & Mocha (browser) function formatName(title, first, last) { return [title, first, last].join(); } ! formatter.js
  44. 44. Unit Testing with Venus & Mocha (browser) /** * @venus-library mocha * @venus-code formatter.js */ describe('format', function () { var actual = formatName('Mr.', 'Bob', 'Rogers'); var expected = 'Mr. Bob Rogers'; ! it('should return full name', function () { expect(actual).to.be(expected); }); }); ! formatter.spec.js
  45. 45. Unit Testing with Venus & Mocha (browser) <!DOCTYPE html> <html> <head> <title>Test for Formatter</title> <script type="text/javascript" src=“mocha.js”></script> <script type="text/javascript" src=“venus_client.js”></script> <script type="text/javascript" src="formatter.js"></script> <script type="text/javascript" src=“specs/formatter.spec.js”></script> <script type="text/javascript"> testLibrary.run(); </script> </head> <body> <div id="results"></div> </body> </html> test_harness.html
  46. 46. Example: Spy var callback = sinon.spy(); ! PubSub.subscribe('message', callback); PubSub.publishSync('message'); ! assert(callback.called === true); ! A function that records information about how it is called. sinonjs.org
  47. 47. Example: Mock XMLHttpRequestmyLib jQuery Web Server
  48. 48. Example: Mock Mock XMLHttpRequestmyLib jQuery
  49. 49. A fake implementation of a code dependency. Sinon.js XHR Mock var xhr = sinon.useFakeXMLHttpRequest(); var requests = []; var callback = sinon.spy(); ! xhr.onCreate = function (xhr) { requests.push(xhr); }; ! myLib.getCommentsFor("/some/article", callback); assertEquals(1, requests.length); ! requests[0].respond(200, { "Content-Type": "application/json" }, '[{ "id": 12, "comment": "Hey there" }]' ); ! assert(callback.calledWith([{ id: 12, comment: "Hey there" }]));
  50. 50. Code Samples End-to-End test with Selenium Unit Test node.js code Unit Test browser code 1 2 3 http://sethmcl.com/testing-web-apps/
  51. 51. Learn More. Introduction to writing testable JavaScript! LinkedIn Tech Talk Smashing Magazine ! Unit Testing with Venus.js ! LinkedIn Tech Talk Venusjs.org ! End to End testing with Selenium! The Selenium Project Selenium Architecture Nightwatchjs.org ! Free Windows VMs and other testing resources! modern.ie http://sethmcl.com/testing-web-apps/

×