Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Test-driven Client-side JS

Pete Hodgson
February 04, 2015
Programming
5
780

Test-driven Client-side JS

Presented at ForwardJS, Feb 2015
VIDEO: https://forwardjs.com/lectures/33

Writing high quality, maintainable client-side code is becoming increasingly important as we continue to move more logic into the browser. This talk will show how unit-testing and test-driven development helps you build better quality code, faster.

We'll see examples of building a React app test-first, then look at techniques and tools to solve the trickier parts of unit-testing in JavaScript. You'll see how TDD guides us towards cleaner and more maintainable code, with clear separation between your application logic and the browser's 'ideosnycractic' APIs.

Pete Hodgson

February 04, 2015
Tweet

More Decks by Pete Hodgson

See All by Pete Hodgson
Migratory Patterns - KubeCon Salt Lake City, 2024
phodgson
0
35
A Journey Into Feature Toggles - OSCON Austin 2017
phodgson
5
520
Functional Reactive JavaScript
phodgson
8
740
different.js - Forward JS 2014
phodgson
4
780
Railsconf2014
phodgson
7
1.4k
Building Your Own Lightsaber
phodgson
103
6.1k
iOS Unit Testing Workshop
phodgson
3
470
Multi-platform Mobile with Calatrava - May 2013
phodgson
2
450
Unit testing with Kiwi - CocoaConf San Jose 2013
phodgson
1
590

Other Decks in Programming

See All in Programming
今年のアップデートで振り返るCDKセキュリティのシフトレフト/2024-cdk-security-shift-left
tomoki10
0
190
103 Early Hints
sugi_0000
1
220
なまけものオバケたち -PHP 8.4 に入った新機能の紹介-
tanakahisateru
1
120
Mermaid x AST x 生成AI = コードとドキュメントの完全同期への道
shibuyamizuho
0
160
SymfonyCon Vienna 2025: Twig, still relevant in 2025?
fabpot
3
1.2k
あれやってみてー駆動から成長を加速させる / areyattemite-driven
nashiusagi
1
200
似たもの同士のPerlとPHP
uzulla
1
130
Haze - Real time background blurring
chrisbanes
1
500
たのしいparse.y
ydah
3
120
良いユニットテストを書こう
mototakatsu
4
1.5k
今年一番支援させていただいたのは認証系サービスでした
satoshi256kbyte
1
250
Scalaから始めるOpenFeature入門 / Scalaわいわい勉強会 #4
arthur1
1
300

Featured

See All Featured
Adopting Sorbet at Scale
ufuk
73
9.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
Music & Morning Musume
bryan
46
6.2k
Code Review Best Practice
trishagee
65
17k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
VelocityConf: Rendering Performance Case Studies
addyosmani
326
24k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k

Transcript

  1. TEST-DRIVEN CLIENT-SIDE APPS Pete Hodgson @ph1 | [email protected]

  2. UNIT
 TESTING

  3. TEST DRIVEN DEVELOPMENT

  4. me me me Pete Hodgson Consultant at ThoughtWorks @ph1 blog.thepete.net

  5. WRITE A
 FAILING TEST GET THE TEST TO PASS REFACTOR

  6. WRITE A
 FAILING TEST GET THE TEST TO PASS REFACTOR

  7. FEEDBACK

  8. NXTBRT.COM

  9. the
 backend the
 browser <html> single-page javascript app REACT {JSON}

  10. { dest_name: “Richmond”, etd: 8, … } Departure Domain Object

    { destination: “Richmond”, departing: “8 mins” } View Object presenter function

  11. var presentDeparture = function(departure){ return { destination: departure.dest_name }; };

  12. var departurePresenter = require('../../js/departure_presenter'); ! describe( 'Departure presenter', function(){ it('presents

    the destination', function(){ // Given var departure = { dest_name: "Ontario", etd: 10 }; // When var viewModel = departurePresenter(departure); // Then expect(viewModel).to.have.property('destination','Ontario'); }); });

  13. var departurePresenter = require('../../js/departure_presenter'); ! describe( 'Departure presenter', function(){ it('presents

    the destination', function(){ // Given var departure = { dest_name: "Ontario", etd: 10 }; // When var viewModel = departurePresenter(departure); // Then expect(viewModel).to.have.property('destination','Ontario'); }); });

  14. { dest_name: “Richmond”, etd: 8, … } Departure Domain Object

    { destination: “Richmond”, departing: “8 mins” } View Object

  15. { dest_name: “Richmond”, etd: 8, … } Departure Domain Object

    { destination: “Richmond”, departing: “8 mins” } View Object

  16. FEEDBACK

  17. RAPID FOCUSED ACCURATE FEEDBACK

  18. 25

  19. 26

  20. 27

  21. 27 TEST SCOPE

  22. TEST SCOPE DOM HTTP 28

  23. 29

  24. 30 ISOLATION

  25. 30 ISOLATION test code

  26. presenter function test code ✓ ISOLATION

  27. departures gateway controller AJAX function “station-id” GET
 http://blah/station-id LIST OF

    DEPARTURE OBJECTS BIG BLOB
 OF JSON

  28. 34

  29. HTTP 35 ajax function

  30. 36 fake ajax function

  31. 36 fake ajax function

  32. departures gateway test code mock
 ajax fn

  33. departures gateway test code “station-id” “http://blah/station-id” mock
 ajax fn

  34. departures gateway test code CORRECTLY-PARSED DOMAIN OBJECT SOME JSON mock


    ajax fn

  35. it( 'parses the AJAX response as JSON', function(){ // Given

    var fakeJson = '{ "some":"json" }'; var fakeAjaxResponse = Q(fakeJson); var fakeAjaxFn = function(){ return fakeAjaxResponse; }; ! var departuresGateway = createDeparturesGateway(fakeAjaxFn); ! // When var departuresPromise = departuresGateway.fetchDeparturesFor('blah'); ! // Then return expect(departuresPromise) .to.eventually .deep.equal({some:"json"}); });

  36. RAPID FOCUSED ACCURATE FEEDBACK

  37. 42 ISOLATION

  38. mocha test runner chai assertion library gulp task runner, file

    watcher testem browser manager sinon stubbing/mocking chai-as-promised …

  39. 45 github.com/moredip/test-driven-react @ph1 | [email protected] http://slides.thepete.net