FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[QUnit]オブジェクトのダンプを取って内容を比較する

JavaScriptのテスト用プログラムを作ったので公開。
タイトルにはQUnitとあるが、ほかのツールでも使える。

[JavaScript]JSON的なダンプをとる関数を作ってみた
を参考にして、オブジェクトのダンプを取るプログラムを作成した。
objdump.js (文字コードはUTF-8)
ダンプを出力する関数 midump.objdump() の説明は以下のとおり。
/**
 * オブジェクトのダンプを出力する
 * @param {Object} obj ダンプ対象オブジェクト
 * @param {?number} dec numberを小数点以下何桁で四捨五入するか。
 *    四捨五入しない場合はnull
 * @param {boolean} linear 改行およびインデントせず、
 *    objectのmethodを出力しない場合true。それ以外の場合false
 * @param {boolean} escape 制御文字、ダブルクォートをエスケープする場合はtrue。
 *    それ以外の場合false。nullの場合のデフォルト値はture。
 *    linear == true の場合、
 *    ダブルクォートではなくシングルクォートがエスケープされる。
 * @param {?{html: boolean, dispf: boolean}} opt
 *    html: 改行を'<br />',スペースを'&nbsp;'で出力する場合true。
 *        改行を'\n',スペースを' 'で出力する場合false
 *    dispf: objectのmethodを出力する場合true。それ以外の場合false
 *    nullの場合のデフォルト値は全てtrueだが、linearの値が優先される。
 * @return {string} ダンプ結果
 */
midump.objdump = function(obj, dec, linear, escape, opt) {

テストコード用のコンパクトなダンプを出力するため、次の機能を作成した。
・1行ダンプ出力。(改行およびインデントせず、オブジェクトのメソッドを出力しない)
・numberを小数点以下何桁で四捨五入するかを引数で指定。

midump.objdump()を使った、QUnitでのテスト手順は以下のようになる。

1. オブジェクトの中身をダンプして予想されるテスト結果を作成
  midump.objdump(object, 四捨五入する小数点以下の桁, true, true)
でオブジェクトの中身をダンプする。

<ダンプするHTMLの例>
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>オブジェクトの中身をダンプ</title>
  <script type="text/javascript" src="objdump.js" charset="UTF-8"></script>
  <script>
  var load = function() {
    // テスト対象のクラス
    var TestClass1 = function(arg1, arg2) {
      this.prop1 = [];
      for (var i = 0; i < 3; i++) {
        this.prop1[i] = new TestClass2(i, arg1);
      }
      this.prop2 = {};
      this.prop2.sub1 = arg2;
      this.prop2.sub2 = new TestClass2('sub2', arg2);
    };
    var TestClass2 = function(arg1, arg2) {
      this.prop3 = arg1;
      this.prop4 = arg2;
    };
    TestClass2.prototype.test = function() {
      return this.prop3;
    };
    
    var dumpdiv = document.getElementById('dump');
    dumpdiv.innerHTML = midump.objdump(new TestClass1(0.12345, 'b\n\'"'), 5, true, true);
  };
  </script>
</head>
<body onload="load();">
<div>dump result</div>
<div id="dump"></div>
</body>
</html>
このHTMLを実行すると、次のように出力される。
dump result
'{prop1:[{prop3:0,prop4:0.1235},{prop3:1,prop4:0.1235},{prop3:2,prop4:0.1235}],prop2:{sub1:"b\n\'"",sub2:{prop3:"sub2",prop4:"b\n\'""}}}'

このダンプ結果から、予想されるテスト結果は次のようになる。
// 予想される結果のダンプ
var expobjdump = '\'{prop1:[{prop3:0,prop4:0.1235},{prop3:1,prop4:0.1235},{prop3:2,prop4:0.1235}],prop2:{sub1:"b\n\'"",sub2:{prop3:"sub2",prop4:"b\n\'""}}}\'';
両端のシングルクォートが '\' になることに注意。(1行ダンプ出力結果がシングルクォートで囲われることと、エスケープ文字の関係上こうしている)

なお、1行ダンプ出力ではなく、見やすいダンプを出力したい場合は
dumpdiv.innerHTML = midump.objdump(new TestClass1(0.12345, 'b\n\'"'), 5, false, true, {html: true, dispf: true});
と書けばよい。

2. テストコードを作成
予想されるテスト結果とmidump.objdump()を使ってテストコードを作成する。
上記の例の場合、テストコードは以下のようになる。
    // テスト対象のクラス
    var TestClass1 = function(arg1, arg2) {
      this.prop1 = [];
      for (var i = 0; i < 3; i++) {
        this.prop1[i] = new TestClass2(i, arg1);
      }
      this.prop2 = {};
      this.prop2.sub1 = arg2;
      this.prop2.sub2 = new TestClass2('sub2', arg2);
    };
    var TestClass2 = function(arg1, arg2) {
      this.prop3 = arg1;
      this.prop4 = arg2;
    };
    TestClass2.prototype.test = function() {
      return this.prop3;
    };
    
    // 予想される結果のダンプ
    var expobjdump = '\'{prop1:[{prop3:0,prop4:0.1235},{prop3:1,prop4:0.1235},{prop3:2,prop4:0.1235}],prop2:{sub1:"b\n\'"",sub2:{prop3:"sub2",prop4:"b\n\'""}}}\'';

    // テスト対象のクラスと予想される結果とを比較
    var clsins = new TestClass1(0.12345, 'b\n\'"');
    test('test', function() {
      equal(midump.objdump(clsins, 5, true, false), expobjdump, 'compare clsins with expobj');
    });
比較する際のmidump.objdump()ではエスケープ処理をしないため、4番目の引数がfalseになることに注意。

このテストコードをQUnitで実行すればよい。

この方法で実際にテストしているのだが、HTMLをいじって出力し、ブラウザからコピ&ペーストしてテストコードを作成するので手間がかかる。
もっといい方法がありそうだ。

<関連エントリ>
[QUnit]deepEqualでクラスインスタンスとオブジェクトを比較する方法
スポンサーサイト

コメント

コメントの投稿

非公開コメント

プロフィール

himax64

Author: 南西
30代後半の無職です。
就活もせずダラダラ生きてます。
作ったもの

最新記事
人気記事
検索フォーム
カテゴリ
月別アーカイブ
最新コメント
最新トラックバック
RSSリンクの表示
QRコード
QRコード
カウンター
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。