Update Vue unit test mocking guidelines

Latest AI-generated summary Experiment

What does this MR do and why?

This MR improves Vue testing guidelines to reflect on how we test Vue code at GitLab. I specifically address the mocking guidelines when performing Vue unit testing.

It removes:

  • Confusing recommendations (mocking DOM, async background operations)
  • Harmful recommendations (mocking component's state, Vuex, external functions)

It also generalizes the recommended mocks into the Side effects category.

It adds a new recommendation regarding Vuex with improved details on how to work with Vuex in these cases.

We should avoid doing these mocks when using Vuex store:

  1. mocks: { $store }
  2. store: new Vuex.Store({ actions: { ... }, getters: { ... }, ... })

This is because Vuex Store is an integral part of the component and mocking it out would be similar to mocking component's data or methods. Mocking Vuex in such ways would also be more labour intensive because you'd have to re-implement the store from scratch. Such mocks also produce false-positive and false-negative tests. And lastly such mocks make the tests more vulnerable to change: if you've changed the name of the getter of it's results you'd also have to change these in tests. Which is something we should always avoid.

Instead, we should use the real store and mock all the side effects it's causing. That way we won't have to create complex mocks, re-implement store, re-implement reactivity or change the test after we refactor the store or the component.

Edited by Stanislav Lashmanov

Merge request reports