testable javascript

56
Testable JavaScript 佐藤 竜之介(Ryunosuke SATO) Sapporo.js RubySapporoNight vol.14 http://www.flickr.com/photos/8773698@N03/2929230558

Upload: ryunosuke-sato

Post on 11-May-2015

4.880 views

Category:

Technology


1 download

DESCRIPTION

テスト可能な JavaScript についての発表資料です。 Ruby Sappor Night vol.14 ( http://ruby-sapporo.org/news/2012/02/01/rsn-14.html ) でお話してきました。 共演者の資料はこちら: http://snoozer05.org/?date=20120223#p01

TRANSCRIPT

Page 1: Testable JavaScript

Testable JavaScript

佐藤 竜之介(Ryunosuke SATO)Sapporo.js

RubySapporoNight vol.14

http://www.flickr.com/photos/8773698@N03/2929230558

Page 2: Testable JavaScript

提供

Sapporo.js

Community for people who like JavaScript.

Page 3: Testable JavaScript

Sapporo.js

http://sapporojs.org

Page 4: Testable JavaScript

It’s my feature

Page 5: Testable JavaScript

よろしくお願いします

Page 6: Testable JavaScript

Testable JavaScript

佐藤 竜之介(Ryunosuke SATO)Sapporo.js

RubySapporoNight vol.14

http://www.flickr.com/photos/8773698@N03/2929230558

Page 7: Testable JavaScript

対象者

Page 8: Testable JavaScript

webブラウザで動くJavaScript を書いている方JavaScript のテストに興味がある方

テストを書いて快適に開発をしたい方

Page 9: Testable JavaScript

Ruby でサーバ側を作ってるけど

JavaScript を書く機会が増えてきた方

たとえば...

Page 10: Testable JavaScript

??Test

Page 11: Testable JavaScript

Rubyには洗練されたテスト文化

Page 12: Testable JavaScript

JavaScript ではまだ十分ではないと思う

Page 13: Testable JavaScript

In browser

Page 14: Testable JavaScript
Page 15: Testable JavaScript

difficult

Page 16: Testable JavaScript

??why

Page 17: Testable JavaScript

http://www.flickr.com/photos/zuka0607/4311979628

design

Page 18: Testable JavaScript

(^q^)

Page 19: Testable JavaScript

そうなる前に!

Page 20: Testable JavaScript

整理整頓

Page 21: Testable JavaScript

‘‘http://redbitbluebit.com/code-kata-software-memory-muscles/

KATA

Page 24: Testable JavaScript

http://emberjs.com/

Page 25: Testable JavaScript

point

Page 26: Testable JavaScript

ドメインロジックと画面の分離

Page 27: Testable JavaScript

Testable

Page 29: Testable JavaScript

http://tasklist-demo.herokuapp.com/

source: https://github.com/tricknotes/task-list

(demo)

Page 30: Testable JavaScript
Page 31: Testable JavaScript
Page 32: Testable JavaScript

一カ所の変更が、複数の表示に影響を与えている

Page 33: Testable JavaScript

表示箇所を一つ増やそうとすると、すべてのアクションにイベントを追加する

必要がある

Page 35: Testable JavaScript

‘‘http://redbitbluebit.com/code-kata-software-memory-muscles/

KATA

Page 36: Testable JavaScript

ドメインロジックと画面の分離

Page 37: Testable JavaScript

TaskView

TotalView

Task

Page 38: Testable JavaScript

TaskTotalView

TaskView

subscribe

subscribe

publish

publish

action

Model

View

View

Testable!!

Page 39: Testable JavaScript

Unit Test

Page 40: Testable JavaScript

TaskTotalView

TaskView

subscribe

subscribe

publish

publish

Model

View

View

action

Page 42: Testable JavaScript

Unit Test

Page 43: Testable JavaScript

using: mocha( http://visionmedia.github.com/mocha/ ) expect.js( https://github.com/LearnBoost/expect.js )

Unit Test

Page 44: Testable JavaScript

Acceptance Test

Page 45: Testable JavaScript

TaskTotalView

TaskView

subscribe

subscribe

publish

publish

Model

View

View

action

Page 46: Testable JavaScript

http://zombie.labnotes.org/

Page 47: Testable JavaScript

Acceptance Test

Page 48: Testable JavaScript

using: mocha( http://visionmedia.github.com/mocha/ ) expect.js( https://github.com/LearnBoost/expect.js ) zombie ( http://zombie.labnotes.org/ )

Acceptance Test

Page 49: Testable JavaScript

Ruby JavaScript

TestUnit QUnit

RSpec jasminemocha

capybara-webkit zombie

今回使ったフレームワーク

Page 50: Testable JavaScript

他にもこの辺オススメ

Ruby JavaScript

cucumber cucumber

RSpec(matcher)should.jsexpect.js

etc...

Page 51: Testable JavaScript

CI でもブラウザでも同じように動くテストhtml5 の機能のテスト (canvas, localStorage...)

課題

Page 52: Testable JavaScript

大事なこと

Page 53: Testable JavaScript

安心して開発を行うためのテスト大事

Page 54: Testable JavaScript

テストしやすい設計

分離された構造

Page 55: Testable JavaScript

変更に強い設計

Page 56: Testable JavaScript

手を加える度に、進歩して行ける開発を!

http://www.flickr.com/photos/ku_photodigital/6309174528