Merge branch...

Merge branch '228977-replace-vue_shared-tooltip-with-gitlab-ui-s-tooltip-in-app-assets-javascripts-environments' into 'master'

Replace vue_shared with GitLab UI tooltip in environment_actions.vue

See merge request gitlab-org/gitlab!44869

app/assets/javascripts/environments/components/environment_actions.vue

 <script>
-import { GlButton, GlIcon, GlLoadingIcon } from '@gitlab/ui';
+import { GlButton, GlIcon, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
 import { __, s__, sprintf } from '~/locale';
 import { formatTime } from '~/lib/utils/datetime_utility';
 import eventHub from '../event_hub';
-import tooltip from '../../vue_shared/directives/tooltip';
 
 export default {
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   components: {
     GlButton,
@@ -70,13 +69,14 @@ export default {
 <template>
   <div class="btn-group" role="group">
     <gl-button
-      v-tooltip
+      v-gl-tooltip
       :title="title"
       :aria-label="title"
       :disabled="isLoading"
       class="dropdown dropdown-new js-environment-actions-dropdown"
       data-container="body"
       data-toggle="dropdown"
+      data-testid="environment-actions-button"
     >
       <span>
         <gl-icon name="play" />

spec/frontend/environments/environment_actions_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { TEST_HOST } from 'helpers/test_constants';
 import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import eventHub from '~/environments/event_hub';
 import EnvironmentActions from '~/environments/components/environment_actions.vue';
 
 describe('EnvironmentActions Component', () => {
   let vm;
 
+  const findEnvironmentActionsButton = () => vm.find('[data-testid="environment-actions-button"]');
+
   beforeEach(() => {
-    vm = shallowMount(EnvironmentActions, { propsData: { actions: [] } });
+    vm = shallowMount(EnvironmentActions, {
+      propsData: { actions: [] },
+      directives: {
+        GlTooltip: createMockDirective(),
+      },
+    });
   });
 
   afterEach(() => {
@@ -23,6 +31,11 @@ describe('EnvironmentActions Component', () => {
     expect(vm.find('.dropdown-new').attributes('aria-label')).toEqual('Deploy to...');
   });
 
+  it('should render a tooltip', () => {
+    const tooltip = getBinding(findEnvironmentActionsButton().element, 'gl-tooltip');
+    expect(tooltip).toBeDefined();
+  });
+
   describe('is loading', () => {
     beforeEach(() => {
       vm.setData({ isLoading: true });