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

Test-driven Client-side JS

Pete Hodgson
February 04, 2015
Programming
5
710

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
A Journey Into Feature Toggles - OSCON Austin 2017
phodgson
5
410
Functional Reactive JavaScript
phodgson
8
670
different.js - Forward JS 2014
phodgson
4
700
Railsconf2014
phodgson
7
1.3k
Building Your Own Lightsaber
phodgson
99
5.7k
iOS Unit Testing Workshop
phodgson
3
400
Multi-platform Mobile with Calatrava - May 2013
phodgson
2
320
Unit testing with Kiwi - CocoaConf San Jose 2013
phodgson
1
470
Automated Mobile Acceptance Testing Presentation - mdevcon 2013
phodgson
2
620

Other Decks in Programming

See All in Programming
Hanami and htmx
bkuhlmann
0
210
GitHub Copilotのススメ
marcy731
1
200
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
240
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.1k
[技育CAMPアカデミア]アイディアを形に！【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
360
Node.js v22 で変わること
yosuke_furukawa
PRO
8
2.7k
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
360
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
370
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
920
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
Anthropic Cookbook のおすすめレシピ
schroneko
7
890
Java 22 Overview
kishida
1
180

Featured

See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Automating Front-end Workflow
addyosmani
1356
200k
Raft: Consensus for Rubyists
vanstee
132
6.3k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Done Done
chrislema
178
15k
What's in a price? How to price your products and services
michaelherold
237
11k
It's Worth the Effort
3n
180
27k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
4 Signs Your Business is Dying
shpigford
175
21k
Thoughts on Productivity
jonyablonski
58
3.8k
Design by the Numbers
sachag
274
18k

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