Brittle tests

Test helpers often depend on our application's HTML or CSS:

click("input[value='Save issue']")

Too many of these will cause our tests to become brittle. How can we reduce this high degree of coupling?

Let's make a small change to our new issue form. Instead of having the button say "Save", let's label it "Save issue".

Since the form is encapsulated in a component, we can just pop open the template and change the value of the submit button. Now if we go back to our application, we can see that everything is working correctly with our new save button.

There's one problem - this rename caused all of our tests to fail. If we open the tests, we can see that they're looking for a button called 'Save', but since we renamed it to 'Save issue' the button can't be found and the tests fail.

This is pretty easy to fix, we just have to update our tests to look for a button called 'Save issue'.

Let's take a step back for a moment and ask ourselves if our tests should have failed. The whole point of our test suite is to give us confidence that our application is working correctly. So, if tests are failing, it's safe to assume that the application is broken. But in this case, our application wasn't broken. In fact, we just used it to create a new issue.

You could say these tests might not be that valuable because now every time we want to change some HTML we have to go and update a bunch of tests. This is only going to get more and more costly as our app grows over time. We all know that our UIs are going to have many little changes, and keeping our tests in sync with those changes is only going to slow us down.

This sort of thing can become such an annoyance that it will just cause us to give up on testing. We'll need to find some way to eliminate these brittle tests and make our suite more maintainable.