# :pray: Help needed ATM, this epic is centered around main `gitlab-org/gitlab` repository. Feel free to update description and add relevant steps to this epic or child epics for other projects like `@gitlab/ui` or customer portal # Overview Our Vue tests were slowly accumulating ~"technical debt" over time. Karma migration, recent `@vue/test-utils` updates, our own researches on how to test components - all of these made our tests very different and sometimes very hard to maintain. Due to these issues it takes extremely long time to perform for example `@vue/test-utils` upgrades, there is significant number of highly fragile tests in our codebase which dives too deep into implementation details, etc. This epic tracks our efforts to increase quality of frontend testing suite with significant focus on Vue related tests # Plan * [x] [Upgrade @vue/test-utils to 1.x version](https://gitlab.com/groups/gitlab-org/-/epics/4255) * **Why?** Our current version is more than one year old. It has multiple annoying bugs fixed in current version. Additionally new version contains significant deprecations (which leads to higher quality tests) and important runtime validations (for example, operating on destroyed wrappers will throw warnings) * **How?** Fix failing tests and VTU itself * [x] [Act on each kind of deprecations in @vue/test-utils 1.x](https://gitlab.com/groups/gitlab-org/-/epics/3856) * **Why?** Each deprecation is road blocker for upgrade to Vue3. Most of deprecations are bad code smells * **How?** See relevant epic for details. Some of deprecations are just "find & replace" things, some (like usage of `methods` and `setMethods`) requires significant specs refactoring * [ ] Cleanup codebase based on new VTU features (epic TBD) * **Why?** Improve and simplify our test suite. Get rid of that `nextTick`! * **How?** Search and destroy. Some of these things could be done with codemod - [ ] Remove excessive `nextTick` calls. `trigger`, `setProps`, etc. now return `nextTick` inside, so they could be just awaited - [ ] Remove useless stubs. VTU now renders all slots by default, so some stubs could be removed * [x] Remove `localVue` usage * **Why?** `localVue` is one of the most confusing feature in `@vue/test-utils` and [we do not need it at all](https://gitlab.com/gitlab-org/gitlab/-/issues/220482) * **How?** 95% of this action could be done via code mod + [we have MR pending with fix](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/47729) * [x] [Convert remaining tests from our legacy `mountComponent` / `mountComponentWithStore` helpers to `@vue/test-utils`](https://gitlab.com/groups/gitlab-org/-/epics/5110) * **Why?** `@vue/test-utils` is official supported way of testing components * **How?** Rewrite each test manually :cry: * [x] [Clean unnecessary 'Vue.extend' uses in Jest tests](https://gitlab.com/groups/gitlab-org/-/epics/2418) * **Why?** It is simply not needed and adds additional complexity and slowness to our test suite * **How?** Most of these could be removed with codemod * [x] Unify our `nextTick` usage * **Why?** See [RFC](https://gitlab.com/gitlab-org/frontend/rfcs/-/issues/47) for rationale * **How?** Most of these could be done with codemod * [ ] Switch to `async` / `await` * **Why?** See excellent [RFC by @rkuba](https://gitlab.com/gitlab-org/frontend/rfcs/-/issues/45) for details * **How?** Some of these could be implemented with codemod * [ ] [Remove direct modification of Vue instances](https://gitlab.com/groups/gitlab-org/-/epics/5105) * **Why?** Modifying internal instance state makes test fragile and leaks implementation details to the test * **How?** Each case should be approached individually :cry: * [ ] [Remove spying on Vue components methods](https://gitlab.com/groups/gitlab-org/-/epics/5106) * **Why?** Modifying internal instance behavior decreases test value and leaks implementation details to the test * **How?** Each case should be approached individually :cry: * [ ] Implement eslint rules to prevent most annoying issues * **Why?** Everything what could be automated should be automated * [ ] https://gitlab.com/gitlab-org/frontend/eslint-plugin/-/issues/12 * [x] https://gitlab.com/gitlab-org/frontend/eslint-plugin/-/issues/9 * [x] Update docs to reflect recent changes * [x] [Simplify our tests with `enableAutoDestroy`](https://gitlab.com/groups/gitlab-org/-/epics/8915) * **Why?** teardown of wrappers happens in each test we use. We could automate it with new VTU feature * **How?** Need additional research. Potentially could be done with codemod * [x] Get rid of old callback style tests, replace it with promise-based * [ ] [Get rid of `setData` calls and `data()` as mount option in Vue testing suite](https://gitlab.com/groups/gitlab-org/-/epics/7330)