ジャスミンとカルマとジャスミンの結果が異なる

Question

私は最近、ジャスミンでユニットテストをJavaScriptで学び始めました。今私はカルマテストランナーを使ってWebStormで働いています。コンソールでJasmineをテストし、WebStormでKarma/Jasmineでテストしたところ、いくつかの結果が異なります。私は以下のように簡略化された構造を持つプロジェクトを作成たとえば

：

. 
├── _js 
| └── script.js 
├── _test 
| └── test.js 
├── karma.conf.js 
└── index.html 

script.js

function Card(figure, color) { 
    "use strict"; 

    var that = this; 
    this.figure = figure; 
    this.color = color; 
    this.toString = function() { 
     return that.col + that.fig; 
    }; 
} 

test.js

describe("The validation of name", function() { 

    it("should return true if object is properly initialized", function() { 
     var a = new Card(1,"A"); 
     expect(a.figure === 1) 
    }); 

    it("should return true if array contain card", function() { 
     var a = [new Card(1,"A"),new Card(1,"B"),new Card(1,"C"),new Card(1,"D")]; 
     console.log(a); 
     expect(a).toContain({figure: 1, color: "A"}); 
    }); 
}) 

karma.conf.js

module.exports = function(config) { 
    config.set({ 
    basePath: '', 
    frameworks: ['jasmine'], 
    files: ['js/*.js', 'test/*.js'], 
    exclude: [], 
    preprocessors: {}, 
    reporters: ['progress'], 
    port: 9876, 
    colors: true, 
    logLevel: config.LOG_INFO, 
    autoWatch: false, 
    browsers: ['Firefox'], 
    singleRun: false, 
    concurrency: Infinity 
    }) 
} 

Iはジャスミン（JSFiddleにHERE）上でこれらのテストを実行すると、それは通過するが、WebStorm、それが失敗した：

[カード{図：1、色： 'A' のtoString：関数（ {{}}、{{1}、{color}}、{toString：function { ）{...}}、 カード{figure：1、color： 'D'、toString：function（）{...}}]

オブジェクトを含めると予想される[NaN、NaN、NaN、NaN] （{図：1、色： 'A'}）。 @テスト/ test.js：10：9 [3]のhttp：// localhostを：9877/context.js：151：7

それにconsole.logから適切な値を出力したが、テストは失敗し、示されるようにオブジェクトはNaNとして扱われます。

さらに、同じオブジェクトを、newキーワードなしで、リテラルオブジェクト表記で作成すると、すべてのテストが問題なく実行されます。だから、ここでコンストラクタが問題になっているようです。

このような状況の原因は何ですか？

Answer 1

あなたのテストは合格しません。

toContainは、すべてのオブジェクトが定義済みの属性を含むようにチェックするためです。

あなたはカスタムマッチャーを書く必要があります。

チェックこの例：

// source code 
 
function Card(figure, color) { 
 
    "use strict"; 
 

 
    var that = this; 
 
    this.figure = figure; 
 
    this.color = color; 
 
    this.toString = function() { 
 
    return that.color + that.figure; 
 
    }; 
 
} 
 

 
var customMatchers = { 
 
    hasObjectInArrayThatContains : function(expected){ 
 
    var arrayOfObjects = this.actual; 
 
    // iterating array of objects and finding at least 
 
    // one cituation where it passes test 
 
    for(var i in arrayOfObjects) { 
 
     var failures = 0; 
 
     for(var key in expected) { 
 
     if(arrayOfObjects[i][key] != expected[key]) { 
 
      failures++; 
 
     } 
 
     } 
 
     
 
     if(failures == 0) { 
 
     return true; 
 
     } 
 
    } 
 
    
 
    return false; 
 
    } 
 
}; 
 

 
describe("The validation of name", function() { 
 
    
 
    beforeEach(function(){ 
 
    this.addMatchers(customMatchers); // attaching our custom matchers 
 
    }); 
 
    
 
    it("should return true if object is properly initialized", function() { 
 
    var a = new Card(1,"A"); 
 
    expect(a.figure === 1) 
 
    }); 
 

 
    it("should return true if array contain card", function() { 
 
    var a = [new Card(1,"A"),new Card(1,"B"),new Card(1,"C"),new Card(1,"D")]; 
 
    expect(a).hasObjectInArrayThatContains({figure: 1, color: "A"}); // using our custom method 
 
    }); 
 
}); 
 

 

 
// load jasmine htmlReporter 
 
(function() { 
 
    var env = jasmine.getEnv(); 
 
    env.addReporter(new jasmine.HtmlReporter()); 
 
    env.execute(); 
 
}());

<link rel="stylesheet" href="https://cdn.jsdelivr.net/jasmine/1.3.1/jasmine.css"> 
 
<script src="https://cdn.jsdelivr.net/jasmine/1.3.1/jasmine.js"></script> 
 
<script src="https://cdn.jsdelivr.net/jasmine/1.3.1/jasmine-html.js"></script>

と失敗例：

参照：expect(a).hasObjectInArrayThatContains({figure: 1, color: "E"})

// source code 
 
function Card(figure, color) { 
 
    "use strict"; 
 

 
    var that = this; 
 
    this.figure = figure; 
 
    this.color = color; 
 
    this.toString = function() { 
 
    return that.color + that.figure; 
 
    }; 
 
} 
 

 
var customMatchers = { 
 
    hasObjectInArrayThatContains : function(expected){ 
 
    var arrayOfObjects = this.actual; 
 
    // iterating array of objects and finding at least 
 
    // one cituation where it passes test 
 
    for(var i in arrayOfObjects) { 
 
     var failures = 0; 
 
     for(var key in expected) { 
 
     if(arrayOfObjects[i][key] != expected[key]) { 
 
      failures++; 
 
     } 
 
     } 
 
     
 
     if(failures == 0) { 
 
     return true; 
 
     } 
 
    } 
 
    
 
    return false; 
 
    } 
 
}; 
 

 
describe("The validation of name", function() { 
 
    
 
    beforeEach(function(){ 
 
    this.addMatchers(customMatchers); // attaching our custom matchers 
 
    }); 
 
    
 
    it("should return true if object is properly initialized", function() { 
 
    var a = new Card(1,"A"); 
 
    expect(a.figure === 1) 
 
    }); 
 

 
    it("should return true if array contain card", function() { 
 
    var a = [new Card(1,"A"),new Card(1,"B"),new Card(1,"C"),new Card(1,"D")]; 
 
    expect(a).hasObjectInArrayThatContains({figure: 1, color: "E"}); // using our custom method 
 
    }); 
 
}); 
 

 

 
// load jasmine htmlReporter 
 
(function() { 
 
    var env = jasmine.getEnv(); 
 
    env.addReporter(new jasmine.HtmlReporter()); 
 
    env.execute(); 
 
}());

<link rel="stylesheet" href="https://cdn.jsdelivr.net/jasmine/1.3.1/jasmine.css"> 
 
<script src="https://cdn.jsdelivr.net/jasmine/1.3.1/jasmine.js"></script> 
 
<script src="https://cdn.jsdelivr.net/jasmine/1.3.1/jasmine-html.js"></script>

作業フィドル：https://jsfiddle.net/3VuGs/396/

もこの読み：testing Your js with Jasmine