title: Testing JavaScript Click Event with Sinon
body: <p>I am trying to produce some test to be able to better understand how to test DOM events with the combination of Mocha, Chai, Sinon and jQuery. I want to check that the alert function is correctly triggered on a click of the div element. I know that the setup of the HTML element is correct jQuery, but I'm not entirely sure how to produce a passing test for the code below. What's particularly strange is that I get a dialogue appearing on opening the HTML file in my browser, so I know the line '$('#thingy').trigger('click')' is doing what I'd expect.  I am currently getting the following, 'TypeError: object is not a function'</p>
  
  <p>Relevant section from my test file, tests.js</p>
  
  <pre><code>describe('DOM tests - div element', function() {
  $("body").append("&lt;div id='thingy'&gt;hello world&lt;/div&gt;")
  $('#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);
  });
  </code></pre>
  
  <p>My HTML file is fairly standard, index.html</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Tests&lt;/title&gt;
      &lt;link rel="stylesheet" href="mocha.css" /&gt;
      &lt;script src="http://code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="mocha"&gt;&lt;/div&gt;
      &lt;script src="mocha.js"&gt;&lt;/script&gt;
      &lt;script src="chai.js"&gt;&lt;/script&gt;
      &lt;script src="sinon-1.10.2.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          mocha.ui('bdd');
          mocha.reporter('html');
          var expect = chai.expect;
      &lt;/script&gt;
      &lt;script src="tests.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          mocha.run();
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>