Commit 20042c4f authored by Marcel Amirault's avatar Marcel Amirault Committed by Natalia Tepluhina

Replace vue_shared with GitLab UI tooltip in environment_actions.vue

parent ec4f2d8d
<script> <script>
import { GlButton, GlIcon, GlLoadingIcon } from '@gitlab/ui'; import { GlButton, GlIcon, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
import { __, s__, sprintf } from '~/locale'; import { __, s__, sprintf } from '~/locale';
import { formatTime } from '~/lib/utils/datetime_utility'; import { formatTime } from '~/lib/utils/datetime_utility';
import eventHub from '../event_hub'; import eventHub from '../event_hub';
import tooltip from '../../vue_shared/directives/tooltip';
export default { export default {
directives: { directives: {
tooltip, GlTooltip: GlTooltipDirective,
}, },
components: { components: {
GlButton, GlButton,
...@@ -70,13 +69,14 @@ export default { ...@@ -70,13 +69,14 @@ export default {
<template> <template>
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<gl-button <gl-button
v-tooltip v-gl-tooltip
:title="title" :title="title"
:aria-label="title" :aria-label="title"
:disabled="isLoading" :disabled="isLoading"
class="dropdown dropdown-new js-environment-actions-dropdown" class="dropdown dropdown-new js-environment-actions-dropdown"
data-container="body" data-container="body"
data-toggle="dropdown" data-toggle="dropdown"
data-testid="environment-actions-button"
> >
<span> <span>
<gl-icon name="play" /> <gl-icon name="play" />
......
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { TEST_HOST } from 'helpers/test_constants'; import { TEST_HOST } from 'helpers/test_constants';
import { GlLoadingIcon, GlIcon } from '@gitlab/ui'; import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import eventHub from '~/environments/event_hub'; import eventHub from '~/environments/event_hub';
import EnvironmentActions from '~/environments/components/environment_actions.vue'; import EnvironmentActions from '~/environments/components/environment_actions.vue';
describe('EnvironmentActions Component', () => { describe('EnvironmentActions Component', () => {
let vm; let vm;
const findEnvironmentActionsButton = () => vm.find('[data-testid="environment-actions-button"]');
beforeEach(() => { beforeEach(() => {
vm = shallowMount(EnvironmentActions, { propsData: { actions: [] } }); vm = shallowMount(EnvironmentActions, {
propsData: { actions: [] },
directives: {
GlTooltip: createMockDirective(),
},
});
}); });
afterEach(() => { afterEach(() => {
...@@ -23,6 +31,11 @@ describe('EnvironmentActions Component', () => { ...@@ -23,6 +31,11 @@ describe('EnvironmentActions Component', () => {
expect(vm.find('.dropdown-new').attributes('aria-label')).toEqual('Deploy to...'); 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', () => { describe('is loading', () => {
beforeEach(() => { beforeEach(() => {
vm.setData({ isLoading: true }); vm.setData({ isLoading: true });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment