BASTA 2013: JavaScript Unit Testing

Slide 1

Slide 1 text

Sebastian P.R. Gingter | Smarthouse Media GmbH Mehrwert in Action: JavaScript Unit Testing

Slide 2

Slide 2 text

Vorab: •  Sourcen und Demos @github –  https://github.com/gingters/BASTA2013_JSUnitTesting •  Slides @speackerdeck –  https://speakerdeck.com/phoenixhawk

Slide 3

Slide 3 text

JavaScript Unit Testing Mehrwert in Action: Sebastian P.R. Gingter @PhoenixHawk #bastacon

Slide 4

Slide 4 text

Agenda I •  Einleitung •  Demo I – Wie man ‚legacy‘ code testet •  Verfügbare Tools – Test frameworks & test runners

Slide 5

Slide 5 text

Agenda II •  Die Toolchain für unsere Session – Und warum sie gewählt wurden •  Demo II – Was geht und wie gehts? •  The End J – Fragen & Antworten

Slide 6

Slide 6 text

Einleitung •  Testing ist gut –  Oder: Warum sitzt ihr in dieser Session? •  Jeder kann test-driven entwickeln –  Aber das soll uns jetzt & hier nicht kümmern –  Wir sorgen uns eher um existierenden Code „[...], we can obviously say that starting with unit testing is much easier when starting something from scratch.“ Jörn Zaefferer, QUnit

Slide 7

Slide 7 text

Einleitung •  Probleme beim JS-Testing – JavaScript & Units ? – Inline Event Handlers – jQuery – DOM

Slide 8

Slide 8 text

Testing (legacy) code & DOM Demo I

Slide 9

Slide 9 text

Verfügbare Tools •  Test frameworks –  QUnit (jQuery) –  Mocha –  Jasmine –  JsUnit –  RhinoUnit –  Sinon –  JsSpec –  Jspec –  Screw.Unit –  ...

Slide 10

Slide 10 text

Verfügbare Tools •  Test runners – Karma (früher Testacular) – Buster.js – TestSwarm – JsTestDriver – YUI Yeti – ... •  Grobe Übersicht: http://stackoverflow.com/questions/300855/javascript-unit-test-tools-for-tdd

Slide 11

Slide 11 text

Verfügbare Tools •  Browser – Alle relevanten J – PhantomJS

Slide 12

Slide 12 text

Unsere Toolchain •  Jasmine •  Karma

Slide 13

Slide 13 text

Warum? •  Verbreitung •  Community •  Karma kommt von Google

Slide 14

Slide 14 text

Woher? •  Node.js - http://nodejs.org/ •  QUnit.js - http://qunitjs.com/ •  Jasmine - http://pivotal.github.io/jasmine/ •  Karma - http://karma-runner.github.io/ •  PhantomJS - http://phantomjs.org/

Slide 15

Slide 15 text

Node, Karma & Jasmine •  Node.js installieren •  npm install -g karma •  Optional: npm install -g jasmine-node

Slide 16

Slide 16 text

CI Integration (am Beispiel von TeamCity) •  http://blog.danmerino.com/continuos- integration-ci-for-javascript-jasmine- and-teamcity/ •  https://github.com/larrymyers/jasmine- reporters

Slide 17

Slide 17 text

Was geht? Wie geht’s? Demo II

Slide 18

Slide 18 text

Q & A?

Slide 19

Slide 19 text

Last but not least: •  Twitter: @PhoenixHawk Hashtag: #bastacon •  Blog: gingter.org •  E-Mail: [email protected]

Slide 20

Slide 20 text

VIELEN DANK! Mehrwert in Action: JavaScript Unit Testing