Improving Tests
In this lesson, you’ll learn how to improve the tests.
We have now written a couple of tests that guard against breaking the existing functionality. However, they are in the “just works” phase, and there are various things we can do to make them more resilient and more pleasant to write.
Using data attributes for designating elements in testing
If we take a look at our second test, the elements we trigger events on and assert against are specified either by tag name (button
, input
) or the CSS class (p.text-center
). The problem with this is two-fold. First, they are not precise enough, and there can be multiple buttons or inputs. Second, since they are not there for testing purposes, they might change, causing false negative test failures.
Using data attributes specifically designated for identifying elements for our tests is a great way to solve this problem. Let’s assign some data attributes to the elements we need and then rewrite the tests to use them.
To be able to bind the data attributes to components like LinkTo
, we use a great little add-on called ember-test-selectors
:
ember install ember-test-selectors
Not only does this enable the data-test
attributes to be bound on all components, it also strips these attributes in production where it’d only add clutter to the DOM elements.
Without further ceremony, let’s tag our templates with these attributes:
band-list.hbs
Get hands-on with 1200+ tech skills courses.