Recomendados
Mais conteúdo relacionado
Semelhante a Javascript Testing Guide
Semelhante a Javascript Testing Guide (20)
Mais de Mayflower GmbH
Mais de Mayflower GmbH (20)
Último
Último (20)
Javascript Testing Guide
- 1. Javascript Testing Sebastian Springer I 10. Oktober 2011 © Mayflower GmbH 2010
- 2. That's me I Diplom-Informatiker (FH) I Zend Certified Developer I Certified Oracle MySQL Developer I Scrum Master HI! MY NAME IS Sebastian Springer Mayflower GmbH I 2
- 3. Javascript Testing ©
- 4. Agenda I Warum Testing? I Unittests I Integrationtests I Automatisierung ©SPH Mayflower GmbH I 4
- 5. Warum Testing? ©姒儿喵喵 Mayflower GmbH I 5
- 6. Warum Testing? I Sicherheit I Refactoring I Continuous Integration I Dokumentation Mayflower GmbH I 6
- 7. Testing – Voraussetzungen ©姒儿喵喵 Mayflower GmbH I 7
- 8. Testing – Voraussetzungen I Keine Hindernisse I Know-how I Testbarer Code Mayflower GmbH I 8
- 9. Und warum Javascript? ©姒儿喵喵 Mayflower GmbH I 9
- 10. Und warum Javascript? I Wachsende Bedeutung I User Experience I Mehr Logik I 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 QUnit TestCase jsUnitTest J3Unit D.O.H. YUI Test Mayflower GmbH I 13
- 14. Unittests – Frameworks Nodeunit JSUnit UnitTesting QUnit TestCase 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 Asserts I 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 – Isoliert I Isoliert Mayflower GmbH I 21
- 22. Unittests – Isoliert function 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 – Isoliert test("Test my ajax magic", function() { stop(); doALotOfAjaxMagicAndTakeACallback( function(result) { equals(result, "It's magic"); start(); } ); }); Mayflower GmbH I 23
- 24. Unittests – Sinon.js I Test Spies I Stubs I Mocks I Fake Timers I Fake XHR und Server Mayflower GmbH I 24
- 25. Unittests – Positiv/Negativ testing I Isoliert I Positiv/Negativ testing Mayflower GmbH I 25
- 26. Unittests – Positiv/Negativ testing test("Check GCD", 1, function() { equal(3, gcd.calculate(15, 9)); }); Mayflower GmbH I 26
- 27. Unittests – Positiv/Negativ testing test("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ührung I Isoliert I Positiv/Negativ testing I Häufige Ausführung Mayflower GmbH I 28
- 29. Unittests – Häufige Ausführung Mayflower GmbH I 29
- 30. Unittests – Blackbox testing I Isoliert I Positiv/Negativ testing I Häufige Ausführung I 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 First I Isoliert I Positiv/Negativ testing I Häufige Ausführung I Blackbox testing – Input/Output I Test First/Test Parallel Mayflower GmbH I 33
- 34. Unittests – Test First 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); } } 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 Code I Unabhängiger Code I Überschaubare Komplexität I Dependency Injection Mayflower GmbH I 37
- 38. Organisation Mayflower GmbH I 38
- 39. Unittests – Organisation I 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 Kommandos I waitFor... ·z.B. waitForElementPresent I verify... ·z.B. verifyTextPresent I click I type I ... Mayflower GmbH I 43
- 44. Locators Mayflower GmbH I 44
- 45. Integrationtests – Selenium IDE Mayflower GmbH I 45
- 46. Integrationtests – Locators I identifier=username I id=password I name=username I dom=document.forms[0] I xpath=//form[@id='loginForm']/div[1]/input[1] I link=myLinkText I 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ünchen 14.10.2011 Mayflower GmbH 55