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
123
124
125
126
127
128
129
130
131
132
133
134
|
import Vue from 'vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
import { visibilityOptions } from '~/pages/projects/shared/permissions/constants';
import ProjectVisibilityLevel, {
visibilityIconClass,
} from '~/vue_shared/components/projects_list/project_visibility_level.vue';
const createComponent = (props, defaultComponent = ProjectVisibilityLevel) => {
const Component = Vue.extend(defaultComponent);
return mountComponent(Component, props);
};
function expectIconAndDescription(dom, { icon, description }) {
expect(dom.$el.querySelector('i').getAttribute('class')).toContain(icon);
expect(dom.$el.getAttribute('title')).toBe(description);
}
let vm = '';
describe('ProjectVisibilityLevel', () => {
describe('visibilityIconClass', () => {
it(`returns 'fa-lock' for level '${visibilityOptions.PRIVATE}'`, () => {
expect(visibilityIconClass(visibilityOptions.PRIVATE)).toBe('fa-lock');
});
it(`returns 'fa-shield' for level '${visibilityOptions.INTERNAL}'`, () => {
expect(visibilityIconClass(visibilityOptions.INTERNAL)).toBe('fa-shield');
});
it(`returns 'fa-globe' for level '${visibilityOptions.PUBLIC}'`, () => {
expect(visibilityIconClass(visibilityOptions.PUBLIC)).toBe('fa-globe');
});
});
describe('computed', () => {});
describe('template', () => {
describe('renders a lock', () => {
const privateIcon = 'fa-lock';
const privateDescription = 'This is private';
beforeEach(() => {
vm = null;
});
afterEach(() => {
vm.$destroy();
});
it(`with level -1`, () => {
vm = createComponent({
level: -1,
description: privateDescription,
});
expectIconAndDescription(vm, { icon: privateIcon, description: privateDescription });
});
it(`with level 0`, () => {
vm = createComponent({
level: 0,
description: privateDescription,
});
expectIconAndDescription(vm, { icon: privateIcon, description: privateDescription });
});
it(`with level 5`, () => {
vm = createComponent({
level: 5,
description: privateDescription,
});
expectIconAndDescription(vm, { icon: privateIcon, description: privateDescription });
});
});
describe('renders a shield', () => {
const internalIcon = 'fa-shield';
const internalDescription = 'This is internal';
beforeEach(() => {
vm = null;
});
afterEach(() => {
vm.$destroy();
});
it(`with level 10`, () => {
vm = createComponent({
level: 10,
description: internalDescription,
});
expectIconAndDescription(vm, { icon: internalIcon, description: internalDescription });
});
it(`with level 15`, () => {
vm = createComponent({
level: 15,
description: internalDescription,
});
expectIconAndDescription(vm, { icon: internalIcon, description: internalDescription });
});
});
describe('renders a globe', () => {
const publicIcon = 'fa-globe';
const publicDescription = 'This is public 🚀⚡️';
beforeEach(() => {
vm = null;
});
afterEach(() => {
vm.$destroy();
});
it(`with level 20`, () => {
vm = createComponent({
level: 20,
description: publicDescription,
});
expectIconAndDescription(vm, { icon: publicIcon, description: publicDescription });
});
it(`with level 25`, () => {
vm = createComponent({
level: 25,
description: publicDescription,
});
expectIconAndDescription(vm, { icon: publicIcon, description: publicDescription });
});
});
});
});
|
