Question

我的目标是模拟runProcedure函数，并在用户点击后检查它是否被调用。但是，即使可以清楚地看到一旦用户单击页面并且miniWindowShowing变量为false时调用runProcedure函数，即在页面加载时，测试仍然会失败。任何人都可以解释如何使用QUnit与sinon来实现这一目标吗？以下是我正在使用的代码。

QUnit HTML Page

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Function Testing</title>
  <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.12.0.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  <script src="http://code.jquery.com/qunit/qunit-1.12.0.js"></script>
  <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
  <script type="text/javascript" src="http://sinonjs.org/releases/sinon-1.7.3.js"></script>
  <script type="text/javascript" src="http://sinonjs.org/releases/sinon-qunit-0.8.0.js"></script>

  <script type="text/javascript" src="Function Source.js"></script>
  <script type="text/javascript" src="TestSuite.js"></script>
  <script>
    test( "Test Click Calls Function", testClickCallsFunction);
  </script>
</body>
</html>

JavaScript测试文件

// Test that when user clicks on the page, a function is called
function testClickCallsFunction(){

    var event = $.Event("click");   
    var funcSpy = sinon.spy(runProcedure);
    $(document).trigger(event);

    ok(funcSpy.called);
}

要测试的JavaScript函数

var miniWindowShowing = false;

$(document).ready(function () {

    $(this).click(function (e) {
        //Ignore input events if the mini window is showing
        if(!miniWindowShowing)
        {
            runProcedure();         
        }
    });

})

function runProcedure() {

}

Answer 1

创建间谍的方式存在一个小问题。 sinon.spy(runProcedure)使用传递的函数创建一个新的间谍，但它不会用该间谍替换原始函数。因此，当您致电runProcedure时，它仍然是原始功能。要使用间谍覆盖该函数，您必须使用以下语法：sinon.spy(window, 'runProcedure')，它将使用间谍替换全局命名空间中的函数runProcedure。

使用QUnit和Sinon发出事件调用的模拟函数

1 个答案: