Javascript TestingSebastian Springer I 10. Oktober 2011                                        © Mayflower GmbH 2010
Thats meI   Diplom-Informatiker (FH)I   Zend Certified DeveloperI   Certified Oracle MySQL DeveloperI   Scrum Master      ...
Javascript Testing                     ©
AgendaI   Warum Testing?I   UnittestsI   IntegrationtestsI   Automatisierung                          ©SPH                ...
Warum Testing?                    ©姒儿喵喵                 Mayflower GmbH I 5
Warum Testing?I   SicherheitI   RefactoringI   Continuous IntegrationI   Dokumentation                             Mayflow...
Testing – Voraussetzungen                               ©姒儿喵喵                            Mayflower GmbH I 7
Testing – VoraussetzungenI   Keine HindernisseI   Know-howI   Testbarer Code                            Mayflower GmbH I 8
Und warum Javascript?                           ©姒儿喵喵                        Mayflower GmbH I 9
Und warum Javascript?I   Wachsende BedeutungI   User ExperienceI   Mehr LogikI   Mehr LoC    ·Applikation vor 4 Jahren: ca...
Unittests            Mayflower GmbH I 11
Unittest Frameworks                          © BM5k                      Mayflower GmbH I 12
Unittests – Frameworks                     Nodeunit  JSUnit                                           UnitTesting         ...
Unittests – Frameworks                     Nodeunit  JSUnit                                           UnitTesting         ...
Unittests – QUnit<html>    <head>        <script   src="scripts/library/jquery.js"></script>        <script   src="scripts...
Unittests – QUnit<script>    require([/scripts/application/models/ggt.js], function(gcdClass) {         var gcd = new gcdC...
Unittests – QUnit    </head>    <body>        <h1 id="qunit-header">QUnit example</h1>        <h2 id="qunit-banner"></h2> ...
Unittests – QUnit                    Mayflower GmbH I 18
Unittests – QUnit AssertsI   ok(state, msg)I   equal(actual, expected, msg)I   deepEqual(actual, expected, msg)I   strictE...
Merkmale von Unittests                         Mayflower GmbH I 20
Unittests – IsoliertI   Isoliert                       Mayflower GmbH I 21
Unittests – Isoliertfunction doALotOfAjaxMagicAndTakeACallback(cb) {    $.ajax({        type: POST,        dataType: json,...
Unittests – Isolierttest("Test my ajax magic", function() {      stop();      doALotOfAjaxMagicAndTakeACallback(          ...
Unittests – Sinon.jsI   Test SpiesI   StubsI   MocksI   Fake TimersI   Fake XHR und Server                          Mayflo...
Unittests – Positiv/Negativ testingI   IsoliertI   Positiv/Negativ testing                                      Mayflower ...
Unittests – Positiv/Negativ testingtest("Check GCD", 1, function() {      equal(3, gcd.calculate(15, 9));});              ...
Unittests – Positiv/Negativ testingtest("Check GCD Success, exact match", 1, function() {    equal(2, gcd.calculate(4, 2))...
Unittests – Häufige AusführungI   IsoliertI   Positiv/Negativ testingI   Häufige Ausführung                               ...
Unittests – Häufige Ausführung                                 Mayflower GmbH I 29
Unittests – Blackbox testingI   IsoliertI   Positiv/Negativ testingI   Häufige AusführungI   Blackbox testing – Input/Outp...
Unittests – Blackbox testing/** * This method calculates the greatest common divisor  * and returns the result  *  * @para...
Unittests – Blackbox testing/** * This method calculates the greatest common divisor * and returns the result * * @param m...
Unittests – Test FirstI   IsoliertI   Positiv/Negativ testingI   Häufige AusführungI   Blackbox testing – Input/OutputI   ...
Unittests – Test Firstcalculate: function (m, n){    if (typeof m != number || typeof n != number) {        return false; ...
Unittests – Test First/** * This method calculates the greatest common divisor  * and returns the result  *  * @param m in...
Testbarer Code                 Mayflower GmbH I 36
Unittests – Voraussetzung: testbarer CodeI   Unabhängiger CodeI   Überschaubare KomplexitätI   Dependency Injection       ...
Organisation               Mayflower GmbH I 38
Unittests – OrganisationI   module()I   test()                           Mayflower GmbH I 39
Integrationtests                   Mayflower GmbH I 40
Organisation                   © Potatojunkie               Mayflower GmbH I 41
Integrationtests – Selenium IDE                                  Mayflower GmbH I 42
Integrationtests – Häufig verwendete KommandosI   waitFor...    ·z.B. waitForElementPresentI   verify...    ·z.B. verifyTe...
Locators           Mayflower GmbH I 44
Integrationtests – Selenium IDE                                  Mayflower GmbH I 45
Integrationtests – LocatorsI   identifier=usernameI   id=passwordI   name=usernameI   dom=document.forms[0]I   xpath=//for...
Integrationtests – Variablen und Testsuites                                              Mayflower GmbH I 47
Selenium           Stabilität?       © andyarthur                         Mayflower GmbH I 48
Automatisierung                  Mayflower GmbH I 49
Automatisierung                  Mayflower GmbH I 50
Automatisierung                         SVN Commit                             Jenkins CI                  Selenium       ...
Automatisierung – Selenium                             phpunit                                       selenseDirectory     ...
Automatisierung – QUnit                            QUnit                          jsTestDriver                  Browser   ...
Fragen?© br1dotcom                    Mayflower GmbH I 54
Vielen Dank für Ihre Aufmerksamkeit!        Kontakt   Sebastian Springer                  sebastian.springer@mayflower.de ...
Upcoming SlideShare
Loading in...5
×

Javascript Ttesting

2,218

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
2,218
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Javascript Ttesting

  1. 1. Javascript TestingSebastian Springer I 10. Oktober 2011 © Mayflower GmbH 2010
  2. 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. 3. Javascript Testing ©
  4. 4. AgendaI Warum Testing?I UnittestsI IntegrationtestsI Automatisierung ©SPH Mayflower GmbH I 4
  5. 5. Warum Testing? ©姒儿喵喵 Mayflower GmbH I 5
  6. 6. Warum Testing?I SicherheitI RefactoringI Continuous IntegrationI Dokumentation Mayflower GmbH I 6
  7. 7. Testing – Voraussetzungen ©姒儿喵喵 Mayflower GmbH I 7
  8. 8. Testing – VoraussetzungenI Keine HindernisseI Know-howI Testbarer Code Mayflower GmbH I 8
  9. 9. Und warum Javascript? ©姒儿喵喵 Mayflower GmbH I 9
  10. 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. 11. Unittests Mayflower GmbH I 11
  12. 12. Unittest Frameworks © BM5k Mayflower GmbH I 12
  13. 13. Unittests – Frameworks Nodeunit JSUnit UnitTesting QUnitTestCase jsUnitTest J3Unit D.O.H. YUI Test Mayflower GmbH I 13
  14. 14. Unittests – Frameworks Nodeunit JSUnit UnitTesting QUnitTestCase jsUnitTest J3Unit D.O.H. YUI Test Mayflower GmbH I 14
  15. 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. 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. 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. 18. Unittests – QUnit Mayflower GmbH I 18
  19. 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. 20. Merkmale von Unittests Mayflower GmbH I 20
  21. 21. Unittests – IsoliertI Isoliert Mayflower GmbH I 21
  22. 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. 23. Unittests – Isolierttest("Test my ajax magic", function() { stop(); doALotOfAjaxMagicAndTakeACallback( function(result) { equals(result, "Its magic"); start(); } );}); Mayflower GmbH I 23
  24. 24. Unittests – Sinon.jsI Test SpiesI StubsI MocksI Fake TimersI Fake XHR und Server Mayflower GmbH I 24
  25. 25. Unittests – Positiv/Negativ testingI IsoliertI Positiv/Negativ testing Mayflower GmbH I 25
  26. 26. Unittests – Positiv/Negativ testingtest("Check GCD", 1, function() { equal(3, gcd.calculate(15, 9));}); Mayflower GmbH I 26
  27. 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. 28. Unittests – Häufige AusführungI IsoliertI Positiv/Negativ testingI Häufige Ausführung Mayflower GmbH I 28
  29. 29. Unittests – Häufige Ausführung Mayflower GmbH I 29
  30. 30. Unittests – Blackbox testingI IsoliertI Positiv/Negativ testingI Häufige AusführungI Blackbox testing – Input/Output Mayflower GmbH I 30
  31. 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. 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. 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. 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. 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. 36. Testbarer Code Mayflower GmbH I 36
  37. 37. Unittests – Voraussetzung: testbarer CodeI Unabhängiger CodeI Überschaubare KomplexitätI Dependency Injection Mayflower GmbH I 37
  38. 38. Organisation Mayflower GmbH I 38
  39. 39. Unittests – OrganisationI module()I test() Mayflower GmbH I 39
  40. 40. Integrationtests Mayflower GmbH I 40
  41. 41. Organisation © Potatojunkie Mayflower GmbH I 41
  42. 42. Integrationtests – Selenium IDE Mayflower GmbH I 42
  43. 43. Integrationtests – Häufig verwendete KommandosI waitFor... ·z.B. waitForElementPresentI verify... ·z.B. verifyTextPresentI clickI typeI ... Mayflower GmbH I 43
  44. 44. Locators Mayflower GmbH I 44
  45. 45. Integrationtests – Selenium IDE Mayflower GmbH I 45
  46. 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. 47. Integrationtests – Variablen und Testsuites Mayflower GmbH I 47
  48. 48. Selenium Stabilität? © andyarthur Mayflower GmbH I 48
  49. 49. Automatisierung Mayflower GmbH I 49
  50. 50. Automatisierung Mayflower GmbH I 50
  51. 51. Automatisierung SVN Commit Jenkins CI Selenium QUnit Mayflower GmbH I 51
  52. 52. Automatisierung – Selenium phpunit selenseDirectory Selenium RC/grid Selenium RC Browser Browser Browser Browser Jenkins Mayflower GmbH I 52
  53. 53. Automatisierung – QUnit QUnit jsTestDriver Browser Browser Browser Browser Jenkins Mayflower GmbH I 53
  54. 54. Fragen?© br1dotcom Mayflower GmbH I 54
  55. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×