corrade-http-templates – Blame information for rev 57
?pathlinks?
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 | } ); |