Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit da7ee44

Browse files
author
Valentin Hervieu
committed
test(keyboard-controls): Handle all simple cases
Also refactor the tests architecture to have real tests interacting from outside the directive.
1 parent c644f7e commit da7ee44

File tree

2 files changed

+115
-38
lines changed

2 files changed

+115
-38
lines changed

‎src/rzslider.js

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878
return factory;
7979
})
8080

81-
.value('rzThrottle',
81+
.factory('rzThrottle', function($timeout) {
8282
/**
8383
* rzThrottle
8484
*
@@ -89,7 +89,7 @@
8989
* @param {ThrottleOptions} options
9090
* @returns {Function}
9191
*/
92-
function throttle(func, wait, options) {
92+
return function(func, wait, options) {
9393
'use strict';
9494
var getTime = (Date.now || function() {
9595
return new Date().getTime();
@@ -113,17 +113,18 @@
113113
context = this;
114114
args = arguments;
115115
if (remaining <= 0) {
116-
clearTimeout(timeout);
116+
$timeout.cancel(timeout);
117117
timeout = null;
118118
previous = now;
119119
result = func.apply(context, args);
120120
context = args = null;
121121
} else if (!timeout && options.trailing !== false) {
122-
timeout = setTimeout(later, remaining);
122+
timeout = $timeout(later, remaining);
123123
}
124124
return result;
125125
};
126-
})
126+
}
127+
})
127128

128129
.factory('RzSlider', function($timeout, $document, $window, $compile, RzSliderOptions, rzThrottle) {
129130
'use strict';
@@ -348,15 +349,15 @@
348349
}, true);
349350

350351
this.scope.$watch('rzSliderModel', function(newValue, oldValue) {
351-
if(self.internalChange)
352+
if (self.internalChange)
352353
return;
353354
if (newValue === oldValue)
354355
return;
355356
thrLow();
356357
});
357358

358359
this.scope.$watch('rzSliderHigh', function(newValue, oldValue) {
359-
if(self.internalChange)
360+
if (self.internalChange)
360361
return;
361362
if (newValue === oldValue)
362363
return;
@@ -1574,7 +1575,7 @@
15741575
},
15751576

15761577
link: function(scope, elem) {
1577-
scope.service = new RzSlider(scope, elem); //attach on scope so we can test it
1578+
scope.slider = new RzSlider(scope, elem); //attach on scope so we can test it
15781579
}
15791580
};
15801581
});

‎tests/spec/rz-slider-service-test.js

