How to test your JavaScriptTDD and BDD possibleFelix Müller29.03.2012
Mein Background►   adesso AG, Studentischer Mitarbeiter►   Softwareentwickler►   Twitter: @fmueller_bln►   Mail: felix.mue...
Agenda  Professionelle Softwareentwicklung  JavaScript  QUnit  Jasmine  Fazit29.03.2012   3   How to test your JavaScript ...
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 ...
Professionelle Softwareentwicklung – TDD                                                         Quelle: http://blog.m.art...
Professionelle Softwareentwicklung – TDD & ATDD                                                                      Quell...
JavaScript – bisher►   Schlechtes Standing in der Java-Welt („Spielzeugsprache“)►   Jeder hat mal ein paar Zeilen geschrie...
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 JavaS...
JavaScript – TDD & BDD                  Ja: QUnit und Jasmine29.03.2012   12   How to test your JavaScript – TDD and BDD p...
QUnit►   JavaScript Library für Unit Tests►   Aktuelle Version: 1.4.0 (9. März 2012, ~weekly Updates)►   Ursprüngliche Nut...
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>  ...
QUnit►   The first test // test(name, expected, block) test(some other test, function() {   expect(2);   equal(true, false...
QUnit►   Assertions ok(state, message) // is true? // == equal(actual, expected, message) notEqual(actual, expected, messa...
QUnit►   Module und Lifecycle Callbacks module(module1, {   setup: function() {      this.testData = foobar;   },   teardo...
QUnit►   Test mit Asynchronität test(jQuery.ajax() - success callback, function() {   expect(1);   jQuery.ajaxSetup({ time...
Jasmine►   JavaScript Library für Behaviour Driven Development►   Aktuelle Version: 1.1.0►   Beschreibung von Spezifikatio...
Jasmine►   Unsere Domäne function Customer() {    this.age = 18; }; Customer.prototype.incrementAge = function() {   this....
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 ...
Jasmine►   Eigene Matcher definieren  ausdrucksstarke Specs this.addMatchers({   toBeAdult: function() {     this.message...
Jasmine►   Spies zum Mocken und Stubben describe(As a customer, function() {     // dude, beforeEach...     describe(when ...
Jasmine►   Mögliche Rückgabewerte von Spies // default: call the underlying method spyOn(x, method).andCallThrough(); // t...
Fazit             TDD und BDD sind möglich                  mit JavaScript!29.03.2012   27   How to test your JavaScript –...
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 B...
Vielen Dank für die Aufmerksamkeit.Fragen?info@adesso.dewww.adesso.de
Upcoming SlideShare
Loading in...5
×

How to test your JavaScript - TDD and BDD possible

2,296

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,296
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
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
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×