Javascript Ttesting
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Javascript Ttesting

on

  • 2,583 views

 

Statistics

Views

Total Views
2,583
Views on SlideShare
2,280
Embed Views
303

Actions

Likes
0
Downloads
18
Comments
0

6 Embeds 303

http://blog.mayflower.de 227
http://www.scoop.it 49
http://paper.li 14
http://news.php-homepage.de 8
http://feeds.feedburner.com 4
http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Javascript Ttesting Presentation Transcript

  • 1. Javascript TestingSebastian Springer I 10. Oktober 2011 © Mayflower GmbH 2010
  • 2. Thats meI Diplom-Informatiker (FH)I Zend Certified DeveloperI Certified Oracle MySQL DeveloperI Scrum Master HI! MY NAME IS Sebastian Springer Mayflower GmbH I 2
  • 3. Javascript Testing ©
  • 4. AgendaI Warum Testing?I UnittestsI IntegrationtestsI Automatisierung ©SPH Mayflower GmbH I 4
  • 5. Warum Testing? ©姒儿喵喵 Mayflower GmbH I 5
  • 6. Warum Testing?I SicherheitI RefactoringI Continuous IntegrationI Dokumentation Mayflower GmbH I 6
  • 7. Testing – Voraussetzungen ©姒儿喵喵 Mayflower GmbH I 7
  • 8. Testing – VoraussetzungenI Keine HindernisseI Know-howI Testbarer Code Mayflower GmbH I 8
  • 9. Und warum Javascript? ©姒儿喵喵 Mayflower GmbH I 9
  • 10. Und warum Javascript?I Wachsende BedeutungI User ExperienceI Mehr LogikI Mehr LoC ·Applikation vor 4 Jahren: ca. 3% Javascript ·Aktuelle Applikation: ca. 43% Javascript Mayflower GmbH I 10
  • 11. Unittests Mayflower GmbH I 11
  • 12. Unittest Frameworks © BM5k Mayflower GmbH I 12
  • 13. Unittests – Frameworks Nodeunit JSUnit UnitTesting QUnitTestCase jsUnitTest J3Unit D.O.H. YUI Test Mayflower GmbH I 13
  • 14. Unittests – Frameworks Nodeunit JSUnit UnitTesting QUnitTestCase jsUnitTest J3Unit D.O.H. YUI Test Mayflower GmbH I 14
  • 15. Unittests – QUnit<html> <head> <script src="scripts/library/jquery.js"></script> <script src="scripts/library/underscore.js"></script> <script src="scripts/library/backbone.js"></script> <script src="scripts/library/require.js"></script> <link rel="stylesheet" type="text/css" href="/style/style.css" /> <link rel="stylesheet" type="text/css" href="/style/qunit.css" /> <script src="/scripts/library/qunit.js"></script> Mayflower GmbH I 15
  • 16. Unittests – QUnit<script> require([/scripts/application/models/ggt.js], function(gcdClass) { var gcd = new gcdClass(); module(Greatest Common Divisor); test("Check GCD Success, exact match", 1, function() {...}); test("Check GCD Success, no match", 1, function() {...}); test("Check GCD with Zero", 0, function() {...}); test("This should Fail", function() {...}); });</script> Mayflower GmbH I 16
  • 17. Unittests – QUnit </head> <body> <h1 id="qunit-header">QUnit example</h1> <h2 id="qunit-banner"></h2> <div id="qunit-testrunner-toolbar"></div> <h2 id="qunit-userAgent"></h2> <ol id="qunit-tests"></ol> <div id="qunit-fixture">test markup, will be hidden</div> </body></html> Mayflower GmbH I 17
  • 18. Unittests – QUnit Mayflower GmbH I 18
  • 19. Unittests – QUnit AssertsI ok(state, msg)I equal(actual, expected, msg)I deepEqual(actual, expected, msg)I strictEqual(actual, expected, msg)I raises(block, expected, msg)I not...(..., msg) ·notEqual(actual, expected, msg) Mayflower GmbH I 19
  • 20. Merkmale von Unittests Mayflower GmbH I 20
  • 21. Unittests – IsoliertI Isoliert Mayflower GmbH I 21
  • 22. Unittests – Isoliertfunction doALotOfAjaxMagicAndTakeACallback(cb) { $.ajax({ type: POST, dataType: json, data: {}, contentType: application/json, url: my/backend, success: function(res) { var result = null; {...} return result; } });} Mayflower GmbH I 22
  • 23. Unittests – Isolierttest("Test my ajax magic", function() { stop(); doALotOfAjaxMagicAndTakeACallback( function(result) { equals(result, "Its magic"); start(); } );}); Mayflower GmbH I 23
  • 24. Unittests – Sinon.jsI Test SpiesI StubsI MocksI Fake TimersI Fake XHR und Server Mayflower GmbH I 24
  • 25. Unittests – Positiv/Negativ testingI IsoliertI Positiv/Negativ testing Mayflower GmbH I 25
  • 26. Unittests – Positiv/Negativ testingtest("Check GCD", 1, function() { equal(3, gcd.calculate(15, 9));}); Mayflower GmbH I 26
  • 27. Unittests – Positiv/Negativ testingtest("Check GCD Success, exact match", 1, function() { equal(2, gcd.calculate(4, 2));});test("Check GCD Success, no match", 1, function() { equal(3, gcd.calculate(15, 9));});test("Check GCD Success with Zero", 2, function() { equal(4, gcd.calculate(0, 4)); equal(4, gcd.calculate(4, 0));});test("Check GCD Failure", 1, function() { equal(false, gcd.calculate(a, b));}); Mayflower GmbH I 27
  • 28. Unittests – Häufige AusführungI IsoliertI Positiv/Negativ testingI Häufige Ausführung Mayflower GmbH I 28
  • 29. Unittests – Häufige Ausführung Mayflower GmbH I 29
  • 30. Unittests – Blackbox testingI IsoliertI Positiv/Negativ testingI Häufige AusführungI Blackbox testing – Input/Output Mayflower GmbH I 30
  • 31. Unittests – Blackbox testing/** * This method calculates the greatest common divisor * and returns the result * * @param m integer * @param n integer * * @return mixed integer result, false if invalid params */calculate: function (m, n){ if (typeof m != number || typeof n != number) { return false; } if (n == 0) { return m; } else if (m == 0) { return n; } else { return this.calculate(n, m % n); }} Mayflower GmbH I 31
  • 32. Unittests – Blackbox testing/** * This method calculates the greatest common divisor * and returns the result * * @param m integer * @param n integer * * @return mixed integer result, false if invalid params */calculate: function (m, n){...} Mayflower GmbH I 32
  • 33. Unittests – Test FirstI IsoliertI Positiv/Negativ testingI Häufige AusführungI Blackbox testing – Input/OutputI Test First/Test Parallel Mayflower GmbH I 33
  • 34. Unittests – Test Firstcalculate: function (m, n){ if (typeof m != number || typeof n != number) { return false; } if (n == 0) { return m; } else if (m == 0) { return n; } else { return this.calculate(n, m % n); }}test(“Check GDC“, function() { // @TODO write testlogic}); Mayflower GmbH I 34
  • 35. Unittests – Test First/** * This method calculates the greatest common divisor * and returns the result * * @param m integer * @param n integer * * @return mixed integer result, false if invalid params */calculate: function (m, n){ return 2;}test(“Check GDC Success, exact match“, function() { equal(2, gcd.calculate(4, 2));}); Mayflower GmbH I 35
  • 36. Testbarer Code Mayflower GmbH I 36
  • 37. Unittests – Voraussetzung: testbarer CodeI Unabhängiger CodeI Überschaubare KomplexitätI Dependency Injection Mayflower GmbH I 37
  • 38. Organisation Mayflower GmbH I 38
  • 39. Unittests – OrganisationI module()I test() Mayflower GmbH I 39
  • 40. Integrationtests Mayflower GmbH I 40
  • 41. Organisation © Potatojunkie Mayflower GmbH I 41
  • 42. Integrationtests – Selenium IDE Mayflower GmbH I 42
  • 43. Integrationtests – Häufig verwendete KommandosI waitFor... ·z.B. waitForElementPresentI verify... ·z.B. verifyTextPresentI clickI typeI ... Mayflower GmbH I 43
  • 44. Locators Mayflower GmbH I 44
  • 45. Integrationtests – Selenium IDE Mayflower GmbH I 45
  • 46. Integrationtests – LocatorsI identifier=usernameI id=passwordI name=usernameI dom=document.forms[0]I xpath=//form[@id=loginForm]/div[1]/input[1]I link=myLinkTextI css=div#loginBox Mayflower GmbH I 46
  • 47. Integrationtests – Variablen und Testsuites Mayflower GmbH I 47
  • 48. Selenium Stabilität? © andyarthur Mayflower GmbH I 48
  • 49. Automatisierung Mayflower GmbH I 49
  • 50. Automatisierung Mayflower GmbH I 50
  • 51. Automatisierung SVN Commit Jenkins CI Selenium QUnit Mayflower GmbH I 51
  • 52. Automatisierung – Selenium phpunit selenseDirectory Selenium RC/grid Selenium RC Browser Browser Browser Browser Jenkins Mayflower GmbH I 52
  • 53. Automatisierung – QUnit QUnit jsTestDriver Browser Browser Browser Browser Jenkins Mayflower GmbH I 53
  • 54. Fragen?© br1dotcom Mayflower GmbH I 54
  • 55. Vielen Dank für Ihre Aufmerksamkeit! Kontakt Sebastian Springer sebastian.springer@mayflower.de +49 89 242054 1120 Mayflower GmbH Mannhardtstrasse 6 80538 München14.10.2011 Mayflower GmbH 55