root/public/javascripts/scriptaculous/test/unit/slider_test.html

Revision 1, 16.5 kB (checked in by falcon, 17 years ago)

Version one -> initial work from the laptop.
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
4<head>
5  <title>script.aculo.us Unit test file</title>
6  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
7  <script src="../../lib/prototype.js" type="text/javascript"></script>
8  <script src="../../src/scriptaculous.js" type="text/javascript"></script>
9  <script src="../../src/unittest.js" type="text/javascript"></script>
10  <link rel="stylesheet" href="../test.css" type="text/css" />
11</head>
12<body>
13<h1>script.aculo.us Unit test file</h1>
14<p>
15  Tests for slider.js
16</p>
17
18<div id="track1" style="width:200px;background-color:#aaa;height:5px;">
19  <div id="handle1" style="width:15px;height:25px;background-color:#f00;"> </div>
20</div>
21
22<div id="track2-vertical" style="height:100px;background-color:#aaa;width:5px;">
23  <div id="handle2-vertical" style="width:25px;height:10px;background-color:#f00;"> </div>
24</div>
25
26<div id="track2-horizontal" style="height:5px;background-color:#aaa;width:100px;">
27  <div id="handle2-horizontal" style="width:10px;height:25px;background-color:#f00;"> </div>
28</div>
29
30<div id="track3" style="width:300px;background-color:#cfb;height:30px;">
31  <span id="handle3-1">1</span>
32  <span id="handle3-2">2</span>
33  <span id="handle3-3">3</span>
34</div> 
35
36<div id="track4" style="width:300px;position:relative;background-color:#cbf;height:30px;">
37  <span id="handle4-1" style="top:0;left:0;position:absolute;background-color:#f00;">1</span>
38  <span id="handle4-2" style="top:0;left:0;position:absolute;background-color:#0f0;">2</span>
39  <span id="handle4-3" style="top:0;left:0;position:absolute;background-color:#00f;">3</span>
40</div>
41
42<div id="track5" style="width:300px;background-color:#cbf;height:30px;position:relative;z-index:0;">
43  <div id="handle5-1" style="top:0;left:0;position:absolute;background-color:#f00;z-index:2">1</div>
44  <div id="handle5-2" style="top:0;left:0;position:absolute;background-color:#0f0;z-index:2">2</div>
45  <div id="handle5-3" style="top:0;left:0;position:absolute;background-color:#00f;z-index:2">3</div>
46 
47  <div id="span5-1" style="top:0;left:0;position:absolute;background-color:#000;height:20px;z-index:1;"> </div>
48  <div id="span5-2" style="top:0;left:0;position:absolute;background-color:#444;height:20px;z-index:1;"> </div>
49</div>
50
51<div id="track6" style="width:20px;background-color:#cbf;height:100px;position:relative;z-index:0;">
52  <div id="handle6-1" style="top:0;left:0;height:13px;position:absolute;background-color:#f00;z-index:2">1</div>
53  <div id="handle6-2" style="top:0;left:0;height:13px;position:absolute;background-color:#0f0;z-index:2">2</div>
54  <div id="handle6-3" style="top:0;left:0;height:13px;position:absolute;background-color:#00f;z-index:2">3</div>
55 
56  <div id="span6-1" style="top:0;left:0;position:absolute;background-color:#000;width:20px;z-index:1;"> </div>
57  <div id="span6-2" style="top:0;left:0;position:absolute;background-color:#444;width:20px;z-index:1;"> </div>
58</div>
59
60<div id="track7" style="width:200px;background-color:#cbf;height:30px;position:relative;z-index:0;">
61  <div id="handle7-1" style="top:0;left:0;position:absolute;background-color:#f88;z-index:2">1</div>
62  <div id="handle7-2" style="top:0;left:0;position:absolute;background-color:#8f8;z-index:2">2</div>
63  <div id="handle7-3" style="top:0;left:0;position:absolute;background-color:#88f;z-index:2">3</div>
64 
65  <div id="span7-1" style="top:0;left:0;position:absolute;background-color:#000;height:20px;z-index:1;"> </div>
66  <div id="span7-2" style="top:0;left:0;position:absolute;background-color:#444;height:20px;z-index:1;"> </div>
67 
68  <div id="span7-start" style="top:0;left:0;position:absolute;background-color:#f00;height:20px;z-index:1;"> </div>
69  <div id="span7-end" style="top:0;left:0;position:absolute;background-color:#00f;height:20px;z-index:1;"> </div>
70</div>
71
72
73<div id="debug"> </div>
74
75<!-- Log output -->
76<div id="testlog"> </div>
77
78<!-- Tests follow -->
79<script type="text/javascript" language="javascript" charset="utf-8">
80// <![CDATA[
81  var globalValue;
82
83  new Test.Unit.Runner({
84
85    testSliderBasics: function() { with(this) {
86      var slider = new Control.Slider('handle1', 'track1');
87      assertInstanceOf(Control.Slider, slider);
88     
89      assertEqual('horizontal', slider.axis);
90      assertEqual(false, slider.disabled);
91      assertEqual(0, slider.value);
92     
93      slider.dispose();
94    }},
95   
96    testSliderValues: function() { with(this) {
97      ['horizontal', 'vertical'].each( function(axis) {
98        var slider = new Control.Slider('handle2-'+axis, 'track2-'+axis, {values:[0.2,0.4,0.6,0.8,1],axis:axis});
99        assertEqual(axis, slider.axis);
100        assertEqual(0.2, slider.value);
101       
102        slider.setValue(0.35);
103        assertEqual(0.4, slider.value);
104       
105        slider.setValueBy(0.1);
106        assertEqual(0.6, slider.value);
107        slider.setValueBy(-0.6);
108        assertEqual(0.2, slider.value);
109       
110        slider.setValue(1);
111        assertEqual(1, slider.value);
112       
113        slider.setValue(-2);
114        assertEqual(0.2, slider.value);
115       
116        slider.setValue(55555);
117        assertEqual(1, slider.value);
118       
119        // leave active to be able to play around with the sliders
120        // slider.dispose();
121      });
122      assertEqual("90px", $('handle2-horizontal').style.left);   
123      assertEqual("90px", $('handle2-vertical').style.top);
124    }},
125   
126    testSliderInitialValues: function() { with(this) {
127      var slider = new Control.Slider('handle1', 'track1',{sliderValue:0.5});
128      assertEqual(0.5, slider.value);
129     
130      var slider = new Control.Slider(['handle4-1','handle4-2','handle4-3'], 'track4', {
131        sliderValue:[50,145,170],
132        values:[50,150,160,170,180],
133        range:$R(50,180)
134      });
135      assertEqual(50, slider.value);
136      assertEqual(50, slider.values[0]);
137      assertEqual(150, slider.values[1]);
138      assertEqual(170, slider.values[2]);
139      slider.dispose();
140     
141      var slider = new Control.Slider(['handle4-1','handle4-2','handle4-3'], 'track4', {
142        sliderValue:[50,145,170],
143        values:[50,150,160,170,180]
144      });
145      assertEqual(50, slider.value);
146      assertEqual(50, slider.values[0]);
147      assertEqual(150, slider.values[1]);
148      assertEqual(170, slider.values[2]);
149      slider.dispose();
150     
151      var slider = new Control.Slider(['handle4-1','handle4-2','handle4-3'], 'track4', {
152        restricted:true,
153        sliderValue:[50,145,170],
154        values:[50,150,160,170,180]
155      });
156      assertEqual(50, slider.value);
157      assertEqual(50, slider.values[0]);
158      assertEqual(150, slider.values[1]);
159      assertEqual(170, slider.values[2]);
160      slider.dispose();
161    }},
162   
163    testSliderOnChange: function() { with(this) {
164      var slider = new Control.Slider('handle1', 'track1', { onChange:function(v){ globalValue = v; } });
165      slider.setValue(1);
166      assert(1, globalValue);
167      assert(1, slider.value);
168     
169      slider.setDisabled();
170      slider.setValue(0.5);
171      assert(1, globalValue);
172      assert(1, slider.value);
173     
174      slider.setEnabled();
175      slider.setValue(0.2);
176      assert(0.2, globalValue);
177      assert(0.2, slider.value);
178     
179      // s.event should be null if setValue is called from script
180      var slider = new Control.Slider(['handle3-1','handle3-2','handle3-3'], 'track3', {
181        onChange:function(v, s){ if(!s.event) globalValue = v; } });
182       
183      slider.setValue(0.5,1);
184      assertEqual([0,0.5,0].inspect(), globalValue.inspect());
185      assert(!slider.event);
186       
187      slider.dispose();
188    }},
189   
190    testMultipleHandles: function() { with(this) {
191      var slider = new Control.Slider(['handle3-1','handle3-2','handle3-3'], 'track3', {range:$R(0,300)});
192      assertInstanceOf(Control.Slider, slider);
193     
194      slider.setValue(20, 0);
195      slider.setValue(50, 1);
196      slider.setValue(70, 2);
197      assertEqual(20, slider.values[0]);
198      assertEqual(50, slider.values[1]);
199      assertEqual(70, slider.values[2]);
200      assertEqual("20px", slider.handles[0].style.left);
201      assertEqual("49px", slider.handles[1].style.left);
202      assertEqual("68px", slider.handles[2].style.left);
203     
204      // should change last manipulated handled by -10,
205      // so check for handle with idx 2
206      slider.setValueBy(-10);
207      assertEqual(60, slider.values[2]);
208     
209      slider.setValueBy(10, 0);
210      assertEqual(20, slider.values[0]);
211      slider.setValueBy(10, 1);
212      assertEqual(60, slider.values[1]);
213      slider.setValueBy(20, slider.activeHandleIdx);
214      assertEqual(80, slider.values[1]);
215    }},
216   
217    testMultipleHandlesValues: function() { with(this) {
218      var slider = new Control.Slider(['handle4-1','handle4-2','handle4-3'], 'track4', {values:[50,150,160,170,180],range:$R(50,180)});
219      assertInstanceOf(Control.Slider, slider);
220     
221      slider.setValue(20, 0);
222      slider.setValue(150, 2);
223      slider.setValue(179, 1);
224     
225      assertEqual(50, slider.values[0]);
226      assertEqual(150, slider.values[2]);
227      assertEqual(180, slider.values[1]);
228     
229      assertEqual("0px", slider.handles[0].style.left);
230      assertEqual("225px", slider.handles[2].style.left);
231      assertEqual("293px", slider.handles[1].style.left);
232     
233      assertEqual($R(50,150).inspect(), slider.getRange().inspect());
234      assertEqual(30, slider.getRange(1).end-slider.getRange(1).start);
235    }},
236   
237    testMultipleHandlesSpans: function() { with(this) {
238      var slider = new Control.Slider(['handle5-1','handle5-2','handle5-3'], 'track5',
239        {spans:['span5-1','span5-2'],range:$R(0,300)});
240      assertInstanceOf(Control.Slider, slider);
241     
242      slider.setValue(20,  0);
243      slider.setValue(100, 1);
244      slider.setValue(150, 2);
245 
246      assertEqual("20px", $('span5-1').style.left);
247      assertEqual("78px", $('span5-1').style.width);
248      assertEqual("98px", $('span5-2').style.left);
249      assertEqual("49px", $('span5-2').style.width);
250     
251      slider.setValue(30, 0);
252      slider.setValue(110, 1);
253      slider.setValue(90, 2);
254 
255      assertEqual("29px", $('span5-1').style.left);
256      assertEqual("59px", $('span5-1').style.width);
257      assertEqual("88px", $('span5-2').style.left);
258      assertEqual("20px", $('span5-2').style.width);
259     
260      slider.dispose();
261    }},
262   
263    testMultipleHandlesSpansStartEnd: function() { with(this) {
264      var slider = new Control.Slider(['handle7-1','handle7-2','handle7-3'], 'track7',
265        { spans:['span7-1','span7-2'],
266          startSpan:'span7-start',
267          endSpan:'span7-end',
268          range:$R(0,200) });
269      assertInstanceOf(Control.Slider, slider);
270     
271      slider.setValue(20,  0);
272      slider.setValue(100, 1);
273      slider.setValue(150, 2);
274      assertEqual("0px", $('span7-start').style.left);
275      assertEqual("19px", $('span7-start').style.width);
276      assertEqual("145px", $('span7-end').style.left);
277      assertEqual("48px", $('span7-end').style.width);
278     
279      slider.dispose();
280    }},
281   
282    testSingleHandleSpansStartEnd: function() { with(this) {
283      var slider = new Control.Slider('handle7-1', 'track7',
284        { spans:['span7-1','span7-2'],
285          startSpan:'span7-start',
286          endSpan:'span7-end',
287          range:$R(0,200) });
288      assertInstanceOf(Control.Slider, slider);
289     
290      slider.setValue(20,  0);
291      assertEqual("0px", $('span7-start').style.left);
292      assertEqual("19px", $('span7-start').style.width);
293      assertEqual("19px", $('span7-end').style.left);
294      assertEqual("174px", $('span7-end').style.width);
295     
296      slider.dispose();
297    }},
298   
299    testMultipleHandlesStyles: function() { with(this) {
300      var slider = new Control.Slider(['handle7-1','handle7-2','handle7-3'], 'track7',
301        { spans:['span7-1','span7-2'],
302          startSpan:'span7-start',
303          endSpan:'span7-end',
304          range:$R(0,200) });
305      assertInstanceOf(Control.Slider, slider);
306      assert(Element.hasClassName('handle7-1','selected'));
307      assert(!Element.hasClassName('handle7-2','selected'));
308      assert(!Element.hasClassName('handle7-3','selected'));
309     
310      slider.setValue(20,  0);
311      assert(Element.hasClassName('handle7-1','selected'));
312      assert(!Element.hasClassName('handle7-2','selected'));
313      assert(!Element.hasClassName('handle7-3','selected'));
314           
315      slider.setValue(100, 1);
316      assert(!Element.hasClassName('handle7-1','selected'));
317      assert(Element.hasClassName('handle7-2','selected'));
318      assert(!Element.hasClassName('handle7-3','selected'));
319     
320      slider.setValue(150, 2);
321      assert(!Element.hasClassName('handle7-1','selected'));
322      assert(!Element.hasClassName('handle7-2','selected'));
323      assert(Element.hasClassName('handle7-3','selected'));
324     
325      slider.dispose();
326    }},
327   
328    testMultipleHandlesSpansRestricted: function() { with(this) {
329      var slider = new Control.Slider(['handle5-1','handle5-2','handle5-3'], 'track5', 
330        {restricted:true,spans:['span5-1','span5-2'],range:$R(0,300)});
331      assertInstanceOf(Control.Slider, slider);
332     
333      slider.setValue(20, 0);
334      slider.setValue(100, 1);
335      slider.setValue(150,  2);     
336      assertEqual(0, slider.values[0]);
337      assertEqual(0, slider.values[1]);
338      assertEqual(150, slider.values[2]);
339     
340      slider.setValue(150, 2);
341      slider.setValue(100, 1);
342      slider.setValue(20,  0);
343      assertEqual(20, slider.values[0]);
344      assertEqual(100, slider.values[1]);
345      assertEqual(150, slider.values[2]);
346      assertEqual("20px", $('span5-1').style.left);
347      assertEqual("78px", $('span5-1').style.width);
348      assertEqual("98px", $('span5-2').style.left);
349      assertEqual("49px", $('span5-2').style.width);
350     
351      slider.setValue(30, 0);
352      slider.setValue(110, 1);
353      slider.setValue(90, 2);
354      assertEqual(30, slider.values[0]);
355      assertEqual(110, slider.values[1]);
356      assertEqual(110, slider.values[2], '???');
357 
358      assertEqual("29px", $('span5-1').style.left);
359      assertEqual("78px", $('span5-1').style.width);
360      assertEqual("107px", $('span5-2').style.left);
361      assertEqual("0px", $('span5-2').style.width);
362     
363      slider.dispose();
364    }},
365   
366    testMultipleHandlesSpansVertical: function() { with(this) {
367      var slider = new Control.Slider(['handle6-1','handle6-2','handle6-3'], 'track6', {axis:'vertical',spans:['span6-1','span6-2'],range:$R(0,100)});
368      assertInstanceOf(Control.Slider, slider);
369     
370      slider.setValue(20, 0);
371      slider.setValue(80, 1);
372      slider.setValue(90, 2);
373 
374      assertEqual("17px", $('span6-1').style.top);
375      assertEqual("52px", $('span6-1').style.height);
376      assertEqual("70px", $('span6-2').style.top);
377      assertEqual("9px", $('span6-2').style.height);
378     
379      slider.setValue(30, 0);
380      slider.setValue(20, 1);
381      slider.setValue(95, 2);
382 
383      assertEqual("17px", $('span6-1').style.top);
384      assertEqual("9px", $('span6-1').style.height);
385      assertEqual("26px", $('span6-2').style.top);
386      assertEqual("57px", $('span6-2').style.height);
387    }},
388   
389    testRange: function() { with(this) {
390      var slider = new Control.Slider('handle1','track1');
391      assertEqual(0, slider.value);
392      slider.setValue(1);
393      assertEqual("185px", $('handle1').style.left);
394      slider.dispose();
395     
396      var slider = new Control.Slider('handle1','track1',{range:$R(10,20)});
397      assertEqual(10, slider.value);
398      assertEqual("0px", $('handle1').style.left);
399      slider.setValue(15);
400      assertEqual("93px", $('handle1').style.left);
401      slider.setValue(20);
402      assertEqual("185px", $('handle1').style.left);
403      slider.dispose();     
404    }},
405   
406    // test for #3732
407    testRangeValues: function() { with(this) {
408      // test for non-zero starting range
409      var slider = new Control.Slider('handle1','track1',{
410        range:$R(1,3), values:[1,2,3]
411      });
412      assertEqual(1, slider.value);
413      assertEqual("0px", $('handle1').style.left);
414      slider.setValue(2);
415      assertEqual("93px", $('handle1').style.left);
416      slider.setValue(3);
417      assertEqual("185px", $('handle1').style.left);
418      slider.dispose();
419     
420      // test zero-starting range
421      var slider = new Control.Slider('handle1','track1',{
422        range:$R(0,2), values:[0,1,2]
423      });
424      assertEqual(0, slider.value);
425      assertEqual("0px", $('handle1').style.left);
426      slider.setValue(1);
427      assertEqual("93px", $('handle1').style.left);
428      slider.setValue(2);
429      assertEqual("185px", $('handle1').style.left);
430      slider.dispose();
431    }}
432   
433  }, "testlog");
434// ]]>
435</script>
436</body>
437</html>
Note: See TracBrowser for help on using the browser.