Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

自己紹介LT「俺の迷走っぷり」

1,512 views

Published on

第2回フロントエンドかけこみ寺@もくもく会にて行った、フロントエンドかけこみ寺初参加記念 自己紹介LT。

Published in: Internet
  • Be the first to comment

自己紹介LT「俺の迷走っぷり」

  1. 1. 俺の迷走っぷり FRONTEND-TEMPLE 初参加記念 @muryoimpl
  2. 2. 自己紹介 • 無量井 健(むりょうい けん) • 永和システムマネジメント 所属 • Ruby関西, 関西Ruby会議04・05 etc
  3. 3. 迷 走並 走 無量井 健(@muryoimpl) もがくぞ∼ http://www.slideshare.net/esminc/new-year-2016-agile-div#23
  4. 4. 主に使ってみているもの • React.js, Redux, Babel, espower-babel • webpack • Electron • mocha, power-assert, protractor • ESlint • (今サーバサイドも調べてる) Express, koa, meteor, socket.io とか
  5. 5. 主に使ってみているもの • CSS/Sass/SCSS • PostCSS(Gulpを通して利用してる) • Pure, sanitize.css
  6. 6. よろしく お願いします 😸
  7. 7. 今日お尋ね したいこと
  8. 8. テストです https://www.flickr.com/photos/sidelong/246816211
  9. 9. やり始めで不安 ↓ テストで確認したい https://www.flickr.com/photos/sidelong/246816211
  10. 10. Electronでテスト 何をどう 使ってますか? @muryoimpl 本題が始まりますよー
  11. 11. テスト何をどう使ってますか? お仕事では… ▸ RSpec と Turnip を使って BDD スタイルでテ ストを書いている(Ruby) ▸ acceptance test(Turnip) で全体の挙動を担 保して、心配なところは unit test をつくる 似たような感じにしたい!
  12. 12. テスト何をどう使ってますか? 単体テストでmochaを… ▸ Electron のパッケージを require してるファイルをテストし ようとする(例: remote ) が入っていると、テストのトランス パイルに失敗する… ▸ webpackのtargetに electron を指定する
 と、何やらうまいことやってくれるらしい… 
 => アプリ側はこれでうまくいった ▸ require is not defined でたり、
 const remote = require( remote );
 const fuga = remote( ./hoge/fuga );
 ↑Can t find module ./hoge/fuga みたいのが出る…
  13. 13. テスト何をどう使ってますか? 単体テストでmochaを… ▸ Electron で Electron package を含んだコンポーネ ントをもったアプリをBabel + React.js のトランスパイ ルを挟んで unit test を流したい ▸ gulpでもなんでもトランスパイル挟んでテスト流れれば" Electron + mocha の testの
 トランスパイル得意な方、求ム…
  14. 14. protractor + webdriver で confirm や alert 押せます? @muryoimpl 本題の2つめですよー
  15. 15. 本題の2つめですよー Acceptanceでprotractorを… ▸ protractor は Angularjs 向けのE2Eテスト
 ツール。nightmare(Electron)でElectron動 かすのはちょっと…phantomjsはちょっと遅そ う… ▸ chromedriver + web driver を使って Electron 内のchromiumを動かす。Electron 公式ドキュメントに書いてある方法に近い
  16. 16. capabilities: { browserName: 'chrome', chromeOptions: { binary: './node_modules/electron-prebuilt/dist/electron', args: [ '--test-type=webdriver', app=main.js' ] } }, protractor の conf.js これを指定するとELECTRONで動かせた
  17. 17. 本題の2つめですよー Acceptanceでprotractorを… 動かせた! ただし問題が見つかる… confirm や alert 押せない?
  18. 18. handleTrashClick(e, dirName, actions) { const message = `Are you sure you want to delete ${dirName}"`; const win = browserWindow.getFocusWindow(); dialog.showMessageBox( win, { type: 'warning', message: message, buttons: ['OK', 'NG'] }, (response) => { if (response === 0) { //OK押されたとき FileUtils.removeSlideDir(dirName); return actions.removeSlide(dirName); } } ); } CALLBACK部分の OK押されたときの処理 アプリを普通に動かす分
 にはちゃんと動く
  19. 19. it( should open alert-dialog and close it', () => { element( by.xpath('//*[@id="content"]/a[@class="trash"]') ).click(); browser.switchTo().alert().then( (alert) => { alert.accept(); } $$( … ).then((elm) => { assert(hoge, fuga); }); }); ここが効かない…
  20. 20. confirm や alert 押せます? ひどい回避をしている… ▸ やむを得ずprocess.env.NODE_ENV = test で分岐して、alertでないようにしてる… ▸ 同じ問題に直面している人がいたり、いなかった りする。↓のissueはまだ閉じられていない。
 https://github.com/angular/ protractor/issues/1486
  21. 21. Acceptanceでprotractorを… 同じ悩みをもって 解決した方 いませんか😭? confirm や alert 押せます?
  22. 22. ぶっちゃけ テストどうしてますか? どうしてるか訊きたいです @muryoimpl 遺言 終https://www.flickr.com/photos/sidelong/246816211

×