Now that we can isolate each of the buttons, we can test what happens when each of them is clicked! We'll need to start off by verifying our MarkDone button marks that Todo as done, which we can do via checking the state, as well! Let's take a look at the test and then we'll talk about what it does:

  it("marks the Todo as done", () => {
    component.find("button.MarkDone").simulate("click");
    expect(component.state("done")).toEqual(true);
  });

The easiest way to reason about these tests is to say them out loud. If we were to test this behavior as a human, we'd say, find the button that marks the Todo as done, click on that button, and then we should expect that Todo to be complete! Our code does precisely that! It finds the component via a CSS selector that grabs the button that has a CSS class attached to it of MarkDone (remember our render() function changes earlier). We then simulate a "click" event sent to that button which targets the onClick handler. Finally, we have to use the state() function to grab a value out of the component's state, which for us is the "done" property in the state! If that's now true, then we're golden and our tests work!