Change: Find by ref to Find by text
Change pattern proposal: Find by ref/class/component to Find by text where possible
Old Pattern
In Frontend unit tests we reference dom elements in the following ways:
wrapper.find(Component)
wrapper.find({ name: 'some-name' })
wrapper.find({ ref: 'some-ref' })
wrapper.find('.css-class')
New Pattern
Except for finding by Component
use the following
getByText(/submit issue/i)
getByLabelText('Assignee')
Advantages of switching patterns
- Testing what users actually see and interact with: Nobody looks for the button by its css class name or ref id. They look for the "Submit" button
- Tests not bound to design: If the css classes change then your tests won't break.
- No extra stuff in production code just to make it testable: No ref attributes, no
js-
css classes - Enforces best practices: Form inputs should have labels even if they are not visible. Selecting an input by its label text automatically enforces some accessibility standards and best practices.
- More intuitive workflow: As a developer, I don't need to go hunt down a ref or css class. I can just
getByText
because that's literally what I want this test to do.
Disadvantages of switching patterns
- Needs Yet Another Library™ In this case dom-testing-library
- Learning curve: Our current method of reference the DOM is pretty well ingrained. It will take some time to teach everyone.
- Looking up by text is slower than by ref (debatable).
It doesn't really map 1:1 with vue-test-utils so it's not a straight "add-on". You don't have to replace vue-test-utils in a test, but you would probably want to.
What is the impact on our existing codebase?
Minimal. Using dom-testing-library
to reference by text is opt-in and can be used on a per-test basis if needed though this is strongly discouraged. While this is a two-way door decision switching back to vue-test-utils for a test is harder than switching to vue-testing-library initally.
Update:
From the discussions, we can actually just bring in the language queries from dom-testing-library
which means none of our tests need to be updated and we can easily support both new and current methods of selecting dom nodes.
Edited by Roman Kuba