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
|
import * as domHelper from '~/image_diff/helpers/dom_helper';
import * as mockData from '../mock_data';
describe('domHelper', () => {
const { imageMeta, badgeNumber } = mockData;
describe('setPositionDataAttribute', () => {
let containerEl;
let attributeAfterCall;
const position = {
myProperty: 'myProperty',
};
beforeEach(() => {
containerEl = document.createElement('div');
containerEl.dataset.position = JSON.stringify(position);
domHelper.setPositionDataAttribute(containerEl, imageMeta);
attributeAfterCall = JSON.parse(containerEl.dataset.position);
});
it('should set x, y, width, height', () => {
expect(attributeAfterCall.x).toEqual(imageMeta.x);
expect(attributeAfterCall.y).toEqual(imageMeta.y);
expect(attributeAfterCall.width).toEqual(imageMeta.width);
expect(attributeAfterCall.height).toEqual(imageMeta.height);
});
it('should not override other properties', () => {
expect(attributeAfterCall.myProperty).toEqual('myProperty');
});
});
describe('updateDiscussionAvatarBadgeNumber', () => {
let discussionEl;
beforeEach(() => {
discussionEl = document.createElement('div');
discussionEl.innerHTML = `
<a href="#" class="image-diff-avatar-link">
<div class="badge"></div>
</a>
`;
domHelper.updateDiscussionAvatarBadgeNumber(discussionEl, badgeNumber);
});
it('should update avatar badge number', () => {
expect(discussionEl.querySelector('.badge').innerText).toEqual(badgeNumber.toString());
});
});
describe('updateDiscussionBadgeNumber', () => {
let discussionEl;
beforeEach(() => {
discussionEl = document.createElement('div');
discussionEl.innerHTML = `
<div class="badge"></div>
`;
domHelper.updateDiscussionBadgeNumber(discussionEl, badgeNumber);
});
it('should update discussion badge number', () => {
expect(discussionEl.querySelector('.badge').innerText).toEqual(badgeNumber.toString());
});
});
describe('toggleCollapsed', () => {
let element;
let discussionNotesEl;
beforeEach(() => {
element = document.createElement('div');
element.innerHTML = `
<div class="discussion-notes">
<button></button>
<form class="discussion-form"></form>
</div>
`;
discussionNotesEl = element.querySelector('.discussion-notes');
});
describe('not collapsed', () => {
beforeEach(() => {
domHelper.toggleCollapsed({
currentTarget: element.querySelector('button'),
});
});
it('should add collapsed class', () => {
expect(discussionNotesEl.classList.contains('collapsed')).toEqual(true);
});
it('should force formEl to display none', () => {
const formEl = element.querySelector('.discussion-form');
expect(formEl.style.display).toEqual('none');
});
});
describe('collapsed', () => {
beforeEach(() => {
discussionNotesEl.classList.add('collapsed');
domHelper.toggleCollapsed({
currentTarget: element.querySelector('button'),
});
});
it('should remove collapsed class', () => {
expect(discussionNotesEl.classList.contains('collapsed')).toEqual(false);
});
it('should force formEl to display block', () => {
const formEl = element.querySelector('.discussion-form');
expect(formEl.style.display).toEqual('block');
});
});
});
});
|
