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
|
import { GlAvatar } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import component from '~/vue_shared/components/registry/title_area.vue';
describe('title area', () => {
let wrapper;
const findSubHeaderSlot = () => wrapper.find('[data-testid="sub-header"]');
const findRightActionsSlot = () => wrapper.find('[data-testid="right-actions"]');
const findMetadataSlot = name => wrapper.find(`[data-testid="${name}"]`);
const findTitle = () => wrapper.find('[data-testid="title"]');
const findAvatar = () => wrapper.find(GlAvatar);
const mountComponent = ({ propsData = { title: 'foo' }, slots } = {}) => {
wrapper = shallowMount(component, {
propsData,
slots: {
'sub-header': '<div data-testid="sub-header" />',
'right-actions': '<div data-testid="right-actions" />',
...slots,
},
});
};
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
describe('title', () => {
it('if slot is not present defaults to prop', () => {
mountComponent();
expect(findTitle().text()).toBe('foo');
});
it('if slot is present uses slot', () => {
mountComponent({
slots: {
title: 'slot_title',
},
});
expect(findTitle().text()).toBe('slot_title');
});
});
describe('avatar', () => {
it('is shown if avatar props exist', () => {
mountComponent({ propsData: { title: 'foo', avatar: 'baz' } });
expect(findAvatar().props('src')).toBe('baz');
});
it('is hidden if avatar props does not exist', () => {
mountComponent();
expect(findAvatar().exists()).toBe(false);
});
});
describe.each`
slotName | finderFunction
${'sub-header'} | ${findSubHeaderSlot}
${'right-actions'} | ${findRightActionsSlot}
`('$slotName slot', ({ finderFunction, slotName }) => {
it('exist when the slot is filled', () => {
mountComponent();
expect(finderFunction().exists()).toBe(true);
});
it('does not exist when the slot is empty', () => {
mountComponent({ slots: { [slotName]: '' } });
expect(finderFunction().exists()).toBe(false);
});
});
describe.each`
slotNames
${['metadata_foo']}
${['metadata_foo', 'metadata_bar']}
${['metadata_foo', 'metadata_bar', 'metadata_baz']}
`('$slotNames metadata slots', ({ slotNames }) => {
const slotMocks = slotNames.reduce((acc, current) => {
acc[current] = `<div data-testid="${current}" />`;
return acc;
}, {});
it('exist when the slot is present', async () => {
mountComponent({ slots: slotMocks });
await wrapper.vm.$nextTick();
slotNames.forEach(name => {
expect(findMetadataSlot(name).exists()).toBe(true);
});
});
});
});
|
