How to test your JavaScript - TDD and BDD possible

2,705 views

Published on

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
  • Danke für das SlideShare und die interessanten Informationen.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
2,705
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
20
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

How to test your JavaScript - TDD and BDD possible

  1. 1. How to test your JavaScriptTDD and BDD possibleFelix Müller29.03.2012
  2. 2. 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
  3. 3. Agenda Professionelle Softwareentwicklung JavaScript QUnit Jasmine Fazit29.03.2012 3 How to test your JavaScript – TDD and BDD possible
  4. 4. Professionelle Softwareentwicklung29.03.2012 4 How to test your JavaScript – TDD and BDD possible
  5. 5. Professionelle Softwareentwicklung – Anti-Pattern29.03.2012 5 How to test your JavaScript – TDD and BDD possible
  6. 6. 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
  7. 7. 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
  8. 8. Professionelle Softwareentwicklung – TDD & ATDD Quelle: http://ukstudio.jp/29.03.2012 8 How to test your JavaScript – TDD and BDD possible
  9. 9. 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
  10. 10. JavaScript – everywhere29.03.2012 10 How to test your JavaScript – TDD and BDD possible
  11. 11. JavaScript – TDD & BDD Sind Entwicklungstechniken wie TDD und BDD möglich?29.03.2012 11 How to test your JavaScript – TDD and BDD possible
  12. 12. JavaScript – TDD & BDD Ja: QUnit und Jasmine29.03.2012 12 How to test your JavaScript – TDD and BDD possible
  13. 13. 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
  14. 14. QUnit29.03.2012 14 How to test your JavaScript – TDD and BDD possible
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. Jasmine29.03.2012 22 How to test your JavaScript – TDD and BDD possible
  23. 23. 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
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. Fazit TDD und BDD sind möglich mit JavaScript!29.03.2012 27 How to test your JavaScript – TDD and BDD possible
  28. 28. Fazit29.03.2012 28 How to test your JavaScript – TDD and BDD possible
  29. 29. 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
  30. 30. Vielen Dank für die Aufmerksamkeit.Fragen?info@adesso.dewww.adesso.de

×