HTML5Experts.jp

テストを書いてWebを前進させよう！「Test the Web Forward Meetup (仮), Tokyo #1」

矢倉 眞隆
連載： イベントレポート (4)

こんにちは。html5jテスト部の部長を務めています矢倉です。
今回は9月14日に行われた「Test the Web Forward Meetup (仮), Tokyo #1」について報告します。

Test the Web Forwardとは

今回のイベントをレポートするにあたり、まずはTest the Web Forward (TestTWF) について説明しないといけませんね。Test the Web Forwardとは、HTMLやCSSなどW3Cが策定している仕様のテストケースを、参加者で一緒に書こうというコミュニティイベントです。

W3Cの仕様が勧告されるには、仕様の実装が必要なのですが、その実装が正しいかを確かめるテストケースも必要です。しかし近年、これまでにないペースで数多くの仕様が公開され、また機能も複雑化していることから、テストが大きな課題となっています。そこで「Webプラットフォームを前進するために、みんなでテストを書いて協力しよう」というイベント、Test the Web Forwardが誕生しました。

TestTWFは世界各国で開催されており、今年の6月には東京でも開催されました。東京のイベントでは最終的に700を超えるテストが提出され、大成功を収めました。

html5jテスト部とTestTWF Meetup (仮)

Test the Web Forward Meetup (仮) は、html5jのテスト部が主催するイベントです。6月のTestTWF後にhtml5jスタッフ内で「1回きりじゃもったいないから、継続開催していこう！」という話が発端となり、テスト部が立ち上がりました。

その際に筆者がテスト部の部長となったのですが、自分はW3CやWeb標準について少し知っているだけで、とくにテストについて明るいわけではありません。また、テスト部のスタッフにもテスト未経験者がいます。「じゃあまず、スタッフでテストの勉強会をしよう」という話になりました。

日程を調整して一段落したとき、TestTWFがW3Cの公式アクティビティとして取り込まれたことを知りました。これまでのコミュニティ活動が標準化団体にも認められたのです。素晴らしいことですね。

ではその流れに乗っかり、スタッフ勉強会をTestTWFにしようという話になり、今回のTestTWF Meetup (仮) の実現に至りました。今回はW3Cが主催するイベントではないので、「Test the Web Forward Meetup (仮)」と名前を変え、開催することに。「Meetup (仮)」とあるのは、W3C内でTestTWF関連イベントのブランディングを考えており、コミュニティで主催イベントの名前案に「TestTWF Meetup」があったので、「(仮)」とつけた上で使わせていただきました。

TestTWF Meetup (仮), Tokyo #1レポート

TestTWFについて簡単に説明するつもりが、だいぶ長くなってしまいました……。ここからようやく「TestTWF Meetup (仮), Tokyo #1」のレポートになります。

今回のイベントは、告知が開催1週間前になるなど急ごしらえ感の否めないものでしたが、20名近くの方に集まっていただきました。

午前中はテストの書き方を勉強

TestTWF Meetup (仮) の説明をする筆者

まず、筆者による挨拶と今回のMeetup (仮) の説明、その後、どのようなフローでテストケースが取り込まれるのかなどを説明しました。

仕様のテストケースはW3CのGitHubアカウントが管理しており、レポジトリにPull Requestを送ることでテストを提出できます。テストのレビューは、レビュアーがいればその場でしてもらえます。レビュアーがいない場合はPull Requestを投げて、レビューを待ちます。

今回はレビュアーを呼べなかったので、Pull Requestを投げることをゴールとしました。ただしそれではテストが取り込まれませんので「帰ってからもTestTWF」になります。なかなかに厳しいイベントです。

続いてHTML5 Experts.jpコントリビューターの中島直博さんに、CSSのテストケースのひとつ「リファレンステスト（reftest）」について説明していただきました。

テストとリファレンスを見比べ、一致したらPASS！

Reftestは、テストしたい仕様を使って書いたテストケースと、すでに使える仕様（CSS 2.1など）で再現した「リファレンス」、ふたつのHTMLドキュメントを書くというテストの形式です。

