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
154
155
156
|
/* eslint-env qunit */
import ClickableComponent from '../../src/js/clickable-component.js';
import TestHelpers from './test-helpers.js';
import * as Events from '../../src/js/utils/events.js';
QUnit.module('ClickableComponent');
QUnit.test('should create a div with role="button"', function(assert) {
assert.expect(2);
const player = TestHelpers.makePlayer({});
const testClickableComponent = new ClickableComponent(player);
const el = testClickableComponent.createEl();
assert.equal(el.nodeName.toLowerCase(), 'div', 'the name of the element is "div"');
assert.equal(el.getAttribute('role').toLowerCase(), 'button', 'the role of the element is "button"');
testClickableComponent.dispose();
player.dispose();
});
QUnit.test('should be enabled/disabled', function(assert) {
assert.expect(3);
const player = TestHelpers.makePlayer({});
const testClickableComponent = new ClickableComponent(player);
assert.equal(testClickableComponent.hasClass('vjs-disabled'), false, 'ClickableComponent defaults to enabled');
testClickableComponent.disable();
assert.equal(testClickableComponent.hasClass('vjs-disabled'), true, 'ClickableComponent is disabled');
testClickableComponent.enable();
assert.equal(testClickableComponent.hasClass('vjs-disabled'), false, 'ClickableComponent is enabled');
testClickableComponent.dispose();
player.dispose();
});
QUnit.test('handleClick should not be triggered when disabled', function(assert) {
let clicks = 0;
class TestClickableComponent extends ClickableComponent {
handleClick() {
clicks++;
}
}
const player = TestHelpers.makePlayer({});
const testClickableComponent = new TestClickableComponent(player);
const el = testClickableComponent.el();
// 1st click
Events.trigger(el, 'click');
assert.equal(clicks, 1, 'click on enabled ClickableComponent is handled');
testClickableComponent.disable();
// No click should happen.
Events.trigger(el, 'click');
assert.equal(clicks, 1, 'click on disabled ClickableComponent is not handled');
testClickableComponent.enable();
// 2nd Click
Events.trigger(el, 'click');
assert.equal(clicks, 2, 'click on re-enabled ClickableComponent is handled');
testClickableComponent.dispose();
player.dispose();
});
QUnit.test('handleClick should not be triggered more than once when enabled', function(assert) {
let clicks = 0;
class TestClickableComponent extends ClickableComponent {
handleClick() {
clicks++;
}
}
const player = TestHelpers.makePlayer({});
const testClickableComponent = new TestClickableComponent(player);
const el = testClickableComponent.el();
testClickableComponent.enable();
// Click should still be handled just once
Events.trigger(el, 'click');
assert.equal(clicks, 1, 'no additional click handler when already enabled ClickableComponent has been enabled again');
testClickableComponent.dispose();
player.dispose();
});
QUnit.test('handleClick should use handler from options', function(assert) {
let clicks = 0;
const player = TestHelpers.makePlayer({});
const testClickableComponent = new ClickableComponent(player, {
clickHandler() {
clicks++;
}
});
const el = testClickableComponent.el();
Events.trigger(el, 'click');
assert.equal(clicks, 1, 'options handler was called');
testClickableComponent.dispose();
player.dispose();
});
QUnit.test('language change should localize its text', function(assert) {
assert.expect(2);
const player = TestHelpers.makePlayer({
languages: {
es: {
Play: 'Juego'
},
en: {
Play: 'Play'
}
}
});
const testClickableComponent = new ClickableComponent(player);
testClickableComponent.controlText_ = 'Play';
const el = testClickableComponent.createEl();
player.language('en');
assert.equal(el.querySelector('.vjs-control-text').textContent, 'Play', 'text localized');
player.language('es');
assert.equal(el.querySelector('.vjs-control-text').textContent, 'Juego', 'text localized');
testClickableComponent.dispose();
player.dispose();
});
QUnit.test('class and text should be settable from options', function(assert) {
const player = TestHelpers.makePlayer({});
const testClickableComponent = new ClickableComponent(player, {
className: 'class1',
controlText: 'some text'
});
assert.equal(testClickableComponent.controlText(), 'some text', 'text was set');
assert.ok(testClickableComponent.hasClass('class1'), 'class was set');
testClickableComponent.dispose();
player.dispose();
});
|
