DOM events are used all the time while coding frontend applications, and sometimes we want to write a spec that checks whether an event is being triggered.
An event could be something like a form submission or an input having changed, so how can we use Spies to do that?
We can write a new acceptance criterion to NewInvestmentView to check that its form is being submitted when the add button is clicked:
describe("and when its add button is clicked", function() {
beforeEach(function() {
spyOnEvent(view.$el, 'submit');
view.$el.find('input[type=submit]').click();
});
it("should submit the form", function() {
expect('submit').toHaveBeenTriggeredOn(view.$el);
});
});To write this spec, we use the spyOnEvent global function provided by the Jasmine jQuery plugin.
It works by accepting a DOM element (view.$el) and an event we want to spy on (submit). Then later on, we can check with toHaveBeenTriggeredOn whether the event was triggered on the element.