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
|
import { GlBadge } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import { RUNNER_TAG_BADGE_VARIANT } from '~/runner/constants';
import RunnerTag from '~/runner/components/runner_tag.vue';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
const mockTag = 'tag1';
describe('RunnerTag', () => {
let wrapper;
const findBadge = () => wrapper.findComponent(GlBadge);
const getTooltipValue = () => getBinding(findBadge().element, 'gl-tooltip').value;
const setDimensions = ({ scrollWidth, offsetWidth }) => {
jest.spyOn(findBadge().element, 'scrollWidth', 'get').mockReturnValue(scrollWidth);
jest.spyOn(findBadge().element, 'offsetWidth', 'get').mockReturnValue(offsetWidth);
// Mock trigger resize
getBinding(findBadge().element, 'gl-resize-observer').value();
};
const createComponent = ({ props = {} } = {}) => {
wrapper = shallowMount(RunnerTag, {
propsData: {
tag: mockTag,
...props,
},
directives: {
GlTooltip: createMockDirective(),
GlResizeObserver: createMockDirective(),
},
});
};
beforeEach(() => {
createComponent();
});
afterEach(() => {
wrapper.destroy();
});
it('Displays tag text', () => {
expect(wrapper.text()).toBe(mockTag);
});
it('Displays tags with correct style', () => {
expect(findBadge().props()).toMatchObject({
size: 'sm',
variant: RUNNER_TAG_BADGE_VARIANT,
});
});
it('Displays tags with md size', () => {
createComponent({
props: { size: 'md' },
});
expect(findBadge().props('size')).toBe('md');
});
it.each`
case | scrollWidth | offsetWidth | expectedTooltip
${'overflowing'} | ${110} | ${100} | ${mockTag}
${'not overflowing'} | ${90} | ${100} | ${''}
${'almost overflowing'} | ${100} | ${100} | ${''}
`(
'Sets "$expectedTooltip" as tooltip when $case',
async ({ scrollWidth, offsetWidth, expectedTooltip }) => {
setDimensions({ scrollWidth, offsetWidth });
await nextTick();
expect(getTooltipValue()).toBe(expectedTooltip);
},
);
});
|
