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
|
require('~/visibility_select');
(() => {
const VisibilitySelect = gl.VisibilitySelect;
describe('VisibilitySelect', function () {
const lockedElement = document.createElement('div');
lockedElement.dataset.helpBlock = 'lockedHelpBlock';
const checkedElement = document.createElement('div');
checkedElement.dataset.description = 'checkedDescription';
const mockElements = {
container: document.createElement('div'),
select: document.createElement('div'),
'.help-block': document.createElement('div'),
'.js-locked': lockedElement,
'option:checked': checkedElement,
};
beforeEach(function () {
spyOn(Element.prototype, 'querySelector').and.callFake(selector => mockElements[selector]);
});
describe('#constructor', function () {
beforeEach(function () {
this.visibilitySelect = new VisibilitySelect(mockElements.container);
});
it('sets the container member', function () {
expect(this.visibilitySelect.container).toEqual(mockElements.container);
});
it('queries and sets the helpBlock member', function () {
expect(Element.prototype.querySelector).toHaveBeenCalledWith('.help-block');
expect(this.visibilitySelect.helpBlock).toEqual(mockElements['.help-block']);
});
it('queries and sets the select member', function () {
expect(Element.prototype.querySelector).toHaveBeenCalledWith('select');
expect(this.visibilitySelect.select).toEqual(mockElements.select);
});
describe('if there is no container element provided', function () {
it('throws an error', function () {
expect(() => new VisibilitySelect()).toThrowError('VisibilitySelect requires a container element as argument 1');
});
});
});
describe('#init', function () {
describe('if there is a select', function () {
beforeEach(function () {
this.visibilitySelect = new VisibilitySelect(mockElements.container);
});
it('calls updateHelpText', function () {
spyOn(VisibilitySelect.prototype, 'updateHelpText');
this.visibilitySelect.init();
expect(this.visibilitySelect.updateHelpText).toHaveBeenCalled();
});
it('adds a change event listener', function () {
spyOn(this.visibilitySelect.select, 'addEventListener');
this.visibilitySelect.init();
expect(this.visibilitySelect.select.addEventListener.calls.argsFor(0)).toContain('change');
});
});
describe('if there is no select', function () {
beforeEach(function () {
mockElements.select = undefined;
this.visibilitySelect = new VisibilitySelect(mockElements.container);
this.visibilitySelect.init();
});
it('updates the helpBlock text to the locked `data-help-block` messaged', function () {
expect(this.visibilitySelect.helpBlock.textContent)
.toEqual(lockedElement.dataset.helpBlock);
});
afterEach(function () {
mockElements.select = document.createElement('div');
});
});
});
describe('#updateHelpText', function () {
beforeEach(function () {
this.visibilitySelect = new VisibilitySelect(mockElements.container);
this.visibilitySelect.init();
});
it('updates the helpBlock text to the selected options `data-description`', function () {
expect(this.visibilitySelect.helpBlock.textContent)
.toEqual(checkedElement.dataset.description);
});
});
});
})();
|
