jQuery to the Rescue!
Now we need to create a file:
This file will be where we write tests for the OMG.Views.TodoView class. We'll set it up like this:
Next, tell Mocha that we want to describe "OMG.Views.TodoView" and then pass a function to it. In this function, we'll write all of our tests.
Finally we need to make sure that all of our tests have some basic information with which they can work. For our purposes, that would be an instance of a Todo (@model) and an instance of the view we're testing (@view), and we need to place the HTML from that view on the page, like this:
You might think we'd finally be ready to write some tests, but not quite. To make our tests easier to read and write, we should use the chai-jquery plug-in. This plug-in will give us access to some custom matchers that match familiar jQuery API functions. Now we're ready to write our tests.
In these two tests, we're asserting that the body of the todo is being rendered to the page where we expect it. Since the todo we created wasn't marked as completed, we're also asserting that the checkbox remains unchecked and that the CSS style completed has not been applied.
Since todos can be marked as completed, we should test for that scenario as well. Using jQuery, we can simulate a user interacting with the checkbox to mark the todo as completed:
In this test, we're actually testing two different things. First, we're testing that when a user clicks the "completed" checkbox, the view listens to that event and redraws the HTML. Second, we're testing that the view draws the correct HTML for a completed todo.