Javascript Ttesting

© Mayflower GmbH 2010

Javascript Testing

Sebastian Springer I 10. Oktober 2011

Mayflower GmbH I 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

© A200W ll

Javascript Testing

Mayflower GmbH I 4

Agenda

I Warum Testing?

I Unittests

I Integrationtests

I Automatisierung

©SPH

Mayflower GmbH I 5

Warum Testing?

©姒儿喵喵

http://www.flickr.com/photos/crystaljingsr/�


Mayflower GmbH I 6

Warum Testing?

I Sicherheit

I Refactoring

I Continuous Integration

I Dokumentation

Mayflower GmbH I 7

Testing – Voraussetzungen

©姒儿喵喵



Mayflower GmbH I 8

Testing – Voraussetzungen

I Keine Hindernisse

I Know-how

I Testbarer Code

Mayflower GmbH I 9

Und warum Javascript?

©姒儿喵喵



Mayflower GmbH I 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 11

Unittests

Mayflower GmbH I 12

Unittest Frameworks

© BM5k

Mayflower GmbH I 13

Unittests – Frameworks

J3Unit

JSUnit

QUnit

UnitTesting

TestCase jsUnitTest

YUI Test D.O.H.

Nodeunit

Mayflower GmbH I 14

Unittests – Frameworks

J3Unit

JSUnit

QUnit

UnitTesting

TestCase jsUnitTest

YUI Test D.O.H.

Nodeunit

Mayflower GmbH I 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 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 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 18

Unittests – QUnit

Mayflower GmbH I 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 20

Merkmale von Unittests

Mayflower GmbH I 21

Unittests – Isoliert

I Isoliert

Mayflower GmbH I 22


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 23


test("Test my ajax magic", function() { stop(); doALotOfAjaxMagicAndTakeACallback( function(result) { equals(result, "It's magic"); start(); } ); });

Mayflower GmbH I 24

Unittests – Sinon.js

I Test Spies

I Stubs

I Mocks

I Fake Timers

I Fake XHR und Server

Mayflower GmbH I 25

Unittests – Positiv/Negativ testing

I Isoliert

I Positiv/Negativ testing

Mayflower GmbH I 26


test("Check GCD", 1, function() { equal(3, gcd.calculate(15, 9)); });

Mayflower GmbH I 27


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 28

Unittests – Häufige Ausführung

I Isoliert


I Häufige Ausführung

Mayflower GmbH I 29

Unittests – Häufige Ausführung

Mayflower GmbH I 30

Unittests – Blackbox testing

I Isoliert



I Blackbox testing – Input/Output

Mayflower GmbH I 31


/** * 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 32


/** * 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 33

Unittests – Test First

I Isoliert



I Blackbox testing – Input/Output

I Test First/Test Parallel

Mayflower GmbH I 34


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 35


/** * 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 36

Testbarer Code

Mayflower GmbH I 37

Unittests – Voraussetzung: testbarer Code

I Unabhängiger Code

I Überschaubare Komplexität

I Dependency Injection

Mayflower GmbH I 38

Organisation

Mayflower GmbH I 39

Unittests – Organisation

I module()

I test()

Mayflower GmbH I 40

Integrationtests

Mayflower GmbH I 41

Organisation

© Potatojunkie

Mayflower GmbH I 42

Integrationtests – Selenium IDE

Mayflower GmbH I 43

Integrationtests – Häufig verwendete Kommandos

I waitFor... · z.B. waitForElementPresent

I verify... · z.B. verifyTextPresent

I click

I type

I ...

Mayflower GmbH I 44

Locators

Mayflower GmbH I 45

Integrationtests – Selenium IDE

Mayflower GmbH I 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 47

Integrationtests – Variablen und Testsuites

Mayflower GmbH I 48

Selenium

Stabilität? © andyarthur

Mayflower GmbH I 49

Automatisierung

Mayflower GmbH I 50

Automatisierung

Mayflower GmbH I 51

Automatisierung

SVN Commit

Jenkins CI

QUnit Selenium

Mayflower GmbH I 52

Automatisierung – Selenium

selenseDirectory

phpunit

Selenium RC

Jenkins

Browser

Selenium RC/grid

Browser Browser Browser

Mayflower GmbH I 53

Automatisierung – QUnit

QUnit

jsTestDriver

Jenkins

Browser Browser Browser Browser

Mayflower GmbH I 54

Fragen?

© br1dotcom

14.10.2011 Mayflower GmbH 55

Vielen Dank für Ihre Aufmerksamkeit!

Kontakt Sebastian Springer

[email protected]

+49 89 242054 1120

Mayflower GmbH

Mannhardtstrasse 6

80538 München

Technology

Javascript Ttesting