@@ -2489,7 +2489,8 @@ describe('CdkDrag', () => {
2489
2489
2490
2490
startDraggingViaMouse ( fixture , item ) ;
2491
2491
2492
- const preview = document . querySelector ( '.cdk-drag-preview' ) ! as HTMLElement ;
2492
+ const preview = document . querySelector ( '.cdk-drag-preview' ) as HTMLElement ;
2493
+ const previewContainer = document . querySelector ( '.cdk-drag-preview-container' ) as HTMLElement ;
2493
2494
const previewRect = preview . getBoundingClientRect ( ) ;
2494
2495
const zeroPxRegex = / ^ 0 ( p x ) ? $ / ;
2495
2496
@@ -2511,12 +2512,14 @@ describe('CdkDrag', () => {
2511
2512
. withContext ( 'Expected element to be removed from layout' )
2512
2513
. toBe ( '-999em' ) ;
2513
2514
expect ( item . style . opacity ) . withContext ( 'Expected element to be invisible' ) . toBe ( '0' ) ;
2514
- expect ( preview ) . withContext ( 'Expected preview to be in the DOM' ) . toBeTruthy ( ) ;
2515
+ expect ( previewContainer )
2516
+ . withContext ( 'Expected preview container to be in the DOM' )
2517
+ . toBeTruthy ( ) ;
2515
2518
expect ( preview . textContent ! . trim ( ) )
2516
2519
. withContext ( 'Expected preview content to match element' )
2517
2520
. toContain ( 'One' ) ;
2518
- expect ( preview . getAttribute ( 'dir' ) )
2519
- . withContext ( 'Expected preview element to inherit the directionality.' )
2521
+ expect ( previewContainer . getAttribute ( 'dir' ) )
2522
+ . withContext ( 'Expected preview container element to inherit the directionality.' )
2520
2523
. toBe ( 'ltr' ) ;
2521
2524
expect ( previewRect . width )
2522
2525
. withContext ( 'Expected preview width to match element' )
@@ -2527,8 +2530,8 @@ describe('CdkDrag', () => {
2527
2530
expect ( preview . style . pointerEvents )
2528
2531
. withContext ( 'Expected pointer events to be disabled on the preview' )
2529
2532
. toBe ( 'none' ) ;
2530
- expect ( preview . style . zIndex )
2531
- . withContext ( 'Expected preview to have a high default zIndex.' )
2533
+ expect ( previewContainer . style . zIndex )
2534
+ . withContext ( 'Expected preview container to have a high default zIndex.' )
2532
2535
. toBe ( '1000' ) ;
2533
2536
// Use a regex here since some browsers normalize 0 to 0px, but others don't.
2534
2537
// Use a regex here since some browsers normalize 0 to 0px, but others don't.
@@ -2549,8 +2552,8 @@ describe('CdkDrag', () => {
2549
2552
expect ( item . style . top ) . withContext ( 'Expected element to be within the layout' ) . toBeFalsy ( ) ;
2550
2553
expect ( item . style . left ) . withContext ( 'Expected element to be within the layout' ) . toBeFalsy ( ) ;
2551
2554
expect ( item . style . opacity ) . withContext ( 'Expected element to be visible' ) . toBeFalsy ( ) ;
2552
- expect ( preview . parentNode )
2553
- . withContext ( 'Expected preview to be removed from the DOM' )
2555
+ expect ( previewContainer . parentNode )
2556
+ . withContext ( 'Expected preview container to be removed from the DOM' )
2554
2557
. toBeFalsy ( ) ;
2555
2558
} ) ) ;
2556
2559
@@ -2568,7 +2571,7 @@ describe('CdkDrag', () => {
2568
2571
const item = fixture . componentInstance . dragItems . toArray ( ) [ 1 ] . element . nativeElement ;
2569
2572
startDraggingViaMouse ( fixture , item ) ;
2570
2573
2571
- const preview = document . querySelector ( '.cdk-drag-preview' ) ! as HTMLElement ;
2574
+ const preview = document . querySelector ( '.cdk-drag-preview-container ' ) ! as HTMLElement ;
2572
2575
expect ( preview . style . zIndex ) . toBe ( '3000' ) ;
2573
2576
} ) ) ;
2574
2577
@@ -2613,9 +2616,11 @@ describe('CdkDrag', () => {
2613
2616
startDraggingViaMouse ( fixture , item ) ;
2614
2617
flush ( ) ;
2615
2618
2616
- const preview = document . querySelector ( '.cdk-drag-preview' ) ! as HTMLElement ;
2619
+ const previewContainer = document . querySelector (
2620
+ '.cdk-drag-preview-container' ,
2621
+ ) ! as HTMLElement ;
2617
2622
2618
- expect ( preview . parentNode ) . toBe ( fakeDocument . fullscreenElement ) ;
2623
+ expect ( previewContainer . parentNode ) . toBe ( fakeDocument . fullscreenElement ) ;
2619
2624
fakeDocument . fullscreenElement . remove ( ) ;
2620
2625
} ) ) ;
2621
2626
@@ -2914,8 +2919,8 @@ describe('CdkDrag', () => {
2914
2919
const item = fixture . componentInstance . dragItems . toArray ( ) [ 1 ] . element . nativeElement ;
2915
2920
startDraggingViaMouse ( fixture , item ) ;
2916
2921
2917
- expect ( document . querySelector ( '.cdk-drag-preview' ) ! . getAttribute ( 'dir' ) )
2918
- . withContext ( 'Expected preview element to inherit the directionality.' )
2922
+ expect ( document . querySelector ( '.cdk-drag-preview-container ' ) ! . getAttribute ( 'dir' ) )
2923
+ . withContext ( 'Expected preview container to inherit the directionality.' )
2919
2924
. toBe ( 'rtl' ) ;
2920
2925
} ) ) ;
2921
2926
@@ -2926,7 +2931,8 @@ describe('CdkDrag', () => {
2926
2931
2927
2932
startDraggingViaMouse ( fixture , item ) ;
2928
2933
2929
- const preview = document . querySelector ( '.cdk-drag-preview' ) ! as HTMLElement ;
2934
+ const preview = document . querySelector ( '.cdk-drag-preview' ) as HTMLElement ;
2935
+ const previewContainer = document . querySelector ( '.cdk-drag-preview-container' ) as HTMLElement ;
2930
2936
2931
2937
// Add a duration since the tests won't include one.
2932
2938
preview . style . transitionDuration = '500ms' ;
@@ -2939,13 +2945,13 @@ describe('CdkDrag', () => {
2939
2945
fixture . detectChanges ( ) ;
2940
2946
tick ( 250 ) ;
2941
2947
2942
- expect ( preview . parentNode )
2948
+ expect ( previewContainer . parentNode )
2943
2949
. withContext ( 'Expected preview to be in the DOM mid-way through the transition' )
2944
2950
. toBeTruthy ( ) ;
2945
2951
2946
2952
tick ( 500 ) ;
2947
2953
2948
- expect ( preview . parentNode )
2954
+ expect ( previewContainer . parentNode )
2949
2955
. withContext ( 'Expected preview to be removed from the DOM if the transition timed out' )
2950
2956
. toBeFalsy ( ) ;
2951
2957
} ) ) ;
@@ -3049,6 +3055,7 @@ describe('CdkDrag', () => {
3049
3055
startDraggingViaMouse ( fixture , item ) ;
3050
3056
3051
3057
const preview = document . querySelector ( '.cdk-drag-preview' ) ! as HTMLElement ;
3058
+ const previewContainer = document . querySelector ( '.cdk-drag-preview-container' ) as HTMLElement ;
3052
3059
preview . style . transition = 'opacity 500ms ease' ;
3053
3060
3054
3061
dispatchMouseEvent ( document , 'mousemove' , 50 , 50 ) ;
@@ -3058,8 +3065,8 @@ describe('CdkDrag', () => {
3058
3065
fixture . detectChanges ( ) ;
3059
3066
tick ( 0 ) ;
3060
3067
3061
- expect ( preview . parentNode )
3062
- . withContext ( 'Expected preview to be removed from the DOM immediately' )
3068
+ expect ( previewContainer . parentNode )
3069
+ . withContext ( 'Expected preview container to be removed from the DOM immediately' )
3063
3070
. toBeFalsy ( ) ;
3064
3071
} ) ) ;
3065
3072
@@ -3071,6 +3078,7 @@ describe('CdkDrag', () => {
3071
3078
startDraggingViaMouse ( fixture , item ) ;
3072
3079
3073
3080
const preview = document . querySelector ( '.cdk-drag-preview' ) ! as HTMLElement ;
3081
+ const previewContainer = document . querySelector ( '.cdk-drag-preview-container' ) as HTMLElement ;
3074
3082
preview . style . transition = 'opacity 500ms ease, transform 1000ms ease' ;
3075
3083
3076
3084
dispatchMouseEvent ( document , 'mousemove' , 50 , 50 ) ;
@@ -3080,15 +3088,17 @@ describe('CdkDrag', () => {
3080
3088
fixture . detectChanges ( ) ;
3081
3089
tick ( 500 ) ;
3082
3090
3083
- expect ( preview . parentNode )
3084
- . withContext ( 'Expected preview to be in the DOM at the end of the opacity transition' )
3091
+ expect ( previewContainer . parentNode )
3092
+ . withContext (
3093
+ 'Expected preview container to be in the DOM at the end of the opacity transition' ,
3094
+ )
3085
3095
. toBeTruthy ( ) ;
3086
3096
3087
3097
tick ( 1000 ) ;
3088
3098
3089
- expect ( preview . parentNode )
3099
+ expect ( previewContainer . parentNode )
3090
3100
. withContext (
3091
- 'Expected preview to be removed from the DOM at the end of the ' + ' transform transition',
3101
+ 'Expected preview container to be removed from the DOM at the end of the transform transition' ,
3092
3102
)
3093
3103
. toBeFalsy ( ) ;
3094
3104
} ) ) ;
@@ -3130,8 +3140,8 @@ describe('CdkDrag', () => {
3130
3140
const item = fixture . componentInstance . dragItems . toArray ( ) [ 1 ] . element . nativeElement ;
3131
3141
3132
3142
startDraggingViaMouse ( fixture , item ) ;
3133
- const preview = document . querySelector ( '.cdk-drag-preview' ) ! as HTMLElement ;
3134
- expect ( preview . parentNode ) . toBe ( document . body ) ;
3143
+ const previewContainer = document . querySelector ( '.cdk-drag-preview-container' ) as HTMLElement ;
3144
+ expect ( previewContainer . parentNode ) . toBe ( document . body ) ;
3135
3145
} ) ) ;
3136
3146
3137
3147
it ( 'should insert the preview into the parent node if previewContainer is set to `parent`' , fakeAsync ( ( ) => {
@@ -3142,9 +3152,9 @@ describe('CdkDrag', () => {
3142
3152
const list = fixture . nativeElement . querySelector ( '.drop-list' ) ;
3143
3153
3144
3154
startDraggingViaMouse ( fixture , item ) ;
3145
- const preview = document . querySelector ( '.cdk-drag-preview' ) ! as HTMLElement ;
3155
+ const previewContainer = document . querySelector ( '.cdk-drag-preview-container' ) as HTMLElement ;
3146
3156
expect ( list ) . toBeTruthy ( ) ;
3147
- expect ( preview . parentNode ) . toBe ( list ) ;
3157
+ expect ( previewContainer . parentNode ) . toBe ( list ) ;
3148
3158
} ) ) ;
3149
3159
3150
3160
it ( 'should insert the preview into a particular element, if specified' , fakeAsync ( ( ) => {
@@ -3158,8 +3168,10 @@ describe('CdkDrag', () => {
3158
3168
fixture . detectChanges ( ) ;
3159
3169
3160
3170
startDraggingViaMouse ( fixture , item ) ;
3161
- const preview = document . querySelector ( '.cdk-drag-preview' ) ! as HTMLElement ;
3162
- expect ( preview . parentNode ) . toBe ( previewContainer . nativeElement ) ;
3171
+ const previewContainerElement = document . querySelector (
3172
+ '.cdk-drag-preview-container' ,
3173
+ ) as HTMLElement ;
3174
+ expect ( previewContainerElement . parentNode ) . toBe ( previewContainer . nativeElement ) ;
3163
3175
} ) ) ;
3164
3176
3165
3177
it ( 'should remove the id from the placeholder' , fakeAsync ( ( ) => {
@@ -3671,15 +3683,17 @@ describe('CdkDrag', () => {
3671
3683
3672
3684
startDraggingViaMouse ( fixture , item ) ;
3673
3685
3674
- const preview = document . querySelector ( '.cdk-drag-preview' ) ! as HTMLElement ;
3686
+ const previewContainer = document . querySelector ( '.cdk-drag-preview-container' ) as HTMLElement ;
3675
3687
3676
- expect ( preview . parentNode ) . withContext ( 'Expected preview to be in the DOM' ) . toBeTruthy ( ) ;
3688
+ expect ( previewContainer . parentNode )
3689
+ . withContext ( 'Expected preview container to be in the DOM' )
3690
+ . toBeTruthy ( ) ;
3677
3691
expect ( item . parentNode ) . withContext ( 'Expected drag item to be in the DOM' ) . toBeTruthy ( ) ;
3678
3692
3679
3693
fixture . destroy ( ) ;
3680
3694
3681
- expect ( preview . parentNode )
3682
- . withContext ( 'Expected preview to be removed from the DOM' )
3695
+ expect ( previewContainer . parentNode )
3696
+ . withContext ( 'Expected preview container to be removed from the DOM' )
3683
3697
. toBeFalsy ( ) ;
3684
3698
expect ( item . parentNode )
3685
3699
. withContext ( 'Expected drag item to be removed from the DOM' )
@@ -6548,21 +6562,15 @@ describe('CdkDrag', () => {
6548
6562
startDraggingViaMouse ( fixture , item . element . nativeElement ) ;
6549
6563
fixture . detectChanges ( ) ;
6550
6564
6551
- const initialSelectStart = dispatchFakeEvent (
6552
- shadowRoot ,
6553
- 'selectstart' ,
6554
- ) ;
6565
+ const initialSelectStart = dispatchFakeEvent ( shadowRoot , 'selectstart' ) ;
6555
6566
fixture . detectChanges ( ) ;
6556
6567
expect ( initialSelectStart . defaultPrevented ) . toBe ( true ) ;
6557
6568
6558
6569
dispatchMouseEvent ( document , 'mouseup' ) ;
6559
6570
fixture . detectChanges ( ) ;
6560
6571
flush ( ) ;
6561
6572
6562
- const afterDropSelectStart = dispatchFakeEvent (
6563
- shadowRoot ,
6564
- 'selectstart' ,
6565
- ) ;
6573
+ const afterDropSelectStart = dispatchFakeEvent ( shadowRoot , 'selectstart' ) ;
6566
6574
fixture . detectChanges ( ) ;
6567
6575
expect ( afterDropSelectStart . defaultPrevented ) . toBe ( false ) ;
6568
6576
} ) ) ;
0 commit comments