WebExtensionsとテスト

WebExtensionsとテスト WebExtensions Meetup #3, 2018-10-30 @ueokande

Shin'ya Ueoka @ueokande WebExtensions歴1年ちょい Vim Vixen つくってます 2

Vim Vixen

Vim Vixen Vimでブラウザを操作できるWebExtensions Vimperator (XUL) が使えなくなったのが開発のきっかけ +1,000 starts、+10,000ユーザー 4

目次 WebExtensionsのテスト自動化 Vim Vixenの取り組みこれからのVim Vixenのテストまとめ 5

Vim Vixenの開発環境本体コード5,000行 + テストコード3,000行くらい BabelでES7をトランスパイル webpackでsingle js化 CircleCIで継続的にlint +
テスト 6

なんでテストを書くんだっけ？テストの自動化による効率化コード品質の向上テスタビリティが高いとメンテナンス性もよいリグレッションの早期発見 7

ユニットテスト E2E テストユニットテスト (単一の) クラス・メソッドが対象依存メソッドはモック化したり一番高速なテスト手法で、テストケースも追加しやすい 8

E2E テストユニットテスト E2Eテストユーザーの操作に最も近いテスト一般的に高コストで遅い気をつけないと不安定なテストになることもしばしば 9

E2E テストユニットテスト（理想の）テストピラミッドユニットテストの方が費用対効果が高いユニットテストの比率を大きくなるよう配分するのが理想 10

Vim Vixenのユニットテスト 11

Vim Vixenのユニットテスト WebExtensionsはフロントエンドの技術と親和性が高い JavaScriptのユニットテストのよくある構成で実行テストフレームワークにMocha テストランナーに Karma を使ってFirefoxを起動 12

ビジネスロジックのテストピュアなビジネスロジックはWebExtensions APIや DOM操作がない通常のJavaScriptとしてテストできるビジネスロジックを切り出すために設計する DDD、Clean Architecture ... 13

DOMアクセスのテスト content scriptではDOMアクセスが多い karma-html2js-preprocessor: Karma上でHTMLをロード HTMLファイルをJavaScriptの文字列として格納 window.__html__ オブジェクトでアクセス document.body.innerHTML =
__html__['testcase1.html']; 14

利用例 15 describe('#myInjectElements', () => { beforeEach(() => { //
render HTML from a static file document.body.innerHTML = __html__['testcase1.html']; }); it('injects three elements', () => { myInjectElements(window); let es = window.document.querySelector(".injected") expect(es).to.have.lengthOf(3); }); });

browserオブジェクトのモック webextensions-api-fake: browserオブジェクトをモック Karma上でbrowserオブジェクトが使える const browserFake = require('webextensions-api-fake'); const browser
= browserFake(); 16

利用例 17 const browserFake = require('webextensions-api-fake'); describe("#myLastCreatedTab", () => {
beforeEach(() => { // set fake browser to global variable global.browser = browserFake(); }); it('should get last created tab', async() => { const created = await browser.tabs.create({}); const tab = await myLastCreatedTab(); expect(tab.id).to.equal(created.id); }); });

E2Eテスト 18

Vim Vixenのリリースフロー受け入れ条件を元に100個以上の試験項目リグレッションが怖いのでリリース毎に全て試験 Pull Requestの本文にチェックリスト化して手動テスト 19

E2Eテストの自動化リリース毎に試験項目は増え続ける毎リリース100以上の試験をするのは辛い E2Eテストも自動化だ！ 21

自動化の方針ビルド済みのVim Vixenを試験 Vim Vixen本体にテストコードを加えないユーザーの操作に近い方法で入力と結果を観測 22

Vim VixenのE2E試験の仕組みテスト用の「ambassador」アドオンを作成テストコードからメッセージ経由でキー入力や結果を観測 23

ambassadorアドオン (1/2) テストコードからタブ情報や別タブにキーイベントを送信 24 Background Script browser.runtime.sendMessage() browser.tabs.sendMessage() tab1 Content
Script Page Script tab2 Content Script Page Script window.postMessage() press(tab2, 'j') window.body .dispatchEvent(e)

ambassadorアドオン (2/2) 別タブの結果の観測もメッセージ経由 25 Background Script browser.runtime.sendMessage() browser.tabs.sendMessage() tab1 Content
Script Page Script tab2 Content Script Page Script window.postMessage() getScroll(tab2) document .documentElement .scrollTop {x:10, y:20} {x:10, y:20} {x:10, y:20}

ambassadorアドオンの実行 web-extで実行複数アドオンをロードできるようweb-extを改造 Karmaでweb-ext用テストランナーを自作 Karma vim-vixen/manifest.json ambassador/manifest.json Vim Vixen Ambassador
web-ext 26

E2Eテストのテストケース例 ambassadorアドオンとの通信は適当にラップ ES7 async/awaitでユーザーの操作を手続き的に記述 27 it('deletes tab by d', async
() => { let tab = await tabs.create(targetWindow.id, CLIENT_URL); let before = await windows.get(targetWindow.id); await keys.press(tab.id, 'd'); let actual = await windows.get(targetWindow.id); expect(actual.tabs).to.have.lengthOf(before.tabs.length - 1); });

CircleCI git push毎にテストを流す lint ユニットテスト E2EテストパスしたPull Requestをマージ 28

デモ 29

これからのVim Vixenのテスト 30

ambassadorアドオンの限界 45/163ケースしか自動化できてない他アドオンのアクセスできない領域 option_ui, storage, browserAction, ... 表示（スタイル）のリグレッション検出 31

Vim Vixenのこれからユニットテストを充実させてE2Eテストを軽減本体コードもテストしやすいような構造に CI/CDに力を入れたい git tagを打ったら新しいバーションをリリースとか 32

まとめ Vim Vixenで取り組んでるテストについて紹介メンテナンスで怖くないようテストを書く WebExtensionsはフロントエンドの技術と親和性が高い Vim Vixenは品質を維持しつつ機能追加も頑張るぞい 33

WebExtensionsとテスト

WebExtensionsとテスト

Shin'ya Ueoka

More Decks by Shin'ya Ueoka

Other Decks in Technology

Featured

Transcript