SenchaUG 勉強会 第5回@東京の発表資料です。

1. コンポーネントテストで
開発効率を上げよう
SenchaUG 勉強会 第5回@東京
13年2月14日木曜日

2. 自己紹介
- 松岡 宏満（まつおか ひろみつ）
- 株式会社W・I・Z
- ExtJS/Sencha Touchは趣味で3年、仕事で2年
-@ ispern
- http://www.ispern.com
13年2月14日木曜日

3. コンポーネントテスト（Component Test）とは？
13年2月14日木曜日

4. アプリケーション全体を読み込む場合
- 全てのコンポーネントをロードするため、初期ロードが遅い
- 初期表示で表示されないコンポーネントの確認に操作が必要
13年2月14日木曜日

5. コンポーネントテスト
- コンポーネント単位に分割する
- 必要なクラスのみのロードによる時間短縮
- 確認したいコンポーネントをすぐ確認できる
13年2月14日木曜日

6. 分割する Ext.Viewport
Ext.Container
- ビューポート
- ヘッダコンテナー
- メニューパネル
Ext.tree.Panel Ext.grid.Panel
- グリッドパネル
13年2月14日木曜日

7. 実際にグリッドパネルのCTを作ってみる
ソースコードは以下にあります
https://github.com/ispern/extjs-component-test
13年2月14日木曜日

8. 事前準備
- ctフォルダを作成
- 名前は任意です
- ctフォルダ以下のフォルダにアクセス
するために、index.htmlを作成
13年2月14日木曜日

9. Ext.applicationでグリッドパネルの起動処理
index.html app.js
chapter1
13年2月14日木曜日

10. Ext.applicationでグリッドパネルの起動処理
chapter1
13年2月14日木曜日

11. コンポーネント間の依存度を低くする
グリッドパネルのControllerクラスは
ツリーパネルのイベントをリッスンし
ているので、ツリーパネルがないとグ
リッドパネルは動かない（依存度が高
い）
chapter2
13年2月14日木曜日

12. コンポーネント間の依存度を低くする
Gridコントローラ
selectイベントをリッスン ストアをロード
MyTreePanel MyGridPanel
chapter2
13年2月14日木曜日

13. コンポーネント間の依存度を低くする
Mainコントローラ Gridコントローラ
doLoadをfireEvent
selectイベンをリッスン doLoadイベンをリッスン
MyTreePanel MyGridPanel
chapter2
13年2月14日木曜日

14. コンポーネント間の依存度を低くする
- view/MyGridPanel.js
chapter2
13年2月14日木曜日

15. コンポーネント間の依存度を低くする
- app.js
chapter2
13年2月14日木曜日

16. コンポーネント間の依存度を低くする
- controller/Main.js
chapter2
13年2月14日木曜日

17. 番外編
コンポーネントテストで作ったMyGridPanelをJasmine+JsTestDriverを使
ってユニットテストをやってみました。
https://github.com/ispern/extjs-component-test
13年2月14日木曜日

18. 事前準備
- JsTestDriverのjarファイルと
JasmineのSDKを配置
- 配置場所は任意です。今回はtest/libフォルダに置い
てます。
13年2月14日木曜日

19. 事前準備
JsTestDriverを実行してテスト対象のブラウザをキャプチャします
13年2月14日木曜日

20. JsTestDriverの設定ファイルを作成する
今回はCTのMyGridPanelのみの設定ファイルです
13年2月14日木曜日

21. Specファイルを作成する
13年2月14日木曜日

22. テストを実行する
13年2月14日木曜日

23. まとめ
- 必要なクラスのみのロードによる時間短縮
- 確認したいコンポーネントをすぐ確認できる
- 各テスティングフレームワークを利用したテストがしやすくなる
- コンポーネント間の依存度を意識してコーディングができる
13年2月14日木曜日

24. ご静聴ありがとうございました
13年2月14日木曜日