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
|
import { shallowMount } from '@vue/test-utils';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import PackagePath from '~/packages/shared/components/package_path.vue';
describe('PackagePath', () => {
let wrapper;
const mountComponent = (propsData = { path: 'foo' }) => {
wrapper = shallowMount(PackagePath, {
propsData,
directives: {
GlTooltip: createMockDirective(),
},
});
};
const BASE_ICON = 'base-icon';
const ROOT_LINK = 'root-link';
const ROOT_CHEVRON = 'root-chevron';
const ELLIPSIS_ICON = 'ellipsis-icon';
const ELLIPSIS_CHEVRON = 'ellipsis-chevron';
const LEAF_LINK = 'leaf-link';
const findItem = (name) => wrapper.find(`[data-testid="${name}"]`);
const findTooltip = (w) => getBinding(w.element, 'gl-tooltip');
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
describe.each`
path | rootUrl | shouldExist | shouldNotExist
${'foo/bar'} | ${'/foo/bar'} | ${[]} | ${[ROOT_CHEVRON, ELLIPSIS_ICON, ELLIPSIS_CHEVRON, LEAF_LINK]}
${'foo/bar/baz'} | ${'/foo/bar'} | ${[ROOT_CHEVRON, LEAF_LINK]} | ${[ELLIPSIS_ICON, ELLIPSIS_CHEVRON]}
${'foo/bar/baz/baz2'} | ${'/foo/bar'} | ${[ROOT_CHEVRON, LEAF_LINK, ELLIPSIS_ICON, ELLIPSIS_CHEVRON]} | ${[]}
${'foo/bar/baz/baz2/bar2'} | ${'/foo/bar'} | ${[ROOT_CHEVRON, LEAF_LINK, ELLIPSIS_ICON, ELLIPSIS_CHEVRON]} | ${[]}
`('given path $path', ({ path, shouldExist, shouldNotExist, rootUrl }) => {
const pathPieces = path.split('/').slice(1);
const hasTooltip = shouldExist.includes(ELLIPSIS_ICON);
describe('not disabled component', () => {
beforeEach(() => {
mountComponent({ path });
});
it('should have a base icon', () => {
expect(findItem(BASE_ICON).exists()).toBe(true);
});
it('should have a root link', () => {
const root = findItem(ROOT_LINK);
expect(root.exists()).toBe(true);
expect(root.attributes('href')).toBe(rootUrl);
});
if (hasTooltip) {
it('should have a tooltip', () => {
const tooltip = findTooltip(findItem(ELLIPSIS_ICON));
expect(tooltip).toBeDefined();
expect(tooltip.value).toMatchObject({
title: path,
});
});
}
if (shouldExist.length) {
it.each(shouldExist)(`should have %s`, (element) => {
expect(findItem(element).exists()).toBe(true);
});
}
if (shouldNotExist.length) {
it.each(shouldNotExist)(`should not have %s`, (element) => {
expect(findItem(element).exists()).toBe(false);
});
}
if (shouldExist.includes(LEAF_LINK)) {
it('the last link should be the last piece of the path', () => {
const leaf = findItem(LEAF_LINK);
expect(leaf.attributes('href')).toBe(`/${path}`);
expect(leaf.text()).toBe(pathPieces[pathPieces.length - 1]);
});
}
});
describe('disabled component', () => {
beforeEach(() => {
mountComponent({ path, disabled: true });
});
it('root link is disabled', () => {
expect(findItem(ROOT_LINK).attributes('disabled')).toBe('true');
});
if (shouldExist.includes(LEAF_LINK)) {
it('the last link is disabled', () => {
expect(findItem(LEAF_LINK).attributes('disabled')).toBe('true');
});
}
});
});
});
|
