1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
import { shallowMount } from '@vue/test-utils';
import { GlIcon, GlLink } from '@gitlab/ui';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import component from '~/vue_shared/components/registry/metadata_item.vue';
import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
describe('Metadata Item', () => {
let wrapper;
const defaultProps = {
text: 'foo',
};
const mountComponent = (propsData = defaultProps) => {
wrapper = shallowMount(component, {
propsData,
directives: {
GlTooltip: createMockDirective(),
},
});
};
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
const findIcon = () => wrapper.find(GlIcon);
const findLink = (w = wrapper) => w.find(GlLink);
const findText = () => wrapper.find('[data-testid="metadata-item-text"]');
const findTooltipOnTruncate = (w = wrapper) => w.find(TooltipOnTruncate);
const findTextTooltip = () => wrapper.find('[data-testid="text-tooltip-container"]');
describe.each(['xs', 's', 'm', 'l', 'xl'])('size class', (size) => {
const className = `mw-${size}`;
it(`${size} is assigned correctly to text`, () => {
mountComponent({ ...defaultProps, size });
expect(findText().classes()).toContain(className);
});
it(`${size} is assigned correctly to link`, () => {
mountComponent({ ...defaultProps, link: 'foo', size });
expect(findTooltipOnTruncate().classes()).toContain(className);
});
});
describe('text', () => {
it('display a proper text', () => {
mountComponent();
expect(findText().text()).toBe(defaultProps.text);
});
it('uses tooltip_on_truncate', () => {
mountComponent();
const tooltip = findTooltipOnTruncate(findText());
expect(tooltip.exists()).toBe(true);
expect(tooltip.attributes('title')).toBe(defaultProps.text);
});
describe('with tooltip prop set to something', () => {
const textTooltip = 'foo';
it('hides tooltip_on_truncate', () => {
mountComponent({ ...defaultProps, textTooltip });
expect(findTooltipOnTruncate(findText()).exists()).toBe(false);
});
it('set the tooltip on the text', () => {
mountComponent({ ...defaultProps, textTooltip });
const tooltip = getBinding(findTextTooltip().element, 'gl-tooltip');
expect(tooltip.value.title).toBe(textTooltip);
});
});
});
describe('link', () => {
it('if a link prop is passed shows a link and hides the text', () => {
mountComponent({ ...defaultProps, link: 'bar' });
expect(findLink().exists()).toBe(true);
expect(findText().exists()).toBe(false);
expect(findLink().attributes('href')).toBe('bar');
});
it('uses tooltip_on_truncate', () => {
mountComponent({ ...defaultProps, link: 'bar' });
const tooltip = findTooltipOnTruncate();
expect(tooltip.exists()).toBe(true);
expect(tooltip.attributes('title')).toBe(defaultProps.text);
expect(findLink(tooltip).exists()).toBe(true);
});
it('hides the link and shows the test if a link prop is not passed', () => {
mountComponent();
expect(findText().exists()).toBe(true);
expect(findLink().exists()).toBe(false);
});
});
describe('icon', () => {
it('if a icon prop is passed shows a icon', () => {
mountComponent({ ...defaultProps, icon: 'pencil' });
expect(findIcon().exists()).toBe(true);
expect(findIcon().props('name')).toBe('pencil');
});
it('if a icon prop is not passed hides the icon', () => {
mountComponent();
expect(findIcon().exists()).toBe(false);
});
});
});
|
