Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScript TDD Bootcamp
Search
KAZUMA Ukyo
November 26, 2012
Programming
0
150
JavaScript TDD Bootcamp
まずかったら消す
KAZUMA Ukyo
November 26, 2012
Tweet
Share
More Decks by KAZUMA Ukyo
See All by KAZUMA Ukyo
JavaScript+DDD実践編?
yaakaito
8
35k
Functional JavaScript/TypeScript
yaakaito
4
1.2k
モデリングをはじめよう
yaakaito
3
360
Head First TypeScript
yaakaito
2
2.4k
"Buster.JS" ClinetSide Javascript testing
yaakaito
4
1.1k
Other Decks in Programming
See All in Programming
Compiling Python to WebAssembly with py2wasm
syrusakbary
0
130
PHPerKaigi 2024〜10年以上動いているレガシーなバッチシステムを Kubernetes(Amazon EKS) に移行する取り組み〜
tshinowpub
1
220
Why 1 + 1 = 2 in Swift?
1plus4
1
240
htmx is fun!
codehex
2
190
Creating Retro-Style Photos Using Swift
ski
1
340
OpenAPI を守るのは難しい
ohmori_yusuke
1
140
導入から5年が経って見えた Datadog APM 運用の課題
bgpat
2
540
ドメイン・ファーストで考える問題解決に役立つモデル設計 / Domain First Model Design
suzushin54
1
1.4k
MySQL のインデックスの種類をおさらいしよう! / overviewing indexes in MySQL
okashoi
0
170
document.write再考
brn
5
2.5k
今の SmartHR にエンジニアで入社するとどうなるの?
daisukeshinoku
1
400
LPIXEL×CADDi_kaerururu
kaerururu
3
300
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
Git: the NoSQL Database
bkeepers
PRO
421
63k
Side Projects
sachag
451
41k
Infographics Made Easy
chrislema
237
18k
From Idea to $5000 a Month in 5 Months
shpigford
376
45k
Done Done
chrislema
178
15k
Rails Girls Zürich Keynote
gr2m
91
13k
Stop Working from a Prison Cell
hatefulcrawdad
265
19k
Documentation Writing (for coders)
carmenintech
59
3.8k
Web Components: a chance to create the future
zenorocha
304
41k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Teambox: Starting and Learning
jrom
126
8.4k
Transcript
TDD Bootcamp #1
今日やる事 今日はやらない事 突っ込んだ話 まずは始めよう 自信を持とう デベロップメントテスト
一限目 物理
そもそもなんで テスト かくんですか?
そもそもなんで テスト かくんですか?
某インターネット上のフリー百科事典によると
ソフトウェアテスト(software test)と は、コンピュータのプログラムを実行し、正 しく動作するかどうか確認する作業のことで ある。ソフトウェアテストは、プログラム中 の欠陥(バグ)をできる限り多く発見するこ とを目標として行われる。ソフトウェアテス トに成功するとは、欠陥を発見することであ る。ソフトウェアテストでは、欠陥が存在す ることを示すことはできるが、欠陥が存在し
ないことは証明できない。(続く)
こんな人がいるとします たとえ話
None
None
要するにダサくなりたくなかったら 黙ってテスト書けってことです
でもテストって 手間 でしょ?
でもテストって 手間 でしょ?
テメーらのコードを手で 確認する方が手間だ
チーム内だけだし レビュー あれば大丈夫でしょ?
チーム内だけだし レビュー あれば大丈夫でしょ?
コードを触るのが チーム内だけだと思うな
「今日からよろ」 「テストないん すか、はっは」 「レビュー履歴 を全部みろ?」 「そんなぁ」
死 の 宣 告 ま さ に
けど
全部解決 できたら?
綺麗でバグの少ない 動くソフトウェアを 自信をもって開発できる
かっこいい ですよね?
自信を持とう
二限目 心理学
なんでテスト 先に かくんですか?
某インターネット上のフリー百科事典によると
テスト駆動開発 (てすとくどうかいはつ、 test-driven development; TDD) とは、プロ グラム開発手法の一種で、プログラムに必要 な各機能について、最初にテストを書き(こ れをテストファーストと言う)、そのテスト が動作する必要最低限な実装をとりあえず
行った後、コードを洗練させる、という短い 工程を繰り返すスタイルである。多くのア ジャイルソフトウェア開発手法、例えばエク ストリーム・プログラミングに (続く)
要するにどうせ後でかかねーから 黙って先に書けってことです
存在しないコードに どうやって テストかくんですか?
存在しないコードに どうやって テストかくんですか?
テストをパスする コードだけ書く
APIなんかの仕様を テストに落とす
いきなり大きな処理は 書けないので 自然と小さくなる
綺麗に 書けないといけない
綺麗に 書けないといけない
テストは 開発するために書く
定石は存在するが 正しい解答はない
全部テスト しないといけない
全部テスト しないといけない
テストは 開発するために書く
開発する上で 不安な要素を網羅する
安心できる さじ加減を身につける
デベロップメントテスト を意識しましょう
三限目 人間学
TDDする気に ならなかった人 ノ
TDDする気に ならなかった人 ノ
休憩 後半は実技です
四限目 保健体育
ここから実技にはいります
CoffeeScriptで解説します 今回はJavaScript編 javascriptで書いてもOKです jQueryは使ってOKです
答え合わせはありません 実際に書いてみましょう 自分が安心できるところまで お約束 何人かに解説してもらいます
QUnitを使います 実行環境 https://github.com/ yaakaito/js-tdd-bootcamp
肩ならし
QUnitを動かしてみよう
test/first_test.coffee test “sample test”
test/first_test.coffee test “sample test”, ()->
test/first_test.coffee test “sample test”, ()-> ok 1 == 1, “Passed!”
test_runner.html <body> <div id="qunit"></div> <script src="./lib/qunit.js"> </script> <script src="./test/first_test.js"> </script>
</body>
こんな感じになればOKです
課題1 数値を2つ受け取って 足し算、引き算、 かけ算、割り算、 を行う関数を それぞれ実装してください これくらいならテストファイルに そのまま実装書いてしまっても構いません 15分
0で割るケース ちゃんとテストしましたか?
JavaScript っぽいテスト
DOM操作をテストしよう
test/dom_test.coffee test “dom test”, ()->
test/dom_test.coffee test “dom test”, ()-> fuga(); ok $(“#e”).html() == “fuga!”,
“Passed!”
test/dom_test.coffee test “dom test”, ()-> fuga(); ok $(“#e”).html() == “fuga!”,
“Passed!” fuga = ()-> $(“#e”).html(“fuga!”)
test_runner.html <body> <div id="qunit"></div> <script src="./lib/qunit.js"> </script> <script src="./test/dom_test.js"> </script>
</body>
test_runner.html <body> <div id="qunit"></div> <script src="./lib/qunit.js"> </script> <script src="./test/dom_test.js"> </script>
<div id=”e”> </div> </body>
課題2 「いいね!」ボタンを作って ください。 「いいね!」の取り消しと、 取り消し後に「いいね!」し なおすことが、できるように してください。 25分
JavaScript っぽいテスト2
XHRをテストしよう
やり方はいろいろ サービスに投げてしまう テスト用のサーバーを立てる モックを使う
やり方はいろいろ サービスに投げてしまう テスト用のサーバーを立てる モックを使う
モックの使い方
必ずしも ライブラリは必要はない
test/mock_test.coffee test “mock test”, ()-> ok user.login() == “ok!”, “Passed!”
user = service : null # ·ͩͳ͍ login : ()-> @service.login() # ·ͩͳ͍
test/mock_test.coffee test “mock test”, ()-> user.service = serviceMock ok user.login()
== “ok” user = service : null # ·ͩͳ͍ login : ()-> @service.login() # ·ͩͳ͍ serviceMock = login : ()-> “ok!”
課題3 XHRのラッパーを作ってください。 内部的にjQueryを使ったりする設計で もOKです。 ネットワークにつながっていなくと も、テストが動くようにしてくださ い。 35分
五限目 社会
すごく簡単なことだけ 説明してきましたが
これくらいの知識で テストは十分書けます
テストを書いて 新しいアハ体験を!
None