DOM events are used all the time while coding frontend applications, and sometimes we intend to write a spec that checks whether an event is being triggered.

An event could be something like a form submission or an input that has changed, so how can we use spies to do that?

We can write a new acceptance criterion to the NewInvestmentView test suite to check that its form is being submitted when we click on the add button:

describe("and when its add button is clicked", function() {
  beforeEach(function() {
    spyOnEvent(view.$element, 'submit');
    view.20.18.find('input[type=submit]').click();
  });

  it("should submit the form", function() {
    expect('submit').toHaveBeenTriggeredOn(view.20.18);
  });
});

To write this spec, we use the spyOnEvent global function provided by the Jasmine jQuery plugin.

It works by accepting view.20.18, which is a DOM element, and the submit event we want to spy on. Then, later on, we use the jasmine jQuery matcher toHaveBeenTriggeredOn...