先日、WebExtensions Meetup #3 が開催され、そこで「WebExtensions とテスト」というお話をしてきました。 この発表では、 WebExtensions のテストの方法と、Vim Vixen が取り組んでいることについてお話しました。
この記事では発表資料をかいつまんで、より詳しく説明してゆきたいとおもいます。 それでははじまりはじまり〜。
はじめに
まずは自己紹介。 WebExtensions 歴は 1 年ちょいです。 メインで開発してる WebExtensions は「Vim Vixen」です。
Vim Vixen の開発をスタートしたきっかけは、XUL 製だった Vimperator が使えなくなったからです。 開発を始めて 1 年が経ち、現在はユーザー数も 10,000 を超えるほどになりました。
開発的な視点で見てみると、本体コードが 5,000 行程度、テストコードは 3,000 行程度の規模感です。 ビルドは Babel を使って ES7 をトランスパイルし、webpack でシングル JS 化してます。 また CircleCI を使って継続的に lint と、今回お話するテストを実行してます。
なぜテストを書くのか
Vim Vixen の話をする前に、まずはなぜテストを書く必要があるかをおさらいします。
テストの自動化は手動のテストよりも効率的です。 また一般的にテストしやすいコードはメンテしやすいコードでもあります。 継続的にテスト書き続けることで、将来の機能追加やリファクタリングで困らないようにします。 そして試験を自動化することで、リグレッションも早期に発見できるようになります。
Vim Vixen ではテストをユニットテストと E2E テストに分類してます。 テストの自動化は、費用対効果が高いユニットテストで多くのテストを網羅するのが理想だと言われてます。
Vim Vixen のユニットテスト
ここからは Vim Vixen の試験自動化で取り組んできたことを説明します。
まずテストの実行環境は、テストフレームワークにMochaを、そしてテストランナーにKarmaをつかってます。 この環境はフロントエンドの技術をそのまま使っています。
WebExtensions の content script は通常の JavaScript 同様、DOM にアクセスすることが多いです。
Vim Vixen ではこれらのテストにkarma-html2js-preprocessorを使ってます。
このプリプロセッサは、ファイルに保存されてる HTML を、JavaScript の文字列としてアクセス可能になります。
テストコードではテスト実行前・実行中ににdocument.innerHTMLに上書きして、テストケースをファイルとして管理できます。
つづいて WebExtensions API の browser オブジェクトを使ったクラスのテストです。
webextensions-api-fake を使うことで、browser オブジェクトをモックできます。
通常 WebExtensions を利用できない JavaScript のテスト環境でも、擬似的な browser オブジェクトを利用できます。
E2E テスト
続いて E2E テストの自動化についてです。
まずは Vim Vixen のリリースフローの説明です。 Vim Vixen では書くリリース毎に 100 以上の試験項目を手動で確認して、パスすれば新しいバージョンをリリースしてました。
しかしその手順をリリース毎に繰り返すのは、コストが高くて退屈な作業です。 そこで Vim Vixen では、E2E テストの自動化にも取り組んでます。 Vim Vixen の E2E テストを実行するために、テストコードからタブ情報や別タブにキー入力を送れるよう「ambassador」アドオンというのを作成しました。
テストコードから window.postMessage() でメッセージを送ると、ambassador アドオンが background script に問い合わせたり、別タブの ambassador アドオンの content script と通信します。
E2E 試験を Karma で実施するために、web-ext の Karma テストランナーを自作し、web-ext にも少し手を加えました。
テストケースは ES7 の await/async を使うことで、手続き的にユーザー操作を記述することもできました。 ambassador アドオンへのメッセージ送信は、クライアントライブラリとしてラップしています。
まとめ
E2E の現実として、実際はは 45/163 テストケースしか自動できておらず、今でも 100 を超えるテストケースは手動で行ってます。
E2E テストにも限界があるので、手動の試験を減らすためにも、 ユニットテストの配分をより大きくして、理想のテストピラミッドに近づけていこうと思います。 また CI だけでなく CD にも力を入れたいと思います。
この発表では、Vim Vixen で取り組んできた WebExtensions のテストについてお話しました。 今後も Vim Vixen の開発は続けていくので、引き続き応援お願いします！