Commit fa5c3657 authored by Marcel Amirault's avatar Marcel Amirault Committed by Brandon Labuschagne

Fix tooltip spec tests

Mock the directive on the specs so that we
can test that the tooltip is working properly.
parent aa1dd6f5
<script>
import { GlIcon } from '@gitlab/ui';
import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
import { sprintf, s__ } from '~/locale';
import tooltip from '~/vue_shared/directives/tooltip';
export default {
directives: {
tooltip,
GlTooltip: GlTooltipDirective,
},
components: {
GlIcon,
......@@ -91,25 +90,20 @@ export default {
<a
v-for="pipeline in linkedPipelinesTrimmed"
:key="pipeline.id"
v-tooltip
v-gl-tooltip="{ title: pipelineTooltipText(pipeline) }"
:href="pipeline.path"
:title="pipelineTooltipText(pipeline)"
:class="triggerButtonClass(pipeline.details.status.group)"
class="linked-pipeline-mini-item"
data-placement="top"
data-container="body"
>
<gl-icon :name="getStatusIcon(pipeline.details.status.icon)" />
</a>
<a
v-if="shouldRenderCounter"
v-tooltip
v-gl-tooltip="{ title: counterTooltipText }"
:title="counterTooltipText"
:href="pipelinePath"
class="linked-pipelines-counter linked-pipeline-mini-item"
data-placement="top"
data-container="body"
>
{{ counterLabel }}
</a>
......
import Vue from 'vue';
import LinkedPipelinesMiniList from 'ee/vue_shared/components/linked_pipelines_mini_list.vue';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import mockData from './linked_pipelines_mock_data';
const ListComponent = Vue.extend(LinkedPipelinesMiniList);
......@@ -13,6 +14,9 @@ describe('Linked pipeline mini list', () => {
propsData: {
triggeredBy: [mockData.triggered_by],
},
directives: {
GlTooltip: createMockDirective(),
},
}).$mount();
});
......@@ -46,8 +50,9 @@ describe('Linked pipeline mini list', () => {
it('should have an activated tooltip', () => {
const itemElement = component.$el.querySelector('.linked-pipeline-mini-item');
const tooltip = getBinding(itemElement, 'gl-tooltip');
expect(itemElement.getAttribute('data-original-title')).toBe('GitLabCE - running');
expect(tooltip.value.title).toBe('GitLabCE - running');
});
it('should correctly set is-upstream', () => {
......@@ -70,6 +75,9 @@ describe('Linked pipeline mini list', () => {
triggered: mockData.triggered,
pipelinePath: 'my/pipeline/path',
},
directives: {
GlTooltip: createMockDirective(),
},
}).$mount();
});
......@@ -100,8 +108,9 @@ describe('Linked pipeline mini list', () => {
it('should have prepped tooltips', () => {
const itemElement = component.$el.querySelectorAll('.linked-pipeline-mini-item')[2];
const tooltip = getBinding(itemElement, 'gl-tooltip');
expect(itemElement.getAttribute('data-original-title')).toBe('GitLabCE - running');
expect(tooltip.value.title).toBe('GitLabCE - running');
});
it('should correctly set is-downstream', () => {
......@@ -128,11 +137,10 @@ describe('Linked pipeline mini list', () => {
});
it('should render the correct counterTooltipText', () => {
expect(
component.$el
.querySelector('.linked-pipelines-counter')
.getAttribute('data-original-title'),
).toBe(component.counterTooltipText);
const counter = component.$el.querySelector('.linked-pipelines-counter');
const tooltip = getBinding(counter, 'gl-tooltip');
expect(tooltip.value.title).toBe(component.counterTooltipText);
});
});
});
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