Javascript Ttesting

  • 2,111 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,111
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
19
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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