The next set of functionality within our application that we will need to test are our DOM events. The basic flow of these tests is as follows:

• Construct an instance of an ItemView, with its corresponding ItemModel
• Render the HTML
• Find the <button> element, and simulate a DOM click event
• Ensure that the onClicked function of the ItemView is called
• Ensure that the onClicked function triggers an event bus message

Our first test will simulate a click event, and use a Jasmine spy on the onClicked function of the ItemView, as follows:

it("should trigger onClicked event", () => { 
    let clickSpy = spyOn(ItemView.prototype, 'onClicked'); 
    let itemView = new ItemView({ model: itemModel }); 
    itemView.render(); 
    let itemButton = itemView.$el.find(`button`).trigger('click'); 
    expect(clickSpy).toHaveBeenCalled(); 
}); 

The first line of this test uses the spyOn function from Jasmine to attach a spy to the onClicked function of our ItemView. Note, however, that we are specifying ItemView.prototype as the input to our spyOn function. Remember that when our Backbone view is constructed, we specified via the options.events property what functions to bind to DOM events. By the time we have completed running the constructor, we cannot then attach a spy to this function (as it is already bound to the DOM event). The solution, therefore, is to bind to the prototype view before the actual view is constructed.

Once we have a spy in place, we can construct the view, and call the render function. Once the render function has been called, we can use standard jQuery DOM searches on the view, and trigger a click, as seen in the following line:

let itemButton = itemView.$el.find(`button`).trigger('click'); 

Here, we are using fluent syntax and jQuery $ functions to find a button element and trigger a DOM click event.

Our test passes, since the DOM click event calls our onClicked function of ItemView.

The final test we need to build is one to ensure that the use of the message bus is working correctly. Remember that when an ItemView element is clicked, it will trigger an event on the message bus, and include its model properties as part of this message. On the other side of the message bus, the ItemCollectionView is listening for this event, and it will update the DOM to show our currently selected item.

Our test, therefore, is as follows:

it("should trigger an event bus event", () => { 
 
    let eventTriggered = false; 
    EventBus.Bus.on("item_clicked", () => { 
        eventTriggered = true; 
    }); 
    let itemView = new ItemView({ model: itemModel }); 
    itemView.render(); 
    let itemButton = itemView.$el.find(`button`).trigger('click'); 
 
    expect(eventTriggered).toBeTruthy(); 
}); 

In this test, we start by setting up a flag named eventTriggered, which is set to false. We then call the on function of the Event.Bus object to register an event bus listener. This listener will listen for messages of the type "item_clicked", and when received, will update the eventTriggered flag to indicate that this message was received. We then construct an ItemView as we have done previously, and trigger the button click through the DOM. Our test is expecting that the eventTriggered flag will be switched from false to true. With this test in place, we know that the ItemView is rendering elements correctly to the DOM, and that these elements are responding to click events as designed, and pushing messages onto the event bus.