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

  1. 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
  2. Tests not bound to design: If the css classes change then your tests won't break.
  3. No extra stuff in production code just to make it testable: No ref attributes, no js- css classes
  4. 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.
  5. 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

  1. Needs Yet Another Library™ In this case dom-testing-library
  2. Learning curve: Our current method of reference the DOM is pretty well ingrained. It will take some time to teach everyone.
  3. Looking up by text is slower than by ref (debatable).
  4. 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