2016-04-13 55 views
0

我使用mocha-casperjs測試應該失敗,但沒有 - 摩卡和CasperJS

不知道爲什麼我的測試是給我一個假陽性這裏。 html頁面呈現aaaaa,但我的測試正試圖查看該div是否呈現文本「No Companies Listed」仍然通過,爲什麼?

"use strict"; 

var page = null, 
    $ = require('jquery'); 


describe('Feature: View List of Companies', function() { 
    before(function(done) { 
     casper.start('http://localhost:3000'); 
     casper.on("remote.message", function(msg){ 
      this.echo("remote.msg: " + msg); 
     }); 
     casper.on("page.error", function(pageErr){ 
      this.echo("page.err: " + JSON.stringify(pageErr)); 
     }); 

     casper.then(function(){ 
      this.page.injectJs('../../../public/js/jquery-2.2.3.min.js'); 
     }) 

     done(); 
    }); 

    it('When I go to the main landing page', function() { 
     casper.then(function() { 
      expect(this.page).to.be.a('object'); 
     }); 
    }); 

    describe('Scenario 1: No Companies are Listed', function() { 
     it('should see that no companies are listed', function() { 
      var companyList = null; 
      casper.waitForSelector('#companyList', function() { 
       this.evaluate(function() { 
        companyList = $('#companyList').value; 
        console.log("list: " + companyList); 
       }); 
       expect(companyList.to.equal('No Companies Found')); 
      }); 
     }); 
    }); 

    casper.run(function() { 
     exitPhantomJS(); 
    }); 
}); 


function exitPhantomJS(){ 
    this.exit(); 
} 

這裏是一個什麼樣的渲染視圖來源:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 

     <!-- load Ink's CSS --> 
     <link rel="stylesheet" type="text/css" href="public/libs/ink-3.1.10/css/ink-flex.min.css"> 
     <link rel="stylesheet" type="text/css" href="public/libs/ink-3.1.10/css/font-awesome.min.css"> 

     <style> 
      body { 
       background: #ededed; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="ink-grid vertical-space"> 
      <div id="content"> 
       <div class="panel vertical-space"> 
        <div id="companyList">aaaaa</div> 
        <!--<div id="app"/>--> 
       </div> 
      </div> 
     </div> 
     <script type="text/javascript" src="build/app/js/bundle.js"></script> 
    </body> 
</html> 

結果

Feature: View List of Companies 
    ✓ When I go to the main landing page 
    Scenario 1: No Companies are Listed 
     ✓ should see that no companies are listed 


    2 passing (12ms) 
+0

在''當我進入主着陸頁''''測試你可能想要返回諾言('return casper.then ...') – MarcoL

+1

你還活着嗎?你不應該提供反饋嗎? –

回答

1

有一些問題與您的代碼。最值得注意的是

expect(companyList.to.equal('No Companies Found'));實際上是expect(null.to.equal('No Companies Found'));,因此導致TypeError。

你可能想要使用expect(companyList).to.equal('No Companies Found');,這不會導致TypeError,因此應該給你一個失敗的測試。

測試失敗的原因是casper.evaluate()提供了沙盒訪問DOM。您不能引用的定義之外的變量,如果你想擺脫它的數據,你需要傳遞出來明確:

var companyList = null; 
casper.waitForSelector('#companyList', function() { 
    companyList = this.evaluate(function() { 
     return $('#companyList')[0].innerHTML.trim();; 
    }); 
    expect(companyList).to.equal('No Companies Found'); 
}); 

的DIV不具有的價值觀和一個jQuery集合不具有value屬性。您可能需要使用textContentinnerHTML

另一個問題:由於您直接調用exitPhantomJS,因此this沒有引用casper,所以這會導致另一個TypeError。請使用casper.run(exitPhantomJS);casper.run();