リファレンステストの書き方
Test the Web Forward Meetup (仮), Tokyo #1 (2013/09/14)
@nakajmg (DMM.com Labo)
なぜ必要か
相互運用性
(interoperability)
全てのブラウザで同じ視覚効果を実現する
２つのファイルが必要
- テスト用
- リファレンス用
テスト用
テストされる(したい)機能を使って
マークアップする
リファレンス用
テストされる機能と同じ視覚効果を
別の機能を使って実現する
手動テストと自動テスト
- 手動テスト
- 人が目で見て説明と表示が合っているか確認する
- 自動テスト
- プログラムがスクリーンショットを撮って比較する
両方のテストに対応する必要がある
仕様をテストケースの参考に
例：CSS3-transforms
仕様をテストケースの参考に
例：CSS3-transforms
すでにあるテストを参考にする
Test The Web Forward Tokyoで書かれたテスト
テストケースの例 (PASS)
テスト/リファレンスどちらも同じ表示
テストケースの例 (FAIL)
リファレンスと異なる表示
テストされる機能を書く
例：filter-effects opacity
.redSquare{
width: 200px;
height: 200px;
background: red;
filter: opacity(0);
}filterが適用されれば見えなくなる
→ 赤い四角が表示されたらFAIL
テストされる機能を書く
違いがわかるように別の要素も表示しておく
.greenSquare{
width:200px;
height: 200px;
background: green;
}PASSケースは緑だけ表示される
FAILケースは赤も表示される
マークアップ
テストファイル
<body>
・・・
<div class="greenSquare"></div>
<div class="redSquare"></div>
</body>リファレンスファイル
<body>
・・・
<div class="greenSquare"></div>
</body>リファレンスファイルでは表示しないように要素を省く
テストをPASSした場合の説明文
テストファイルとリファレンスファイルの両方に
<body><p>Test filter opacity CSS shorthand. You should see a green box.</p>・・・</body>
メタデータが必須
- TITLE
- テストの内容を説明する
- AUTHOR
- テストを書いた人を示す名前とアドレス
- SPEC LINKS
- 仕様のどの部分のテストかを示すリンク
- REFERENCE FILE PATH
- リファレンスファイルへのパス
- ASSERTION
- 何をテストしているか詳細に書く
メタデータ：TITLE
テストファイル
<!DOCTYPE html> <html> <head> <title>CSS Filter Test: Test opacity shorthand with value 0</title>・・・
リファレンスファイル
<!DOCTYPE html> <html> <head> <title>CSS Filter Opacity Reference with value 0</title>・・・
テストの内容を説明するタイトルをつける
メタデータ：AUTHOR
テストファイル/リファレンスファイル
<!DOCTYPE html> <html> <head>・・・<link rel="author" title="Your Name" href="mailto:youraddress@mail.com">・・・
このテストを書いた人が誰かわかるように
名前とメールアドレスを書く
メタデータ：SPECLINKS
テストファイルのみ
<!DOCTYPE html> <html> <head>・・・<link rel="help" href="http://www.w3.org/TR/filter-effects/#FilterProperty"> <link rel="help" href="http://www.w3.org/TR/filter-effects/#opacityltnumbergt-ltpercentagegt">・・・
テストされる機能の仕様へのリンクを貼る。
分類があるならその項目の仕様のリンクも貼る。
※古い仕様へのリンクを貼らないように注意
メタデータ：REFERENCE FILE PATH
テストファイルのみ
<!DOCTYPE html> <html> <head>・・・<link rel="match" href="reference/filters-opacity-002-ref.html">・・・
相対パスでリファレンスファイルへのパスを書く
メタデータ：ASSERTION
テストファイル/リファレンスファイル
<!DOCTYPE html> <html> <head> ・・・<meta name="assert" content="CSS opacity filter will apply a transparency to the div element. Since opacity is 0, it has affect on the div to be transparent.">・・・
何をテストしているかを詳細に書く
ベンダープレフィックス
.redSquare{
width: 200px;
height: 200px;
background: red;
-webkit-filter: opacity(0);
}実装の段階によってはプレフィックスを付けないと
PASSするケースが確認出来ないことがある
W3Cに提出する際にはプレフィックスを削除する必要がある
ベンダープレフィックス
-prefix-free
http://leaverou.github.io/prefixfree/
prefixfree.jsapi.js
https://github.com/LeaVerou/prefixfree/tree/gh-pages/plugins
-prefix-free
テストを作ってる間はスクリプトを使う
・・・<!-- W3Cに提出する前に消す --><script src="prefixfree.js"></script><script src="plugins/prefixfree.jsapi.js"></script>・・・
フォルダ構成
CSS Test Repository/
contributors/
ttwf_tokyo/
github_username/
submitted/
/reference
testfile.htmlリファレンスファイルはファイル名に-ref.htmlをつける