{ "componentChunkName": "component---src-templates-blog-post-jsx", "path": "/post/how-to-test-ie-with-karma/", "result": {"data":{"site":{"siteMetadata":{"title":"WEB EGG","author":"Leko - CTO at Yuimedi"}},"markdownRemark":{"id":"c4c377e5-e598-594d-8557-e85868ec8802","excerpt":"久々の更新です。 社会人になってからいつの間にか１年が経過していました。時が立つのは早いものです。。。 最近はインプットを増やしてばかりで全然アウトプットできていなかったので、少しずつアウトプットできればと思います。 ここんところ業務の都合でPHP…","html":"

久々の更新です。
\n社会人になってからいつの間にか１年が経過していました。時が立つのは早いものです。。。

\n

最近はインプットを増やしてばかりで全然アウトプットできていなかったので、少しずつアウトプットできればと思います。 ここんところ業務の都合でPHPネタばかりだったので、そろそろ本来のフロントエンドの話に切り替えようと思います。

\n

さて本題ですが、Angularのチームが開発したKarmaというツールを使用して、
\nMacでIEのテスト を実行してみようと思います。

\n\n

今回のゴール

\n\n

今回の記事の内容を反映したリポジトリも作成しました。
\n記事だけではわからない箇所はそちらも合わせてご覧下さい。

\n
\n

Leko/karma-ievm-seed
\nhttps://github.com/Leko/karma-ievm-seed

\n
\n

使うもの

\n\n

さり気なくBrowserifyが出てきていますが、下記の参考資料を見つつ情報を保管してもらえればと思います。
\nJasmineはMochaと書き方がほとんど変わらないのでどちらか知っていれば大丈夫だと思います。

\n

参考リンク

\n
\n

Browserify: それはrequire()を使うための魔法の杖
\nhttp://qiita.com/cognitom/items/4c63969b5085c90639d4

\n
\n\n
\n

power-assertでJavaScriptのテストをする ブラウザ編
\nhttp://efcl.info/2014/0411/res3820/

\n
\n

今自分が使っている環境ではSauce Labsやpower-assertなどモリモリなのですが、
\n今回はあくまで Karma x MacでIE にフォーカスするため本題から逸れる話はなるべく割愛します。

\n

リポジトリをつくる

\n

では早速進めていこうと思います。
\n調べが足りずに最近知ったのですが、npm install --save-devはnpm i -Dと略すことができるようです。便利。
\n以降の手順でもバシバシ使っています。

\n
cd /path/to/work\nmkdir karma-ievm-seed && cd karma-ievm-seed\ngit init\nhub create # see https://github.com/github/hub#installation\nnpm init   # 適当に内容を入力\ngit add package.json\ngit commit -m \"initial commit\"\nnpm i -g karma-cli # インストール済みなら不要\nnpm i -D karma\nkarma init
\n

karma initすると色々と聞かれると思います。
\nテストの構成を聞かれるので、テストフレームワークはJasmine。requirejsは使わない。対象ブラウザはChromeあたりを選んでおけばよいと思います。
\nこの対話CLIで設定するより、どうせ後で直接設定ファイルをいじるのでこの段階では正直なんでもよいです。

\n

（蛇足）dotenvを使用する

\n

私の環境はFirefoxをbrew-caskで入れてしまっているので、通常のパスとはズレています。
\nKarmaでそのようなブラウザを起動する場合、FIREFOX_BINという環境変数を指定する必要があります。
\n.bash_profileなどに環境変数を書いておいても良いのですが、
\nのちのちSauceLabsの接続情報を入れたりと、環境変数をいじれるようにしておくと何かと都合が良いのでdotenvを使用します。

\n

dotenvはプロジェクト直下の.envというファイルを読み取り環境変数に自動的にセットしてくれるツールです。

\n
npm i -D dotenv\necho \"FIREFOX_BIN=/opt/homebrew-cask/Caskroom/firefox/latest/Firefox.app/Contents/MacOS/firefox-bin\" > .env
\n

あとはこの定義ファイルを読み込むために、karma initで作成されたkarma.conf.jsの先頭にも以下の処理を追加しておきます。

\n
require('dotenv').load();
\n

IE8で落ちるテストを記述する

\n

まだIEの準備はしていませんが、まずはIE8では落ちるテストを記述してみようと思います。
\nIE8で使用できないメソッドとして、Array#reduceを採用しました。

\n

テスト用のソースコードとテストコードはこちらになります。

\n

ソースコードにmodule.exports、テストコード内にrequireを使用しているので、 このままではブラウザで動作しません。
\nかと言ってブラウザで動かすためにわざわざグローバルを汚染したくもありません。
\nということで、Browserifyを使用してnodeで動くコードをブラウザでも動くように変換します。

\n

Karmaの設定を変更してローカルのChromeで結果を確認

\n
npm i -D karma-browserify brfs
\n

Karmaの設定ファイルはこちらのように変更して下さい。

\n

概要だけ抜き出すと、

\n\n

です。brfsは同期的にBrowserifyのビルドが行えるツールです。
\n以上の設定をしたらテストを実行してみます。

\n
karma start
\n

\n \n \n \n \n \n \n \n \n

\n

設定ファイルのbrowsersに指定されたブラウザが立ち上がりテストが実行されたと思います。
\nソースコードを編集しても、テストコードを編集しても、保存すると自動でテストが再実行されたと思います。
\nKarmaまじ便利。ちょう便利。

\n

Karmaでテストコードが動いたのも確認できたので、IEでもテストを実行できるようにしていきます。

\n

IEのVMを入れる

\n

若干話が逸れてしまいましたが、続きです。

\n

この記事を読むということはModern IEからIE用のVMをすでにダウンロード済みの方が多いと思います。
\nが、今回は IEのVMを新規インストールしてそいつをテスト用に使う ための手順を書いていきます。
\nインストール済みのVMは使用しないので、ディスク容量に余裕が無い方はすでに入っているVMを消して頂いてから次へ進んで下さい。

\n

http://xdissent.github.io/ievms/

\n

このツールを使用します。
\n今回はIEの8, 9だけが欲しい（IE10, 11は容量がでかいので入れない）ので、このようなコマンドになると思います。
\nディスク容量は20GBくらい空きがあればインストール出来ると思います。

\n
\n

インストール中はダウンロードしてきたVMとVirtualboxに取り込んだVMで 本来の約２倍の容量を食う ので、だいたい20GBくらい、としています。

\n
\n
curl -s https://raw.githubusercontent.com/xdissent/ievms/master/ievms.sh | env IEVMS_VERSIONS=\"8 9\" bash\nfind ~/.ievms -type f ! -name \"*.vmdk\" -exec rm {} \\;
\n

けっこう時間がかかるので、回線の太い環境で気長にお待ちください。

\n

IEVMS_VERSIONSという環境変数にインストールしたいIEのバージョンを指定しています。
\nインストール後に、ダウンロードしてきたVMは不要なのでクリーンアップしています。
\nついでにゴミ箱も空にしておくと容量がだいぶ空きます。

\n

インストールが終わり、Virtualboxで下記のように表示されていればOKです。

\n

\n \n \n \n \n \n \n \n \n

\n

IE用にKarmaの設定を変更

\n

やっとIEを使う準備が整いました。
\nKarmaの設定を変更し、VM内のIEでテストコードを実行できるようにします。

\n

まずはIE9を追加した差分がこちらです。
\n念のためコマンドも載せておきます。

\n
npm i -D karma-ievms
\n

browsersにVirtualboxでの表示名をそのまま指定しています。
\nこの値は変更可能なのかどうか試していません。設定をいじっていなければこれで動きます。

\n

先ほどと同じくkarma startしてみると、VMが起動して自動的にKarmaのテストページが開かれテストが実行されます。
\nちなみにctrl+cなどでKarmaを終了すると自動でVMのシャットダウンまでやってくれます。
\nどんだけ便利なんだよ。凄すぎる。

\n

IE9で動くことを確認したので、本題のIE8も追加します。
\n差分はこちらです。

\n

karma startして IE8だけテストに失敗すれば成功です。
\nただのIE8ならArray#reduceは使えないはずなのでエラーになります。まずは失敗させることから始めましょう。

\n

動かないことが確認できたところで、es5のshimを入れてIE8でもテストが通るようにしてみます。

\n

karma-es5-shimを入れてIE8のテストを通す

\n

IE8は非対応、と言いづらいけどes5使えないのはつらみなので、shim入れれば動くよ 程度にIE8対応をしたい方向けの対応です。
\nes5-shimは、ざっくり言うとIE8などes5のメソッドに対応していないブラウザ向けのpolyfillです。

\n
npm i -D karma-es5-shim
\n

Karmaの設定ファイルも合わせてこちらのように編集しておきます。

\n

あらためてkarma startしてみると、IE8もテストに通ったと思います。
\nこれでIE9以上が対象だけど、shimを入れればIE8対応、とうたえるようになりました。

\n

まとめ

\n

最近のjsの開発ツール周りの進化速度が早すぎて全然ついていけていない私ですが、
\n少しずつインプットしつつアウトプットしつつ時代に食らいついています。

\n

この速度でのツールの進化はjsの需要が高まっているからこそだと思うので、jsが必要とされていることに嬉々としています。

\n

ちなみに、本格的に色々なブラウザ・OS・バージョンでテストを行いたい場合にはSauceLabsを使ったほうが良いと思います。
\nただし、ちょろっと試しに使ってみた感じだと ものすごく遅い ので、CI回したり、確実な品質担保をしたいとき向けといった印象があります。

\n

とりあえずIEに最低限対応していることをテスト駆動で書いていくだけなら、今回の記事のようにローカル環境を活用したほうがスピーディにことが済みそうです。 Sauce Labsでのテストに慣れてきたら、Travis CIと組み合わせて、PR時に各ブラウザのテストを走らせる方法を書きたいと思います。

","timeToRead":12,"frontmatter":{"title":"Karmaを使ってIEのテストをMacから行う","tags":["ES5","Jasmine","JavaScript","Karma"],"date":"May 03, 2015","featuredImage":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='135'%20viewBox='0%200%20400%20135'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%2068v67h401V0H0v68m353-45l-10%202-16%204c-14%202-25%2010-31%2022-4%209-4%209%203%203%2011-11%2018-15%209-5-3%203-8%208-10%2012l-5%206-11-5-12-5-27%2012v15l1%2015%206%204c5%204%206%204%205%207%200%202%201%204%204%207%204%204%2010%206%2012%204l10-3%204-8c1-2%201-2-3%201-4%205-9%207-10%207s4-5%2011-10c12-9%2013-10%2013-14l1-4%202%203%207%208%205%205-4%202-9%201c-7%201-10%202-6%204%204%201%2011-1%2017-3l5-3%206%202a42%2042%200%200052-25l-10-1h-11l-4%204c-9%209-23%207-30-3l-2-6v-3h59v-6c0-6-2-15-4-18v-5c4-10%203-17-2-21-4-2-11-3-15-2m5%205l-9%203%205%203%209%208%205%205c1%200%203-11%202-13-2-5-7-8-12-6M46%2048c-1%205%206%2037%209%2041%203%202%205%200%205-3%200-6%202-6%206-1%203%204%204%204%2010%204h7l-7-10-7-12%206-11c7-10%207-11-2-11-4%200-5%200-7%203-3%204-6%204-6%200%200-2-1-3-7-3s-6%200-7%203m278%201c-5%203-9%208-9%2012v3h37l-1-3c-1-11-17-18-27-12M94%2065a2977%202977%200%2001-3%2017l3-3c1-3%201-4%207-4h6l1%203c1%204%204%205%204%203l-4-15-3-13h-8l-3%2012m28%203c0%2012%200%2014%202%2014l1-4c0-6%201-7%205-7%203%200%203%200%206%206%201%203%203%205%204%205%202%200%202%200%200-6l-3-5%203-3c3-3%203-9%200-13-3-2-4-2-10-2h-8v15m31%200c0%2012%200%2014%202%2014l1-8%201-11c0-3%201-3%202%202%206%2015%206%2016%208%2016s2-1%208-16c1-5%202-5%202-2l1%2011c0%206%200%208%202%208l1-14V53h-3c-3%200-3-1-8%2014l-3%208-4-11c-4-11-4-11-7-11h-3v15m42-1c-5%2016-4%2015-3%2015l3-4%201-3h6c6%200%206%201%207%204l3%203c2%200%202%200-2-14l-3-11c-1-4-1-4-5-4h-4l-3%2014m-70-10v6c0%204%201%205%205%205%206%200%208-1%208-6l-1-5c-2-2-11-1-12%200m134%207l-9%205%2010%206%2010%206%2010-6%2010-6-9-4c-11-5-11-5-22-1M27%2065l6%2018%203-2c2-3%203-3%208%202s5%205%201-9l-2-9-2%202c-4%203-5%203-10-2l-4-4v4m235%200l-8%204%2016%209%2016-9-3-2-8-3-5-3-8%204m-15%2020l1%2010%209%207%209%207V88l-9-5-10-6v8m39-5c-6%204-10%205-5%202%203-3%200-2-5%201l-3%203%201%2014v9l10-7c7-6%209-8%209-10l1-9c0-8%200-8-8-3'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":2.9557522123893807,"src":"/static/d341737d6a8a580c3095970a19b66de6/32d53/featured-image.png","srcSet":"/static/d341737d6a8a580c3095970a19b66de6/1ec58/featured-image.png 334w,\n/static/d341737d6a8a580c3095970a19b66de6/32d53/featured-image.png 614w","srcWebp":"/static/d341737d6a8a580c3095970a19b66de6/9b99b/featured-image.webp","srcSetWebp":"/static/d341737d6a8a580c3095970a19b66de6/cd98f/featured-image.webp 334w,\n/static/d341737d6a8a580c3095970a19b66de6/9b99b/featured-image.webp 614w","sizes":"(max-width: 614px) 100vw, 614px"}}}}}},"pageContext":{"slug":"/how-to-test-ie-with-karma/","previous":{"fields":{"slug":"/how-to-implement-fulltext-search-with-fuelphp/"},"frontmatter":{"title":"FuelPHPでInnoDBの全文検索を利用してみる","tags":["PHP","FuelPHP","MySQL"]}},"next":{"fields":{"slug":"/introduction-of-golang/"},"frontmatter":{"title":"Goに入門してRedis+PostgresなアプリをHerokuにデプロイするまで","tags":["Ansible","Gin","Go","Heroku","PostgreSQL","Redis","Vagrant"]}}}}, "staticQueryHashes": ["2585454260","2954598359"]}