How to test your JavaScript - TDD and BDD possible
Upcoming SlideShare
Loading in...5
×
 

How to test your JavaScript - TDD and BDD possible

on

  • 2,492 views

 

Statistics

Views

Total Views
2,492
Views on SlideShare
2,484
Embed Views
8

Actions

Likes
1
Downloads
13
Comments
0

1 Embed 8

http://coderwall.com 8

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    How to test your JavaScript - TDD and BDD possible How to test your JavaScript - TDD and BDD possible Presentation Transcript

    • How to test your JavaScriptTDD and BDD possibleFelix Müller29.03.2012
    • Mein Background► adesso AG, Studentischer Mitarbeiter► Softwareentwickler► Twitter: @fmueller_bln► Mail: felix.mueller@adesso.de29.03.2012 2 How to test your JavaScript – TDD and BDD possible
    • Agenda Professionelle Softwareentwicklung JavaScript QUnit Jasmine Fazit29.03.2012 3 How to test your JavaScript – TDD and BDD possible
    • Professionelle Softwareentwicklung29.03.2012 4 How to test your JavaScript – TDD and BDD possible
    • Professionelle Softwareentwicklung – Anti-Pattern29.03.2012 5 How to test your JavaScript – TDD and BDD possible
    • Professionelle Softwareentwicklung – TDD & BDD Test Driven Development Behaviour Driven Development ► Test-first Development ► Kam nach TDD auf ► Red – Green – Cycle ► Kommuniziert direkt die Anforderungen an Feature, Komponente oder Klasse ► Ermöglicht stetiges Refactoren ► Tests sind ausdrucksstärker ► Führt zu lose gekoppelten Systemen ► Tests besser lesbar ► Common Practice (…hoffentlich!)29.03.2012 6 How to test your JavaScript – TDD and BDD possible
    • Professionelle Softwareentwicklung – TDD Quelle: http://blog.m.artins.net/tdd-listen-to-the-tests-they-tell-smells-in-your-code/29.03.2012 7 How to test your JavaScript – TDD and BDD possible
    • Professionelle Softwareentwicklung – TDD & ATDD Quelle: http://ukstudio.jp/29.03.2012 8 How to test your JavaScript – TDD and BDD possible
    • JavaScript – bisher► Schlechtes Standing in der Java-Welt („Spielzeugsprache“)► Jeder hat mal ein paar Zeilen geschrieben für visuelle Effekte, Validierung, Ajax► Kaum Modularisierung  oft Spaghetticode nach üblichen Maßstäben► In den letzten Jahren gab es einen Wandel! (außerhalb der Java-Welt)29.03.2012 9 How to test your JavaScript – TDD and BDD possible
    • JavaScript – everywhere29.03.2012 10 How to test your JavaScript – TDD and BDD possible
    • JavaScript – TDD & BDD Sind Entwicklungstechniken wie TDD und BDD möglich?29.03.2012 11 How to test your JavaScript – TDD and BDD possible
    • JavaScript – TDD & BDD Ja: QUnit und Jasmine29.03.2012 12 How to test your JavaScript – TDD and BDD possible
    • QUnit► JavaScript Library für Unit Tests► Aktuelle Version: 1.4.0 (9. März 2012, ~weekly Updates)► Ursprüngliche Nutzung zum Testen von jQuery► Sehr einfache Nutzung: qunit.css und qunit.js in HTML-Datei einbinden29.03.2012 13 How to test your JavaScript – TDD and BDD possible
    • QUnit29.03.2012 14 How to test your JavaScript – TDD and BDD possible
    • QUnit► Markup für eine QUnit Testdatei <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>29.03.2012 15 How to test your JavaScript – TDD and BDD possible
    • QUnit► The first test // test(name, expected, block) test(some other test, function() { expect(2); equal(true, false, failing test); equal(true, true, passing test); });29.03.2012 16 How to test your JavaScript – TDD and BDD possible
    • QUnit► Assertions ok(state, message) // is true? // == equal(actual, expected, message) notEqual(actual, expected, message) // === deepEqual(actual, expected, message) notDeepEqual(actual, expected, message) // === strictEqual(actual, expected, message) notStrictEqual(actual, expected, message) raises(block, expected, message)29.03.2012 17 How to test your JavaScript – TDD and BDD possible
    • QUnit► Module und Lifecycle Callbacks module(module1, { setup: function() { this.testData = foobar; }, teardown: function() { this.testData = ; } }); test(test with setup and teardown, function() { expect(1); equal(this.testData, foobar); }); module(module2); // ...29.03.2012 18 How to test your JavaScript – TDD and BDD possible
    • QUnit► Test mit Asynchronität test(jQuery.ajax() - success callback, function() { expect(1); jQuery.ajaxSetup({ timeout: 0 }); stop(); jQuery.ajax({ url: url(data/name.html), success: function(){ ok(true, success); start(); }, error: function(){ ok(false, error); } }); });29.03.2012 19 How to test your JavaScript – TDD and BDD possible
    • Jasmine► JavaScript Library für Behaviour Driven Development► Aktuelle Version: 1.1.0► Beschreibung von Spezifikationen► Auch Mocking möglich, neben Assertions und Lifecycle Callbacks wie bei QUnit► Ausführung durch Verlinken der Skripte in SpecRunner.html29.03.2012 20 How to test your JavaScript – TDD and BDD possible
    • Jasmine► Unsere Domäne function Customer() { this.age = 18; }; Customer.prototype.incrementAge = function() { this.age++; }; Customer.prototype.celebrateBirthday = function() { this.incrementAge(); };29.03.2012 21 How to test your JavaScript – TDD and BDD possible
    • Jasmine29.03.2012 22 How to test your JavaScript – TDD and BDD possible
    • Jasmine► The first spec describe(As a customer, function() { var dude; beforeEach(function() { dude = new Customer(); }); it(I should be able to celebrate my birthday, function() { var ageBeforeBirthday = dude.age; dude.celebrateBirthday(); expect(dude.age).toEqual(ageBeforeBirthday + 1); }); });29.03.2012 23 How to test your JavaScript – TDD and BDD possible
    • Jasmine► Eigene Matcher definieren  ausdrucksstarke Specs this.addMatchers({ toBeAdult: function() { this.message = function() { return Expected + this.actual + to be adult; } return this.actual.age >= 18; } }); // enables us to say this expect(dude).toBeAdult();29.03.2012 24 How to test your JavaScript – TDD and BDD possible
    • Jasmine► Spies zum Mocken und Stubben describe(As a customer, function() { // dude, beforeEach... describe(when celebrating birthday, function() { it(should incrementAge only once, function() { spyOn(dude, incrementAge); dude.celebrateBirthday(); expect(dude.incrementAge).toHaveBeenCalled(); expect(dude.incrementAge.callCount).toBe(1); }); }); });29.03.2012 25 How to test your JavaScript – TDD and BDD possible
    • Jasmine► Mögliche Rückgabewerte von Spies // default: call the underlying method spyOn(x, method).andCallThrough(); // to return a value spyOn(x, method).andReturn(arguments); // to throw an exception spyOn(x, method).andThrow(exception); // to provide fake implementation spyOn(x, method).andCallFake(function);29.03.2012 26 How to test your JavaScript – TDD and BDD possible
    • Fazit TDD und BDD sind möglich mit JavaScript!29.03.2012 27 How to test your JavaScript – TDD and BDD possible
    • Fazit29.03.2012 28 How to test your JavaScript – TDD and BDD possible
    • Fazit► QUnit einfache Unit Test Library► Jasmine ermöglicht ausdrucksstarke Tests und Mocking► Integration in Java Build Tools wie Maven? > js-test-driver > phantomjs-qunit-runner > jasmine-maven-plugin29.03.2012 29 How to test your JavaScript – TDD and BDD possible
    • Vielen Dank für die Aufmerksamkeit.Fragen?info@adesso.dewww.adesso.de