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
|
import * as badgeHelper from '~/image_diff/helpers/badge_helper';
import * as mockData from '../mock_data';
describe('badge helper', () => {
const { coordinate, noteId, badgeText, badgeNumber } = mockData;
let containerEl;
let buttonEl;
beforeEach(() => {
containerEl = document.createElement('div');
});
describe('createImageBadge', () => {
beforeEach(() => {
buttonEl = badgeHelper.createImageBadge(noteId, coordinate);
});
it('should create button', () => {
expect(buttonEl.tagName).toEqual('BUTTON');
expect(buttonEl.getAttribute('type')).toEqual('button');
});
it('should set disabled attribute', () => {
expect(buttonEl.hasAttribute('disabled')).toEqual(true);
});
it('should set noteId', () => {
expect(buttonEl.dataset.noteId).toEqual(noteId);
});
it('should set coordinate', () => {
expect(buttonEl.style.left).toEqual(`${coordinate.x}px`);
expect(buttonEl.style.top).toEqual(`${coordinate.y}px`);
});
describe('classNames', () => {
it('should set .js-image-badge by default', () => {
expect(buttonEl.className).toEqual('js-image-badge');
});
it('should add additional class names if parameter is passed', () => {
const classNames = ['first-class', 'second-class'];
buttonEl = badgeHelper.createImageBadge(noteId, coordinate, classNames);
expect(buttonEl.className).toEqual(classNames.concat('js-image-badge').join(' '));
});
});
});
describe('addImageBadge', () => {
beforeEach(() => {
badgeHelper.addImageBadge(containerEl, {
coordinate,
badgeText,
noteId,
});
buttonEl = containerEl.querySelector('button');
});
it('should appends button to container', () => {
expect(buttonEl).toBeDefined();
});
it('should set the badge text', () => {
expect(buttonEl.innerText).toEqual(badgeText);
});
it('should set the button coordinates', () => {
expect(buttonEl.style.left).toEqual(`${coordinate.x}px`);
expect(buttonEl.style.top).toEqual(`${coordinate.y}px`);
});
it('should set the button noteId', () => {
expect(buttonEl.dataset.noteId).toEqual(noteId);
});
});
describe('addImageCommentBadge', () => {
beforeEach(() => {
badgeHelper.addImageCommentBadge(containerEl, {
coordinate,
noteId,
});
buttonEl = containerEl.querySelector('button');
});
it('should append icon button to container', () => {
expect(buttonEl).toBeDefined();
});
it('should create icon comment button', () => {
const iconEl = buttonEl.querySelector('svg');
expect(iconEl).toBeDefined();
});
});
describe('addAvatarBadge', () => {
let avatarBadgeEl;
beforeEach(() => {
containerEl.innerHTML = `
<div id="${noteId}">
<div class="badge hidden">
</div>
</div>
`;
badgeHelper.addAvatarBadge(containerEl, {
detail: {
noteId,
badgeNumber,
},
});
avatarBadgeEl = containerEl.querySelector(`#${noteId} .badge`);
});
it('should update badge number', () => {
expect(avatarBadgeEl.innerText).toEqual(badgeNumber.toString());
});
it('should remove hidden class', () => {
expect(avatarBadgeEl.classList.contains('hidden')).toEqual(false);
});
});
});
|
