Skip to content

bootstrap-vue-upgrade: Mock gitlab-ui tooltip directive and component

What does this MR do (and why)?

gitlab-ui tooltip component is based on bootstrap-vue tooltip component. Starting with bootstrap-vue 2.0, testing Vue components that use BV tooltip requires to attach the component under test to the document object using vue-test-utils attachToDocument mounting option. It also requires setting the sync option to true.

This change affected a significant amount of unit tests in GitLab codebase. These effects impede GitLab from upgrading to bootstrap-vue 2.0. To address this problem we first attempted to fix all the affected tests. The list is broken tests is located in !18913 (merged).

Over time, more tests appeared broken as they were using the tooltip directive too. The goal to fix broken tests became a moving target, so we desisted. This new approach mocks the tooltip directive and tooltip component to decouple the unit tests from the bootstrap-vue dependency.

Why did many assertions changed from data-original-title to title?

When Bootstrap-vue tooltip directive is bound, it removes the title attribute of the element where it is attached and replaces it with a data-original-title attribute. This behavior does not exist anymore in bootstrap-vue 2.0.0, and it does not exist in the gitlab-ui mock tooltip. Because of that, we replaced data-original-title with title in those assertions.

References:

Edited by 🤖 GitLab Bot 🤖

Merge request reports