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 to check whether the event was triggered on the element.