Skip to content

Commit 6cb6d42

Browse files
rreusserrreusser
committed
Add slider tests
1 parent 4a9edd0 commit 6cb6d42

File tree

6 files changed

+142
-21
lines changed

6 files changed

+142
-21
lines changed

‎src/components/sliders/attributes.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,15 @@ var stepsAttrs = {
4343
label: {
4444
valType: 'string',
4545
role: 'info',
46-
dflt: '',
4746
description: 'Sets the text label to appear on the slider'
47+
},
48+
value: {
49+
valType: 'string',
50+
role: 'info',
51+
description: [
52+
'Sets the value of the slider step, used to refer to the step programatically.',
53+
'Defaults to the slider label if not provided.'
54+
].join(' ')
4855
}
4956
};
5057

@@ -213,7 +220,7 @@ module.exports = {
213220
description: [
214221
'The amount of space, in pixels, between the current value label',
215222
'and the slider.'
216-
]
223+
].join(' ')
217224
},
218225

219226
prefix: {

‎src/components/sliders/constants.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ module.exports = {
6868
// but for other styles it wouldn't really need to be.
6969
stepInset: 10,
7070

71-
gripRadius: 3,
71+
gripRadius: 10,
7272
gripWidth: 20,
7373
gripHeight: 20,
7474
gripBorder: 20,

‎src/components/sliders/defaults.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -112,9 +112,9 @@ function stepsDefaults(sliderIn, sliderOut) {
112112

113113
coerce('method');
114114
coerce('args');
115-
coerce('label');
115+
coerce('label', 'step-' + i);
116+
coerce('value', valueOut.label);
116117

117-
valueOut._index = i;
118118
valuesOut.push(valueOut);
119119
}
120120

‎src/components/sliders/draw.js‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -62,19 +62,22 @@ module.exports = function draw(gd) {
6262
}
6363

6464
sliderGroups.each(function(sliderOpts) {
65+
// If it has fewer than two options, it's not really a slider:
66+
if(sliderOpts.steps.length < 2) return;
67+
6568
computeLabelSteps(sliderOpts);
6669

6770
drawSlider(gd, d3.select(this), sliderOpts);
6871

69-
makeInputProxy(gd, d3.select(this), sliderOpts);
72+
// makeInputProxy(gd, d3.select(this), sliderOpts);
7073

7174
});
7275
};
7376

74-
function makeInputProxy(gd, sliderGroup, sliderOpts) {
77+
/* function makeInputProxy(gd, sliderGroup, sliderOpts) {
7578
sliderOpts.inputProxy = gd._fullLayout._paperdiv.selectAll('input.' + constants.inputProxyClass)
7679
.data([0]);
77-
}
80+
}*/
7881

7982
// This really only just filters by visibility:
8083
function makeSliderData(fullLayout) {
@@ -83,7 +86,8 @@ function makeSliderData(fullLayout) {
8386

8487
for(var i = 0; i < contOpts.length; i++) {
8588
var item = contOpts[i];
86-
if(item.visible) sliderData.push(item);
89+
if(!item.visible || !item.steps.length) continue;
90+
sliderData.push(item);
8791
}
8892

8993
return sliderData;
@@ -228,7 +232,7 @@ function drawSlider(gd, sliderGroup, sliderOpts) {
228232
removeListeners(gd, sliderGroup, sliderOpts);
229233
attachListeners(gd, sliderGroup, sliderOpts);
230234

231-
setActive(gd, sliderGroup, sliderOpts, sliderOpts.active, true, false);
235+
setActive(gd, sliderGroup, sliderOpts, sliderOpts.active, false, false);
232236
}
233237

234238
function drawCurrentValue(sliderGroup, sliderOpts, valueOverride) {

‎test/jasmine/assets/fail_test.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,7 @@ module.exports = function failTest(error) {
2323
} else {
2424
expect(error).toBeUndefined();
2525
}
26+
if(error && error.stack) {
27+
console.error(error.stack);
28+
}
2629
};

‎test/jasmine/tests/sliders_test.js‎

Lines changed: 118 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
var Sliders = require('@src/components/sliders');
2-
// var constants = require('@src/components/sliders/constants');
2+
var constants = require('@src/components/sliders/constants');
33

4-
// var d3 = require('d3');
5-
// var Plotly = require('@lib');
6-
// var Lib = require('@src/lib');
7-
// var createGraphDiv = require('../assets/create_graph_div');
8-
// var destroyGraphDiv = require('../assets/destroy_graph_div');
4+
var d3 = require('d3');
5+
var Plotly = require('@lib');
6+
var Lib = require('@src/lib');
7+
var createGraphDiv = require('../assets/create_graph_div');
8+
var destroyGraphDiv = require('../assets/destroy_graph_div');
9+
var fail = require('../assets/fail_test');
910

1011
describe('sliders defaults', function() {
1112
'use strict';
@@ -56,6 +57,39 @@ describe('sliders defaults', function() {
5657
expect(layoutOut.sliders[2].active).toBeUndefined();
5758
});
5859

60+
it('should set the default values equal to the labels', function() {
61+
layoutIn.sliders = [{
62+
steps: [{
63+
method: 'relayout', args: [],
64+
label: 'Label #1',
65+
value: 'label-1'
66+
}, {
67+
method: 'update', args: [],
68+
label: 'Label #2'
69+
}, {
70+
method: 'animate', args: [],
71+
value: 'lacks-label'
72+
}]
73+
}];
74+
75+
supply(layoutIn, layoutOut);
76+
77+
expect(layoutOut.sliders[0].steps.length).toEqual(3);
78+
expect(layoutOut.sliders[0].steps).toEqual([{
79+
method: 'relayout', args: [],
80+
label: 'Label #1',
81+
value: 'label-1'
82+
}, {
83+
method: 'update', args: [],
84+
label: 'Label #2',
85+
value: 'Label #2'
86+
}, {
87+
method: 'animate', args: [],
88+
label: 'step-2',
89+
value: 'lacks-label'
90+
}]);
91+
});
92+
5993
it('should skip over non-object steps', function() {
6094
layoutIn.sliders = [{
6195
steps: [
@@ -74,12 +108,12 @@ describe('sliders defaults', function() {
74108
expect(layoutOut.sliders[0].steps[0]).toEqual({
75109
method: 'relayout',
76110
args: ['title', 'Hello World'],
77-
label: '',
78-
_index: 1
111+
label: 'step-1',
112+
value: 'step-1',
79113
});
80114
});
81115

82-
it('should skip over steps with array \'args\' field', function() {
116+
it('should skip over steps with non-array \'args\' field', function() {
83117
layoutIn.sliders = [{
84118
steps: [{
85119
method: 'restyle',
@@ -98,8 +132,8 @@ describe('sliders defaults', function() {
98132
expect(layoutOut.sliders[0].steps[0]).toEqual({
99133
method: 'relayout',
100134
args: ['title', 'Hello World'],
101-
label: '',
102-
_index: 1
135+
label: 'step-1',
136+
value: 'step-1',
103137
});
104138
});
105139

@@ -147,3 +181,76 @@ describe('sliders defaults', function() {
147181
expect(layoutOut.sliders[1].bgcolor).toEqual('red');
148182
});
149183
});
184+
185+
describe('update sliders interactions', function() {
186+
'use strict';
187+
188+
var mock = require('@mocks/sliders.json');
189+
190+
var gd;
191+
192+
beforeEach(function(done) {
193+
gd = createGraphDiv();
194+
195+
var mockCopy = Lib.extendDeep({}, mock);
196+
197+
Plotly.plot(gd, mockCopy.data, mockCopy.layout).then(done);
198+
});
199+
200+
afterEach(function() {
201+
Plotly.purge(gd);
202+
destroyGraphDiv();
203+
});
204+
205+
it('should draw only visible sliders', function(done) {
206+
expect(gd._fullLayout._pushmargin['slider-0']).toBeDefined();
207+
expect(gd._fullLayout._pushmargin['slider-1']).toBeDefined();
208+
209+
Plotly.relayout(gd, 'sliders[0].visible', false).then(function() {
210+
assertNodeCount('.' + constants.groupClassName, 1);
211+
expect(gd._fullLayout._pushmargin['slider-0']).toBeUndefined();
212+
expect(gd._fullLayout._pushmargin['slider-1']).toBeDefined();
213+
214+
return Plotly.relayout(gd, 'sliders[1]', null);
215+
})
216+
.then(function() {
217+
assertNodeCount('.' + constants.groupClassName, 0);
218+
expect(gd._fullLayout._pushmargin['slider-0']).toBeUndefined();
219+
expect(gd._fullLayout._pushmargin['slider-1']).toBeUndefined();
220+
221+
return Plotly.relayout(gd, {
222+
'sliders[0].visible': true,
223+
'sliders[1].visible': true
224+
});
225+
}).then(function() {
226+
assertNodeCount('.' + constants.groupClassName, 1);
227+
expect(gd._fullLayout._pushmargin['slider-0']).toBeDefined();
228+
expect(gd._fullLayout._pushmargin['slider-1']).toBeUndefined();
229+
230+
return Plotly.relayout(gd, {
231+
'sliders[1]': {
232+
steps: [{
233+
method: 'relayout',
234+
args: ['title', 'new title'],
235+
label: '1970'
236+
}, {
237+
method: 'relayout',
238+
args: ['title', 'new title'],
239+
label: '1971'
240+
}]
241+
}
242+
});
243+
})
244+
.then(function() {
245+
assertNodeCount('.' + constants.groupClassName, 2);
246+
expect(gd._fullLayout._pushmargin['slider-0']).toBeDefined();
247+
expect(gd._fullLayout._pushmargin['slider-1']).toBeDefined();
248+
})
249+
.catch(fail).then(done);
250+
});
251+
252+
function assertNodeCount(query, cnt) {
253+
expect(d3.selectAll(query).size()).toEqual(cnt);
254+
}
255+
256+
});

0 commit comments

Comments
 (0)