Webinar Test-Driven JavaScript
Upcoming SlideShare
Loading in...5
×
 

Webinar Test-Driven JavaScript

on

  • 835 views

Für mehr Qualität in JavaScript-Applikationen

Für mehr Qualität in JavaScript-Applikationen

Recording verfügbar unter: http://www.mayflower.de/de/ressourcen/webinare/archiv/test-driven-javascript

Statistics

Views

Total Views
835
Views on SlideShare
831
Embed Views
4

Actions

Likes
1
Downloads
6
Comments
1

1 Embed 4

https://twitter.com 4

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…
  • War ein sehr schönes Webinar! Wer die Webinaraufzeichnung noch einmal komplett mit Ton ansehen möchte, findet diese hier: http://www.mayflower.de/de/ressourcen/webinare/archiv/test-driven-javascript
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Webinar Test-Driven JavaScript Webinar Test-Driven JavaScript Presentation Transcript

  • TEST-DRIVEN JAVASCRIPT Für mehr Qualität in JavaScript-ApplikationenWednesday, January 23, 13
  • WER BIN ICH? • Sebastian Springer • 30 • Dipl. Inf. (FH) • Teamleiter @ Mayflower München • Nebenbei: JavaScript-Entwickler • @basti_springerWednesday, January 23, 13
  • WAS ERWARTET EUCH? ?Wednesday, January 23, 13 View slide
  • WAS ERWARTET EUCH? • Was ist TDD? ?Wednesday, January 23, 13 View slide
  • WAS ERWARTET EUCH? • Was ist TDD? ? • Warum TDD?Wednesday, January 23, 13
  • WAS ERWARTET EUCH? • Was ist TDD? ? • Warum TDD? • Was benötige ich dafür?Wednesday, January 23, 13
  • WAS ERWARTET EUCH? • Was ist TDD? ? • Warum TDD? • Was benötige ich dafür? • Wie funktioniert’s?Wednesday, January 23, 13
  • WAS
  •   IST
  •   TDD? WARUM
  •   TDD? VORAUSSETZUNGEN? WIE
  •   FUNKTIONIERT’S?Wednesday, January 23, 13
  • WAS IST TDD? • Angewandtes Softwaredesign und -entwicklung • Erst Tests, dann den Code • Red, Green, Refactor • Clean Code that worksWednesday, January 23, 13
  • TDD
  •   ist
  •   doofWednesday, January 23, 13
  • DIE SCHATTENSEITEN • Verständnis • Disziplin und Konsequenz • Einstiegshürde • Anfänglich langsame GeschwindigkeitWednesday, January 23, 13
  • WAS
  •   IST
  •   TDD? ✓ WARUM
  •   TDD? VORAUSSETZUNGEN? WIE
  •   FUNKTIONIERT’S?Wednesday, January 23, 13
  • Weil’s
  •   geht!Wednesday, January 23, 13
  • Das Problem verstehenWednesday, January 23, 13
  • Sicherheit für RefactoringsWednesday, January 23, 13
  • Schnelles FeedbackWednesday, January 23, 13
  • Software muss getestet werdenWednesday, January 23, 13
  • Software muss getestet werden entweder manuell oder automatischWednesday, January 23, 13
  • DokumentationWednesday, January 23, 13
  • Basis für WeiterentwicklungWednesday, January 23, 13
  • Besserer CodeWednesday, January 23, 13
  • Weniger BugsWednesday, January 23, 13
  • Spaß an der ArbeitWednesday, January 23, 13
  • Qualität und LauffähigkeitWednesday, January 23, 13
  • WAS
  •   IST
  •   TDD? ✓ WARUM
  •   TDD? ✓ VORAUSSETZUNGEN? WIE
  •   FUNKTIONIERT’S?Wednesday, January 23, 13
  • IDEWednesday, January 23, 13
  • FRAMEWORKWednesday, January 23, 13
  • BROWSERWednesday, January 23, 13
  • Gibt’s
  •   das
  •   nicht
  •   in
  •    besser?Wednesday, January 23, 13
  • INTEGRATIONWednesday, January 23, 13
  • INTEGRATION JsTestDriver PluginWednesday, January 23, 13
  • JSTESTDRIVERWednesday, January 23, 13
  • + = ♥Wednesday, January 23, 13
  • WAS
  •   IST
  •   TDD? ✓ WARUM
  •   TDD? ✓ VORAUSSETZUNGEN? ✓ WIE
  •   FUNKTIONIERT’S?Wednesday, January 23, 13
  • DAS BEISPIEL: FIZZ BUZZWednesday, January 23, 13
  • FIZZ BUZZ • Es wird eine Zahl eingegeben. • Ist die Zahl durch 3 teilbar, ist das Ergebnis “fizz”. • Ist die Zahl durch 5 teilbar, ist das Ergebnis “buzz”. • Ist die Zahl sowohl durch 3 als auch durch 5 teilbar, ist das Ergebnis “fizzbuzz”.Wednesday, January 23, 13
  • FIZZ BUZZ 1 1 11 11 21 fizz 2 2 12 fizz 22 22 3 fizz 13 13 23 23 4 4 14 14 24 fizz 5 buzz 15 fizzbuzz 25 buzz 6 fizz 16 16 26 26 7 7 17 17 27 fizz 8 8 18 fizz 28 28 9 fizz 19 19 29 29 10 buzz 20 buzz 30 fizzbuzzWednesday, January 23, 13
  • SETUPWednesday, January 23, 13
  • FIZZBUZZ.JSTD load: - lib/jasmine.js - lib/JasmineAdapter.js - spec/FizzBuzz.spec.js - src/FizzBuzz.js • YAML-Format • Speicherorte der verschiedenen DateienWednesday, January 23, 13
  • Wednesday, January 23, 13
  • Na
  •   dann
  •   mal
  •   los!Wednesday, January 23, 13
  • TEST FIRST • Erst den Test, dann den Quellcode • Anforderungen in Test übersetzen • One problem a timeWednesday, January 23, 13
  • describe("FizzBuzz", function () { "use strict"; it("should return 1, if 1 is provided", function () { expect(fizzbuzz(1)).toEqual(1); }); });Wednesday, January 23, 13
  • redWednesday, January 23, 13
  • EINFACHSTE LÖSUNG • Ziel: Der Test muss grün werden. • Fokus auf die aktuelle ProblemstellungWednesday, January 23, 13
  • FAKE IT ‘TIL YOU MAKE IT • Umsetzung mit fixen Werten • Tests werden sehr schnell grün • Wenig Code • Kein Over-EngineeringWednesday, January 23, 13
  • var fizzbuzz = function () { "use strict"; return 1; };Wednesday, January 23, 13
  • greenWednesday, January 23, 13
  • TRIANGULATION • Mehrere Tests mit verschiedenen Werten • Klare Implementierung • Saubere Abstraktion • Tests mit GrenzwertenWednesday, January 23, 13
  • it("should return 2, if 2 is provided", function () { expect(fizzbuzz(2)).toEqual(2); });Wednesday, January 23, 13
  • redWednesday, January 23, 13
  • var fizzbuzz = function (n) { "use strict"; return n; };Wednesday, January 23, 13
  • greenWednesday, January 23, 13
  • OBVIOUS IMPLEMENTATION • Keine unnötigen Tests • Wenn 1 und 2 funktionieren, sollten auch alle weiteren Zahlen funktionieren. • Zu viel Aufwand für TestsWednesday, January 23, 13
  • BABY STEPS • Die kleinst möglichen Schritte • Sehr kurze Feedback-Scheifen • Schnelle, übersichtliche TestsWednesday, January 23, 13
  • it("should return fizz, if 3 is provided", function () { expect(fizzbuzz(3)).toEqual(fizz); });Wednesday, January 23, 13
  • redWednesday, January 23, 13
  • var fizzbuzz = function (n) { "use strict"; if (n === 3) { return fizz; } return n; };Wednesday, January 23, 13
  • greenWednesday, January 23, 13
  • THREE OUT OF FOUR • Stabiler Codestand • Maximal eine Änderung entfernt von grünen TestsWednesday, January 23, 13
  • YAGNI • You Ain’t Gonna Need It • Kein Code für zukünftige Probleme • Fokus auf das aktuelle ProblemWednesday, January 23, 13
  • it("should return fizz, if 6 is provided", function () { expect(fizzbuzz(6)).toEqual(fizz); });Wednesday, January 23, 13
  • redWednesday, January 23, 13
  • var fizzbuzz = function (n) { "use strict"; if (n === 3 || n === 6) { return fizz; } if (n === 5) { return buzz; } return n; };Wednesday, January 23, 13
  • greenWednesday, January 23, 13
  • REFACTOR • Stellen, die verbessert werden können, identifizieren • Anhand der bestehenden Tests den Code umbauenWednesday, January 23, 13
  • var fizzbuzz = function (n) { "use strict"; if (n % 3 === 0) { return fizz; } if (n === 5) { return buzz; } return n; };Wednesday, January 23, 13
  • greenWednesday, January 23, 13
  • REMOVE DUPLICATION • Bessere Wartbarkeit • Übersichtlicher Quellcode • Teure WeiterentwicklungWednesday, January 23, 13
  • GOLDEN MASTER • kompletter Systemtest • Generierter oder manueller Test • bei umfangreicheren Workflows sehr aufwändigWednesday, January 23, 13
  • describe("FizzBuzz", function () { "use strict"; var map = [ , 1, 2, fizz, 4, buzz, fizz, 7, 8, fizz, buzz, 11, fizz, 13, 14, fizzbuzz, 16, 17, fizz, 19, buzz, fizz, 22, 23, fizz, buzz, 26, fizz, 28, 29, fizzbuzz ], i, bindFunc, func = function (x, y) { expect(fizzbuzz(x)).toEqual(y); }; for (i = 1; i < map.length; i += 1) { bindFunc = func.bind(this, i, map[i]); it("should return " + map[i] + " if " + i + " is provided", bindFunc); } });Wednesday, January 23, 13
  • greenWednesday, January 23, 13
  • UND JETZT? • Nimm teil an einem Coding Dojo • Führe Coding Katas durch • Pair Programming • Austausch mit anderen EntwicklernWednesday, January 23, 13
  • CHEAT SHEET • Write a failing Test • Triangulate • Write the simplest code to • Keep your test and model test code separate • Refactor to remove duplication • Isolate your tests • Write the assertion first and • Test should test one thing work backwards • Don’t refactor with a failing • See the test fail test • Write meaningful tests • Maintain your TestsWednesday, January 23, 13
  • Fragen?Wednesday, January 23, 13
  • VIELEN DANK! Sebastian Springer Mayflower GmbH Mannhardtstr. 6 80538 München Deutschland @basti_springer https://github.com/sspringer82Wednesday, January 23, 13