コンポーネントテストで               開発効率を上げよう                     SenchaUG 勉強会 第5回@東京13年2月14日木曜日
自己紹介     - 松岡 宏満(まつおか ひろみつ)        - 株式会社W・I・Z        - ExtJS/Sencha   Touchは趣味で3年、仕事で2年        -@    ispern        - http...
コンポーネントテスト(Component Test)とは?13年2月14日木曜日
アプリケーション全体を読み込む場合     - 全てのコンポーネントをロードするため、初期ロードが遅い     - 初期表示で表示されないコンポーネントの確認に操作が必要13年2月14日木曜日
コンポーネントテスト     - コンポーネント単位に分割する        - 必要なクラスのみのロードによる時間短縮        - 確認したいコンポーネントをすぐ確認できる13年2月14日木曜日
分割する                          Ext.Viewport                                   Ext.Container     - ビューポート     - ヘッダコンテナー    ...
実際にグリッドパネルのCTを作ってみる       ソースコードは以下にあります       https://github.com/ispern/extjs-component-test13年2月14日木曜日
事前準備     - ctフォルダを作成       -   名前は任意です     - ctフォルダ以下のフォルダにアクセス       するために、index.htmlを作成13年2月14日木曜日
Ext.applicationでグリッドパネルの起動処理                   index.html   app.js        chapter113年2月14日木曜日
Ext.applicationでグリッドパネルの起動処理        chapter113年2月14日木曜日
コンポーネント間の依存度を低くする       グリッドパネルのControllerクラスは       ツリーパネルのイベントをリッスンし       ているので、ツリーパネルがないとグ       リッドパネルは動かない(依存度が高    ...
コンポーネント間の依存度を低くする                                     Gridコントローラ                   selectイベントをリッスン                ストアをロード ...
コンポーネント間の依存度を低くする                              Mainコントローラ                       Gridコントローラ                                ...
コンポーネント間の依存度を低くする              - view/MyGridPanel.js        chapter213年2月14日木曜日
コンポーネント間の依存度を低くする              - app.js        chapter213年2月14日木曜日
コンポーネント間の依存度を低くする              - controller/Main.js        chapter213年2月14日木曜日
番外編       コンポーネントテストで作ったMyGridPanelをJasmine+JsTestDriverを使       ってユニットテストをやってみました。       https://github.com/ispern/extjs-...
事前準備     - JsTestDriverのjarファイルと       JasmineのSDKを配置       -   配置場所は任意です。今回はtest/libフォルダに置い           てます。13年2月14日木曜日
事前準備       JsTestDriverを実行してテスト対象のブラウザをキャプチャします13年2月14日木曜日
JsTestDriverの設定ファイルを作成する       今回はCTのMyGridPanelのみの設定ファイルです13年2月14日木曜日
Specファイルを作成する13年2月14日木曜日
テストを実行する13年2月14日木曜日
まとめ     - 必要なクラスのみのロードによる時間短縮     - 確認したいコンポーネントをすぐ確認できる     - 各テスティングフレームワークを利用したテストがしやすくなる     - コンポーネント間の依存度を意識してコーディング...
ご静聴ありがとうございました13年2月14日木曜日
Upcoming SlideShare
Loading in …5
×

コンポーネントテストで開発効率を上げよう

1,038 views

Published on

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

  • Be the first to comment

コンポーネントテストで開発効率を上げよう

  1. 1. コンポーネントテストで 開発効率を上げよう SenchaUG 勉強会 第5回@東京13年2月14日木曜日
  2. 2. 自己紹介 - 松岡 宏満(まつおか ひろみつ) - 株式会社W・I・Z - ExtJS/Sencha Touchは趣味で3年、仕事で2年 -@ ispern - http://www.ispern.com13年2月14日木曜日
  3. 3. コンポーネントテスト(Component Test)とは?13年2月14日木曜日
  4. 4. アプリケーション全体を読み込む場合 - 全てのコンポーネントをロードするため、初期ロードが遅い - 初期表示で表示されないコンポーネントの確認に操作が必要13年2月14日木曜日
  5. 5. コンポーネントテスト - コンポーネント単位に分割する - 必要なクラスのみのロードによる時間短縮 - 確認したいコンポーネントをすぐ確認できる13年2月14日木曜日
  6. 6. 分割する Ext.Viewport Ext.Container - ビューポート - ヘッダコンテナー - メニューパネル Ext.tree.Panel Ext.grid.Panel - グリッドパネル13年2月14日木曜日
  7. 7. 実際にグリッドパネルのCTを作ってみる ソースコードは以下にあります https://github.com/ispern/extjs-component-test13年2月14日木曜日
  8. 8. 事前準備 - ctフォルダを作成 - 名前は任意です - ctフォルダ以下のフォルダにアクセス するために、index.htmlを作成13年2月14日木曜日
  9. 9. Ext.applicationでグリッドパネルの起動処理 index.html app.js chapter113年2月14日木曜日
  10. 10. Ext.applicationでグリッドパネルの起動処理 chapter113年2月14日木曜日
  11. 11. コンポーネント間の依存度を低くする グリッドパネルのControllerクラスは ツリーパネルのイベントをリッスンし ているので、ツリーパネルがないとグ リッドパネルは動かない(依存度が高 い) chapter213年2月14日木曜日
  12. 12. コンポーネント間の依存度を低くする Gridコントローラ selectイベントをリッスン ストアをロード MyTreePanel MyGridPanel chapter213年2月14日木曜日
  13. 13. コンポーネント間の依存度を低くする Mainコントローラ Gridコントローラ doLoadをfireEvent selectイベンをリッスン doLoadイベンをリッスン MyTreePanel MyGridPanel chapter213年2月14日木曜日
  14. 14. コンポーネント間の依存度を低くする - view/MyGridPanel.js chapter213年2月14日木曜日
  15. 15. コンポーネント間の依存度を低くする - app.js chapter213年2月14日木曜日
  16. 16. コンポーネント間の依存度を低くする - controller/Main.js chapter213年2月14日木曜日
  17. 17. 番外編 コンポーネントテストで作ったMyGridPanelをJasmine+JsTestDriverを使 ってユニットテストをやってみました。 https://github.com/ispern/extjs-component-test13年2月14日木曜日
  18. 18. 事前準備 - JsTestDriverのjarファイルと JasmineのSDKを配置 - 配置場所は任意です。今回はtest/libフォルダに置い てます。13年2月14日木曜日
  19. 19. 事前準備 JsTestDriverを実行してテスト対象のブラウザをキャプチャします13年2月14日木曜日
  20. 20. JsTestDriverの設定ファイルを作成する 今回はCTのMyGridPanelのみの設定ファイルです13年2月14日木曜日
  21. 21. Specファイルを作成する13年2月14日木曜日
  22. 22. テストを実行する13年2月14日木曜日
  23. 23. まとめ - 必要なクラスのみのロードによる時間短縮 - 確認したいコンポーネントをすぐ確認できる - 各テスティングフレームワークを利用したテストがしやすくなる - コンポーネント間の依存度を意識してコーディングができる13年2月14日木曜日
  24. 24. ご静聴ありがとうございました13年2月14日木曜日

×