Since we've changed a bunch of input and button tags and we have tests that are specifically looking for them, we'll need to hop into src/NewTodo/NewTodo.test.js first, and change every instance of .find("input") and .find("button") to .find("Input"), and .find("Button"). We'll start with our first test, which tests the form:

  it("contains the form", () => {
    expect(component.find("Input")).toHaveLength(1);
    expect(component.find("Button")).toHaveLength(1);
  });

We'll also want to modify the next test that relies on simulating button clicks:

  it("calls the passed in addTodo function when add button is clicked", () => {
    component.find("Button").simulate("click");
    expect(mockAddTodo).toBeCalled();
  });

We're almost done with this file! We have one more place where we're attempting to simulate a button click, so we'll need to clean up that test too! We can do this as follows:

  it("blanks out the Todo Name when the button is clicked", () => {
    const updateKey = "I should be empty";
    component.instance().handleUpdate({ target: { value: updateKey } });
    expect(component.state("item")).toEqual(updateKey);
    component.find("Button").simulate("click");
    expect(component.state("item")).toHaveLength(0);
  });

After saving and reloading, we should see fewer failed tests and can then move on to the next test suite that's failing! We can do this as follows:

 FAIL src/Todo/Todo.test.js
  - Todo › marks the Todo as done

    Method “simulate” is meant to be run on 1 node. 0 found instead.

      34 |
      35 | it("marks the Todo as done", () => {
    > 36 | component.find("button.MarkDone").simulate("click");
         | ^
      37 | expect(component.state("done")).toEqual(true);
      38 | });
      39 |

      at ShallowWrapper.single (node_modules/enzyme/build/ShallowWrapper.js:1875:17)
      at ShallowWrapper.simulate (node_modules/enzyme/build/ShallowWrapper.js:1080:21)
      at Object.simulate (src/Todo/Todo.test.js:36:39)

  - Todo › calls the mock remove function

    Method “simulate” is meant to be run on 1 node. 0 found instead.

      39 |
      40 | it("calls the mock remove function", () => {
    > 41 | component.find("button.RemoveTodo").simulate("click");
         | ^
      42 | expect(mockRemoveTodo).toHaveBeenCalled();
      43 | });
      44 | });

      at ShallowWrapper.single (node_modules/enzyme/build/ShallowWrapper.js:1875:17)
      at ShallowWrapper.simulate (node_modules/enzyme/build/ShallowWrapper.js:1080:21)
      at Object.simulate (src/Todo/Todo.test.js:41:41)

 PASS src/TodoList/TodoList.test.js
 PASS src/App/App.test.js

Test Suites: 1 failed, 3 passed, 4 total
Tests: 2 failed, 19 passed, 21 total

From the previous code snippet, we can see that the other failing test suite is in src/Todo/Todo.test.js, so let's fix that up too in the same way! Scroll to the very bottom of the file and change the two failing tests that are looking for button tags instead of Button components:

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

  it("calls the mock remove function", () => {
    component.find("Button.RemoveTodo").simulate("click");
    expect(mockRemoveTodo).toHaveBeenCalled();
  });

Save the file, and when the tests come back up (you may have to hit U to update the Snapshots as well, don't forget), we should see a fully green test suite again, as follows:

 PASS src/Todo/Todo.test.js
 PASS src/NewTodo/NewTodo.test.js
 PASS src/App/App.test.js
 PASS src/TodoList/TodoList.test.js

Test Suites: 4 passed, 4 total
Tests: 21 passed, 21 total
Snapshots: 3 passed, 3 total
Time: 4.386s
Ran all test suites.

Watch Usage: Press w to show more.

We're almost there, but remember the new functionality that we added to our project to mark certain Todo items as critical? We never added new tests for it! The good news is that there's only one more test we need to write for it!

This test should be almost identical to the test for seeing when Todo items are clicked and marked as done; except, this time, we're looking for the Mark Critical button, where we'll simulate a click on that button. After the button is clicked, we should expect to see the critical property on the state of the component change from false to true, which also means we'll start off with a sanity check in our test to make sure the critical property starts off false before we click on the button, and ends as true after the button click! This is as follows:

 it("marks the Todo as critical", () => {
 expect(component.state("critical")).toEqual(false);
 component.find("Button.MarkCritical").simulate("click");
 expect(component.state("critical")).toEqual(true);
 });

That's it! Our design is clean, our test suite is green, and our project is moving forward at an awesome pace! We'll rerun our test suite again just to make sure that everything is still green, but if it is, then we can safely move on to the next challenge:

 PASS src/NewTodo/NewTodo.test.js
 PASS src/TodoList/TodoList.test.js
 PASS src/Todo/Todo.test.js
 PASS src/App/App.test.js

Test Suites: 4 passed, 4 total
Tests: 22 passed, 22 total
Snapshots: 3 passed, 3 total
Time: 4.969s
Ran all test suites.

Watch Usage: Press w to show more.