corrade-http-templates – Blame information for rev 57

Subversion Repositories:
Rev:
Rev Author Line No. Line
57 office 1 define( [
2 "qunit",
3 "jquery",
4 "ui/widgets/slider"
5 ], function( QUnit, $ ) {
6  
7 QUnit.module( "slider: events" );
8  
9 //Specs from http://wiki.jqueryui.com/Slider#specs
10 //"change callback: triggers when the slider has stopped moving and has a new
11 // value (even if same as previous value), via mouse(mouseup) or keyboard(keyup)
12 // or value method/option"
13 QUnit.test( "mouse based interaction", function( assert ) {
14 assert.expect( 4 );
15  
16 var element = $( "#slider1" )
17 .slider( {
18 start: function( event ) {
19 assert.equal( event.originalEvent.type, "mousedown", "start triggered by mousedown" );
20 },
21 slide: function( event ) {
22 assert.equal( event.originalEvent.type, "mousemove", "slider triggered by mousemove" );
23 },
24 stop: function( event ) {
25 assert.equal( event.originalEvent.type, "mouseup", "stop triggered by mouseup" );
26 },
27 change: function( event ) {
28 assert.equal( event.originalEvent.type, "mouseup", "change triggered by mouseup" );
29 }
30 } );
31  
32 element.find( ".ui-slider-handle" ).eq( 0 )
33 .simulate( "drag", { dx: 10, dy: 10 } );
34  
35 } );
36 QUnit.test( "keyboard based interaction", function( assert ) {
37 assert.expect( 3 );
38  
39 // Test keyup at end of handle slide (keyboard)
40 var element = $( "#slider1" )
41 .slider( {
42 start: function( event ) {
43 assert.equal( event.originalEvent.type, "keydown", "start triggered by keydown" );
44 },
45 slide: function() {
46 assert.ok( false, "Slider never triggered by keys" );
47 },
48 stop: function( event ) {
49 assert.equal( event.originalEvent.type, "keyup", "stop triggered by keyup" );
50 },
51 change: function( event ) {
52 assert.equal( event.originalEvent.type, "keyup", "change triggered by keyup" );
53 }
54 } );
55  
56 element.find( ".ui-slider-handle" ).eq( 0 )
57 .simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } )
58 .simulate( "keypress", { keyCode: $.ui.keyCode.LEFT } )
59 .simulate( "keyup", { keyCode: $.ui.keyCode.LEFT } );
60  
61 } );
62 QUnit.test( "programmatic event triggers", function( assert ) {
63 assert.expect( 6 );
64  
65 // Test value method
66 var element = $( "<div></div>" )
67 .slider( {
68 change: function() {
69 assert.ok( true, "change triggered by value method" );
70 }
71 } )
72 .slider( "value", 0 );
73  
74 // Test values method
75 element = $( "<div></div>" )
76 .slider( {
77 values: [ 10, 20 ],
78 change: function() {
79 assert.ok( true, "change triggered by values method" );
80 }
81 } )
82 .slider( "values", [ 80, 90 ] );
83  
84 // Test value option
85 element = $( "<div></div>" )
86 .slider( {
87 change: function() {
88 assert.ok( true, "change triggered by value option" );
89 }
90 } )
91 .slider( "option", "value", 0 );
92  
93 // Test values option
94 element = $( "<div></div>" )
95 .slider( {
96 values: [ 10, 20 ],
97 change: function() {
98 assert.ok( true, "change triggered by values option" );
99 }
100 } )
101 .slider( "option", "values", [ 80, 90 ] );
102  
103 } );
104  
105 QUnit.test( "mouse based interaction part two: when handles overlap", function( assert ) {
106 assert.expect( 6 );
107  
108 var element = $( "#slider1" )
109 .slider( {
110 values: [ 0, 0, 0 ],
111 start: function( event, ui ) {
112 assert.equal( handles.index( ui.handle ), 2, "rightmost handle activated when overlapping at minimum (#3736)" );
113 }
114 } ),
115 handles = element.find( ".ui-slider-handle" );
116 handles.eq( 0 ).simulate( "drag", { dx: 10 } );
117 element.slider( "destroy" );
118  
119 element = $( "#slider1" )
120 .slider( {
121 values: [ 10, 10, 10 ],
122 max: 10,
123 start: function( event, ui ) {
124 assert.equal( handles.index( ui.handle ), 0, "leftmost handle activated when overlapping at maximum" );
125 }
126 } ),
127 handles = element.find( ".ui-slider-handle" );
128 handles.eq( 0 ).simulate( "drag", { dx: -10 } );
129 element.slider( "destroy" );
130  
131 element = $( "#slider1" )
132 .slider( {
133 values: [ 19, 20 ]
134 } ),
135 handles = element.find( ".ui-slider-handle" );
136 handles.eq( 0 ).simulate( "drag", { dx: 10 } );
137 element.one( "slidestart", function( event, ui ) {
138 assert.equal( handles.index( ui.handle ), 0, "left handle activated if left was moved last" );
139 } );
140 handles.eq( 0 ).simulate( "drag", { dx: 10 } );
141 element.slider( "destroy" );
142  
143 element = $( "#slider1" )
144 .slider( {
145 values: [ 19, 20 ]
146 } ),
147 handles = element.find( ".ui-slider-handle" );
148 handles.eq( 1 ).simulate( "drag", { dx: -10 } );
149 element.one( "slidestart", function( event, ui ) {
150 assert.equal( handles.index( ui.handle ), 1, "right handle activated if right was moved last (#3467)" );
151 } );
152 handles.eq( 0 ).simulate( "drag", { dx: 10 } );
153  
154 element = $( "#slider1" )
155 .slider( {
156 range: true,
157 min: 0,
158 max: 100,
159 values: [ 0, 50 ]
160 } ),
161 handles = element.find( ".ui-slider-handle" );
162  
163 element.slider( "option", { values: [ 100, 100 ] } );
164 handles.eq( 0 ).simulate( "drag", { dx: -10 } );
165 assert.equal( element.slider( "values" )[ 0 ], 99, "setting both values of range slider to the maximum doesn't lock slider" );
166  
167 element.slider( "option", { values: [ 0, 0 ] } );
168 handles.eq( 1 ).simulate( "drag", { dx: 10 } );
169 assert.equal( element.slider( "values" )[ 1 ], 1, "setting both values of range slider to the minimum doesn't lock slider" );
170 } );
171  
172 QUnit.test( "event data", function( assert ) {
173 assert.expect( 6 );
174  
175 var slideHandleIndex = 3,
176 values = [ 8, 9, 7, 4 ],
177 newValues = [ 8, 9, 7, 5 ],
178 element = $( "#slider1" )
179 .slider( {
180 values: values,
181 start: function( event, ui ) {
182 assert.deepEqual( ui, expectedUiHash, "passing ui to start event" );
183 },
184 slide: function( event, ui ) {
185 assert.deepEqual( ui, expectedChangedUiHash, "passing ui to slide event" );
186 },
187 stop: function( event, ui ) {
188 assert.deepEqual( ui, expectedChangedUiHash, "passing ui to stop event" );
189 },
190 change: function( event, ui ) {
191 assert.deepEqual( ui, expectedChangedUiHash, "passing ui to change event" );
192 }
193 } ),
194 handles = element.find( ".ui-slider-handle" ),
195 expectedUiHash = {
196 handle: handles.eq( slideHandleIndex )[ 0 ],
197 handleIndex: slideHandleIndex,
198 values: values,
199 value: values[ slideHandleIndex ]
200 },
201 expectedChangedUiHash = $.extend( {}, expectedUiHash, {
202 values: newValues,
203 value: newValues[ slideHandleIndex ]
204 } );
205  
206 handles.eq( slideHandleIndex ).simulate( "drag", { dx: 10 } );
207  
208 element.slider( "destroy" );
209 element = $( "#slider1" ).slider( {
210 min: 0,
211 max: 100,
212 value: 1,
213 slide: function( event, ui ) {
214 assert.equal( ui.value, 0, "should pass 0 value if slider reaches it" );
215 }
216 } );
217 handles = element.find( ".ui-slider-handle" );
218 handles.eq( 0 ).simulate( "drag", { dx: -10 } );
219  
220 element.slider( "destroy" );
221 element = $( "#slider1" ).slider( {
222 min: 0,
223 max: 100,
224 values: [ 1, 2 ],
225 slide: function( event, ui ) {
226 assert.equal( ui.value, 0, "should pass 0 value if one of handles reaches it" );
227 }
228 } );
229 handles = element.find( ".ui-slider-handle" );
230 handles.eq( 0 ).simulate( "drag", { dx: -10 } );
231 } );
232  
233 } );