1
- import {
2
- addProviders ,
3
- inject ,
4
- async ,
5
- TestComponentBuilder ,
6
- ComponentFixture ,
7
- TestBed ,
8
- } from '@angular/core/testing' ;
1
+ import { async , ComponentFixture , TestBed } from '@angular/core/testing' ;
9
2
import { ReactiveFormsModule , FormControl } from '@angular/forms' ;
10
3
import { Component , DebugElement , ViewEncapsulation } from '@angular/core' ;
11
4
import { By } from '@angular/platform-browser' ;
12
5
import { MdSlider , MdSliderModule } from './slider' ;
13
6
import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser' ;
14
7
import { TestGestureConfig } from './test-gesture-config' ;
15
8
9
+
16
10
describe ( 'MdSlider' , ( ) => {
17
- let builder : TestComponentBuilder ;
18
11
let gestureConfig : TestGestureConfig ;
19
12
20
13
beforeEach ( async ( ( ) => {
@@ -31,22 +24,17 @@ describe('MdSlider', () => {
31
24
SliderWithThumbLabel ,
32
25
SliderWithTwoWayBinding ,
33
26
] ,
27
+ providers : [
28
+ { provide : HAMMER_GESTURE_CONFIG , useFactory : ( ) => {
29
+ gestureConfig = new TestGestureConfig ( ) ;
30
+ return gestureConfig ;
31
+ } }
32
+ ] ,
34
33
} ) ;
35
34
36
- addProviders ( [
37
- { provide : HAMMER_GESTURE_CONFIG , useFactory : ( ) => {
38
- gestureConfig = new TestGestureConfig ( ) ;
39
- return gestureConfig ;
40
- } }
41
- ] ) ;
42
-
43
35
TestBed . compileComponents ( ) ;
44
36
} ) ) ;
45
37
46
- beforeEach ( inject ( [ TestComponentBuilder ] , ( tcb : TestComponentBuilder ) => {
47
- builder = tcb ;
48
- } ) ) ;
49
-
50
38
describe ( 'standard slider' , ( ) => {
51
39
let fixture : ComponentFixture < StandardSlider > ;
52
40
let sliderDebugElement : DebugElement ;
@@ -59,24 +47,22 @@ describe('MdSlider', () => {
59
47
let thumbElement : HTMLElement ;
60
48
let thumbDimensions : ClientRect ;
61
49
62
- beforeEach ( async ( ( ) => {
63
- builder . createAsync ( StandardSlider ) . then ( f => {
64
- fixture = f ;
65
- fixture . detectChanges ( ) ;
66
-
67
- sliderDebugElement = fixture . debugElement . query ( By . directive ( MdSlider ) ) ;
68
- sliderNativeElement = sliderDebugElement . nativeElement ;
69
- sliderInstance = sliderDebugElement . componentInstance ;
70
-
71
- trackFillElement = < HTMLElement > sliderNativeElement . querySelector ( '.md-slider-track-fill' ) ;
72
- trackFillDimensions = trackFillElement . getBoundingClientRect ( ) ;
73
- sliderTrackElement = < HTMLElement > sliderNativeElement . querySelector ( '.md-slider-track' ) ;
74
- sliderDimensions = sliderTrackElement . getBoundingClientRect ( ) ;
75
-
76
- thumbElement = < HTMLElement > sliderNativeElement . querySelector ( '.md-slider-thumb-position' ) ;
77
- thumbDimensions = thumbElement . getBoundingClientRect ( ) ;
78
- } ) ;
79
- } ) ) ;
50
+ beforeEach ( ( ) => {
51
+ fixture = TestBed . createComponent ( StandardSlider ) ;
52
+ fixture . detectChanges ( ) ;
53
+
54
+ sliderDebugElement = fixture . debugElement . query ( By . directive ( MdSlider ) ) ;
55
+ sliderNativeElement = sliderDebugElement . nativeElement ;
56
+ sliderInstance = sliderDebugElement . componentInstance ;
57
+
58
+ trackFillElement = < HTMLElement > sliderNativeElement . querySelector ( '.md-slider-track-fill' ) ;
59
+ trackFillDimensions = trackFillElement . getBoundingClientRect ( ) ;
60
+ sliderTrackElement = < HTMLElement > sliderNativeElement . querySelector ( '.md-slider-track' ) ;
61
+ sliderDimensions = sliderTrackElement . getBoundingClientRect ( ) ;
62
+
63
+ thumbElement = < HTMLElement > sliderNativeElement . querySelector ( '.md-slider-thumb-position' ) ;
64
+ thumbDimensions = thumbElement . getBoundingClientRect ( ) ;
65
+ } ) ;
80
66
81
67
it ( 'should set the default values' , ( ) => {
82
68
expect ( sliderInstance . value ) . toBe ( 0 ) ;
@@ -207,16 +193,14 @@ describe('MdSlider', () => {
207
193
let sliderNativeElement : HTMLElement ;
208
194
let sliderInstance : MdSlider ;
209
195
210
- beforeEach ( async ( ( ) => {
211
- builder . createAsync ( DisabledSlider ) . then ( f => {
212
- fixture = f ;
213
- fixture . detectChanges ( ) ;
214
-
215
- sliderDebugElement = fixture . debugElement . query ( By . directive ( MdSlider ) ) ;
216
- sliderNativeElement = sliderDebugElement . nativeElement ;
217
- sliderInstance = sliderDebugElement . componentInstance ;
218
- } ) ;
219
- } ) ) ;
196
+ beforeEach ( ( ) => {
197
+ fixture = TestBed . createComponent ( DisabledSlider ) ;
198
+ fixture . detectChanges ( ) ;
199
+
200
+ sliderDebugElement = fixture . debugElement . query ( By . directive ( MdSlider ) ) ;
201
+ sliderNativeElement = sliderDebugElement . nativeElement ;
202
+ sliderInstance = sliderDebugElement . componentInstance ;
203
+ } ) ;
220
204
221
205
it ( 'should be disabled' , ( ) => {
222
206
expect ( sliderInstance . disabled ) . toBeTruthy ( ) ;
@@ -265,20 +249,18 @@ describe('MdSlider', () => {
265
249
let trackFillElement : HTMLElement ;
266
250
let thumbElement : HTMLElement ;
267
251
268
- beforeEach ( async ( ( ) => {
269
- builder . createAsync ( SliderWithMinAndMax ) . then ( f => {
270
- fixture = f ;
271
- fixture . detectChanges ( ) ;
272
-
273
- sliderDebugElement = fixture . debugElement . query ( By . directive ( MdSlider ) ) ;
274
- sliderNativeElement = sliderDebugElement . nativeElement ;
275
- sliderInstance = sliderDebugElement . injector . get ( MdSlider ) ;
276
- sliderTrackElement = < HTMLElement > sliderNativeElement . querySelector ( '.md-slider-track' ) ;
277
- sliderDimensions = sliderTrackElement . getBoundingClientRect ( ) ;
278
- trackFillElement = < HTMLElement > sliderNativeElement . querySelector ( '.md-slider-track-fill' ) ;
279
- thumbElement = < HTMLElement > sliderNativeElement . querySelector ( '.md-slider-thumb-position' ) ;
280
- } ) ;
281
- } ) ) ;
252
+ beforeEach ( ( ) => {
253
+ fixture = TestBed . createComponent ( SliderWithMinAndMax ) ;
254
+ fixture . detectChanges ( ) ;
255
+
256
+ sliderDebugElement = fixture . debugElement . query ( By . directive ( MdSlider ) ) ;
257
+ sliderNativeElement = sliderDebugElement . nativeElement ;
258
+ sliderInstance = sliderDebugElement . injector . get ( MdSlider ) ;
259
+ sliderTrackElement = < HTMLElement > sliderNativeElement . querySelector ( '.md-slider-track' ) ;
260
+ sliderDimensions = sliderTrackElement . getBoundingClientRect ( ) ;
261
+ trackFillElement = < HTMLElement > sliderNativeElement . querySelector ( '.md-slider-track-fill' ) ;
262
+ thumbElement = < HTMLElement > sliderNativeElement . querySelector ( '.md-slider-thumb-position' ) ;
263
+ } ) ;
282
264
283
265
it ( 'should set the default values from the attributes' , ( ) => {
284
266
expect ( sliderInstance . value ) . toBe ( 4 ) ;
@@ -341,15 +323,13 @@ describe('MdSlider', () => {
341
323
let sliderTrackElement : HTMLElement ;
342
324
343
325
beforeEach ( async ( ( ) => {
344
- builder . createAsync ( SliderWithValue ) . then ( f => {
345
- fixture = f ;
346
- fixture . detectChanges ( ) ;
347
-
348
- sliderDebugElement = fixture . debugElement . query ( By . directive ( MdSlider ) ) ;
349
- sliderNativeElement = sliderDebugElement . nativeElement ;
350
- sliderInstance = sliderDebugElement . injector . get ( MdSlider ) ;
351
- sliderTrackElement = < HTMLElement > sliderNativeElement . querySelector ( '.md-slider-track' ) ;
352
- } ) ;
326
+ fixture = TestBed . createComponent ( SliderWithValue ) ;
327
+ fixture . detectChanges ( ) ;
328
+
329
+ sliderDebugElement = fixture . debugElement . query ( By . directive ( MdSlider ) ) ;
330
+ sliderNativeElement = sliderDebugElement . nativeElement ;
331
+ sliderInstance = sliderDebugElement . injector . get ( MdSlider ) ;
332
+ sliderTrackElement = < HTMLElement > sliderNativeElement . querySelector ( '.md-slider-track' ) ;
353
333
} ) ) ;
354
334
355
335
it ( 'should set the default value from the attribute' , ( ) => {
@@ -379,20 +359,18 @@ describe('MdSlider', () => {
379
359
let trackFillElement : HTMLElement ;
380
360
let thumbElement : HTMLElement ;
381
361
382
- beforeEach ( async ( ( ) => {
383
- builder . createAsync ( SliderWithStep ) . then ( f => {
384
- fixture = f ;
385
- fixture . detectChanges ( ) ;
386
-
387
- sliderDebugElement = fixture . debugElement . query ( By . directive ( MdSlider ) ) ;
388
- sliderNativeElement = sliderDebugElement . nativeElement ;
389
- sliderInstance = sliderDebugElement . injector . get ( MdSlider ) ;
390
- sliderTrackElement = < HTMLElement > sliderNativeElement . querySelector ( '.md-slider-track' ) ;
391
- sliderDimensions = sliderTrackElement . getBoundingClientRect ( ) ;
392
- trackFillElement = < HTMLElement > sliderNativeElement . querySelector ( '.md-slider-track-fill' ) ;
393
- thumbElement = < HTMLElement > sliderNativeElement . querySelector ( '.md-slider-thumb-position' ) ;
394
- } ) ;
395
- } ) ) ;
362
+ beforeEach ( ( ) => {
363
+ fixture = TestBed . createComponent ( SliderWithStep ) ;
364
+ fixture . detectChanges ( ) ;
365
+
366
+ sliderDebugElement = fixture . debugElement . query ( By . directive ( MdSlider ) ) ;
367
+ sliderNativeElement = sliderDebugElement . nativeElement ;
368
+ sliderInstance = sliderDebugElement . injector . get ( MdSlider ) ;
369
+ sliderTrackElement = < HTMLElement > sliderNativeElement . querySelector ( '.md-slider-track' ) ;
370
+ sliderDimensions = sliderTrackElement . getBoundingClientRect ( ) ;
371
+ trackFillElement = < HTMLElement > sliderNativeElement . querySelector ( '.md-slider-track-fill' ) ;
372
+ thumbElement = < HTMLElement > sliderNativeElement . querySelector ( '.md-slider-thumb-position' ) ;
373
+ } ) ;
396
374
397
375
it ( 'should set the correct step value on click' , ( ) => {
398
376
expect ( sliderInstance . value ) . toBe ( 0 ) ;
@@ -448,16 +426,14 @@ describe('MdSlider', () => {
448
426
let lastTickContainer : HTMLElement ;
449
427
450
428
beforeEach ( async ( ( ) => {
451
- builder . createAsync ( SliderWithAutoTickInterval ) . then ( f => {
452
- fixture = f ;
453
- fixture . detectChanges ( ) ;
454
-
455
- sliderDebugElement = fixture . debugElement . query ( By . directive ( MdSlider ) ) ;
456
- sliderNativeElement = sliderDebugElement . nativeElement ;
457
- tickContainer = < HTMLElement > sliderNativeElement . querySelector ( '.md-slider-tick-container' ) ;
458
- lastTickContainer =
459
- < HTMLElement > sliderNativeElement . querySelector ( '.md-slider-last-tick-container' ) ;
460
- } ) ;
429
+ fixture = TestBed . createComponent ( SliderWithAutoTickInterval ) ;
430
+ fixture . detectChanges ( ) ;
431
+
432
+ sliderDebugElement = fixture . debugElement . query ( By . directive ( MdSlider ) ) ;
433
+ sliderNativeElement = sliderDebugElement . nativeElement ;
434
+ tickContainer = < HTMLElement > sliderNativeElement . querySelector ( '.md-slider-tick-container' ) ;
435
+ lastTickContainer =
436
+ < HTMLElement > sliderNativeElement . querySelector ( '.md-slider-last-tick-container' ) ;
461
437
} ) ) ;
462
438
463
439
it ( 'should set the correct tick separation' , ( ) => {
@@ -493,18 +469,16 @@ describe('MdSlider', () => {
493
469
let tickContainer : HTMLElement ;
494
470
let lastTickContainer : HTMLElement ;
495
471
496
- beforeEach ( async ( ( ) => {
497
- builder . createAsync ( SliderWithSetTickInterval ) . then ( f => {
498
- fixture = f ;
499
- fixture . detectChanges ( ) ;
500
-
501
- sliderDebugElement = fixture . debugElement . query ( By . directive ( MdSlider ) ) ;
502
- sliderNativeElement = sliderDebugElement . nativeElement ;
503
- tickContainer = < HTMLElement > sliderNativeElement . querySelector ( '.md-slider-tick-container' ) ;
504
- lastTickContainer =
505
- < HTMLElement > sliderNativeElement . querySelector ( '.md-slider-last-tick-container' ) ;
506
- } ) ;
507
- } ) ) ;
472
+ beforeEach ( ( ) => {
473
+ fixture = TestBed . createComponent ( SliderWithSetTickInterval ) ;
474
+ fixture . detectChanges ( ) ;
475
+
476
+ sliderDebugElement = fixture . debugElement . query ( By . directive ( MdSlider ) ) ;
477
+ sliderNativeElement = sliderDebugElement . nativeElement ;
478
+ tickContainer = < HTMLElement > sliderNativeElement . querySelector ( '.md-slider-tick-container' ) ;
479
+ lastTickContainer =
480
+ < HTMLElement > sliderNativeElement . querySelector ( '.md-slider-last-tick-container' ) ;
481
+ } ) ;
508
482
509
483
it ( 'should set the correct tick separation' , ( ) => {
510
484
// The slider width is 112px, the first step is at value 18 (step of 3 * tick interval of 6),
@@ -529,19 +503,17 @@ describe('MdSlider', () => {
529
503
let sliderContainerElement : Element ;
530
504
let thumbLabelTextElement : Element ;
531
505
532
- beforeEach ( async ( ( ) => {
533
- builder . createAsync ( SliderWithThumbLabel ) . then ( f => {
534
- fixture = f ;
535
- fixture . detectChanges ( ) ;
536
-
537
- sliderDebugElement = fixture . debugElement . query ( By . directive ( MdSlider ) ) ;
538
- sliderNativeElement = sliderDebugElement . nativeElement ;
539
- sliderInstance = sliderDebugElement . componentInstance ;
540
- sliderTrackElement = < HTMLElement > sliderNativeElement . querySelector ( '.md-slider-track' ) ;
541
- sliderContainerElement = sliderNativeElement . querySelector ( '.md-slider-container' ) ;
542
- thumbLabelTextElement = sliderNativeElement . querySelector ( '.md-slider-thumb-label-text' ) ;
543
- } ) ;
544
- } ) ) ;
506
+ beforeEach ( ( ) => {
507
+ fixture = TestBed . createComponent ( SliderWithThumbLabel ) ;
508
+ fixture . detectChanges ( ) ;
509
+
510
+ sliderDebugElement = fixture . debugElement . query ( By . directive ( MdSlider ) ) ;
511
+ sliderNativeElement = sliderDebugElement . nativeElement ;
512
+ sliderInstance = sliderDebugElement . componentInstance ;
513
+ sliderTrackElement = < HTMLElement > sliderNativeElement . querySelector ( '.md-slider-track' ) ;
514
+ sliderContainerElement = sliderNativeElement . querySelector ( '.md-slider-container' ) ;
515
+ thumbLabelTextElement = sliderNativeElement . querySelector ( '.md-slider-thumb-label-text' ) ;
516
+ } ) ;
545
517
546
518
it ( 'should add the thumb label class to the slider container' , ( ) => {
547
519
expect ( sliderContainerElement . classList ) . toContain ( 'md-slider-thumb-label-showing' ) ;
@@ -599,19 +571,17 @@ describe('MdSlider', () => {
599
571
let sliderTrackElement : HTMLElement ;
600
572
let testComponent : SliderWithTwoWayBinding ;
601
573
602
- beforeEach ( async ( ( ) => {
603
- builder . createAsync ( SliderWithTwoWayBinding ) . then ( f => {
604
- fixture = f ;
605
- fixture . detectChanges ( ) ;
574
+ beforeEach ( ( ) => {
575
+ fixture = TestBed . createComponent ( SliderWithTwoWayBinding ) ;
576
+ fixture . detectChanges ( ) ;
606
577
607
- testComponent = fixture . debugElement . componentInstance ;
578
+ testComponent = fixture . debugElement . componentInstance ;
608
579
609
- sliderDebugElement = fixture . debugElement . query ( By . directive ( MdSlider ) ) ;
610
- sliderNativeElement = sliderDebugElement . nativeElement ;
611
- sliderInstance = sliderDebugElement . injector . get ( MdSlider ) ;
612
- sliderTrackElement = < HTMLElement > sliderNativeElement . querySelector ( '.md-slider-track' ) ;
613
- } ) ;
614
- } ) ) ;
580
+ sliderDebugElement = fixture . debugElement . query ( By . directive ( MdSlider ) ) ;
581
+ sliderNativeElement = sliderDebugElement . nativeElement ;
582
+ sliderInstance = sliderDebugElement . injector . get ( MdSlider ) ;
583
+ sliderTrackElement = < HTMLElement > sliderNativeElement . querySelector ( '.md-slider-track' ) ;
584
+ } ) ;
615
585
616
586
it ( 'should update the control when the value is updated' , ( ) => {
617
587
expect ( testComponent . control . value ) . toBe ( 0 ) ;
@@ -654,13 +624,12 @@ describe('MdSlider', () => {
654
624
} ) ;
655
625
656
626
// The transition has to be removed in order to test the updated positions without setTimeout.
627
+ const noTransitionStyle =
628
+ '.md-slider-track-fill, .md-slider-thumb-position { transition: none !important; }' ;
629
+
657
630
@Component ( {
658
631
template : `<md-slider></md-slider>` ,
659
- styles : [ `
660
- .md-slider-track-fill, .md-slider-thumb-position {
661
- transition: none !important;
662
- }
663
- ` ] ,
632
+ styles : [ noTransitionStyle ] ,
664
633
encapsulation : ViewEncapsulation . None
665
634
} )
666
635
class StandardSlider { }
@@ -672,11 +641,7 @@ class DisabledSlider { }
672
641
673
642
@Component ( {
674
643
template : `<md-slider min="4" max="6"></md-slider>` ,
675
- styles : [ `
676
- .md-slider-track-fill, .md-slider-thumb-position {
677
- transition: none !important;
678
- }
679
- ` ] ,
644
+ styles : [ noTransitionStyle ] ,
680
645
encapsulation : ViewEncapsulation . None
681
646
} )
682
647
class SliderWithMinAndMax { }
@@ -688,32 +653,20 @@ class SliderWithValue { }
688
653
689
654
@Component ( {
690
655
template : `<md-slider step="25"></md-slider>` ,
691
- styles : [ `
692
- .md-slider-track-fill, .md-slider-thumb-position {
693
- transition: none !important;
694
- }
695
- ` ] ,
656
+ styles : [ noTransitionStyle ] ,
696
657
encapsulation : ViewEncapsulation . None
697
658
} )
698
659
class SliderWithStep { }
699
660
700
- @Component ( {
701
- template : `<md-slider step="5" tick-interval="auto"></md-slider>`
702
- } )
661
+ @Component ( { template : `<md-slider step="5" tick-interval="auto"></md-slider>` } )
703
662
class SliderWithAutoTickInterval { }
704
663
705
- @Component ( {
706
- template : `<md-slider step="3" tick-interval="6"></md-slider>`
707
- } )
664
+ @Component ( { template : `<md-slider step="3" tick-interval="6"></md-slider>` } )
708
665
class SliderWithSetTickInterval { }
709
666
710
667
@Component ( {
711
668
template : `<md-slider thumb-label></md-slider>` ,
712
- styles : [ `
713
- .md-slider-thumb-label, .md-slider-thumb-label-text {
714
- transition: none !important;
715
- }
716
- ` ] ,
669
+ styles : [ noTransitionStyle ] ,
717
670
encapsulation : ViewEncapsulation . None
718
671
} )
719
672
class SliderWithThumbLabel { }
0 commit comments