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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
import Vue from 'vue';
import repoFile from '~/repo/components/repo_file.vue';
import RepoStore from '~/repo/stores/repo_store';
describe('RepoFile', () => {
const updated = 'updated';
const file = {
icon: 'icon',
url: 'url',
name: 'name',
lastCommitMessage: 'message',
lastCommitUpdate: Date.now(),
level: 10,
};
const activeFile = {
pageTitle: 'pageTitle',
url: 'url',
};
const otherFile = {
html: '<p class="file-content">html</p>',
pageTitle: 'otherpageTitle',
};
function createComponent(propsData) {
const RepoFile = Vue.extend(repoFile);
return new RepoFile({
propsData,
}).$mount();
}
it('renders link, icon, name and last commit details', () => {
const RepoFile = Vue.extend(repoFile);
const vm = new RepoFile({
propsData: {
file,
activeFile,
},
});
spyOn(vm, 'timeFormated').and.returnValue(updated);
vm.$mount();
const name = vm.$el.querySelector('.repo-file-name');
const fileIcon = vm.$el.querySelector('.file-icon');
expect(vm.$el.classList.contains('active')).toBeTruthy();
expect(vm.$el.querySelector(`.${file.icon}`).style.marginLeft).toEqual('100px');
expect(name.title).toEqual(file.url);
expect(name.href).toMatch(`/${file.url}`);
expect(name.textContent.trim()).toEqual(file.name);
expect(vm.$el.querySelector('.commit-message').textContent.trim()).toBe(file.lastCommitMessage);
expect(vm.$el.querySelector('.commit-update').textContent.trim()).toBe(updated);
expect(fileIcon.classList.contains(file.icon)).toBeTruthy();
expect(fileIcon.style.marginLeft).toEqual(`${file.level * 10}px`);
});
it('does render if hasFiles is true and is loading tree', () => {
const vm = createComponent({
file,
activeFile,
loading: {
tree: true,
},
hasFiles: true,
});
expect(vm.$el.innerHTML).toBeTruthy();
expect(vm.$el.querySelector('.fa-spin.fa-spinner')).toBeFalsy();
});
it('sets the document title correctly', () => {
RepoStore.setActiveFiles(otherFile);
expect(document.title.trim()).toEqual(otherFile.pageTitle);
});
it('renders a spinner if the file is loading', () => {
file.loading = true;
const vm = createComponent({
file,
activeFile,
loading: {
tree: true,
},
hasFiles: true,
});
expect(vm.$el.innerHTML).toBeTruthy();
expect(vm.$el.querySelector('.fa-spin.fa-spinner').style.marginLeft).toEqual(`${file.level * 10}px`);
});
it('does not render if loading tree', () => {
const vm = createComponent({
file,
activeFile,
loading: {
tree: true,
},
});
expect(vm.$el.innerHTML).toBeFalsy();
});
it('does not render commit message and datetime if mini', () => {
const vm = createComponent({
file,
activeFile,
isMini: true,
});
expect(vm.$el.querySelector('.commit-message')).toBeFalsy();
expect(vm.$el.querySelector('.commit-update')).toBeFalsy();
});
it('does not set active class if file is active file', () => {
const vm = createComponent({
file,
activeFile: {},
});
expect(vm.$el.classList.contains('active')).toBeFalsy();
});
it('fires linkClicked when the link is clicked', () => {
const vm = createComponent({
file,
activeFile,
});
spyOn(vm, 'linkClicked');
vm.$el.querySelector('.repo-file-name').click();
expect(vm.linkClicked).toHaveBeenCalledWith(file);
});
describe('methods', () => {
describe('linkClicked', () => {
const vm = jasmine.createSpyObj('vm', ['$emit']);
it('$emits linkclicked with file obj', () => {
const theFile = {};
repoFile.methods.linkClicked.call(vm, theFile);
expect(vm.$emit).toHaveBeenCalledWith('linkclicked', theFile);
});
});
});
});
|
