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
|
import { GlLink, GlIcon, GlBadge } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import AgentIntegrationStatusRow from '~/clusters/agents/components/agent_integration_status_row.vue';
const defaultProps = {
text: 'Default integration status',
};
describe('IntegrationStatus', () => {
let wrapper;
const createWrapper = ({ props = {}, glFeatures = {} } = {}) => {
wrapper = shallowMount(AgentIntegrationStatusRow, {
propsData: {
...defaultProps,
...props,
},
provide: {
glFeatures,
},
});
};
const findLink = () => wrapper.findComponent(GlLink);
const findIcon = () => wrapper.findComponent(GlIcon);
const findBadge = () => wrapper.findComponent(GlBadge);
afterEach(() => {
wrapper.destroy();
});
describe('icon', () => {
const icon = 'status-success';
const iconClass = 'text-success-500';
it.each`
props | iconName | iconClassName
${{ icon, iconClass }} | ${icon} | ${iconClass}
${{ icon }} | ${icon} | ${'text-info'}
${{ iconClass }} | ${'information'} | ${iconClass}
${null} | ${'information'} | ${'text-info'}
`('displays correct icon when props are $props', ({ props, iconName, iconClassName }) => {
createWrapper({ props });
expect(findIcon().props('name')).toBe(iconName);
expect(findIcon().attributes('class')).toContain(iconClassName);
});
});
describe('helpUrl', () => {
it('displays a link with the correct help url when provided in props', () => {
const props = {
helpUrl: 'help-page-path',
};
createWrapper({ props });
expect(findLink().attributes('href')).toBe(props.helpUrl);
expect(findLink().text()).toBe(defaultProps.text);
});
it("displays the text without a link when it's not provided", () => {
createWrapper();
expect(findLink().exists()).toBe(false);
expect(wrapper.text()).toBe(defaultProps.text);
});
});
describe('badge', () => {
it('does not display premium feature badge when featureName is not provided', () => {
createWrapper();
expect(findBadge().exists()).toBe(false);
});
it('does not display premium feature badge when featureName is provided and is available for the project', () => {
const props = { featureName: 'feature' };
const glFeatures = { feature: true };
createWrapper({ props, glFeatures });
expect(findBadge().exists()).toBe(false);
});
it('displays premium feature badge when featureName is provided and is not available for the project', () => {
const props = { featureName: 'feature' };
const glFeatures = { feature: false };
createWrapper({ props, glFeatures });
expect(findBadge().props()).toMatchObject({
icon: 'license',
variant: 'tier',
size: 'md',
});
expect(findBadge().text()).toBe(wrapper.vm.$options.i18n.premiumTitle);
});
});
});
|
