title: testing keydown events in Jasmine with specific keyCode
body: <p>I am writing tests for an AngularJS directive which fires events of a <code>&lt;textarea&gt;</code> when certain keys are pressed. It all works fine per my manual testing. I want to be good and have a full unit-test suite too, but I have run into a problem I can't solve on my own:</p>
  
  <p>I want to send a specific <code>keyCode</code> in my <code>triggerHandler()</code> call in my test, but I can't find a way to specify the key <strong>that actually works</strong>. I am aware of a <em>lot</em> of questions and answers on the topic of building and sending events with specific data, but none of them work on my setup:</p>
  
  <h2>My setup</h2>
  
  <ul>
  <li>Karma test runner </li>
  <li>PhantomJS browser running the tests (but also tried Firefox and Chrome without success)</li>
  <li>I'm not using jQuery and I'm hoping there is a regular JS solution. There must be!</li>
  </ul>
  
  <h2>Test code</h2>
  
  <pre><code>var event = document.createEvent("Events");
  event.initEvent("keydown", true, true);
  event.keyCode = 40; // in debugging the test in Firefox, the event object can be seen to have no "keyCode" property even after this step
  textarea.triggerHandler(event); // my keydown handler does not fire
  </code></pre>
  
  <p>The strange thing is, I can type the first 3 lines into the console in Chrome and see that the event is being created <em>with</em> the <code>keyCode</code> property set to 40.
   So it seems like it should work. </p>
  
  <p>Also, when I call the last line like this <code>textarea.triggerHandler("keydown");</code> it works and the event handler is triggered. However, there is no <code>keyCode</code> to work with, so it is pointless.</p>
  
  <p>I suspect it may be something to do with the nature of the test running against a DOM that is different to a regular page running in the browser. But I can't figure it out!</p>