8

我正在尝试进行一些测试，以便能够更好地了解如何使用 Mocha、Chai、Sinon 和 jQuery 的组合来测试 DOM 事件。我想检查单击 div 元素时是否正确触发了警报功能。我知道 HTML 元素的设置是正确的 jQuery，但我不完全确定如何为下面的代码生成通过测试。特别奇怪的是，我在浏览器中打开 HTML 文件时出现了一个对话框，所以我知道 '$('#thingy').trigger('click')' 行正在做我所期望的。我目前收到以下信息，“TypeError：对象不是函数”

我的测试文件tests.js中的相关部分

describe('DOM tests - div element', function() {
$("body").append("<div id='thingy'>hello world</div>")
$('#thingy').attr('class', 'thingy');
$('#thingy').click(function() { alert( "I've been clicked!" ); });


it('should have called alert function', function () {
  var spy = sinon.spy(alert);
  $('#thingy').trigger('click')
  sinon.assert(spy.called);
});

我的 HTML 文件相当标准，index.html

<!doctype html>
<html>
<head>
    <title>Tests</title>
    <link rel="stylesheet" href="mocha.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
    <div id="mocha"></div>
    <script src="mocha.js"></script>
    <script src="chai.js"></script>
    <script src="sinon-1.10.2.js"></script>
    <script>
        mocha.ui('bdd');
        mocha.reporter('html');
        var expect = chai.expect;
    </script>
    <script src="tests.js"></script>
    <script>
        mocha.run();
    </script>
</body>

4

1 回答 1

7

您实际上并没有调用alert函数，而是调用了该window.alert函数，因此您需要对其进行监视：

it('should have called alert function', function () {
  var _savedAlert = window.alert; 

  try {
    var spy = sinon.spy(window, 'alert');
    $('#thingy').trigger('click');
    sinon.assert.called(spy);
   } 

  finally { window.alert = _savedAlert; }
});
于 2014-06-04T21:21:16.500 回答