2016-04-13 6 views
0

Ich verwende mocha-casperjs-Test Sollte Falls ist aber nicht - Mokka und CasperJS

Keine Ahnung, warum mein Test mir ein falsch positives hier gibt. Die html Seite rendert aaaaa noch mein Test, der versucht zu sehen, ob dieses div den Text "No Companies Listed" rendern lässt, warum?

"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(); 
} 

Und hier ist eine Ansicht Quelle von dem, was gemacht wird:

<!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> 

Ergebnisse

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

In der "" Wenn ich auf die Hauptlandungsseite gehen "" Test möchten Sie vielleicht das Versprechen (Rückkehr casper.then ... ') – MarcoL

+1

Sind Sie noch am Leben? Sollten Sie kein Feedback geben? –

Antwort

1

einige Probleme mit Ihrem Code Es gibt keine. Das bemerkenswerteste ist, dass

expect(companyList.to.equal('No Companies Found')); eigentlich expect(null.to.equal('No Companies Found')); wäre und somit zu einem TypeError führen würde.

Sie wollten wahrscheinlich expect(companyList).to.equal('No Companies Found'); verwenden, was nicht zu einem TypeError führen würde und Ihnen daher einen fehlgeschlagenen Test geben sollte.

Der Grund, dass der Test fehlschlägt, ist casper.evaluate() bietet Sandbox-Zugriff auf das DOM. Sie können keine Variablen verweisen, die außerhalb sind definieren und wenn Sie Daten aus ihm heraus wollen, müssen Sie es explizit pass out:

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

DIVs keine Werte haben und ein jQuery-Sammlung nicht über eine value Eigentum. Möglicherweise möchten Sie textContent oder innerHTML verwenden.

Ein weiteres Problem: Da Sie exitPhantomJS direkt anrufen, bezieht sich this nicht auf casper, so dass dies zu einem anderen TypeError führen wird. Verwenden Sie entweder casper.run(exitPhantomJS); oder casper.run();.