测试应该失败但不是 - Mocha 和 CasperJS答案

【问题标题】：Test Should be Failing but is Not - Mocha and CasperJS测试应该失败但不是 - Mocha 和 CasperJS
【发布时间】：2016-04-13 08:14:11
【问题描述】：

我正在使用mocha-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)

【问题讨论】：

在"When I go to the main landing page'" 测试中，您可能希望返回承诺 (return casper.then...)
你还活着吗？你不应该提供反馈吗？

标签： jquery node.js mocha.js casperjs

【解决方案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 属性。您可能想使用textContent 或innerHTML。

另一个问题：由于你直接调用exitPhantomJS，this 不引用casper，所以这会导致另一个TypeError。使用casper.run(exitPhantomJS); 或casper.run();。

【讨论】：