title: testing simulating a keypress for an angular directive jasmine spec
body: <p>How can I make it so that my simulated keypresses actually set the value of an input?</p>
  
  <p>I am making a directive that monitors keypress events and modifies the value of the input based on the keypresses, I can't test this until I can actually see that simulated keypresses actually change the value of the text input.</p>
  
  <pre><code>describe('testingKeypress', function () {
    var context;
  
    beforeEach(inject(function($injector) {
      context = this;
  
      this.compile           = $injector.get('$compile');
      this.rootScope         = $injector.get('$rootScope');
      this.document          = $injector.get('$document');
      this.scope             = this.rootScope.$new();
  
      this.pressKey = function (keyCode) {
        var e = $.Event('keypress');
        e.keyCode = keyCode;
        e.which = keyCode;
        context.el.find('input').trigger(e);
      };
  
      this.createElement = function () {
        context.el = angular.element('&lt;form&gt;&lt;input&gt;&lt;/form&gt;');
        context.compile(context.el)(context.scope);
        context.scope.$digest();
      };
    }));
  
    afterEach(function() {
      this.scope.$destroy();
    });
  
    describe('making sure an input actually gets some text', function () {
      beforeEach(function () {
        this.createElement();
        this.pressKey(65);
        this.pressKey(66);
        this.pressKey(67);
      });
  
      it('works', function () {
        expect(this.el.find('input').val()).toEqual('ABC');
      });
    });
  });
  </code></pre>
  
  <blockquote>
    <p>PhantomJS 2.1.1 (Mac OS X 0.0.0) making sure an input actually gets some text works FAILED
    Expected '' to equal 'ABC'.</p>
  </blockquote>