New: `extendWrapper` for extended common VTU queries

New Pattern Proposal: extendWrapper for extended common VTU queries

This RFC proposes to augment VTU VueWrapper with specific methods encapsulating the most common queries used in our tests. The proposal does not address migration concerns as it is meant to simplify all future work. Of course, boy scout rule still applies 🏕

Background story

The idea was inspired by @pgascouvaillancourt's comment and the discussion with the VTU team, which highlighted that:

The upshot is: extending VueWrapper functionality is delegated to the client.

Advantages of new pattern

  1. makes common ways for querying the wrapper more discoverable
  2. offers standard ways for querying
  3. offers tested ways for querying

Disadvantages of new pattern

  1. documentation must be up to date
  2. naming can be hard
  3. not keeping the augmented API to a bearable minimum can lead to something like a Meinong's jungle

What is the impact on our existing codebase?

  • The introduction of this would only affect the testing codebase and offer an helper.
  • The introduction of new methods, new approaches to queries can emerge.
  • Adopting it in working tests would not change their behaviour, the utility augments the object without modifying the existing properties.
  • A safe rollback is always possible: it's sufficient that extendWrapper acts as an identity function

Reference implementation

extendedWrapper is used here with the intent of making finding by test id easier.

As simple as it is, the utility can be used like in the following example:

const wrapper = extendedWrapper(mount(MyComponent));
const findMyElement WithTestId = () => wrapper.findByTestId('myTestId');
Edited by Paul Gascou-Vaillancourt