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
151
152
153
|
import Vue from 'vue';
import DiffLineGutterContent from '~/diffs/components/diff_line_gutter_content.vue';
import store from '~/mr_notes/stores';
import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
import {
MATCH_LINE_TYPE,
CONTEXT_LINE_TYPE,
OLD_NO_NEW_LINE_TYPE,
NEW_NO_NEW_LINE_TYPE,
} from '~/diffs/constants';
import discussionsMockData from '../mock_data/diff_discussions';
import diffFileMockData from '../mock_data/diff_file';
describe('DiffLineGutterContent', () => {
const getDiscussionsMockData = () => [Object.assign({}, discussionsMockData)];
const getDiffFileMock = () => Object.assign({}, diffFileMockData);
const createComponent = (options = {}) => {
const cmp = Vue.extend(DiffLineGutterContent);
const props = Object.assign({}, options);
props.fileHash = getDiffFileMock().fileHash;
props.contextLinesPath = '/context/lines/path';
return createComponentWithStore(cmp, store, props).$mount();
};
const setDiscussions = component => {
component.$store.dispatch('setInitialNotes', getDiscussionsMockData());
};
const resetDiscussions = component => {
component.$store.dispatch('setInitialNotes', []);
};
describe('computed', () => {
describe('isMatchLine', () => {
it('should return true for match line type', () => {
const component = createComponent({ lineType: MATCH_LINE_TYPE });
expect(component.isMatchLine).toEqual(true);
});
it('should return false for non-match line type', () => {
const component = createComponent({ lineType: CONTEXT_LINE_TYPE });
expect(component.isMatchLine).toEqual(false);
});
});
describe('isContextLine', () => {
it('should return true for context line type', () => {
const component = createComponent({ lineType: CONTEXT_LINE_TYPE });
expect(component.isContextLine).toEqual(true);
});
it('should return false for non-context line type', () => {
const component = createComponent({ lineType: MATCH_LINE_TYPE });
expect(component.isContextLine).toEqual(false);
});
});
describe('isMetaLine', () => {
it('should return true for meta line type', () => {
const component = createComponent({ lineType: NEW_NO_NEW_LINE_TYPE });
expect(component.isMetaLine).toEqual(true);
const component2 = createComponent({ lineType: OLD_NO_NEW_LINE_TYPE });
expect(component2.isMetaLine).toEqual(true);
});
it('should return false for non-meta line type', () => {
const component = createComponent({ lineType: MATCH_LINE_TYPE });
expect(component.isMetaLine).toEqual(false);
});
});
describe('lineHref', () => {
it('should prepend # to lineCode', () => {
const lineCode = 'LC_42';
const component = createComponent({ lineCode });
expect(component.lineHref).toEqual(`#${lineCode}`);
});
it('should return # if there is no lineCode', () => {
const component = createComponent({ lineCode: null });
expect(component.lineHref).toEqual('#');
});
});
describe('discussions, hasDiscussions, shouldShowAvatarsOnGutter', () => {
it('should return empty array when there is no discussion', () => {
const component = createComponent({ lineCode: 'LC_42' });
expect(component.discussions).toEqual([]);
expect(component.hasDiscussions).toEqual(false);
expect(component.shouldShowAvatarsOnGutter).toEqual(false);
});
it('should return discussions for the given lineCode', () => {
const lineCode = getDiffFileMock().highlightedDiffLines[1].lineCode;
const component = createComponent({ lineCode, showCommentButton: true });
setDiscussions(component);
expect(component.discussions).toEqual(getDiscussionsMockData());
expect(component.hasDiscussions).toEqual(true);
expect(component.shouldShowAvatarsOnGutter).toEqual(true);
resetDiscussions(component);
});
});
});
describe('template', () => {
it('should render three dots for context lines', () => {
const component = createComponent({
lineType: MATCH_LINE_TYPE,
});
expect(component.$el.querySelector('span').classList.contains('context-cell')).toEqual(true);
expect(component.$el.innerText).toEqual('...');
});
it('should render comment button', () => {
const component = createComponent({
showCommentButton: true,
});
Object.defineProperty(component, 'isLoggedIn', {
get() {
return true;
},
});
expect(component.$el.querySelector('.js-add-diff-note-button')).toBeDefined();
});
it('should render line link', () => {
const lineNumber = 42;
const lineCode = `LC_${lineNumber}`;
const component = createComponent({ lineNumber, lineCode });
const link = component.$el.querySelector('a');
expect(link.href.indexOf(`#${lineCode}`) > -1).toEqual(true);
expect(link.dataset.linenumber).toEqual(lineNumber.toString());
});
it('should render user avatars', () => {
const component = createComponent({
showCommentButton: true,
lineCode: getDiffFileMock().highlightedDiffLines[1].lineCode,
});
setDiscussions(component);
expect(component.$el.querySelector('.diff-comment-avatar-holders')).toBeDefined();
resetDiscussions(component);
});
});
});
|
