@@ -604,14 +604,38 @@ describe('CdkDrag', () => {
604
604
const dragElement = fixture . componentInstance . dragElement . nativeElement ;
605
605
const styles = dragElement . style ;
606
606
607
- expect ( styles . touchAction || ( styles as any ) . webkitUserDrag ) . toBe ( 'none' ) ;
607
+ expect ( styles . touchAction || ( styles as any ) . webkitUserDrag ) . toBeFalsy ( ) ;
608
608
609
609
fixture . componentInstance . dragInstance . disabled = true ;
610
610
fixture . detectChanges ( ) ;
611
611
612
612
expect ( styles . touchAction || ( styles as any ) . webkitUserDrag ) . toBeFalsy ( ) ;
613
613
} ) ) ;
614
614
615
+ it ( 'should enable native drag interactions if not dragging' , fakeAsync ( ( ) => {
616
+ const fixture = createComponent ( StandaloneDraggable ) ;
617
+ fixture . detectChanges ( ) ;
618
+ const dragElement = fixture . componentInstance . dragElement . nativeElement ;
619
+ const styles = dragElement . style ;
620
+
621
+ expect ( styles . touchAction || ( styles as any ) . webkitUserDrag ) . toBeFalsy ( ) ;
622
+ } ) ) ;
623
+
624
+ it ( 'should disable native drag interactions if dragging' , fakeAsync ( ( ) => {
625
+ const fixture = createComponent ( StandaloneDraggable ) ;
626
+ fixture . detectChanges ( ) ;
627
+ const dragElement = fixture . componentInstance . dragElement . nativeElement ;
628
+ const styles = dragElement . style ;
629
+
630
+ expect ( styles . touchAction || ( styles as any ) . webkitUserDrag ) . toBeFalsy ( ) ;
631
+
632
+ startDraggingViaMouse ( fixture , dragElement ) ;
633
+ dispatchMouseEvent ( document , 'mousemove' , 50 , 100 ) ;
634
+ fixture . detectChanges ( ) ;
635
+
636
+ expect ( styles . touchAction || ( styles as any ) . webkitUserDrag ) . toBe ( 'none' ) ;
637
+ } ) ) ;
638
+
615
639
it ( 'should stop propagation for the drag sequence start event' , fakeAsync ( ( ) => {
616
640
const fixture = createComponent ( StandaloneDraggable ) ;
617
641
fixture . detectChanges ( ) ;
@@ -765,7 +789,7 @@ describe('CdkDrag', () => {
765
789
} ) . toThrowError ( / ^ c d k D r a g m u s t b e a t t a c h e d t o a n e l e m e n t n o d e / ) ;
766
790
} ) ) ;
767
791
768
- it ( 'should allow for the dragging sequence to be delayed ' , fakeAsync ( ( ) => {
792
+ it ( 'should cancel drag if the mouse moves before the delay is elapsed ' , fakeAsync ( ( ) => {
769
793
// We can't use Jasmine's `clock` because Zone.js interferes with it.
770
794
spyOn ( Date , 'now' ) . and . callFake ( ( ) => currentTime ) ;
771
795
let currentTime = 0 ;
@@ -780,13 +804,52 @@ describe('CdkDrag', () => {
780
804
startDraggingViaMouse ( fixture , dragElement ) ;
781
805
currentTime += 750 ;
782
806
dispatchMouseEvent ( document , 'mousemove' , 50 , 100 ) ;
807
+ currentTime += 500 ;
783
808
fixture . detectChanges ( ) ;
784
809
785
810
expect ( dragElement . style . transform )
786
- . toBeFalsy ( 'Expected element not to be moved if the drag timeout has not passed.' ) ;
811
+ . toBeFalsy ( 'Expected element not to be moved if the mouse moved before the delay.' ) ;
812
+ } ) ) ;
787
813
788
- // The first `mousemove` here starts the sequence and the second one moves the element.
814
+ it ( 'should enable native drag interactions if mouse moves before the delay' , fakeAsync ( ( ) => {
815
+ // We can't use Jasmine's `clock` because Zone.js interferes with it.
816
+ spyOn ( Date , 'now' ) . and . callFake ( ( ) => currentTime ) ;
817
+ let currentTime = 0 ;
818
+
819
+ const fixture = createComponent ( StandaloneDraggable ) ;
820
+ fixture . componentInstance . dragStartDelay = 1000 ;
821
+ fixture . detectChanges ( ) ;
822
+ const dragElement = fixture . componentInstance . dragElement . nativeElement ;
823
+ const styles = dragElement . style ;
824
+
825
+ expect ( dragElement . style . transform ) . toBeFalsy ( 'Expected element not to be moved by default.' ) ;
826
+
827
+ startDraggingViaMouse ( fixture , dragElement ) ;
828
+ currentTime += 750 ;
829
+ dispatchMouseEvent ( document , 'mousemove' , 50 , 100 ) ;
789
830
currentTime += 500 ;
831
+ fixture . detectChanges ( ) ;
832
+
833
+ expect ( styles . touchAction || ( styles as any ) . webkitUserDrag ) . toBeFalsy ( ) ;
834
+ } ) ) ;
835
+
836
+ it ( 'should allow dragging after the drag start delay is elapsed' , fakeAsync ( ( ) => {
837
+ // We can't use Jasmine's `clock` because Zone.js interferes with it.
838
+ spyOn ( Date , 'now' ) . and . callFake ( ( ) => currentTime ) ;
839
+ let currentTime = 0 ;
840
+
841
+ const fixture = createComponent ( StandaloneDraggable ) ;
842
+ fixture . componentInstance . dragStartDelay = 500 ;
843
+ fixture . detectChanges ( ) ;
844
+ const dragElement = fixture . componentInstance . dragElement . nativeElement ;
845
+
846
+ expect ( dragElement . style . transform ) . toBeFalsy ( 'Expected element not to be moved by default.' ) ;
847
+
848
+ dispatchMouseEvent ( dragElement , 'mousedown' ) ;
849
+ fixture . detectChanges ( ) ;
850
+ currentTime += 750 ;
851
+
852
+ // The first `mousemove` here starts the sequence and the second one moves the element.
790
853
dispatchMouseEvent ( document , 'mousemove' , 50 , 100 ) ;
791
854
dispatchMouseEvent ( document , 'mousemove' , 50 , 100 ) ;
792
855
fixture . detectChanges ( ) ;
@@ -801,22 +864,17 @@ describe('CdkDrag', () => {
801
864
let currentTime = 0 ;
802
865
803
866
const fixture = createComponent ( StandaloneDraggable ) ;
804
- fixture . componentInstance . dragStartDelay = '1000 ' ;
867
+ fixture . componentInstance . dragStartDelay = '500 ' ;
805
868
fixture . detectChanges ( ) ;
806
869
const dragElement = fixture . componentInstance . dragElement . nativeElement ;
807
870
808
871
expect ( dragElement . style . transform ) . toBeFalsy ( 'Expected element not to be moved by default.' ) ;
809
872
810
- startDraggingViaMouse ( fixture , dragElement ) ;
811
- currentTime += 750 ;
812
- dispatchMouseEvent ( document , 'mousemove' , 50 , 100 ) ;
873
+ dispatchMouseEvent ( dragElement , 'mousedown' ) ;
813
874
fixture . detectChanges ( ) ;
814
-
815
- expect ( dragElement . style . transform )
816
- . toBeFalsy ( 'Expected element not to be moved if the drag timeout has not passed.' ) ;
875
+ currentTime += 750 ;
817
876
818
877
// The first `mousemove` here starts the sequence and the second one moves the element.
819
- currentTime += 500 ;
820
878
dispatchMouseEvent ( document , 'mousemove' , 50 , 100 ) ;
821
879
dispatchMouseEvent ( document , 'mousemove' , 50 , 100 ) ;
822
880
fixture . detectChanges ( ) ;
0 commit comments