リファレンステストの書き方


Test the Web Forward Meetup (仮), Tokyo #1 (2013/09/14)
@nakajmg    (DMM.com Labo)

なぜ必要か



相互運用性
(interoperability)


全てのブラウザで同じ視覚効果を実現する

2つのファイルが必要



  1. テスト用

  2. リファレンス用

テスト用



テストされる(したい)機能を使って
マークアップする


リファレンス用


テストされる機能と同じ視覚効果を
別の機能を使って実現する

手動テストと自動テスト


  • 手動テスト
    • 人が目で見て説明と表示が合っているか確認する

  • 自動テスト
    • プログラムがスクリーンショットを撮って比較する

両方のテストに対応する必要がある

仕様をテストケースの参考に


例:CSS3-transforms

http://www.w3.org/TR/css3-transforms/#transform-property
http://www.w3.org/TR/css3-transforms/#transform-rendering


仕様をテストケースの参考に

例:CSS3-transforms

すでにあるテストを参考にする



Test The Web Forward Tokyoで書かれたテスト

https://github.com/w3c/csswg-test/tree/master/contributors/ttwf_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をつける

参考


http://adobe.github.io/web-platform/presentations/testtwf-how-to-write-a-reftest-jp/#/

https://github.com/w3c/csswg-test/tree/master/contributors/ttwf_tokyo/

https://dev.mozilla.jp/localmdc/localmdc_9077.html

http://www.atmarkit.co.jp/ait/articles/1306/25/news008_4.html


Made with Slides.com