11var Plotly = require ( '@lib/index' ) ;
22var Lib = require ( '@src/lib' ) ;
3+
34var RangeSlider = require ( '@src/components/rangeslider' ) ;
5+ var constants = require ( '@src/components/rangeslider/constants' ) ;
6+
47var createGraphDiv = require ( '../assets/create_graph_div' ) ;
58var destroyGraphDiv = require ( '../assets/destroy_graph_div' ) ;
69var mock = require ( '../../image/mocks/range_slider.json' ) ;
710var mouseEvent = require ( '../assets/mouse_event' ) ;
811
12+
913describe ( 'the range slider' , function ( ) {
1014
1115 var gd ,
@@ -14,6 +18,12 @@ describe('the range slider', function() {
1418
1519 var sliderY = 393 ;
1620
21+ function getRangeSlider ( ) {
22+ var className = constants . containerClassName ;
23+ return document . getElementsByClassName ( className ) [ 0 ] ;
24+ }
25+
26+
1727 describe ( 'when specified as visible' , function ( ) {
1828
1929 beforeEach ( function ( done ) {
@@ -22,8 +32,9 @@ describe('the range slider', function() {
2232 var mockCopy = Lib . extendDeep ( { } , mock ) ;
2333
2434 Plotly . plot ( gd , mockCopy . data , mockCopy . layout ) . then ( function ( ) {
25- rangeSlider = document . getElementsByClassName ( 'range-slider' ) [ 0 ] ;
35+ rangeSlider = getRangeSlider ( ) ;
2636 children = rangeSlider . children ;
37+
2738 done ( ) ;
2839 } ) ;
2940 } ) ;
@@ -65,14 +76,14 @@ describe('the range slider', function() {
6576
6677 expect ( rangeSlider . getAttribute ( 'data-min' ) ) . toEqual ( String ( + dataMinStart + diff ) ) ;
6778 expect ( maskMin . getAttribute ( 'width' ) ) . toEqual ( String ( diff ) ) ;
68- expect ( handleMin . getAttribute ( 'transform' ) ) . toBe ( 'translate(' + ( diff - 3 ) + ')' ) ;
79+ expect ( handleMin . getAttribute ( 'transform' ) ) . toBe ( 'translate(' + ( diff - 3 ) + ',0 )' ) ;
6980 } ) . then ( done ) ;
7081 } ) ;
7182
7283 function testTranslate1D ( node , val ) {
7384 var transformParts = node . getAttribute ( 'transform' ) . split ( '(' ) ;
7485 expect ( transformParts [ 0 ] ) . toEqual ( 'translate' ) ;
75- expect ( + transformParts [ 1 ] . split ( ')' ) [ 0 ] ) . toBeCloseTo ( val , 0 ) ;
86+ expect ( + transformParts [ 1 ] . split ( ',0 )' ) [ 0 ] ) . toBeCloseTo ( val , 0 ) ;
7687 }
7788
7889 it ( 'should react to resizing the maximum handle' , function ( done ) {
@@ -177,7 +188,7 @@ describe('the range slider', function() {
177188 it ( 'should not add the slider to the DOM by default' , function ( done ) {
178189 Plotly . plot ( gd , [ { x : [ 1 , 2 , 3 ] , y : [ 2 , 3 , 4 ] } ] , { } )
179190 . then ( function ( ) {
180- var rangeSlider = document . getElementsByClassName ( 'range-slider' ) [ 0 ] ;
191+ var rangeSlider = getRangeSlider ( ) ;
181192 expect ( rangeSlider ) . not . toBeDefined ( ) ;
182193 } )
183194 . then ( done ) ;
@@ -187,7 +198,7 @@ describe('the range slider', function() {
187198 Plotly . plot ( gd , [ { x : [ 1 , 2 , 3 ] , y : [ 2 , 3 , 4 ] } ] , { } )
188199 . then ( function ( ) { Plotly . relayout ( gd , 'xaxis.rangeslider' , 'exists' ) ; } )
189200 . then ( function ( ) {
190- var rangeSlider = document . getElementsByClassName ( 'range-slider' ) [ 0 ] ;
201+ var rangeSlider = getRangeSlider ( ) ;
191202 expect ( rangeSlider ) . toBeDefined ( ) ;
192203 } )
193204 . then ( done ) ;
@@ -197,7 +208,7 @@ describe('the range slider', function() {
197208 Plotly . plot ( gd , [ { x : [ 1 , 2 , 3 ] , y : [ 2 , 3 , 4 ] } ] , { } )
198209 . then ( function ( ) { Plotly . relayout ( gd , 'xaxis.rangeslider.visible' , true ) ; } )
199210 . then ( function ( ) {
200- var rangeSlider = document . getElementsByClassName ( 'range-slider' ) [ 0 ] ;
211+ var rangeSlider = getRangeSlider ( ) ;
201212 expect ( rangeSlider ) . toBeDefined ( ) ;
202213 } )
203214 . then ( done ) ;
@@ -207,7 +218,7 @@ describe('the range slider', function() {
207218 Plotly . plot ( gd , [ { x : [ 1 , 2 , 3 ] , y : [ 2 , 3 , 4 ] } ] , { xaxis : { rangeslider : { visible : true } } } )
208219 . then ( function ( ) { Plotly . relayout ( gd , 'xaxis.rangeslider.visible' , false ) ; } )
209220 . then ( function ( ) {
210- var rangeSlider = document . getElementsByClassName ( 'range-slider' ) [ 0 ] ;
221+ var rangeSlider = getRangeSlider ( ) ;
211222 expect ( rangeSlider ) . not . toBeDefined ( ) ;
212223 } )
213224 . then ( done ) ;
@@ -252,13 +263,14 @@ describe('the range slider', function() {
252263 thickness : 0.15 ,
253264 bgcolor : '#fff' ,
254265 borderwidth : 0 ,
255- bordercolor : '#444'
266+ bordercolor : '#444' ,
267+ _input : layoutIn . xaxis . rangeslider
256268 } ,
257269 _needsExpand : true
258270 } ,
259271 yaxis : {
260272 fixedrange : true
261- }
273+ } ,
262274 } ;
263275
264276 RangeSlider . handleDefaults ( layoutIn , layoutOut , axName , counterAxes ) ;
@@ -278,7 +290,8 @@ describe('the range slider', function() {
278290 thickness : 0.15 ,
279291 bgcolor : '#fff' ,
280292 borderwidth : 0 ,
281- bordercolor : '#444'
293+ bordercolor : '#444' ,
294+ _input : layoutIn . xaxis . rangeslider
282295 } ,
283296 _needsExpand : true
284297 } ,
@@ -310,7 +323,8 @@ describe('the range slider', function() {
310323 thickness : 0.15 ,
311324 bgcolor : '#fff' ,
312325 borderwidth : 0 ,
313- bordercolor : '#444'
326+ bordercolor : '#444' ,
327+ _input : layoutIn . xaxis . rangeslider
314328 } ,
315329 _needsExpand : true
316330 } ,
@@ -336,7 +350,8 @@ describe('the range slider', function() {
336350 thickness : 0.15 ,
337351 bgcolor : '#fff' ,
338352 borderwidth : 0 ,
339- bordercolor : '#444'
353+ bordercolor : '#444' ,
354+ _input : { }
340355 } ,
341356 _needsExpand : true
342357 } ,
@@ -362,7 +377,8 @@ describe('the range slider', function() {
362377 bgcolor : '#fff' ,
363378 borderwidth : 0 ,
364379 bordercolor : '#444' ,
365- range : [ 1 , 10 ]
380+ range : [ 1 , 10 ] ,
381+ _input : layoutIn . xaxis . rangeslider
366382 } ,
367383 range : [ 1 , 10 ]
368384 } ,
@@ -386,7 +402,8 @@ describe('the range slider', function() {
386402 thickness : 0.15 ,
387403 bgcolor : '#fff' ,
388404 borderwidth : 0 ,
389- bordercolor : '#444'
405+ bordercolor : '#444' ,
406+ _input : { }
390407 } ,
391408 range : [ 2 , 40 ] ,
392409 _needsExpand : true
@@ -411,19 +428,19 @@ describe('the range slider', function() {
411428 it ( 'should plot when only x data is provided' , function ( done ) {
412429 Plotly . plot ( gd , [ { x : [ 1 , 2 , 3 ] } ] , { xaxis : { rangeslider : { } } } )
413430 . then ( function ( ) {
414- var rangeslider = document . getElementsByClassName ( 'range-slider' ) ;
431+ var rangeSlider = getRangeSlider ( ) ;
415432
416- expect ( rangeslider . length ) . toBe ( 1 ) ;
433+ expect ( rangeSlider ) . toBeDefined ( ) ;
417434 } )
418435 . then ( done ) ;
419436 } ) ;
420437
421438 it ( 'should plot when only y data is provided' , function ( done ) {
422439 Plotly . plot ( gd , [ { y : [ 1 , 2 , 3 ] } ] , { xaxis : { rangeslider : { } } } )
423440 . then ( function ( ) {
424- var rangeslider = document . getElementsByClassName ( 'range-slider' ) ;
441+ var rangeSlider = getRangeSlider ( ) ;
425442
426- expect ( rangeslider . length ) . toBe ( 1 ) ;
443+ expect ( rangeSlider ) . toBeDefined ( ) ;
427444 } )
428445 . then ( done ) ;
429446 } ) ;
0 commit comments