CSSのテストは、ほかにも「テストをパスしたらここが緑になるよ」などとHTML中に書くテスト（self-describing test）という仕組みも存在していますが、機械的にも比べられる点からreftestが好まれているようです。

最後に、HTML5 Experts.js編集長の白石さんによる、仕様のテスト用フレームワークtestharness.jsの説明です。

非同期なテストのコード例

testharness.jsは、HTMLやAPI仕様、CSSOMなど、DOM APIをテストする際に使用する、仕様のテストに特化したフレームワークです。「仕様のテストに特化」と書きましたが、QUnitなどJavaScriptのテストフレームワークに馴染みのある方にはそこまで難しくないと思います。白石さんも、なんと前日夜にスライドやコードを読んで話してくれました！

リンクしたtestharness.jsのスライドは作者本人による紹介スライドの翻訳なのですが、実際の仕様書の記述からテストに落としこむかたちで関数の使い方が説明されており、仕様書の読み方を知るとてもよい資料でもあります。リファレンスとしては、using-testharness.jsという文書が便利です（現在翻訳中です）。

ひと通り説明が終わったところで、お昼の時間に。午後からテストを書くので、CSS、API、HTML5とテストを書きたい対象ごとにグループになってもらい、そのグループでお昼ごはんを食べることになりました。

午後はテスト書き…探すのが難しい！

午後からいよいよテストケースを書きます。CSS、API、HTML5と大きなグループに分かれたので、テストしたい仕様書や機能を選んでテストを書いてもらいます。

しかし…ここからが厄介でした。無印のTest the Web Forwardでは、仕様書のEditorやテストのレビュアーが数多く参加してくれるため、その人達が関わる仕様書のテストを書けばとてもスムーズですが、今回はそうではないので自分たちでテスト対象を決める必要がありました。自分が馴染みのある仕様を選べるという点は自由でよいのですが、すでにテストが書かれている場合もあります。これを調べるには仕様書のテストカバレッジを見ればよいのですが、仕様書のどの箇所に対してテストされているのか記載がなく、テストケースを見るしかありませんでした。

テストを書く時間もそこそこかかるのですが、今回いちばん難航したのが、このテスト対象を探すことだったように感じています。

書いたらPull Request！テストの解説も

テストを書き始めて3、4時間。いよいよ追い込みです。グループ内で分かる範囲でテストを確認して、コミット、push、そしてPull Requestをしました。今回は計12件のテストがPull Requestで提出されました。

それぞれのグループごとに分かれて作業していたため、最後に参加者のみなさんが書いたテストのコードについて、どういったテストなのかを説明させていただきました。

謎のジェスチャをする筆者（たぶんCSSのテストについて説明していたのでしょう）

おわりに

今回は「一人ひとつはPull Request」という目標を立てていましたが、残念ながら達成できませんでした。カバレッジの調査や仕様の選定についてもう少し力を入れるべきだったと反省しています。次回は仕様を絞ったイベントとする、レビュアーの方に協力してもらうことなどを検討しています。

運営としては反省点が多かったのですが、イベントとしてはとても良いことがありました。6月のTestTWF参加者の方に、今回初参加の方にテストの書き方やPull Requestなどを助けてもらったことです。みんなで作り上げるというコミュニティイベントとして、これほど理想的なかたちはありません。

参加者のみなさん、会議室をお貸しいただいたジープラ株式会社さま、本当にありがとうございました。また、AdobeのRebecca Hauckさんには、TestTWFやテスト全般について多くのことを教えていただきました。ありがとうございました。スタッフの皆さんも、おつかれさまでした。

GitHubでも、Pull Requestがひとつマージされました。まだレビューされていないテストがほとんどですので、これからも動向を追いかけていくつもりです。

今後もTestTWF Meetup (仮) は開催したいと思っていますし、Test the Web Forward自体もまた日本で開催したいという野望があります。ぜひご期待ください！

（Photo Credit: 中島直博）