@@ -44,28 +44,33 @@ const ITEM_WIDTH = 75;
44
44
45
45
describe ( 'CdkDrag' , ( ) => {
46
46
function createComponent < T > (
47
- componentType : Type < T > , providers : Provider [ ] = [ ] , dragDistance = 0 ,
48
- extraDeclarations : Type < any > [ ] = [ ] ) : ComponentFixture < T > {
49
- TestBed
50
- . configureTestingModule ( {
51
- imports : [ DragDropModule , CdkScrollableModule ] ,
52
- declarations : [ componentType , PassthroughComponent , ...extraDeclarations ] ,
53
- providers : [
54
- {
55
- provide : CDK_DRAG_CONFIG ,
56
- useValue : {
57
- // We default the `dragDistance` to zero, because the majority of the tests
58
- // don't care about it and drags are a lot easier to simulate when we don't
59
- // have to deal with thresholds.
60
- dragStartThreshold : dragDistance ,
61
- pointerDirectionChangeThreshold : 5
62
- } as DragDropConfig
63
- } ,
64
- ...providers
65
- ] ,
66
- } )
67
- . compileComponents ( ) ;
47
+ componentType : Type < T > , providers : Provider [ ] = [ ] , dragDistance = 0 ,
48
+ extraDeclarations : Type < any > [ ] = [ ] , encapsulation ?: ViewEncapsulation ) : ComponentFixture < T > {
49
+ TestBed . configureTestingModule ( {
50
+ imports : [ DragDropModule , CdkScrollableModule ] ,
51
+ declarations : [ componentType , PassthroughComponent , ...extraDeclarations ] ,
52
+ providers : [
53
+ {
54
+ provide : CDK_DRAG_CONFIG ,
55
+ useValue : {
56
+ // We default the `dragDistance` to zero, because the majority of the tests
57
+ // don't care about it and drags are a lot easier to simulate when we don't
58
+ // have to deal with thresholds.
59
+ dragStartThreshold : dragDistance ,
60
+ pointerDirectionChangeThreshold : 5
61
+ } as DragDropConfig
62
+ } ,
63
+ ...providers
64
+ ] ,
65
+ } ) ;
66
+
67
+ if ( encapsulation != null ) {
68
+ TestBed . overrideComponent ( componentType , {
69
+ set : { encapsulation}
70
+ } ) ;
71
+ }
68
72
73
+ TestBed . compileComponents ( ) ;
69
74
return TestBed . createComponent < T > ( componentType ) ;
70
75
}
71
76
@@ -2010,6 +2015,54 @@ describe('CdkDrag', () => {
2010
2015
} ) ;
2011
2016
} ) ) ;
2012
2017
2018
+ it ( 'should calculate the index if the list is scrolled while dragging inside the shadow DOM' ,
2019
+ fakeAsync ( ( ) => {
2020
+ // This test is only relevant for Shadow DOM-supporting browsers.
2021
+ if ( ! _supportsShadowDom ( ) ) {
2022
+ return ;
2023
+ }
2024
+
2025
+ const fixture = createComponent ( DraggableInScrollableVerticalDropZone , [ ] , undefined , [ ] ,
2026
+ ViewEncapsulation . ShadowDom ) ;
2027
+ fixture . detectChanges ( ) ;
2028
+ const dragItems = fixture . componentInstance . dragItems ;
2029
+ const firstItem = dragItems . first ;
2030
+ const thirdItemRect = dragItems . toArray ( ) [ 2 ] . element . nativeElement . getBoundingClientRect ( ) ;
2031
+ const list = fixture . componentInstance . dropInstance . element . nativeElement ;
2032
+
2033
+ startDraggingViaMouse ( fixture , firstItem . element . nativeElement ) ;
2034
+ fixture . detectChanges ( ) ;
2035
+
2036
+ dispatchMouseEvent ( document , 'mousemove' , thirdItemRect . left + 1 , thirdItemRect . top + 1 ) ;
2037
+ fixture . detectChanges ( ) ;
2038
+
2039
+ list . scrollTop = ITEM_HEIGHT * 10 ;
2040
+ dispatchFakeEvent ( list , 'scroll' ) ;
2041
+ fixture . detectChanges ( ) ;
2042
+
2043
+ dispatchMouseEvent ( document , 'mouseup' ) ;
2044
+ fixture . detectChanges ( ) ;
2045
+ flush ( ) ;
2046
+ fixture . detectChanges ( ) ;
2047
+
2048
+ expect ( fixture . componentInstance . droppedSpy ) . toHaveBeenCalledTimes ( 1 ) ;
2049
+
2050
+ const event = fixture . componentInstance . droppedSpy . calls . mostRecent ( ) . args [ 0 ] ;
2051
+
2052
+ // Assert the event like this, rather than `toHaveBeenCalledWith`, because Jasmine will
2053
+ // go into an infinite loop trying to stringify the event, if the test fails.
2054
+ expect ( event ) . toEqual ( {
2055
+ previousIndex : 0 ,
2056
+ currentIndex : 12 ,
2057
+ item : firstItem ,
2058
+ container : fixture . componentInstance . dropInstance ,
2059
+ previousContainer : fixture . componentInstance . dropInstance ,
2060
+ isPointerOverContainer : jasmine . any ( Boolean ) ,
2061
+ distance : { x : jasmine . any ( Number ) , y : jasmine . any ( Number ) } ,
2062
+ dropPoint : { x : jasmine . any ( Number ) , y : jasmine . any ( Number ) }
2063
+ } ) ;
2064
+ } ) ) ;
2065
+
2013
2066
it ( 'should calculate the index if the viewport is scrolled while dragging' , fakeAsync ( ( ) => {
2014
2067
const fixture = createComponent ( DraggableInDropZone ) ;
2015
2068
@@ -2260,6 +2313,54 @@ describe('CdkDrag', () => {
2260
2313
cleanup ( ) ;
2261
2314
} ) ) ;
2262
2315
2316
+ it ( 'should update the boundary if a parent is scrolled while dragging inside the shadow DOM' ,
2317
+ fakeAsync ( ( ) => {
2318
+ // This test is only relevant for Shadow DOM-supporting browsers.
2319
+ if ( ! _supportsShadowDom ( ) ) {
2320
+ return ;
2321
+ }
2322
+
2323
+ const fixture = createComponent ( DraggableInScrollableParentContainer , [ ] , undefined , [ ] ,
2324
+ ViewEncapsulation . ShadowDom ) ;
2325
+ fixture . componentInstance . boundarySelector = '.cdk-drop-list' ;
2326
+ fixture . detectChanges ( ) ;
2327
+
2328
+ const container : HTMLElement = fixture . nativeElement . shadowRoot
2329
+ . querySelector ( '.scroll-container' ) ;
2330
+ const item = fixture . componentInstance . dragItems . toArray ( ) [ 1 ] . element . nativeElement ;
2331
+ const list = fixture . componentInstance . dropInstance . element . nativeElement ;
2332
+ const cleanup = makeScrollable ( 'vertical' , container ) ;
2333
+ container . scrollTop = 10 ;
2334
+
2335
+ // Note that we need to measure after scrolling.
2336
+ let listRect = list . getBoundingClientRect ( ) ;
2337
+
2338
+ startDraggingViaMouse ( fixture , item ) ;
2339
+ startDraggingViaMouse ( fixture , item , listRect . right , listRect . bottom ) ;
2340
+ flush ( ) ;
2341
+ dispatchMouseEvent ( document , 'mousemove' , listRect . right , listRect . bottom ) ;
2342
+ fixture . detectChanges ( ) ;
2343
+
2344
+ const preview = fixture . nativeElement . shadowRoot
2345
+ . querySelector ( '.cdk-drag-preview' ) ! as HTMLElement ;
2346
+ let previewRect = preview . getBoundingClientRect ( ) ;
2347
+
2348
+ // Different browsers round the scroll position differently so
2349
+ // assert that the offsets are within a pixel of each other.
2350
+ expect ( Math . abs ( previewRect . bottom - listRect . bottom ) ) . toBeLessThan ( 2 ) ;
2351
+
2352
+ container . scrollTop = 0 ;
2353
+ dispatchFakeEvent ( container , 'scroll' ) ;
2354
+ fixture . detectChanges ( ) ;
2355
+ listRect = list . getBoundingClientRect ( ) ; // We need to update these since we've scrolled.
2356
+ dispatchMouseEvent ( document , 'mousemove' , listRect . right , listRect . bottom ) ;
2357
+ fixture . detectChanges ( ) ;
2358
+ previewRect = preview . getBoundingClientRect ( ) ;
2359
+
2360
+ expect ( Math . abs ( previewRect . bottom - listRect . bottom ) ) . toBeLessThan ( 2 ) ;
2361
+ cleanup ( ) ;
2362
+ } ) ) ;
2363
+
2263
2364
it ( 'should clear the id from the preview' , fakeAsync ( ( ) => {
2264
2365
const fixture = createComponent ( DraggableInDropZone ) ;
2265
2366
fixture . detectChanges ( ) ;
@@ -5520,7 +5621,8 @@ describe('CdkDrag', () => {
5520
5621
return ;
5521
5622
}
5522
5623
5523
- const fixture = createComponent ( ConnectedDropZonesInsideShadowRoot ) ;
5624
+ const fixture = createComponent ( ConnectedDropZones , [ ] , undefined , [ ] ,
5625
+ ViewEncapsulation . ShadowDom ) ;
5524
5626
fixture . detectChanges ( ) ;
5525
5627
5526
5628
const groups = fixture . componentInstance . groupedDragItems ;
@@ -5651,7 +5753,8 @@ describe('CdkDrag', () => {
5651
5753
return ;
5652
5754
}
5653
5755
5654
- const fixture = createComponent ( ConnectedDropZonesInsideShadowRoot ) ;
5756
+ const fixture = createComponent ( ConnectedDropZones , [ ] , undefined , [ ] ,
5757
+ ViewEncapsulation . ShadowDom ) ;
5655
5758
fixture . detectChanges ( ) ;
5656
5759
const item = fixture . componentInstance . groupedDragItems [ 0 ] [ 1 ] ;
5657
5760
@@ -5961,7 +6064,7 @@ class DraggableInDropZone implements AfterViewInit {
5961
6064
// Firefox preserves the `scrollTop` value from previous similar containers. This
5962
6065
// could throw off test assertions and result in flaky results.
5963
6066
// See: https://bugzilla.mozilla.org/show_bug.cgi?id=959812.
5964
- this . _elementRef . nativeElement . querySelector ( '.scroll-container' ) . scrollTop = 0 ;
6067
+ this . dropInstance . element . nativeElement . scrollTop = 0 ;
5965
6068
}
5966
6069
}
5967
6070
@@ -6363,14 +6466,6 @@ class ConnectedDropZones implements AfterViewInit {
6363
6466
}
6364
6467
}
6365
6468
6366
- @Component ( {
6367
- encapsulation : ViewEncapsulation . ShadowDom ,
6368
- styles : CONNECTED_DROP_ZONES_STYLES ,
6369
- template : CONNECTED_DROP_ZONES_TEMPLATE
6370
- } )
6371
- class ConnectedDropZonesInsideShadowRoot extends ConnectedDropZones {
6372
- }
6373
-
6374
6469
@Component ( {
6375
6470
encapsulation : ViewEncapsulation . ShadowDom ,
6376
6471
styles : CONNECTED_DROP_ZONES_STYLES ,
0 commit comments