2016-04-13 54 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();