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
20
A Journey Into Feature Toggles - OSCON Austin 2017
phodgson
5
510
Functional Reactive JavaScript
phodgson
8
730
different.js - Forward JS 2014
phodgson
4
770
Railsconf2014
phodgson
7
1.4k
Building Your Own Lightsaber
phodgson
103
6.1k
iOS Unit Testing Workshop
phodgson
3
460
Multi-platform Mobile with Calatrava - May 2013
phodgson
2
430
Unit testing with Kiwi - CocoaConf San Jose 2013
phodgson
1
580

Other Decks in Programming

See All in Programming
役立つログに取り組もう
irof
28
9.6k
ペアーズにおけるAmazon Bedrockを⽤いた障害対応⽀援 ⽣成AIツールの導⼊事例 @ 20241115配信AWSウェビナー登壇
fukubaka0825
6
1.8k
AWS Lambdaから始まった
Serverlessの「熱」とキャリアパス / It started with AWS Lambda Serverless “fever” and career path
seike460
PRO
1
250
Outline View in SwiftUI
1024jp
1
320
카카오페이는 어떻게 수천만 결제를 처리할까? 우아한 결제 분산락 노하우
kakao
PRO
0
110
OSSで起業してもうすぐ10年 / Open Source Conference 2024 Shimane
furukawayasuto
0
100
Content Security Policy入門 セキュリティ設定と 違反レポートのはじめ方 / Introduction to Content Security Policy Getting Started with Security Configuration and Violation Reporting
uskey512
1
520
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
480
Duckdb-Wasmでローカルダッシュボードを作ってみた
nkforwork
0
120
弊社の「意識ﾁｮｯﾄ低いアーキテクチャ」10選
texmeijin
5
24k
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
9
3.3k
WebフロントエンドにおけるGraphQL（あるいはバックエンドのAPI）との向き合い方 / #241106_plk_frontend
izumin5210
4
1.4k

Featured

See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
A better future with KSS
kneath
238
17k
Testing 201, or: Great Expectations
jmmastey
38
7.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
How to Ace a Technical Interview
jacobian
276
23k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
Speed Design
sergeychernyshev
24
610
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Become a Pro
speakerdeck
PRO
25
5k

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