@@ -19,18 +19,20 @@ import userEvent from '@testing-library/user-event';
19
19
20
20
describe ( 'ColorSlider' , ( ) => {
21
21
let onChangeSpy = jest . fn ( ) ;
22
+ let onChangeEndSpy = jest . fn ( ) ;
22
23
23
24
beforeAll ( ( ) => {
24
25
jest . spyOn ( window . HTMLElement . prototype , 'offsetWidth' , 'get' ) . mockImplementation ( ( ) => 100 ) ;
25
26
jest . spyOn ( window . HTMLElement . prototype , 'offsetHeight' , 'get' ) . mockImplementation ( ( ) => 100 ) ;
26
27
// @ts -ignore
27
- jest . spyOn ( window , 'requestAnimationFrame' ) . mockImplementation ( ( cb ) => cb ( ) ) ;
28
+ jest . spyOn ( window , 'requestAnimationFrame' ) . mockImplementation ( ( cb ) => setTimeout ( cb , 0 ) ) ;
28
29
// @ts -ignore
29
30
jest . useFakeTimers ( 'legacy' ) ;
30
31
} ) ;
31
32
32
33
afterEach ( ( ) => {
33
34
onChangeSpy . mockClear ( ) ;
35
+ onChangeEndSpy . mockClear ( ) ;
34
36
// for restoreTextSelection
35
37
act ( ( ) => { jest . runAllTimers ( ) ; } ) ;
36
38
} ) ;
@@ -264,16 +266,65 @@ describe('ColorSlider', () => {
264
266
describe ( 'keyboard events' , ( ) => {
265
267
it ( 'works' , ( ) => {
266
268
let defaultColor = parseColor ( '#000000' ) ;
267
- let { getByRole} = render ( < ColorSlider defaultValue = { defaultColor } onChange = { onChangeSpy } channel = "red" /> ) ;
269
+ let { getByRole} = render ( < ColorSlider defaultValue = { defaultColor } onChange = { onChangeSpy } onChangeEnd = { onChangeEndSpy } channel = "red" /> ) ;
268
270
let slider = getByRole ( 'slider' ) ;
269
271
act ( ( ) => { slider . focus ( ) ; } ) ;
270
272
271
273
fireEvent . keyDown ( slider , { key : 'Right' } ) ;
274
+ act ( ( ) => { jest . runAllTimers ( ) ; } ) ;
272
275
expect ( onChangeSpy ) . toHaveBeenCalledTimes ( 1 ) ;
273
276
expect ( onChangeSpy . mock . calls [ 0 ] [ 0 ] . toString ( 'hexa' ) ) . toBe ( defaultColor . withChannelValue ( 'red' , 1 ) . toString ( 'hexa' ) ) ;
277
+ expect ( onChangeEndSpy ) . toHaveBeenCalledTimes ( 1 ) ;
278
+ expect ( onChangeEndSpy . mock . calls [ 0 ] [ 0 ] . toString ( 'hexa' ) ) . toBe ( defaultColor . withChannelValue ( 'red' , 1 ) . toString ( 'hexa' ) ) ;
279
+
274
280
fireEvent . keyDown ( slider , { key : 'Left' } ) ;
281
+ act ( ( ) => { jest . runAllTimers ( ) ; } ) ;
275
282
expect ( onChangeSpy ) . toHaveBeenCalledTimes ( 2 ) ;
276
283
expect ( onChangeSpy . mock . calls [ 1 ] [ 0 ] . toString ( 'hexa' ) ) . toBe ( defaultColor . withChannelValue ( 'red' , 0 ) . toString ( 'hexa' ) ) ;
284
+ expect ( onChangeEndSpy ) . toHaveBeenCalledTimes ( 2 ) ;
285
+ expect ( onChangeEndSpy . mock . calls [ 1 ] [ 0 ] . toString ( 'hexa' ) ) . toBe ( defaultColor . withChannelValue ( 'red' , 0 ) . toString ( 'hexa' ) ) ;
286
+
287
+ fireEvent . keyDown ( slider , { key : 'PageUp' } ) ;
288
+ act ( ( ) => { jest . runAllTimers ( ) ; } ) ;
289
+ expect ( onChangeSpy ) . toHaveBeenCalledTimes ( 3 ) ;
290
+ expect ( onChangeSpy . mock . calls [ 2 ] [ 0 ] . toString ( 'hexa' ) ) . toBe ( defaultColor . withChannelValue ( 'red' , 16 ) . toString ( 'hexa' ) ) ;
291
+ expect ( onChangeEndSpy ) . toHaveBeenCalledTimes ( 3 ) ;
292
+ expect ( onChangeEndSpy . mock . calls [ 2 ] [ 0 ] . toString ( 'hexa' ) ) . toBe ( defaultColor . withChannelValue ( 'red' , 16 ) . toString ( 'hexa' ) ) ;
293
+
294
+ fireEvent . keyDown ( slider , { key : 'Right' } ) ;
295
+ act ( ( ) => { jest . runAllTimers ( ) ; } ) ;
296
+ expect ( onChangeSpy ) . toHaveBeenCalledTimes ( 4 ) ;
297
+ expect ( onChangeSpy . mock . calls [ 3 ] [ 0 ] . toString ( 'hexa' ) ) . toBe ( defaultColor . withChannelValue ( 'red' , 17 ) . toString ( 'hexa' ) ) ;
298
+ expect ( onChangeEndSpy ) . toHaveBeenCalledTimes ( 4 ) ;
299
+ expect ( onChangeEndSpy . mock . calls [ 3 ] [ 0 ] . toString ( 'hexa' ) ) . toBe ( defaultColor . withChannelValue ( 'red' , 17 ) . toString ( 'hexa' ) ) ;
300
+
301
+ fireEvent . keyDown ( slider , { key : 'PageDown' } ) ;
302
+ act ( ( ) => { jest . runAllTimers ( ) ; } ) ;
303
+ expect ( onChangeSpy ) . toHaveBeenCalledTimes ( 5 ) ;
304
+ expect ( onChangeSpy . mock . calls [ 4 ] [ 0 ] . toString ( 'hexa' ) ) . toBe ( defaultColor . withChannelValue ( 'red' , 0 ) . toString ( 'hexa' ) ) ;
305
+ expect ( onChangeEndSpy ) . toHaveBeenCalledTimes ( 5 ) ;
306
+ expect ( onChangeEndSpy . mock . calls [ 4 ] [ 0 ] . toString ( 'hexa' ) ) . toBe ( defaultColor . withChannelValue ( 'red' , 0 ) . toString ( 'hexa' ) ) ;
307
+
308
+ fireEvent . keyDown ( slider , { key : 'End' } ) ;
309
+ act ( ( ) => { jest . runAllTimers ( ) ; } ) ;
310
+ expect ( onChangeSpy ) . toHaveBeenCalledTimes ( 6 ) ;
311
+ expect ( onChangeSpy . mock . calls [ 5 ] [ 0 ] . toString ( 'hexa' ) ) . toBe ( defaultColor . withChannelValue ( 'red' , 255 ) . toString ( 'hexa' ) ) ;
312
+ expect ( onChangeEndSpy ) . toHaveBeenCalledTimes ( 6 ) ;
313
+ expect ( onChangeEndSpy . mock . calls [ 5 ] [ 0 ] . toString ( 'hexa' ) ) . toBe ( defaultColor . withChannelValue ( 'red' , 255 ) . toString ( 'hexa' ) ) ;
314
+
315
+ fireEvent . keyDown ( slider , { key : 'PageDown' } ) ;
316
+ act ( ( ) => { jest . runAllTimers ( ) ; } ) ;
317
+ expect ( onChangeSpy ) . toHaveBeenCalledTimes ( 7 ) ;
318
+ expect ( onChangeSpy . mock . calls [ 6 ] [ 0 ] . toString ( 'hexa' ) ) . toBe ( defaultColor . withChannelValue ( 'red' , 240 ) . toString ( 'hexa' ) ) ;
319
+ expect ( onChangeEndSpy ) . toHaveBeenCalledTimes ( 7 ) ;
320
+ expect ( onChangeEndSpy . mock . calls [ 6 ] [ 0 ] . toString ( 'hexa' ) ) . toBe ( defaultColor . withChannelValue ( 'red' , 240 ) . toString ( 'hexa' ) ) ;
321
+
322
+ fireEvent . keyDown ( slider , { key : 'Home' } ) ;
323
+ act ( ( ) => { jest . runAllTimers ( ) ; } ) ;
324
+ expect ( onChangeSpy ) . toHaveBeenCalledTimes ( 8 ) ;
325
+ expect ( onChangeSpy . mock . calls [ 7 ] [ 0 ] . toString ( 'hexa' ) ) . toBe ( defaultColor . withChannelValue ( 'red' , 0 ) . toString ( 'hexa' ) ) ;
326
+ expect ( onChangeEndSpy ) . toHaveBeenCalledTimes ( 8 ) ;
327
+ expect ( onChangeEndSpy . mock . calls [ 7 ] [ 0 ] . toString ( 'hexa' ) ) . toBe ( defaultColor . withChannelValue ( 'red' , 0 ) . toString ( 'hexa' ) ) ;
277
328
} ) ;
278
329
279
330
it ( 'doesn\'t work when disabled' , ( ) => {
0 commit comments