Lines changed: 106 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,86 +5,162 @@ describe('rzslider - ', function() {
55
$rootScope,
66
scope,
77
$compile,
8+
$timeout,
89
element,
9-
service;
10+
slider;
1011
beforeEach(module('rzModule'));
1112
beforeEach(module('appTemplates'));
1213

13-
beforeEach(inject(function(_RzSlider_, _$rootScope_, _$compile_) {
14+
beforeEach(inject(function(_RzSlider_, _$rootScope_, _$compile_, _$timeout_) {
1415
RzSlider = _RzSlider_;
1516
$rootScope = _$rootScope_;
1617
$compile = _$compile_;
18+
$timeout = _$timeout_;
1719
}));
1820

19-
describe('initialisation', function() {
21+
describe('single slider initialisation', function() {
2022
beforeEach(function() {
21-
var slider = {
23+
var sliderConf = {
2224
value: 10,
2325
options: {
2426
floor: 0,
25-
ceil: 1000,
26-
step: 100
27+
ceil: 100,
28+
step: 10
2729
}
2830
};
29-
createSlider(slider);
31+
createSlider(sliderConf);
3032
});
33+
3134
it('should exist compiled', function() {
3235
expect(element.find('span')).to.have.length(11);
3336
});
37+
38+
it('should round the model value to the step', function() {
39+
scope.slider.value = 54;
40+
scope.$digest();
41+
expect(scope.slider.value).to.equal(50);
42+
43+
scope.slider.value = 55;
44+
scope.$digest();
45+
$timeout.flush(); //to flush the throttle function
46+
expect(scope.slider.value).to.equal(60);
47+
});
3448
});
3549

3650
describe('keyboard controls', function() {
37-
beforeEach(function() {
38-
var slider = {
51+
52+
describe('simple cases', function() {
53+
beforeEach(function() {
54+
var sliderConf = {
55+
value: 100,
56+
options: {
57+
floor: 0,
58+
ceil: 200
59+
}
60+
};
61+
createSlider(sliderConf);
62+
});
63+
64+
it('should increment by 1 when RIGHT is pressed', function() {
65+
slider.minH.triggerHandler('focus');
66+
pressKeydown(slider.minH, 'RIGHT');
67+
expect(scope.slider.value).to.equal(101);
68+
});
69+
70+
it('should decrement by 1 when LEFT is pressed', function() {
71+
slider.minH.triggerHandler('focus');
72+
pressKeydown(slider.minH, 'LEFT');
73+
expect(scope.slider.value).to.equal(99);
74+
});
75+
76+
it('should increment by 10% when PAGEUP is pressed', function() {
77+
slider.minH.triggerHandler('focus');
78+
pressKeydown(slider.minH, 'PAGEUP');
79+
expect(scope.slider.value).to.equal(120);
80+
});
81+
82+
it('should decrement by 10% when PAGEDOWN is pressed', function() {
83+
slider.minH.triggerHandler('focus');
84+
pressKeydown(slider.minH, 'PAGEDOWN');
85+
expect(scope.slider.value).to.equal(80);
86+
});
87+
88+
it('should set value to min when HOME is pressed', function() {
89+
slider.minH.triggerHandler('focus');
90+
pressKeydown(slider.minH, 'HOME');
91+
expect(scope.slider.value).to.equal(0);
92+
});
93+
94+
it('set value to max when END is pressed', function() {
95+
slider.minH.triggerHandler('focus');
96+
pressKeydown(slider.minH, 'END');
97+
expect(scope.slider.value).to.equal(200);
98+
});
99+
});
100+
101+
it('should not go below 0', function() {
102+
var sliderConf = {
39103
value: 10,
40104
options: {
41105
floor: 0,
42106
ceil: 1000,
43-
step: 100
107+
step: 10
44108
}
45109
};
46-
createSlider(slider);
47-
});
48-
49-
it('should trigger a left arrow respecting step values and not go below 0', function() {
50-
var event = pressLeftArrow();
51-
service.onPointerFocus(element, 'rzSliderModel', event);
52-
service.onKeyboardEvent(event);
110+
createSlider(sliderConf);
111+
slider.minH.triggerHandler('focus');
112+
pressKeydown(slider.minH, 'PAGEDOWN');
53113
expect(scope.slider.value).to.equal(0);
54114
});
55115

56-
function pressLeftArrow() {
57-
var evt = document.createEvent('CustomEvent'); // MUST be 'CustomEvent'
58-
evt.initCustomEvent('keydown', false, false, null);
59-
evt.which = 37;
60-
return evt;
116+
function pressKeydown(element, key, oldAPI) {
117+
key = key.toUpperCase();
118+
var event = {
119+
type: 'keydown'
120+
};
121+
var keys = {
122+
'UP': 38,
123+
'DOWN': 40,
124+
'LEFT': 37,
125+
'RIGHT': 39,
126+
'PAGEUP': 33,
127+
'PAGEDOWN': 34,
128+
'HOME': 36,
129+
'END': 35
130+
};
131+
var keyCode = keys[key];
132+
if (oldAPI)
133+
eent.which = keyCode;
134+
else event.keyCode = keyCode;
135+
element.triggerHandler(event);
61136
}
62137
});
63138

64139
function createSlider(sliderObj) {
65-
scope = $rootScope.$new();
66-
scope.slider = sliderObj;
67140
var template = '';
68141
if (sliderObj.options)
69142
template = '<rzslider rz-slider-model="slider.value" rz-slider-options="slider.options"></rzslider>';
70143
else
71144
template = '<rzslider rz-slider-model="slider.value"></rzslider>';
72-
element = $compile(template)(scope);
73-
scope.$apply();
74-
service = element.isolateScope().service;
145+
initSlider(sliderObj, template);
75146
}
76147

77148
function createRangeSlider(sliderObj) {
78-
scope = $rootScope.$new();
79-
scope.slider = sliderObj;
80149
var template = '';
81150
if (sliderObj.options)
82151
template = '<rzslider rz-slider-model="slider.min" rz-slider-high="slider.max"' +
83152
'rz-slider-options="slider.options"></rzslider>';
84153
else
85154
template = '<rzslider rz-slider-model="slider.value" rz-slider-high="slider.max"></rzslider>';
155+
initSlider(sliderObj, template);
156+
}
157+
158+
function initSlider(sliderObj, template) {
159+
scope = $rootScope.$new();
160+
scope.slider = sliderObj;
86161
element = $compile(template)(scope);
87162
scope.$apply();
88-
service = element.isolateScope().service;
163+
slider = element.isolateScope().slider;
164+
$timeout.flush();
89165
}
90166
});

0 commit comments

Comments
 (0)