Javascript Ttesting

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 HI! MY NAME IS Sebastian Springer Mayflower GmbH I 2

Javascript Testing ©

AgendaI Warum Testing?I UnittestsI IntegrationtestsI Automatisierung ©SPH Mayflower GmbH I 4

Warum Testing? ©姒儿喵喵 Mayflower GmbH I 5

Warum Testing?I SicherheitI RefactoringI Continuous IntegrationI Dokumentation Mayflower GmbH I 6

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. 3% Javascript ·Aktuelle Applikation: ca. 43% Javascript Mayflower GmbH I 10

Unittests Mayflower GmbH I 11

Unittest Frameworks © BM5k Mayflower GmbH I 12

Unittests – Frameworks Nodeunit JSUnit UnitTesting QUnitTestCase jsUnitTest J3Unit D.O.H. YUI Test Mayflower GmbH I 13

Unittests – Frameworks Nodeunit JSUnit UnitTesting QUnitTestCase jsUnitTest J3Unit D.O.H. YUI Test Mayflower GmbH I 14

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

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

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

Unittests – QUnit Mayflower GmbH I 18

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

Merkmale von Unittests Mayflower GmbH I 20

Unittests – IsoliertI Isoliert Mayflower GmbH I 21

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

Unittests – Isolierttest("Test my ajax magic", function() { stop(); doALotOfAjaxMagicAndTakeACallback( function(result) { equals(result, "Its magic"); start(); } );}); Mayflower GmbH I 23

Unittests – Sinon.jsI Test SpiesI StubsI MocksI Fake TimersI Fake XHR und Server Mayflower GmbH I 24

Unittests – Positiv/Negativ testingI IsoliertI Positiv/Negativ testing Mayflower GmbH I 25

Unittests – Positiv/Negativ testingtest("Check GCD", 1, function() { equal(3, gcd.calculate(15, 9));}); Mayflower GmbH I 26

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

Unittests – Häufige AusführungI IsoliertI Positiv/Negativ testingI Häufige Ausführung Mayflower GmbH I 28

Unittests – Häufige Ausführung Mayflower GmbH I 29

Unittests – Blackbox testingI IsoliertI Positiv/Negativ testingI Häufige AusführungI Blackbox testing – Input/Output Mayflower GmbH I 30

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

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

Unittests – Test FirstI IsoliertI Positiv/Negativ testingI Häufige AusführungI Blackbox testing – Input/OutputI Test First/Test Parallel Mayflower GmbH I 33

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

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

Testbarer Code Mayflower GmbH I 36

Unittests – Voraussetzung: testbarer CodeI Unabhängiger CodeI Überschaubare KomplexitätI Dependency Injection Mayflower GmbH I 37

Organisation Mayflower GmbH I 38

Unittests – OrganisationI module()I test() Mayflower GmbH I 39

Integrationtests Mayflower GmbH I 40

Integrationtests – Selenium IDE Mayflower GmbH I 42

Integrationtests – Häufig verwendete KommandosI waitFor... ·z.B. waitForElementPresentI verify... ·z.B. verifyTextPresentI clickI typeI ... Mayflower GmbH I 43

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=//form[@id=loginForm]/div[1]/input[1]I link=myLinkTextI css=div#loginBox Mayflower GmbH I 46

Integrationtests – Variablen und Testsuites Mayflower GmbH I 47

Automatisierung Mayflower GmbH I 49

Automatisierung Mayflower GmbH I 50

Automatisierung SVN Commit Jenkins CI Selenium QUnit Mayflower GmbH I 51

Automatisierung – Selenium phpunit selenseDirectory Selenium RC/grid Selenium RC Browser Browser Browser Browser Jenkins Mayflower GmbH I 52

Automatisierung – QUnit QUnit jsTestDriver Browser Browser Browser Browser Jenkins Mayflower GmbH I 53

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

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

Javascript Ttesting

by Mayflower GmbH on Oct 14, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

6 Embeds 289

Statistics

Javascript Ttesting — Presentation Transcript