d3（およびその他のSVGベース）Webアプリケーションのテスト

Question

いくつかの複雑なSVGベースの視覚化に d ライブラリを使用するWebアプリケーションがあります。

サーバーサイドコードとJavaScriptモデルの自動テストがあります（JavaScriptでMVCのようなアーキテクチャを使用しています）。これらは、コミットするたびにJenkinsCIサーバーで実行されます。次に、ビューをテストする方法を検討する必要があります。

他の人はこの問題にどのように取り組んでいますか？また、どのツールを使用していますか？

私が持っていたいくつかの考え...

• 生成されたSVGをファイルにシリアル化し、ベースラインと比較します
• ブラウザの画像を自動的にキャプチャし、画像の差分を実行します
• 他に何かありますか？

ありがとう！

Answer 1

あなたが与える例は、グラフィック出力をテストするためのものです。これには、 PhantomCSS 、 Sikuli のようなスクリーンショット差分ツールを使用するか、 Resemble.js で独自のツールをロールアップできます。

ただし、タイトルが示すように、質問がD3.js/SVGベースのアプリのテストについてより一般的なものである場合は、D3 テストスイート を確認する必要があります。ほとんどのテストは基本的にAPIをテストしているため、htmlフィクスチャさえ必要ありません。視覚的な結果の一貫性が最も重要な場合は、スクリーンショットの差分ツールを使用してください。ナビゲーションとUXフローについては、 Selenium のようなブラウザーの自動化が優れています。ただし、一貫性のあるAPIとモジュラーコードを確保したい単体テストの場合、スパイ、フィクスチャ、モック機能を備えたほとんどのテストフレームワークで問題ありません（つまり、 Jasmine 、 Vows 、 モカ ）。

Answer 2

私が現在考えている解決策は...

1. キャプチャするURLのリストとトリミング領域を含む単純なファイル（csv）を作成します（3を参照）
2. 各URLをロードして Seleniumでスクリーンショットをキャプチャ
3. ImageMagickを使用してスクリーンショットから視覚化を切り取ります（したがって、完全なUIではなく視覚化をテストしているだけです）
4. ImageMagickを使用して画像をベースラインと比較します
5. 古い画像、新しい画像、diff画像を使用してHTMLレポートを生成します（異なる画像の場合）
6. CIサーバーのJUnitxml出力を生成します

Answer 3

ブラウザをキャプチャしてグラフを検証することは良いテストです。しかし、これは私たちのコードよりもD3自体の責任だと思います。

私も同様の質問をしていました。 （ 私の質問 ）。私がそこに投稿した答えをチェックしてください。

Answer 4

Selenium はあなたが探していることをするはずです。これはWebブラウザーを駆動するため、SVGが正しくレンダリングされると想定する代わりに、ブラウザーで実際に何が起こっているかを確認できます。ユニットテストを一連のクリック/キーストロークとして指定でき、Jenkinsと非常にうまく統合されます。