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

1. 俺の迷走っぷり
FRONTEND-TEMPLE 初参加記念
@muryoimpl

2. 自己紹介
• 無量井 健(むりょうい けん)
• 永和システムマネジメント 所属
• Ruby関西, 関西Ruby会議04・05 etc

3. 迷 走並 走
無量井 健(@muryoimpl)
もがくぞ∼
http://www.slideshare.net/esminc/new-year-2016-agile-div#23

4. 主に使ってみているもの
• React.js, Redux, Babel, espower-babel
• webpack
• Electron
• mocha, power-assert, protractor
• ESlint
• (今サーバサイドも調べてる) Express, koa, meteor,
socket.io とか

5. 主に使ってみているもの
• CSS/Sass/SCSS
• PostCSS(Gulpを通して利用してる)
• Pure, sanitize.css

6. よろしく
お願いします 😸

7. 今日お尋ね
したいこと

8. テストです
https://www.flickr.com/photos/sidelong/246816211

9. やり始めで不安
↓
テストで確認したい
https://www.flickr.com/photos/sidelong/246816211

10. Electronでテスト
何をどう
使ってますか？
@muryoimpl
本題が始まりますよー

11. テスト何をどう使ってますか？
お仕事では…
▸ RSpec と Turnip を使って BDD スタイルでテ
ストを書いている(Ruby)
▸ acceptance test(Turnip) で全体の挙動を担
保して、心配なところは unit test をつくる
似たような感じにしたい！

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. テスト何をどう使ってますか？
単体テストでmochaを…
▸ Electron で Electron package を含んだコンポーネ
ントをもったアプリをBabel + React.js のトランスパイ
ルを挟んで unit test を流したい
▸ gulpでもなんでもトランスパイル挟んでテスト流れれば"
Electron + mocha の testの
トランスパイル得意な方、求ム…

14. protractor + webdriver で
confirm や alert
押せます？
@muryoimpl
本題の2つめですよー

15. 本題の2つめですよー
Acceptanceでprotractorを…
▸ protractor は Angularjs 向けのE2Eテスト
ツール。nightmare(Electron)でElectron動
かすのはちょっと…phantomjsはちょっと遅そ
う…
▸ chromedriver + web driver を使って
Electron 内のchromiumを動かす。Electron
公式ドキュメントに書いてある方法に近い

16. capabilities: {
browserName: 'chrome',
chromeOptions: {
binary: './node_modules/electron-prebuilt/dist/electron',
args: [
'--test-type=webdriver',
app=main.js'
]
}
},
protractor の conf.js
これを指定するとELECTRONで動かせた

17. 本題の2つめですよー
Acceptanceでprotractorを…
動かせた！
ただし問題が見つかる…
confirm や alert
押せない？

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. 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. confirm や alert 押せます？
ひどい回避をしている…
▸ やむを得ずprocess.env.NODE_ENV = test
で分岐して、alertでないようにしてる…
▸ 同じ問題に直面している人がいたり、いなかった
りする。↓のissueはまだ閉じられていない。
https://github.com/angular/
protractor/issues/1486

21. Acceptanceでprotractorを…
同じ悩みをもって
解決した方
いませんか😭？
confirm や alert 押せます？

22. ぶっちゃけ
テストどうしてますか？
どうしてるか訊きたいです
@muryoimpl
遺言
終https://www.flickr.com/photos/sidelong/246816211