avoid / capture / verify a Javascript alert when testing a method that displays one with qunit

空扰寡人 提交于 2019-12-03 15:19:12
memetech

Alright, looks like Sinon.JS is what you are looking for. I've never used it before, but I did to answer your question.

You can replace the global function alert (which is actually window.alert) with a temporary function that will record the message that would have been displayed.

It's easy to do in javascript (window.alert = function(msg) { savedMsg = msg; }). So you could do that within your test.

The complexity comes only from cleaning up after you've run your test. That's where you need Sinon.JS which can integrate with QUnit. You'll need this integration script.

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>
<script type="text/javascript" src="sinon-1.1.1.js"></script>
<script type="text/javascript" src="sinon-qunit-0.8.0.js"></script>

<script>

    function to_test() {
      window.alert("I'm displaying an alert");
      return 42;
    }

    $(document).ready(function(){

      module("Module A");

      test("first skip alert test ", function() {

      var stub = this.stub(window, "alert", function(msg) { return false; } );

      equals(42, to_test(), "to_test() should return 42" );  
      equals(1, stub.callCount, "to_test() should have invoked alert one time");
      equals("I'm displaying an alert",stub.getCall(0).args[0], "to_test() should have displayed an alert" ); 

    });

  });
</script>

</head>
<body>
  <h1 id="qunit-header">QUnit example</h1>
 <h2 id="qunit-banner"></h2>
 <div id="qunit-testrunner-toolbar"></div>
 <h2 id="qunit-userAgent"></h2>
 <ol id="qunit-tests"></ol>
 <div id="qunit-fixture">test markup, will be hidden</div>
</body>
</html>
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!