如何比较只有输出部分在html和javascript

How to compare only output part in html and javascript?

本文关键字：输出部 html javascript 何比较 比较      更新时间：2023-09-26

我计划创建一个用于JavaScript测试的应用程序。在这里我将给出一个创建程序的问题，例如，在警告框中显示文本"HTML代码播放"?用户将编写代码，他们可以为函数、变量等使用任何名称。

我想检查输出，其中输出显示警告框"HTML Code Play"。

用户代码

<script>
function showalert()
{
 alert("HTML Code Play");
}
</script>
<input type="button" value="Show Alert" onclick="showalert();">

与以下代码(我的代码)

比较
<button onclick="alertbox();">Show Alert</button>
<script>
function alertbox()
{
 alert("HTML Code Play");
}
</script>

在上面的示例中，两者产生相同的输出，但编码不同。当我检查这两个代码时，我希望结果为true。我能做到吗?这可能吗?

我发现你的问题很有趣，并使用mocha和sinon创建了示例代码。
(要执行此操作，你必须自己安装sinon.js模块。)
我把这段代码作为工作代码发布在这里。

请将'code1'，'code2'块视为用户实现的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>How to test user code on broweer</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.5.3/mocha.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.5.3/mocha.css" rel="stylesheet">
    <script type="text/javascript" src="../components/sinon/lib/sinon.js"></script>
    <script type="text/javascript" src="../components/sinon/lib/sinon/util/core.js"></script>
    <script type="text/javascript" src="../components/sinon/lib/sinon/extend.js"></script>
    <script type="text/javascript" src="../components/sinon/lib/sinon/spy.js"></script>
    <script type="text/javascript" src="../components/sinon/lib/sinon/call.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <h1>How to test user code on broweer</h1>
    <div id="mocha"></div>
    <div id="live-code-stage"></div>
    <template id="code1">
        <button onclick="alertbox();">Show Alert</button>
        <script>
            function alertbox() {
                alert("HTML Code Play");
            }
        </script>
    </template>
    <template id="code2">
        <script>
            function showalert() {
                alert("HTML Code Play");
            }
        </script>
        <input type="button" value="Show Alert" onclick="showalert();">
    </template>
</div>
<script>
    mocha.setup('bdd');
    $(function () {
        var assert = function (expr, msg) {
            if (!expr) throw new Error(msg || 'failed');
        };
        describe("implement 'show alert button' test", function () {
            before(function () {
                window.alert = sinon.spy();
            });
            it("window.alert must to be called with 'HTML Code Play'", function (done) {
                $("#live-code-stage").html($("#code1").html()); // testing code1
                $("button, input[type='button']").click();
                assert(window.alert.calledWith("HTML Code Play"));
                done();
            });
        });
        mocha.run();
    });
</script>
</body>
</html>

要点

  • 你可以模拟窗口。警告:
    window.alert = sinon.spy();

  • 你可以检查它(=alert)是否被调用了正确的参数，像这样:assert(window.alert.calledWith("HTML Code Play"));

如果用户创建的代码是错误的，mocha测试将失败。
引入单位可以改善检测报告的外观。

但这只是一个样本。必须有许多选项来存档您想要的内容。

相关文章：