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

Test-driven Client-side JS

Pete Hodgson
February 04, 2015
Programming
5
820

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
71
A Journey Into Feature Toggles - OSCON Austin 2017
phodgson
5
580
Functional Reactive JavaScript
phodgson
8
780
different.js - Forward JS 2014
phodgson
4
810
Railsconf2014
phodgson
7
1.4k
Building Your Own Lightsaber
phodgson
104
6.3k
iOS Unit Testing Workshop
phodgson
3
500
Multi-platform Mobile with Calatrava - May 2013
phodgson
2
490
Unit testing with Kiwi - CocoaConf San Jose 2013
phodgson
1
650

Other Decks in Programming

See All in Programming
By the way Google Cloud Next 2025に行ってみてどうだった
ymd65536
0
110
State of Namespace
tagomoris
5
2.2k
「影響が少ない」を自分の目でみてみる
o0h
PRO
2
1.2k
Browser and UI #2 HTML/ARIA
ken7253
2
150
Youtube Lofier - Chrome拡張開発
ninikoko
0
2.5k
Compose Hot Reload is here, stop re-launching your apps! (Android Makers 2025)
zsmb
1
580
Jakarta EE Meets AI
ivargrimstad
0
490
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
6
1.3k
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
kubode
1
220
AIコーディングの理想と現実
tomohisa
33
36k
Thank you <💅>, What's the Next?
ahoxa
1
570
七輪ライブラリー: Claude AI で作る Next.js アプリ
suneo3476
1
140

Featured

See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
54
5.5k
What's in a price? How to price your products and services
michaelherold
245
12k
Raft: Consensus for Rubyists
vanstee
137
6.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Documentation Writing (for coders)
carmenintech
69
4.7k
We Have a Design System, Now What?
morganepeng
52
7.5k
A Tale of Four Properties
chriscoyier
158
23k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.4k
Unsuck your backbone
ammeep
670
57k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
770
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k

Transcript

  1. TEST-DRIVEN CLIENT-SIDE APPS Pete Hodgson @ph1 | phodgson@thoughtworks.com

  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 | phodgson@thoughtworks.com http://slides.thepete.net