From 0d8ec16c5006a3d24665f8eb42a1b9bfaf04a5f3 Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Tue, 28 May 2024 14:31:31 -0700 Subject: [PATCH] test: fix overzealous calls to markForCheck from #29083 --- .../live-announcer/live-announcer.spec.ts | 4 - src/cdk/clipboard/copy-to-clipboard.spec.ts | 4 - src/cdk/drag-drop/directives/drag.spec.ts | 759 +++--------------- .../drag-drop/directives/test-utils.spec.ts | 12 - src/cdk/drag-drop/drag-drop-registry.ts | 55 +- src/cdk/drag-drop/drag-drop.spec.ts | 2 - src/cdk/drag-drop/drag-ref.ts | 46 +- src/cdk/listbox/listbox.spec.ts | 90 +-- src/cdk/listbox/listbox.ts | 37 +- src/cdk/observers/observe-content.spec.ts | 6 - src/cdk/overlay/overlay-directives.spec.ts | 10 - 11 files changed, 208 insertions(+), 817 deletions(-) diff --git a/src/cdk/a11y/live-announcer/live-announcer.spec.ts b/src/cdk/a11y/live-announcer/live-announcer.spec.ts index 9c3efcbc4063..b1509f5e7edc 100644 --- a/src/cdk/a11y/live-announcer/live-announcer.spec.ts +++ b/src/cdk/a11y/live-announcer/live-announcer.spec.ts @@ -178,7 +178,6 @@ describe('LiveAnnouncer', () => { const overlayRef = overlay.create(); const componentRef = overlayRef.attach(portal); const modal = componentRef.location.nativeElement; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(ariaLiveElement.id).toBeTruthy(); @@ -199,7 +198,6 @@ describe('LiveAnnouncer', () => { const overlayRef = overlay.create(); const componentRef = overlayRef.attach(portal); const modal = componentRef.location.nativeElement; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); componentRef.instance.ariaOwns = 'foo bar'; @@ -320,7 +318,6 @@ describe('CdkAriaLive', () => { announcer = la; announcerSpy = spyOn(la, 'announce').and.callThrough(); fixture = TestBed.createComponent(DivWithCdkAriaLive); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); }), @@ -375,7 +372,6 @@ describe('CdkAriaLive', () => { expect(announcer.announce).toHaveBeenCalledTimes(1); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); invokeMutationCallbacks(); flush(); diff --git a/src/cdk/clipboard/copy-to-clipboard.spec.ts b/src/cdk/clipboard/copy-to-clipboard.spec.ts index 1662553b8046..337dcaa01fc5 100644 --- a/src/cdk/clipboard/copy-to-clipboard.spec.ts +++ b/src/cdk/clipboard/copy-to-clipboard.spec.ts @@ -78,7 +78,6 @@ describe('CdkCopyToClipboard', () => { fixture.detectChanges(); fixture.nativeElement.querySelector('button')!.click(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); tick(3); @@ -102,7 +101,6 @@ describe('CdkCopyToClipboard', () => { fixture.detectChanges(); fixture.nativeElement.querySelector('button')!.click(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); tick(3); @@ -122,11 +120,9 @@ describe('CdkCopyToClipboard', () => { fixture.detectChanges(); spyOn(clipboard, 'beginCopy').and.returnValue(fakeCopy); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); fixture.nativeElement.querySelector('button')!.click(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); tick(1); diff --git a/src/cdk/drag-drop/directives/drag.spec.ts b/src/cdk/drag-drop/directives/drag.spec.ts index a675c51dd214..fd07ecb51b25 100644 --- a/src/cdk/drag-drop/directives/drag.spec.ts +++ b/src/cdk/drag-drop/directives/drag.spec.ts @@ -12,6 +12,7 @@ import { import { AfterViewInit, ChangeDetectionStrategy, + ChangeDetectorRef, Component, ElementRef, ErrorHandler, @@ -22,6 +23,8 @@ import { ViewChild, ViewChildren, ViewEncapsulation, + inject, + signal, } from '@angular/core'; import {ComponentFixture, TestBed, fakeAsync, flush, tick} from '@angular/core/testing'; import {of as observableOf} from 'rxjs'; @@ -32,7 +35,7 @@ import {CdkDragDrop, CdkDragEnter, CdkDragStart} from '../drag-events'; import {DragRef, Point, PreviewContainer} from '../drag-ref'; import {moveItemInArray} from '../drag-utils'; -import {CDK_DRAG_CONFIG, DragDropConfig} from './config'; +import {CDK_DRAG_CONFIG, DragAxis, DragDropConfig} from './config'; import {CdkDrag} from './drag'; import {CdkDragHandle} from './drag-handle'; import {CdkDropList} from './drop-list'; @@ -95,7 +98,6 @@ describe('CdkDrag', () => { describe('mouse dragging', () => { it('should drag an element freely to a particular position', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -106,7 +108,6 @@ describe('CdkDrag', () => { it('should drag an element freely to a particular position when the page is scrolled', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const cleanup = makeScrollable(); @@ -121,7 +122,6 @@ describe('CdkDrag', () => { it('should continue dragging the element from where it was left off', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -136,7 +136,6 @@ describe('CdkDrag', () => { it('should continue dragging from where it was left off when the page is scrolled', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -156,7 +155,6 @@ describe('CdkDrag', () => { it('should not drag an element with the right mouse button', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; const event = createMouseEvent('mousedown', 50, 100, 2); @@ -164,15 +162,12 @@ describe('CdkDrag', () => { expect(dragElement.style.transform).toBeFalsy(); dispatchEvent(dragElement, event); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchMouseEvent(document, 'mousemove', 50, 100); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dragElement.style.transform).toBeFalsy(); @@ -180,7 +175,6 @@ describe('CdkDrag', () => { it('should not drag the element if it was not moved more than the minimum distance', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable, [], 5); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -191,28 +185,22 @@ describe('CdkDrag', () => { it('should be able to stop dragging after a double click', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable, [], 5); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; expect(dragElement.style.transform).toBeFalsy(); dispatchMouseEvent(dragElement, 'mousedown'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchMouseEvent(dragElement, 'mousedown'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dragElementViaMouse(fixture, dragElement, 50, 50); dispatchMouseEvent(document, 'mousemove', 100, 100); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dragElement.style.transform).toBeFalsy(); @@ -220,7 +208,6 @@ describe('CdkDrag', () => { it('should preserve the previous `transform` value', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -231,7 +218,6 @@ describe('CdkDrag', () => { it('should not generate multiple own `translate3d` values', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -246,7 +232,6 @@ describe('CdkDrag', () => { it('should prevent the `mousedown` action for native draggable elements', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -256,11 +241,9 @@ describe('CdkDrag', () => { Object.defineProperty(mousedownEvent, 'target', {get: () => dragElement}); spyOn(mousedownEvent, 'preventDefault').and.callThrough(); dispatchEvent(dragElement, mousedownEvent); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchMouseEvent(document, 'mousemove', 50, 50); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(mousedownEvent.preventDefault).toHaveBeenCalled(); @@ -268,7 +251,6 @@ describe('CdkDrag', () => { it('should not start dragging an element with a fake mousedown event', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; const event = createMouseEvent('mousedown', 0, 0); @@ -281,18 +263,14 @@ describe('CdkDrag', () => { expect(dragElement.style.transform).toBeFalsy(); dispatchEvent(dragElement, event); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchMouseEvent(document, 'mousemove', 20, 100); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchMouseEvent(document, 'mousemove', 50, 100); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dragElement.style.transform).toBeFalsy(); @@ -300,13 +278,11 @@ describe('CdkDrag', () => { it('should prevent the default dragstart action', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const event = dispatchFakeEvent( fixture.componentInstance.dragElement.nativeElement, 'dragstart', ); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(event.defaultPrevented).toBe(true); @@ -314,14 +290,12 @@ describe('CdkDrag', () => { it('should not prevent the default dragstart action when dragging is disabled', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); + fixture.componentInstance.dragDisabled.set(true); fixture.detectChanges(); - fixture.componentInstance.dragInstance.disabled = true; const event = dispatchFakeEvent( fixture.componentInstance.dragElement.nativeElement, 'dragstart', ); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(event.defaultPrevented).toBe(false); @@ -331,7 +305,6 @@ describe('CdkDrag', () => { describe('touch dragging', () => { it('should drag an element freely to a particular position', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -342,7 +315,6 @@ describe('CdkDrag', () => { it('should drag an element freely to a particular position when the page is scrolled', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -357,7 +329,6 @@ describe('CdkDrag', () => { it('should continue dragging the element from where it was left off', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -372,7 +343,6 @@ describe('CdkDrag', () => { it('should continue dragging from where it was left off when the page is scrolled', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -392,11 +362,9 @@ describe('CdkDrag', () => { it('should prevent the default `touchmove` action on the page while dragging', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchTouchEvent(fixture.componentInstance.dragElement.nativeElement, 'touchstart'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dispatchTouchEvent(document, 'touchmove').defaultPrevented) @@ -407,13 +375,11 @@ describe('CdkDrag', () => { .toBe(true); dispatchTouchEvent(document, 'touchend'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); })); it('should not prevent `touchstart` action for native draggable elements', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -423,11 +389,9 @@ describe('CdkDrag', () => { Object.defineProperty(touchstartEvent, 'target', {get: () => dragElement}); spyOn(touchstartEvent, 'preventDefault').and.callThrough(); dispatchEvent(dragElement, touchstartEvent); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchTouchEvent(document, 'touchmove'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(touchstartEvent.preventDefault).not.toHaveBeenCalled(); @@ -435,7 +399,6 @@ describe('CdkDrag', () => { it('should not start dragging an element with a fake touchstart event', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; const event = createTouchEvent('touchstart', 50, 50) as TouchEvent; @@ -449,18 +412,14 @@ describe('CdkDrag', () => { expect(dragElement.style.transform).toBeFalsy(); dispatchEvent(dragElement, event); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchTouchEvent(document, 'touchmove', 20, 100); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchTouchEvent(document, 'touchmove', 50, 100); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchTouchEvent(document, 'touchend'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dragElement.style.transform).toBeFalsy(); @@ -470,7 +429,6 @@ describe('CdkDrag', () => { describe('mouse dragging when initial transform is none', () => { it('should drag an element freely to a particular position', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; dragElement.style.transform = 'none'; @@ -482,7 +440,6 @@ describe('CdkDrag', () => { it('should dispatch an event when the user has started dragging', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); startDraggingViaMouse(fixture, fixture.componentInstance.dragElement.nativeElement); @@ -501,7 +458,6 @@ describe('CdkDrag', () => { it('should dispatch an event when the user has stopped dragging', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dragElementViaMouse(fixture, fixture.componentInstance.dragElement.nativeElement, 5, 10); @@ -522,7 +478,6 @@ describe('CdkDrag', () => { it('should include the drag distance in the ended event', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dragElementViaMouse(fixture, fixture.componentInstance.dragElement.nativeElement, 25, 30); @@ -548,7 +503,6 @@ describe('CdkDrag', () => { it('should emit when the user is moving the drag element', () => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const spy = jasmine.createSpy('move spy'); @@ -565,7 +519,6 @@ describe('CdkDrag', () => { it('should not emit events if it was not moved more than the minimum distance', () => { const fixture = createComponent(StandaloneDraggable, [], 5); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const moveSpy = jasmine.createSpy('move spy'); @@ -582,7 +535,6 @@ describe('CdkDrag', () => { it('should complete the `moved` stream on destroy', () => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const spy = jasmine.createSpy('move spy'); @@ -595,9 +547,8 @@ describe('CdkDrag', () => { it('should be able to lock dragging along the x axis', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); + fixture.componentInstance.dragLockAxis.set('x'); fixture.detectChanges(); - fixture.componentInstance.dragInstance.lockAxis = 'x'; const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -612,10 +563,8 @@ describe('CdkDrag', () => { it('should be able to lock dragging along the x axis while using constrainPosition', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); - fixture.detectChanges(); - fixture.componentInstance.dragInstance.lockAxis = 'x'; - fixture.componentInstance.dragInstance.constrainPosition = ( + fixture.componentInstance.dragLockAxis.set('x'); + fixture.componentInstance.constrainPosition = ( {x, y}: Point, _dragRef: DragRef, _dimensions: DOMRect, @@ -625,6 +574,8 @@ describe('CdkDrag', () => { y -= pickup.y; return {x, y}; }; + fixture.changeDetectorRef.markForCheck(); + fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -639,9 +590,8 @@ describe('CdkDrag', () => { it('should be able to lock dragging along the y axis', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); + fixture.componentInstance.dragLockAxis.set('y'); fixture.detectChanges(); - fixture.componentInstance.dragInstance.lockAxis = 'y'; const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -656,11 +606,8 @@ describe('CdkDrag', () => { it('should be able to lock dragging along the y axis while using constrainPosition', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); - fixture.detectChanges(); - - fixture.componentInstance.dragInstance.lockAxis = 'y'; - fixture.componentInstance.dragInstance.constrainPosition = ( + fixture.componentInstance.dragLockAxis.set('y'); + fixture.componentInstance.constrainPosition = ( {x, y}: Point, _dragRef: DragRef, _dimensions: DOMRect, @@ -670,6 +617,8 @@ describe('CdkDrag', () => { y -= pickup.y; return {x, y}; }; + fixture.changeDetectorRef.markForCheck(); + fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -684,7 +633,6 @@ describe('CdkDrag', () => { it('should add a class while an element is being dragged', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const element = fixture.componentInstance.dragElement.nativeElement; @@ -696,7 +644,6 @@ describe('CdkDrag', () => { expect(element.classList).toContain('cdk-drag-dragging'); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(element.classList).not.toContain('cdk-drag-dragging'); @@ -704,7 +651,6 @@ describe('CdkDrag', () => { it('should add a class while an element is being dragged with OnPush change detection', fakeAsync(() => { const fixture = createComponent(StandaloneDraggableWithOnPush); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const element = fixture.componentInstance.dragElement.nativeElement; @@ -716,7 +662,6 @@ describe('CdkDrag', () => { expect(element.classList).toContain('cdk-drag-dragging'); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(element.classList).not.toContain('cdk-drag-dragging'); @@ -724,7 +669,6 @@ describe('CdkDrag', () => { it('should not add a class if item was not dragged more than the threshold', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable, [], 5); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const element = fixture.componentInstance.dragElement.nativeElement; @@ -756,7 +700,6 @@ describe('CdkDrag', () => { it('should be able to set the cdkDrag element as handle if it has a different root element', fakeAsync(() => { const fixture = createComponent(DraggableWithAlternateRootAndSelfHandle); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragRoot = fixture.componentInstance.dragRoot.nativeElement; @@ -780,7 +723,6 @@ describe('CdkDrag', () => { it('should be able to set an alternate drag root element for ng-container', fakeAsync(() => { const fixture = createComponent(DraggableNgContainerWithAlternateRoot); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragRoot = fixture.componentInstance.dragRoot.nativeElement; @@ -794,7 +736,6 @@ describe('CdkDrag', () => { it('should preserve the initial transform if the root element changes', fakeAsync(() => { const fixture = createComponent(DraggableWithAlternateRoot); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; const alternateRoot = fixture.componentInstance.dragRoot.nativeElement; @@ -816,7 +757,6 @@ describe('CdkDrag', () => { it('should handle the root element selector changing after init', fakeAsync(() => { const fixture = createComponent(DraggableWithAlternateRoot); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); tick(); @@ -838,14 +778,12 @@ describe('CdkDrag', () => { it('should not be able to drag the element if dragging is disabled', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; expect(dragElement.classList).not.toContain('cdk-drag-disabled'); - fixture.componentInstance.dragInstance.disabled = true; - fixture.changeDetectorRef.markForCheck(); + fixture.componentInstance.dragDisabled.set(true); fixture.detectChanges(); expect(dragElement.classList).toContain('cdk-drag-disabled'); @@ -856,15 +794,13 @@ describe('CdkDrag', () => { it('should enable native drag interactions if dragging is disabled', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; const styles = dragElement.style; expect(styles.touchAction || (styles as any).webkitUserDrag).toBeFalsy(); - fixture.componentInstance.dragInstance.disabled = true; - fixture.changeDetectorRef.markForCheck(); + fixture.componentInstance.dragDisabled.set(true); fixture.detectChanges(); expect(styles.touchAction || (styles as any).webkitUserDrag).toBeFalsy(); @@ -872,7 +808,6 @@ describe('CdkDrag', () => { it('should enable native drag interactions if not dragging', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; const styles = dragElement.style; @@ -882,7 +817,6 @@ describe('CdkDrag', () => { it('should disable native drag interactions if dragging', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; const styles = dragElement.style; @@ -891,7 +825,6 @@ describe('CdkDrag', () => { startDraggingViaMouse(fixture, dragElement); dispatchMouseEvent(document, 'mousemove', 50, 100); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(styles.touchAction || (styles as any).webkitUserDrag).toBe('none'); @@ -899,20 +832,17 @@ describe('CdkDrag', () => { it('should re-enable drag interactions once dragging is over', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; const styles = dragElement.style; startDraggingViaMouse(fixture, dragElement); dispatchMouseEvent(document, 'mousemove', 50, 100); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(styles.touchAction || (styles as any).webkitUserDrag).toBe('none'); dispatchMouseEvent(document, 'mouseup', 50, 100); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(styles.touchAction || (styles as any).webkitUserDrag).toBeFalsy(); @@ -920,7 +850,6 @@ describe('CdkDrag', () => { it('should not stop propagation for the drag sequence start event by default', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -928,7 +857,6 @@ describe('CdkDrag', () => { spyOn(event, 'stopPropagation').and.callThrough(); dispatchEvent(dragElement, event); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(event.stopPropagation).not.toHaveBeenCalled(); @@ -944,7 +872,6 @@ describe('CdkDrag', () => { it('should enable native drag interactions on the drag item when there is a handle', () => { const fixture = createComponent(StandaloneDraggableWithHandle); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; expect(dragElement.style.touchAction).not.toBe('none'); @@ -952,7 +879,6 @@ describe('CdkDrag', () => { it('should disable native drag interactions on the drag handle', () => { const fixture = createComponent(StandaloneDraggableWithHandle); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const styles = fixture.componentInstance.handleElement.nativeElement.style; expect(styles.touchAction || (styles as any).webkitUserDrag).toBe('none'); @@ -960,7 +886,6 @@ describe('CdkDrag', () => { it('should enable native drag interactions on the drag handle if dragging is disabled', () => { const fixture = createComponent(StandaloneDraggableWithHandle); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); fixture.componentInstance.draggingDisabled = true; fixture.changeDetectorRef.markForCheck(); @@ -984,23 +909,19 @@ describe('CdkDrag', () => { it('should toggle native drag interactions based on whether the handle is disabled', () => { const fixture = createComponent(StandaloneDraggableWithHandle); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); fixture.componentInstance.handleInstance.disabled = true; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const styles = fixture.componentInstance.handleElement.nativeElement.style; expect(styles.touchAction || (styles as any).webkitUserDrag).toBeFalsy(); fixture.componentInstance.handleInstance.disabled = false; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(styles.touchAction || (styles as any).webkitUserDrag).toBe('none'); }); it('should be able to reset a freely-dragged item to its initial position', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -1014,7 +935,6 @@ describe('CdkDrag', () => { it('should preserve initial transform after resetting', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -1029,7 +949,6 @@ describe('CdkDrag', () => { it('should start dragging an item from its initial position after a reset', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -1044,26 +963,21 @@ describe('CdkDrag', () => { it('should not dispatch multiple events for a mouse event right after a touch event', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; // Dispatch a touch sequence. dispatchTouchEvent(dragElement, 'touchstart'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchTouchEvent(dragElement, 'touchend'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); tick(); // Immediately dispatch a mouse sequence to simulate a fake event. startDraggingViaMouse(fixture, dragElement); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchMouseEvent(dragElement, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); tick(); @@ -1073,7 +987,6 @@ describe('CdkDrag', () => { it('should round the transform value', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -1085,7 +998,6 @@ describe('CdkDrag', () => { it('should allow for dragging to be constrained to an element', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); fixture.componentInstance.boundary = '.wrapper'; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -1097,7 +1009,6 @@ describe('CdkDrag', () => { it('should allow for dragging to be constrained to an element while using constrainPosition', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); fixture.componentInstance.boundary = '.wrapper'; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); fixture.componentInstance.dragInstance.constrainPosition = ( @@ -1121,7 +1032,6 @@ describe('CdkDrag', () => { it('should be able to pass in a DOM node as the boundary', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); fixture.componentInstance.boundary = fixture.nativeElement.querySelector('.wrapper'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -1134,7 +1044,6 @@ describe('CdkDrag', () => { const fixture = createComponent(StandaloneDraggable); const boundary: HTMLElement = fixture.nativeElement.querySelector('.wrapper'); fixture.componentInstance.boundary = boundary; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -1152,7 +1061,6 @@ describe('CdkDrag', () => { const fixture = createComponent(StandaloneDraggable); const boundary: HTMLElement = fixture.nativeElement.querySelector('.wrapper'); fixture.componentInstance.boundary = boundary; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -1170,7 +1078,6 @@ describe('CdkDrag', () => { const fixture = createComponent(StandaloneDraggable); const boundary: HTMLElement = fixture.nativeElement.querySelector('.wrapper'); fixture.componentInstance.boundary = boundary; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -1189,7 +1096,6 @@ describe('CdkDrag', () => { const fixture = createComponent(StandaloneDraggable); const boundary: HTMLElement = fixture.nativeElement.querySelector('.wrapper'); fixture.componentInstance.boundary = boundary; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -1210,7 +1116,6 @@ describe('CdkDrag', () => { const fixture = createComponent(StandaloneDraggable); const boundary: HTMLElement = fixture.nativeElement.querySelector('.wrapper'); fixture.componentInstance.boundary = boundary; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -1229,7 +1134,6 @@ describe('CdkDrag', () => { const fixture = createComponent(StandaloneDraggable); const boundary: HTMLElement = fixture.nativeElement.querySelector('.wrapper'); fixture.componentInstance.boundary = boundary; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -1251,7 +1155,6 @@ describe('CdkDrag', () => { } as Point); fixture.componentInstance.constrainPosition = spy; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -1290,7 +1193,6 @@ describe('CdkDrag', () => { const fixture = createComponent(StandaloneDraggable); fixture.componentInstance.dragStartDelay = 1000; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -1302,7 +1204,6 @@ describe('CdkDrag', () => { currentTime += 750; dispatchMouseEvent(document, 'mousemove', 50, 100); currentTime += 500; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dragElement.style.transform) @@ -1317,7 +1218,6 @@ describe('CdkDrag', () => { const fixture = createComponent(StandaloneDraggable); fixture.componentInstance.dragStartDelay = 1000; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; const styles = dragElement.style; @@ -1330,7 +1230,6 @@ describe('CdkDrag', () => { currentTime += 750; dispatchMouseEvent(document, 'mousemove', 50, 100); currentTime += 500; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(styles.touchAction || (styles as any).webkitUserDrag).toBeFalsy(); @@ -1343,7 +1242,6 @@ describe('CdkDrag', () => { const fixture = createComponent(StandaloneDraggable); fixture.componentInstance.dragStartDelay = 500; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -1352,14 +1250,12 @@ describe('CdkDrag', () => { .toBeFalsy(); dispatchMouseEvent(dragElement, 'mousedown'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); currentTime += 750; // The first `mousemove` here starts the sequence and the second one moves the element. dispatchMouseEvent(document, 'mousemove', 50, 100); dispatchMouseEvent(document, 'mousemove', 50, 100); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dragElement.style.transform) @@ -1373,7 +1269,6 @@ describe('CdkDrag', () => { const fixture = createComponent(StandaloneDraggable); fixture.componentInstance.dragStartDelay = 500; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -1382,7 +1277,6 @@ describe('CdkDrag', () => { .toBeFalsy(); dispatchTouchEvent(dragElement, 'touchstart'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); currentTime += 250; @@ -1396,7 +1290,6 @@ describe('CdkDrag', () => { const fixture = createComponent(StandaloneDraggable); fixture.componentInstance.dragStartDelay = '500'; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -1405,14 +1298,12 @@ describe('CdkDrag', () => { .toBeFalsy(); dispatchMouseEvent(dragElement, 'mousedown'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); currentTime += 750; // The first `mousemove` here starts the sequence and the second one moves the element. dispatchMouseEvent(document, 'mousemove', 50, 100); dispatchMouseEvent(document, 'mousemove', 50, 100); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dragElement.style.transform) @@ -1427,7 +1318,6 @@ describe('CdkDrag', () => { const fixture = createComponent(StandaloneDraggable); fixture.componentInstance.dragStartDelay = {touch: 500, mouse: 0}; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -1448,7 +1338,6 @@ describe('CdkDrag', () => { it('should be able to get the current position', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -1465,7 +1354,6 @@ describe('CdkDrag', () => { it('should be able to set the current position programmatically', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -1492,7 +1380,6 @@ describe('CdkDrag', () => { it('should be able to get the up-to-date position as the user is dragging', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -1502,13 +1389,11 @@ describe('CdkDrag', () => { startDraggingViaMouse(fixture, dragElement); dispatchMouseEvent(document, 'mousemove', 50, 100); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dragInstance.getFreeDragPosition()).toEqual({x: 50, y: 100}); dispatchMouseEvent(document, 'mousemove', 100, 200); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dragInstance.getFreeDragPosition()).toEqual({x: 100, y: 200}); @@ -1547,7 +1432,6 @@ describe('CdkDrag', () => { it('should include the dragged distance as the user is dragging', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; const spy = jasmine.createSpy('moved spy'); @@ -1556,14 +1440,12 @@ describe('CdkDrag', () => { startDraggingViaMouse(fixture, dragElement); dispatchMouseEvent(document, 'mousemove', 50, 100); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); let event = spy.calls.mostRecent().args[0]; expect(event.distance).toEqual({x: 50, y: 100}); dispatchMouseEvent(document, 'mousemove', 75, 50); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); event = spy.calls.mostRecent().args[0]; @@ -1590,7 +1472,6 @@ describe('CdkDrag', () => { useValue: config, }, ]); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const drag = fixture.componentInstance.dragInstance; expect(drag.disabled).toBe(true); @@ -1605,7 +1486,6 @@ describe('CdkDrag', () => { it('should not throw if touches and changedTouches are empty', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -1620,7 +1500,6 @@ describe('CdkDrag', () => { expect(() => { dispatchEvent(document, event); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); tick(); }).not.toThrow(); @@ -1628,7 +1507,6 @@ describe('CdkDrag', () => { it('should update the free drag position if the page is scrolled', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const cleanup = makeScrollable(); @@ -1637,14 +1515,12 @@ describe('CdkDrag', () => { expect(dragElement.style.transform).toBeFalsy(); startDraggingViaMouse(fixture, dragElement, 0, 0); dispatchMouseEvent(document, 'mousemove', 50, 100); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)'); scrollTo(0, 500); dispatchFakeEvent(document, 'scroll'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dragElement.style.transform).toBe('translate3d(50px, 600px, 0px)'); @@ -1656,7 +1532,6 @@ describe('CdkDrag', () => { 'is scrolled', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const cleanup = makeScrollable(); @@ -1665,17 +1540,14 @@ describe('CdkDrag', () => { expect(dragElement.style.transform).toBeFalsy(); startDraggingViaMouse(fixture, dragElement, 0, 0); dispatchMouseEvent(document, 'mousemove', 50, 100); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)'); scrollTo(0, 500); dispatchFakeEvent(document, 'scroll'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchMouseEvent(document, 'mousemove', 50, 200); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dragElement.style.transform).toBe('translate3d(50px, 700px, 0px)'); @@ -1688,7 +1560,6 @@ describe('CdkDrag', () => { describe('draggable with a handle', () => { it('should not be able to drag the entire element if it has a handle', fakeAsync(() => { const fixture = createComponent(StandaloneDraggableWithHandle); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -1699,7 +1570,6 @@ describe('CdkDrag', () => { it('should be able to drag an element using its handle', fakeAsync(() => { const fixture = createComponent(StandaloneDraggableWithHandle); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; const handle = fixture.componentInstance.handleElement.nativeElement; @@ -1711,7 +1581,6 @@ describe('CdkDrag', () => { it('should not be able to drag the element if the handle is disabled', fakeAsync(() => { const fixture = createComponent(StandaloneDraggableWithHandle); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; const handle = fixture.componentInstance.handleElement.nativeElement; @@ -1725,7 +1594,6 @@ describe('CdkDrag', () => { it('should not be able to drag the element if the handle is disabled before init', fakeAsync(() => { const fixture = createComponent(StandaloneDraggableWithPreDisabledHandle); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; const handle = fixture.componentInstance.handleElement.nativeElement; @@ -1737,12 +1605,13 @@ describe('CdkDrag', () => { it('should not be able to drag using the handle if the element is disabled', fakeAsync(() => { const fixture = createComponent(StandaloneDraggableWithHandle); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; const handle = fixture.componentInstance.handleElement.nativeElement; - fixture.componentInstance.dragInstance.disabled = true; + fixture.componentInstance.draggingDisabled = true; + fixture.changeDetectorRef.markForCheck(); + fixture.detectChanges(); expect(dragElement.style.transform).toBeFalsy(); dragElementViaMouse(fixture, handle, 50, 100); @@ -1752,7 +1621,6 @@ describe('CdkDrag', () => { it('should be able to use a handle that was added after init', fakeAsync(() => { const fixture = createComponent(StandaloneDraggableWithDelayedHandle); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); fixture.componentInstance.showHandle = true; fixture.changeDetectorRef.markForCheck(); @@ -1766,9 +1634,8 @@ describe('CdkDrag', () => { expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)'); })); - it('should be able to use more than one handle to drag the element', fakeAsync(() => { + it('should be able to use more than one handle to drag the element', fakeAsync(async () => { const fixture = createComponent(StandaloneDraggableWithMultipleHandles); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; @@ -1784,7 +1651,6 @@ describe('CdkDrag', () => { it('should be able to drag with a handle that is not a direct descendant', fakeAsync(() => { const fixture = createComponent(StandaloneDraggableWithIndirectHandle); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; const handle = fixture.componentInstance.handleElement.nativeElement; @@ -1809,7 +1675,6 @@ describe('CdkDrag', () => { } const fixture = createComponent(StandaloneDraggableWithHandle); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; const handle = fixture.componentInstance.handleElement.nativeElement; @@ -1821,11 +1686,9 @@ describe('CdkDrag', () => { expect((dragElement.style as any).webkitTapHighlightColor).toBe('transparent'); dispatchMouseEvent(document, 'mousemove', 50, 100); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchMouseEvent(document, 'mouseup', 50, 100); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect((dragElement.style as any).webkitTapHighlightColor).toBeFalsy(); @@ -1838,7 +1701,6 @@ describe('CdkDrag', () => { } const fixture = createComponent(StandaloneDraggableWithHandle); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; const handle = fixture.componentInstance.handleElement.nativeElement; @@ -1850,11 +1712,9 @@ describe('CdkDrag', () => { expect((dragElement.style as any).webkitTapHighlightColor).toBe('transparent'); dispatchMouseEvent(document, 'mousemove', 50, 100); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchMouseEvent(document, 'mouseup', 50, 100); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect((dragElement.style as any).webkitTapHighlightColor).toBe('purple'); @@ -1878,7 +1738,6 @@ describe('CdkDrag', () => { undefined, [ShadowWrapper], ); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; const handleChild = fixture.componentInstance.handleChild.nativeElement; @@ -1890,14 +1749,12 @@ describe('CdkDrag', () => { it('should prevent default dragStart on handle, not on entire draggable', fakeAsync(() => { const fixture = createComponent(StandaloneDraggableWithHandle); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const draggableEvent = dispatchFakeEvent( fixture.componentInstance.dragElement.nativeElement, 'dragstart', ); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const handleEvent = dispatchFakeEvent( @@ -1905,7 +1762,6 @@ describe('CdkDrag', () => { 'dragstart', true, ); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(draggableEvent.defaultPrevented).toBe(false); @@ -1916,7 +1772,6 @@ describe('CdkDrag', () => { describe('in a drop container', () => { it('should be able to attach data to the drop container', () => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(fixture.componentInstance.dropInstance.data).toBe(fixture.componentInstance.items); @@ -1924,7 +1779,6 @@ describe('CdkDrag', () => { it('should register an item with the drop container', () => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const list = fixture.componentInstance.dropInstance; @@ -1939,7 +1793,6 @@ describe('CdkDrag', () => { it('should remove an item from the drop container', () => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const list = fixture.componentInstance.dropInstance; @@ -1955,7 +1808,6 @@ describe('CdkDrag', () => { it('should return the items sorted by their position in the DOM', () => { const fixture = createComponent(DraggableInDropZone); const items = fixture.componentInstance.items; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); // Insert a couple of items in the start and the middle so the list gets shifted around. @@ -1973,7 +1825,6 @@ describe('CdkDrag', () => { it('should sync the drop list inputs with the drop list ref', () => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dropInstance = fixture.componentInstance.dropInstance; @@ -1982,8 +1833,9 @@ describe('CdkDrag', () => { expect(dropListRef.lockAxis).toBeFalsy(); expect(dropListRef.disabled).toBe(false); - dropInstance.lockAxis = 'x'; - dropInstance.disabled = true; + fixture.componentInstance.dropLockAxis.set('x'); + fixture.componentInstance.dropDisabled.set(true); + fixture.detectChanges(); dropListRef.beforeStarted.next(); @@ -1993,7 +1845,6 @@ describe('CdkDrag', () => { it('should be able to attach data to a drag item', () => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(fixture.componentInstance.dragItems.first.data).toBe( @@ -2005,7 +1856,6 @@ describe('CdkDrag', () => { const fixture = createComponent(DraggableInDropZone); fixture.componentInstance.dropZoneId = 'custom-id'; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const drop = fixture.componentInstance.dropInstance; @@ -2016,7 +1866,6 @@ describe('CdkDrag', () => { it('should toggle a class when the user starts dragging an item', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; const dropZone = fixture.componentInstance.dropInstance; @@ -2028,10 +1877,8 @@ describe('CdkDrag', () => { expect(dropZone.element.nativeElement.classList).toContain('cdk-drop-list-dragging'); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dropZone.element.nativeElement.classList).not.toContain('cdk-drop-dragging'); @@ -2039,7 +1886,6 @@ describe('CdkDrag', () => { it('should toggle the drop dragging classes if there is nothing to trigger change detection', fakeAsync(() => { const fixture = createComponent(DraggableInDropZoneWithoutEvents); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; const dropZone = fixture.componentInstance.dropInstance; @@ -2053,10 +1899,8 @@ describe('CdkDrag', () => { expect(item.classList).toContain('cdk-drag-dragging'); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dropZone.element.nativeElement.classList).not.toContain('cdk-drop-dragging'); @@ -2065,7 +1909,6 @@ describe('CdkDrag', () => { it('should toggle a class when the user starts dragging an item with OnPush change detection', fakeAsync(() => { const fixture = createComponent(DraggableInOnPushDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; const dropZone = fixture.componentInstance.dropInstance; @@ -2077,10 +1920,8 @@ describe('CdkDrag', () => { expect(dropZone.element.nativeElement.classList).toContain('cdk-drop-list-dragging'); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dropZone.element.nativeElement.classList).not.toContain('cdk-drop-dragging'); @@ -2088,7 +1929,6 @@ describe('CdkDrag', () => { it('should not toggle dragging class if the element was not dragged more than the threshold', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone, [], 5); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; const dropZone = fixture.componentInstance.dropInstance; @@ -2102,7 +1942,6 @@ describe('CdkDrag', () => { it('should dispatch the `dropped` event when an item has been dropped', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragItems = fixture.componentInstance.dragItems; @@ -2123,7 +1962,6 @@ describe('CdkDrag', () => { thirdItemRect.top + 1, ); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(fixture.componentInstance.droppedSpy).toHaveBeenCalledTimes(1); @@ -2154,7 +1992,6 @@ describe('CdkDrag', () => { it('should expose whether an item was dropped over a container', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragItems = fixture.componentInstance.dragItems; const firstItem = dragItems.first; @@ -2167,7 +2004,6 @@ describe('CdkDrag', () => { thirdItemRect.top + 1, ); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(fixture.componentInstance.droppedSpy).toHaveBeenCalledTimes(1); @@ -2180,14 +2016,12 @@ describe('CdkDrag', () => { it('should expose the drag distance when an item is dropped', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragItems = fixture.componentInstance.dragItems; const firstItem = dragItems.first; dragElementViaMouse(fixture, firstItem.element.nativeElement, 50, 60); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(fixture.componentInstance.droppedSpy).toHaveBeenCalledTimes(1); @@ -2201,7 +2035,6 @@ describe('CdkDrag', () => { it('should expose whether an item was dropped outside of a container', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragItems = fixture.componentInstance.dragItems; const firstItem = dragItems.first; @@ -2215,7 +2048,6 @@ describe('CdkDrag', () => { containerRect.bottom + 10, ); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(fixture.componentInstance.droppedSpy).toHaveBeenCalledTimes(1); @@ -2228,7 +2060,6 @@ describe('CdkDrag', () => { it('should dispatch the `sorted` event as an item is being sorted', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const items = fixture.componentInstance.dragItems.map(item => item.element.nativeElement); @@ -2242,7 +2073,6 @@ describe('CdkDrag', () => { const elementRect = items[i].getBoundingClientRect(); dispatchMouseEvent(document, 'mousemove', elementRect.left, elementRect.top + 5); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(fixture.componentInstance.sortedSpy.calls.mostRecent().args[0]).toEqual({ @@ -2254,7 +2084,6 @@ describe('CdkDrag', () => { } dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); })); @@ -2265,7 +2094,6 @@ describe('CdkDrag', () => { fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); fixture.componentInstance.items = [fixture.componentInstance.items[0]]; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const draggedItem = fixture.componentInstance.dragItems.first.element.nativeElement; @@ -2275,14 +2103,12 @@ describe('CdkDrag', () => { for (let i = 0; i < 5; i++) { dispatchMouseEvent(document, 'mousemove', left, top + 1); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(fixture.componentInstance.sortedSpy).not.toHaveBeenCalled(); } dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); }), @@ -2290,7 +2116,6 @@ describe('CdkDrag', () => { it('should not move items in a vertical list if the pointer is too far away', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragItems = fixture.componentInstance.dragItems; @@ -2312,7 +2137,6 @@ describe('CdkDrag', () => { thirdItemRect.top + 1, ); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(fixture.componentInstance.droppedSpy).toHaveBeenCalledTimes(1); @@ -2343,7 +2167,6 @@ describe('CdkDrag', () => { it('should not move the original element from its initial DOM position', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const root = fixture.nativeElement as HTMLElement; let dragElements = Array.from(root.querySelectorAll('.cdk-drag')); @@ -2363,7 +2186,6 @@ describe('CdkDrag', () => { thirdItemRect.top + 1, ); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dragElements = Array.from(root.querySelectorAll('.cdk-drag')); @@ -2372,7 +2194,6 @@ describe('CdkDrag', () => { it('should dispatch the `dropped` event in a horizontal drop zone', fakeAsync(() => { const fixture = createComponent(DraggableInHorizontalDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragItems = fixture.componentInstance.dragItems; @@ -2393,7 +2214,6 @@ describe('CdkDrag', () => { thirdItemRect.top + 1, ); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(fixture.componentInstance.droppedSpy).toHaveBeenCalledTimes(1); @@ -2431,7 +2251,6 @@ describe('CdkDrag', () => { ]); fixture.nativeElement.setAttribute('dir', 'rtl'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragItems = fixture.componentInstance.dragItems; @@ -2452,7 +2271,6 @@ describe('CdkDrag', () => { thirdItemRect.top + 1, ); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(fixture.componentInstance.droppedSpy).toHaveBeenCalledTimes(1); @@ -2483,7 +2301,6 @@ describe('CdkDrag', () => { it('should not move items in a horizontal list if pointer is too far away', fakeAsync(() => { const fixture = createComponent(DraggableInHorizontalDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragItems = fixture.componentInstance.dragItems; @@ -2505,7 +2322,6 @@ describe('CdkDrag', () => { thirdItemRect.bottom + 1000, ); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(fixture.componentInstance.droppedSpy).toHaveBeenCalledTimes(1); @@ -2536,7 +2352,6 @@ describe('CdkDrag', () => { it('should calculate the index if the list is scrolled while dragging', fakeAsync(() => { const fixture = createComponent(DraggableInScrollableVerticalDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragItems = fixture.componentInstance.dragItems; const firstItem = dragItems.first; @@ -2544,23 +2359,18 @@ describe('CdkDrag', () => { const list = fixture.componentInstance.dropInstance.element.nativeElement; startDraggingViaMouse(fixture, firstItem.element.nativeElement); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchMouseEvent(document, 'mousemove', thirdItemRect.left + 1, thirdItemRect.top + 1); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); list.scrollTop = ITEM_HEIGHT * 10; dispatchFakeEvent(list, 'scroll'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(fixture.componentInstance.droppedSpy).toHaveBeenCalledTimes(1); @@ -2595,7 +2405,6 @@ describe('CdkDrag', () => { [], ViewEncapsulation.ShadowDom, ); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragItems = fixture.componentInstance.dragItems; const firstItem = dragItems.first; @@ -2603,23 +2412,18 @@ describe('CdkDrag', () => { const list = fixture.componentInstance.dropInstance.element.nativeElement; startDraggingViaMouse(fixture, firstItem.element.nativeElement); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchMouseEvent(document, 'mousemove', thirdItemRect.left + 1, thirdItemRect.top + 1); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); list.scrollTop = ITEM_HEIGHT * 10; dispatchFakeEvent(list, 'scroll'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(fixture.componentInstance.droppedSpy).toHaveBeenCalledTimes(1); @@ -2659,23 +2463,18 @@ describe('CdkDrag', () => { const thirdItemRect = dragItems.toArray()[2].element.nativeElement.getBoundingClientRect(); startDraggingViaMouse(fixture, firstItem.element.nativeElement); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchMouseEvent(document, 'mousemove', thirdItemRect.left + 1, thirdItemRect.top + 1); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); scrollTo(0, ITEM_HEIGHT * 10); dispatchFakeEvent(document, 'scroll'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(fixture.componentInstance.droppedSpy).toHaveBeenCalledTimes(1); @@ -2701,7 +2500,6 @@ describe('CdkDrag', () => { it('should create a preview element while the item is dragged', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; const itemRect = item.getBoundingClientRect(); @@ -2763,7 +2561,6 @@ describe('CdkDrag', () => { .toMatch(zeroPxRegex); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); @@ -2791,7 +2588,6 @@ describe('CdkDrag', () => { }, }, ]); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; startDraggingViaMouse(fixture, item); @@ -2803,7 +2599,6 @@ describe('CdkDrag', () => { it('should be able to constrain the preview position', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); fixture.componentInstance.boundarySelector = '.cdk-drop-list'; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; const listRect = @@ -2816,7 +2611,6 @@ describe('CdkDrag', () => { startDraggingViaMouse(fixture, item, listRect.right + 50, listRect.bottom + 50); flush(); dispatchMouseEvent(document, 'mousemove', listRect.right + 50, listRect.bottom + 50); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const previewRect = preview.getBoundingClientRect(); @@ -2828,7 +2622,6 @@ describe('CdkDrag', () => { it('should update the boundary if the page is scrolled while dragging', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); fixture.componentInstance.boundarySelector = '.cdk-drop-list'; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; @@ -2841,7 +2634,6 @@ describe('CdkDrag', () => { startDraggingViaMouse(fixture, item, listRect.right, listRect.bottom); flush(); dispatchMouseEvent(document, 'mousemove', listRect.right, listRect.bottom); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const preview = document.querySelector('.cdk-drag-preview')! as HTMLElement; @@ -2850,11 +2642,9 @@ describe('CdkDrag', () => { scrollTo(0, 0); dispatchFakeEvent(document, 'scroll'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); listRect = list.getBoundingClientRect(); // We need to update these since we've scrolled. dispatchMouseEvent(document, 'mousemove', listRect.right, listRect.bottom); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); previewRect = preview.getBoundingClientRect(); @@ -2865,7 +2655,6 @@ describe('CdkDrag', () => { it('should update the boundary if a parent is scrolled while dragging', fakeAsync(() => { const fixture = createComponent(DraggableInScrollableParentContainer); fixture.componentInstance.boundarySelector = '.cdk-drop-list'; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const container: HTMLElement = fixture.nativeElement.querySelector('.scroll-container'); @@ -2879,7 +2668,6 @@ describe('CdkDrag', () => { startDraggingViaMouse(fixture, item, listRect.right, listRect.bottom); flush(); dispatchMouseEvent(document, 'mousemove', listRect.right, listRect.bottom); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const preview = document.querySelector('.cdk-drag-preview')! as HTMLElement; @@ -2891,11 +2679,9 @@ describe('CdkDrag', () => { container.scrollTop = 0; dispatchFakeEvent(container, 'scroll'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); listRect = list.getBoundingClientRect(); // We need to update these since we've scrolled. dispatchMouseEvent(document, 'mousemove', listRect.right, listRect.bottom); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); previewRect = preview.getBoundingClientRect(); @@ -2917,7 +2703,6 @@ describe('CdkDrag', () => { ViewEncapsulation.ShadowDom, ); fixture.componentInstance.boundarySelector = '.cdk-drop-list'; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const container: HTMLElement = @@ -2934,7 +2719,6 @@ describe('CdkDrag', () => { startDraggingViaMouse(fixture, item, listRect.right, listRect.bottom); flush(); dispatchMouseEvent(document, 'mousemove', listRect.right, listRect.bottom); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const preview = fixture.nativeElement.shadowRoot.querySelector( @@ -2948,11 +2732,9 @@ describe('CdkDrag', () => { container.scrollTop = 0; dispatchFakeEvent(container, 'scroll'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); listRect = list.getBoundingClientRect(); // We need to update these since we've scrolled. dispatchMouseEvent(document, 'mousemove', listRect.right, listRect.bottom); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); previewRect = preview.getBoundingClientRect(); @@ -2962,7 +2744,6 @@ describe('CdkDrag', () => { it('should clear the id from the preview', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; item.id = 'custom-id'; @@ -2976,7 +2757,6 @@ describe('CdkDrag', () => { it('should clone the content of descendant canvas elements', fakeAsync(() => { const fixture = createComponent(DraggableWithCanvasInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; const sourceCanvas = item.querySelector('canvas') as HTMLCanvasElement; @@ -3004,7 +2784,6 @@ describe('CdkDrag', () => { it('should not throw when cloning an invalid canvas', fakeAsync(() => { const fixture = createComponent(DraggableWithInvalidCanvasInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; @@ -3018,7 +2797,6 @@ describe('CdkDrag', () => { it('should clone the content of descendant input elements', fakeAsync(() => { const fixture = createComponent(DraggableWithInputsInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; const sourceInput = item.querySelector('input')!; @@ -3044,7 +2822,6 @@ describe('CdkDrag', () => { it('should preserve checked state for radio inputs in the content', fakeAsync(() => { const fixture = createComponent(DraggableWithRadioInputsInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[2].element.nativeElement; const sourceRadioInput = item.querySelector('input[type="radio"]')!; @@ -3078,7 +2855,6 @@ describe('CdkDrag', () => { it('should clear the ids from descendants of the preview', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; const extraChild = document.createElement('div'); @@ -3094,7 +2870,6 @@ describe('CdkDrag', () => { it('should not create a preview if the element was not dragged far enough', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone, [], 5); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; @@ -3111,7 +2886,6 @@ describe('CdkDrag', () => { }, ]); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; @@ -3124,7 +2898,6 @@ describe('CdkDrag', () => { it('should remove the preview if its `transitionend` event timed out', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; @@ -3137,11 +2910,9 @@ describe('CdkDrag', () => { // Move somewhere so the draggable doesn't exit immediately. dispatchMouseEvent(document, 'mousemove', 50, 50); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); tick(250); @@ -3159,7 +2930,6 @@ describe('CdkDrag', () => { it('should be able to set a single class on a preview', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); fixture.componentInstance.previewClass = 'custom-class'; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; @@ -3172,7 +2942,6 @@ describe('CdkDrag', () => { it('should be able to set multiple classes on a preview', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); fixture.componentInstance.previewClass = ['custom-class-1', 'custom-class-2']; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; @@ -3185,7 +2954,6 @@ describe('CdkDrag', () => { it('should emit the released event as soon as the item is released', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1]; const endedSpy = jasmine.createSpy('ended spy'); @@ -3202,11 +2970,9 @@ describe('CdkDrag', () => { // Move somewhere so the draggable doesn't exit immediately. dispatchMouseEvent(document, 'mousemove', 50, 50); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); // Expected the released event to fire immediately upon release. @@ -3222,7 +2988,6 @@ describe('CdkDrag', () => { it('should reset immediately when failed drag happens after a successful one', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const itemInstance = fixture.componentInstance.dragItems.toArray()[1]; @@ -3245,7 +3010,6 @@ describe('CdkDrag', () => { // Dispatch the mouseup immediately to simulate the user not moving the element. dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); tick(0); // Important to tick with 0 since we don't want to flush any pending timeouts. @@ -3256,7 +3020,6 @@ describe('CdkDrag', () => { it('should not wait for transition that are not on the `transform` property', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; @@ -3266,11 +3029,9 @@ describe('CdkDrag', () => { preview.style.transition = 'opacity 500ms ease'; dispatchMouseEvent(document, 'mousemove', 50, 50); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); tick(0); @@ -3281,7 +3042,6 @@ describe('CdkDrag', () => { it('should pick out the `transform` duration if multiple properties are being transitioned', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; @@ -3291,11 +3051,9 @@ describe('CdkDrag', () => { preview.style.transition = 'opacity 500ms ease, transform 1000ms ease'; dispatchMouseEvent(document, 'mousemove', 50, 50); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); tick(500); @@ -3314,7 +3072,6 @@ describe('CdkDrag', () => { it('should create a placeholder element while the item is dragged', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; const initialParent = item.parentNode; @@ -3335,7 +3092,6 @@ describe('CdkDrag', () => { .toBe('none'); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); @@ -3372,7 +3128,6 @@ describe('CdkDrag', () => { it('should insert the preview into a particular element, if specified', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; const previewContainer = fixture.componentInstance.alternatePreviewContainer; @@ -3389,7 +3144,6 @@ describe('CdkDrag', () => { it('should remove the id from the placeholder', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; @@ -3404,7 +3158,6 @@ describe('CdkDrag', () => { it('should clear the ids from descendants of the placeholder', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; const extraChild = document.createElement('div'); @@ -3420,7 +3173,6 @@ describe('CdkDrag', () => { it('should not create placeholder if the element was not dragged far enough', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone, [], 5); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; @@ -3431,7 +3183,6 @@ describe('CdkDrag', () => { it('should move the placeholder as an item is being sorted down', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); assertDownwardSorting( fixture, @@ -3443,7 +3194,6 @@ describe('CdkDrag', () => { it('should move the placeholder as an item is being sorted down on a scrolled page', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const cleanup = makeScrollable(); @@ -3459,7 +3209,6 @@ describe('CdkDrag', () => { it('should move the placeholder as an item is being sorted up', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); assertUpwardSorting( fixture, @@ -3471,7 +3220,6 @@ describe('CdkDrag', () => { it('should move the placeholder as an item is being sorted up on a scrolled page', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const cleanup = makeScrollable(); @@ -3487,7 +3235,6 @@ describe('CdkDrag', () => { it('should move the placeholder as an item is being sorted to the right', fakeAsync(() => { const fixture = createComponent(DraggableInHorizontalDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const items = fixture.componentInstance.dragItems.toArray(); @@ -3504,20 +3251,17 @@ describe('CdkDrag', () => { // Add a few pixels to the left offset so we get some overlap. dispatchMouseEvent(document, 'mousemove', elementRect.left + 5, elementRect.top); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(getElementIndexByPosition(placeholder, 'left')).toBe(i); } dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); })); it('should move the placeholder as an item is being sorted to the left', fakeAsync(() => { const fixture = createComponent(DraggableInHorizontalDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const items = fixture.componentInstance.dragItems.toArray(); @@ -3534,13 +3278,11 @@ describe('CdkDrag', () => { // Remove a few pixels from the right offset so we get some overlap. dispatchMouseEvent(document, 'mousemove', elementRect.right - 5, elementRect.top); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(getElementIndexByPosition(placeholder, 'left')).toBe(i); } dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); })); @@ -3550,7 +3292,6 @@ describe('CdkDrag', () => { 'sorting vertically', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const items = fixture.componentInstance.dragItems.map(i => i.element.nativeElement); @@ -3564,7 +3305,6 @@ describe('CdkDrag', () => { // Add a few pixels to the top offset so we get some overlap. dispatchMouseEvent(document, 'mousemove', targetRect.left, targetRect.top + 5); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect( @@ -3572,7 +3312,6 @@ describe('CdkDrag', () => { ).toEqual(['One', 'Two', 'Three', 'Zero']); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); }), @@ -3580,7 +3319,6 @@ describe('CdkDrag', () => { it('should lay out the elements correctly, when swapping down with a taller element', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const items = fixture.componentInstance.dragItems.map(i => i.element.nativeElement); @@ -3598,21 +3336,18 @@ describe('CdkDrag', () => { // Add a few pixels to the top offset so we get some overlap. dispatchMouseEvent(document, 'mousemove', targetRect.left, targetRect.top + 5); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(placeholder.style.transform).toBe(`translate3d(0px, ${ITEM_HEIGHT}px, 0px)`); expect(target.style.transform).toBe(`translate3d(0px, ${-ITEM_HEIGHT * 2}px, 0px)`); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); })); it('should lay out the elements correctly, when swapping up with a taller element', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const items = fixture.componentInstance.dragItems.map(i => i.element.nativeElement); @@ -3630,21 +3365,18 @@ describe('CdkDrag', () => { // Add a few pixels to the top offset so we get some overlap. dispatchMouseEvent(document, 'mousemove', targetRect.left, targetRect.bottom - 5); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(placeholder.style.transform).toBe(`translate3d(0px, ${-ITEM_HEIGHT}px, 0px)`); expect(target.style.transform).toBe(`translate3d(0px, ${ITEM_HEIGHT * 2}px, 0px)`); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); })); it('should lay out elements correctly, when swapping an item with margin', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const items = fixture.componentInstance.dragItems.map(i => i.element.nativeElement); @@ -3662,14 +3394,12 @@ describe('CdkDrag', () => { // Add a few pixels to the top offset so we get some overlap. dispatchMouseEvent(document, 'mousemove', targetRect.left, targetRect.top + 5); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(placeholder.style.transform).toBe(`translate3d(0px, ${ITEM_HEIGHT + 12}px, 0px)`); expect(target.style.transform).toBe(`translate3d(0px, ${-ITEM_HEIGHT - 12}px, 0px)`); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); })); @@ -3679,7 +3409,6 @@ describe('CdkDrag', () => { 'sorting horizontally', fakeAsync(() => { const fixture = createComponent(DraggableInHorizontalDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const items = fixture.componentInstance.dragItems.map(i => i.element.nativeElement); @@ -3693,7 +3422,6 @@ describe('CdkDrag', () => { // Add a few pixels to the left offset so we get some overlap. dispatchMouseEvent(document, 'mousemove', targetRect.right - 5, targetRect.top); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect( @@ -3701,7 +3429,6 @@ describe('CdkDrag', () => { ).toEqual(['One', 'Two', 'Three', 'Zero']); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); }), @@ -3709,7 +3436,6 @@ describe('CdkDrag', () => { it('should lay out the elements correctly, when swapping to the right with a wider element', fakeAsync(() => { const fixture = createComponent(DraggableInHorizontalDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const items = fixture.componentInstance.dragItems.map(i => i.element.nativeElement); @@ -3726,21 +3452,18 @@ describe('CdkDrag', () => { const targetRect = target.getBoundingClientRect(); dispatchMouseEvent(document, 'mousemove', targetRect.right - 5, targetRect.top); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(placeholder.style.transform).toBe(`translate3d(${ITEM_WIDTH}px, 0px, 0px)`); expect(target.style.transform).toBe(`translate3d(${-ITEM_WIDTH * 2}px, 0px, 0px)`); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); })); it('should lay out the elements correctly, when swapping left with a wider element', fakeAsync(() => { const fixture = createComponent(DraggableInHorizontalDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const items = fixture.componentInstance.dragItems.map(i => i.element.nativeElement); @@ -3757,21 +3480,18 @@ describe('CdkDrag', () => { const targetRect = target.getBoundingClientRect(); dispatchMouseEvent(document, 'mousemove', targetRect.right - 5, targetRect.top); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(placeholder.style.transform).toBe(`translate3d(${-ITEM_WIDTH}px, 0px, 0px)`); expect(target.style.transform).toBe(`translate3d(${ITEM_WIDTH * 2}px, 0px, 0px)`); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); })); it('should lay out elements correctly, when horizontally swapping an item with margin', fakeAsync(() => { const fixture = createComponent(DraggableInHorizontalDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const items = fixture.componentInstance.dragItems.map(i => i.element.nativeElement); @@ -3788,21 +3508,18 @@ describe('CdkDrag', () => { const targetRect = target.getBoundingClientRect(); dispatchMouseEvent(document, 'mousemove', targetRect.right - 5, targetRect.top); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(placeholder.style.transform).toBe(`translate3d(${ITEM_WIDTH + 12}px, 0px, 0px)`); expect(target.style.transform).toBe(`translate3d(${-ITEM_WIDTH - 12}px, 0px, 0px)`); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); })); it('should not swap position for tiny pointer movements', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const items = fixture.componentInstance.dragItems.map(i => i.element.nativeElement); @@ -3826,7 +3543,6 @@ describe('CdkDrag', () => { // Move over the target so there's a 20px overlap. dispatchMouseEvent(document, 'mousemove', targetRect.left, pointerTop); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(getElementSibligsByPosition(placeholder, 'top').map(e => e.textContent!.trim())) .withContext('Expected position to swap.') @@ -3834,21 +3550,18 @@ describe('CdkDrag', () => { // Move down a further 1px. dispatchMouseEvent(document, 'mousemove', targetRect.left, pointerTop + 1); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(getElementSibligsByPosition(placeholder, 'top').map(e => e.textContent!.trim())) .withContext('Expected positions not to swap.') .toEqual(['One', 'Zero', 'Two', 'Three']); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); })); it('should swap position for pointer movements in the opposite direction', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const items = fixture.componentInstance.dragItems.map(i => i.element.nativeElement); @@ -3872,7 +3585,6 @@ describe('CdkDrag', () => { // Move over the target so there's a 20px overlap. dispatchMouseEvent(document, 'mousemove', targetRect.left, pointerTop); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(getElementSibligsByPosition(placeholder, 'top').map(e => e.textContent!.trim())) .withContext('Expected position to swap.') @@ -3880,14 +3592,12 @@ describe('CdkDrag', () => { // Move up 10px. dispatchMouseEvent(document, 'mousemove', targetRect.left, pointerTop - 10); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(getElementSibligsByPosition(placeholder, 'top').map(e => e.textContent!.trim())) .withContext('Expected positions to swap again.') .toEqual(['Zero', 'One', 'Two', 'Three']); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); })); @@ -3897,7 +3607,6 @@ describe('CdkDrag', () => { 'overlap with the sibling item after the previous swap', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const items = fixture.componentInstance.dragItems.map(i => i.element.nativeElement); @@ -3918,10 +3627,8 @@ describe('CdkDrag', () => { // Trigger a mouse move coming from the bottom so that the list thinks that we're // sorting upwards. This usually how a user would behave with a mouse pointer. dispatchMouseEvent(document, 'mousemove', targetRect.left, targetRect.bottom + 50); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchMouseEvent(document, 'mousemove', targetRect.left, targetRect.bottom - 1); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect( @@ -3931,7 +3638,6 @@ describe('CdkDrag', () => { // Refresh the rect since the element position has changed. targetRect = target.getBoundingClientRect(); dispatchMouseEvent(document, 'mousemove', targetRect.left, targetRect.bottom - 1); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect( @@ -3939,7 +3645,6 @@ describe('CdkDrag', () => { ).toEqual(['One', 'Two', 'Zero', 'Three']); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); }), @@ -3947,7 +3652,6 @@ describe('CdkDrag', () => { it('should clean up the preview element if the item is destroyed mid-drag', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; @@ -3970,7 +3674,6 @@ describe('CdkDrag', () => { it('should be able to customize the preview element', fakeAsync(() => { const fixture = createComponent(DraggableInDropZoneWithCustomPreview); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; @@ -3985,7 +3688,6 @@ describe('CdkDrag', () => { it('should handle the custom preview being removed', fakeAsync(() => { const fixture = createComponent(DraggableInDropZoneWithCustomPreview); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; @@ -4005,7 +3707,6 @@ describe('CdkDrag', () => { it('should be able to constrain the position of a custom preview', fakeAsync(() => { const fixture = createComponent(DraggableInDropZoneWithCustomPreview); fixture.componentInstance.boundarySelector = '.cdk-drop-list'; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; const listRect = @@ -4018,7 +3719,6 @@ describe('CdkDrag', () => { startDraggingViaMouse(fixture, item, listRect.right + 50, listRect.bottom + 50); flush(); dispatchMouseEvent(document, 'mousemove', listRect.right + 50, listRect.bottom + 50); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const previewRect = preview.getBoundingClientRect(); @@ -4035,7 +3735,6 @@ describe('CdkDrag', () => { } as Point); fixture.componentInstance.constrainPosition = spy; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; @@ -4046,7 +3745,6 @@ describe('CdkDrag', () => { startDraggingViaMouse(fixture, item, 200, 200); flush(); dispatchMouseEvent(document, 'mousemove', 200, 200); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const previewRect = preview.getBoundingClientRect(); @@ -4066,7 +3764,6 @@ describe('CdkDrag', () => { 'preview has stopped', fakeAsync(() => { const fixture = createComponent(DraggableInDropZoneWithCustomPreview); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragContainer = fixture.componentInstance.dropInstance.element.nativeElement; @@ -4079,7 +3776,6 @@ describe('CdkDrag', () => { // The coordinates don't matter. dragElementViaMouse(fixture, item, 10, 10); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dragContainer.contains(item)) @@ -4090,7 +3786,6 @@ describe('CdkDrag', () => { it('should position custom previews next to the pointer', fakeAsync(() => { const fixture = createComponent(DraggableInDropZoneWithCustomPreview); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; @@ -4103,7 +3798,6 @@ describe('CdkDrag', () => { it('should keep the preview next to the trigger if the page was scrolled', fakeAsync(() => { const fixture = createComponent(DraggableInDropZoneWithCustomPreview); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const cleanup = makeScrollable(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; @@ -4114,12 +3808,10 @@ describe('CdkDrag', () => { expect(preview.style.transform).toBe('translate3d(50px, 50px, 0px)'); scrollTo(0, 500); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); // Move the pointer a bit so the preview has to reposition. dispatchMouseEvent(document, 'mousemove', 55, 55); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(preview.style.transform).toBe('translate3d(55px, 555px, 0px)'); @@ -4129,18 +3821,17 @@ describe('CdkDrag', () => { it('should lock position inside a drop container along the x axis', fakeAsync(() => { const fixture = createComponent(DraggableInDropZoneWithCustomPreview); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); - const item = fixture.componentInstance.dragItems.toArray()[1]; - const element = item.element.nativeElement; + const element = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; - item.lockAxis = 'x'; + fixture.componentInstance.items[1].lockAxis = 'x'; + fixture.changeDetectorRef.markForCheck(); + fixture.detectChanges(); startDraggingViaMouse(fixture, element, 50, 50); dispatchMouseEvent(element, 'mousemove', 100, 100); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const preview = document.querySelector('.cdk-drag-preview')! as HTMLElement; @@ -4150,18 +3841,17 @@ describe('CdkDrag', () => { it('should lock position inside a drop container along the y axis', fakeAsync(() => { const fixture = createComponent(DraggableInDropZoneWithCustomPreview); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); - const item = fixture.componentInstance.dragItems.toArray()[1]; - const element = item.element.nativeElement; + const element = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; - item.lockAxis = 'y'; + fixture.componentInstance.items[1].lockAxis = 'y'; + fixture.changeDetectorRef.markForCheck(); + fixture.detectChanges(); startDraggingViaMouse(fixture, element, 50, 50); dispatchMouseEvent(element, 'mousemove', 100, 100); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const preview = document.querySelector('.cdk-drag-preview')! as HTMLElement; @@ -4171,17 +3861,16 @@ describe('CdkDrag', () => { it('should inherit the position locking from the drop container', fakeAsync(() => { const fixture = createComponent(DraggableInDropZoneWithCustomPreview); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const element = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; - fixture.componentInstance.dropInstance.lockAxis = 'x'; + fixture.componentInstance.dropLockAxis.set('x'); + fixture.detectChanges(); startDraggingViaMouse(fixture, element, 50, 50); dispatchMouseEvent(element, 'mousemove', 100, 100); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const preview = document.querySelector('.cdk-drag-preview')! as HTMLElement; @@ -4192,7 +3881,6 @@ describe('CdkDrag', () => { it('should be able to set a class on a custom preview', fakeAsync(() => { const fixture = createComponent(DraggableInDropZoneWithCustomPreview); fixture.componentInstance.previewClass = 'custom-class'; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; @@ -4206,7 +3894,6 @@ describe('CdkDrag', () => { it('should be able to apply the size of the dragged element to a custom preview', fakeAsync(() => { const fixture = createComponent(DraggableInDropZoneWithCustomPreview); fixture.componentInstance.matchPreviewSize = true; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; const itemRect = item.getBoundingClientRect(); @@ -4226,7 +3913,6 @@ describe('CdkDrag', () => { fakeAsync(() => { const fixture = createComponent(DraggableInDropZoneWithCustomPreview); fixture.componentInstance.matchPreviewSize = true; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; @@ -4240,13 +3926,11 @@ describe('CdkDrag', () => { it('should not have the size of the inserted preview affect the size applied via matchSize', fakeAsync(() => { const fixture = createComponent(DraggableInHorizontalFlexDropZoneWithMatchSizePreview); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; const itemRect = item.getBoundingClientRect(); startDraggingViaMouse(fixture, item); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const preview = document.querySelector('.cdk-drag-preview')! as HTMLElement; @@ -4258,7 +3942,6 @@ describe('CdkDrag', () => { it('should not throw when custom preview only has text', fakeAsync(() => { const fixture = createComponent(DraggableInDropZoneWithCustomTextOnlyPreview); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; @@ -4274,7 +3957,6 @@ describe('CdkDrag', () => { it('should handle custom preview with multiple root nodes', fakeAsync(() => { const fixture = createComponent(DraggableInDropZoneWithCustomMultiNodePreview); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; @@ -4290,7 +3972,6 @@ describe('CdkDrag', () => { it('should be able to customize the placeholder', fakeAsync(() => { const fixture = createComponent(DraggableInDropZoneWithCustomPlaceholder); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; @@ -4305,7 +3986,6 @@ describe('CdkDrag', () => { it('should handle the custom placeholder being removed', fakeAsync(() => { const fixture = createComponent(DraggableInDropZoneWithCustomPlaceholder); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); @@ -4327,7 +4007,6 @@ describe('CdkDrag', () => { it('should measure the custom placeholder after the first change detection', fakeAsync(() => { const fixture = createComponent(DraggableInDropZoneWithCustomPlaceholder); fixture.componentInstance.extraPlaceholderClass = 'tall-placeholder'; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragItems = fixture.componentInstance.dragItems; const item = dragItems.toArray()[0].element.nativeElement; @@ -4338,14 +4017,11 @@ describe('CdkDrag', () => { const thirdItemRect = thirdItem.getBoundingClientRect(); dispatchMouseEvent(document, 'mousemove', thirdItemRect.left + 1, thirdItemRect.top + 1); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const event = fixture.componentInstance.droppedSpy.calls.mostRecent().args[0]; @@ -4354,7 +4030,6 @@ describe('CdkDrag', () => { it('should not throw when custom placeholder only has text', fakeAsync(() => { const fixture = createComponent(DraggableInDropZoneWithCustomTextOnlyPlaceholder); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; @@ -4370,7 +4045,6 @@ describe('CdkDrag', () => { it('should handle custom placeholder with multiple root nodes', fakeAsync(() => { const fixture = createComponent(DraggableInDropZoneWithCustomMultiNodePlaceholder); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; @@ -4386,7 +4060,6 @@ describe('CdkDrag', () => { it('should clear the `transform` value from siblings when item is dropped`', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragItems = fixture.componentInstance.dragItems; @@ -4397,16 +4070,13 @@ describe('CdkDrag', () => { startDraggingViaMouse(fixture, firstItem.element.nativeElement); dispatchMouseEvent(document, 'mousemove', thirdItemRect.left + 1, thirdItemRect.top + 1); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(thirdItem.style.transform).toBeTruthy(); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(thirdItem.style.transform).toBeFalsy(); @@ -4414,15 +4084,13 @@ describe('CdkDrag', () => { it('should not move the item if the list is disabled', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragItems = fixture.componentInstance.dragItems; const dropElement = fixture.componentInstance.dropInstance.element.nativeElement; expect(dropElement.classList).not.toContain('cdk-drop-list-disabled'); - fixture.componentInstance.dropInstance.disabled = true; - fixture.changeDetectorRef.markForCheck(); + fixture.componentInstance.dropDisabled.set(true); fixture.detectChanges(); expect(dropElement.classList).toContain('cdk-drop-list-disabled'); @@ -4443,7 +4111,6 @@ describe('CdkDrag', () => { thirdItemRect.top + 1, ); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(fixture.componentInstance.droppedSpy).not.toHaveBeenCalled(); @@ -4458,20 +4125,16 @@ describe('CdkDrag', () => { it('should not throw if the `touches` array is empty', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; dispatchTouchEvent(item, 'touchstart'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchTouchEvent(document, 'touchmove'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchTouchEvent(document, 'touchmove', 50, 50); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(() => { @@ -4479,14 +4142,12 @@ describe('CdkDrag', () => { Object.defineProperty(endEvent, 'touches', {get: () => []}); dispatchEvent(document, endEvent); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); }).not.toThrow(); })); it('should not move the item if the group is disabled', fakeAsync(() => { const fixture = createComponent(ConnectedDropZonesViaGroupDirective); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragItems = fixture.componentInstance.groupedDragItems[0]; @@ -4511,7 +4172,6 @@ describe('CdkDrag', () => { thirdItemRect.top + 1, ); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(fixture.componentInstance.droppedSpy).not.toHaveBeenCalled(); @@ -4526,7 +4186,6 @@ describe('CdkDrag', () => { it('should not sort an item if sorting the list is disabled', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dropInstance = fixture.componentInstance.dropInstance; @@ -4551,7 +4210,6 @@ describe('CdkDrag', () => { const placeholder = document.querySelector('.cdk-drag-placeholder') as HTMLElement; dispatchMouseEvent(document, 'mousemove', targetX, targetY); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(getElementIndexByPosition(placeholder, 'top')) @@ -4559,11 +4217,9 @@ describe('CdkDrag', () => { .toBe(0); dispatchMouseEvent(document, 'mouseup', targetX, targetY); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(fixture.componentInstance.droppedSpy).toHaveBeenCalledTimes(1); @@ -4594,7 +4250,6 @@ describe('CdkDrag', () => { it('should not throw if an item is removed after dragging has started', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragItems = fixture.componentInstance.dragItems; const firstElement = dragItems.first.element.nativeElement; @@ -4611,7 +4266,6 @@ describe('CdkDrag', () => { expect(() => { // Move the dragged item over where the remove item would've been. dispatchMouseEvent(document, 'mousemove', lastItemRect.left + 1, lastItemRect.top + 1); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); }).not.toThrow(); @@ -4619,7 +4273,6 @@ describe('CdkDrag', () => { it('should not be able to start a drag sequence while another one is still active', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const [item, otherItem] = fixture.componentInstance.dragItems.toArray(); @@ -4638,14 +4291,12 @@ describe('CdkDrag', () => { it('should should be able to disable auto-scrolling', fakeAsync(() => { const fixture = createComponent(DraggableInScrollableVerticalDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.first.element.nativeElement; const list = fixture.componentInstance.dropInstance.element.nativeElement; const listRect = list.getBoundingClientRect(); fixture.componentInstance.dropInstance.autoScrollDisabled = true; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(list.scrollTop).toBe(0); @@ -4657,7 +4308,6 @@ describe('CdkDrag', () => { listRect.left + listRect.width / 2, listRect.top + listRect.height, ); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); tickAnimationFrames(20); @@ -4666,7 +4316,6 @@ describe('CdkDrag', () => { it('should auto-scroll down if the user holds their pointer at bottom edge', fakeAsync(() => { const fixture = createComponent(DraggableInScrollableVerticalDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.first.element.nativeElement; const list = fixture.componentInstance.dropInstance.element.nativeElement; @@ -4681,7 +4330,6 @@ describe('CdkDrag', () => { listRect.left + listRect.width / 2, listRect.top + listRect.height, ); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); tickAnimationFrames(20); @@ -4690,7 +4338,6 @@ describe('CdkDrag', () => { it('should auto-scroll up if the user holds their pointer at top edge', fakeAsync(() => { const fixture = createComponent(DraggableInScrollableVerticalDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.first.element.nativeElement; const list = fixture.componentInstance.dropInstance.element.nativeElement; @@ -4699,7 +4346,6 @@ describe('CdkDrag', () => { startDraggingViaMouse(fixture, item); dispatchMouseEvent(document, 'mousemove', listRect.left + listRect.width / 2, listRect.top); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); tickAnimationFrames(20); @@ -4708,7 +4354,6 @@ describe('CdkDrag', () => { it('should auto-scroll right if the user holds their pointer at right edge in ltr', fakeAsync(() => { const fixture = createComponent(DraggableInScrollableHorizontalDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.first.element.nativeElement; const list = fixture.componentInstance.dropInstance.element.nativeElement; @@ -4723,7 +4368,6 @@ describe('CdkDrag', () => { listRect.left + listRect.width, listRect.top + listRect.height / 2, ); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); tickAnimationFrames(20); @@ -4732,7 +4376,6 @@ describe('CdkDrag', () => { it('should auto-scroll left if the user holds their pointer at left edge in ltr', fakeAsync(() => { const fixture = createComponent(DraggableInScrollableHorizontalDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.first.element.nativeElement; const list = fixture.componentInstance.dropInstance.element.nativeElement; @@ -4741,7 +4384,6 @@ describe('CdkDrag', () => { startDraggingViaMouse(fixture, item); dispatchMouseEvent(document, 'mousemove', listRect.left, listRect.top + listRect.height / 2); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); tickAnimationFrames(20); @@ -4756,7 +4398,6 @@ describe('CdkDrag', () => { }, ]); fixture.nativeElement.setAttribute('dir', 'rtl'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.first.element.nativeElement; const list = fixture.componentInstance.dropInstance.element.nativeElement; @@ -4770,7 +4411,6 @@ describe('CdkDrag', () => { listRect.left + listRect.width, listRect.top + listRect.height / 2, ); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); tickAnimationFrames(20); @@ -4785,7 +4425,6 @@ describe('CdkDrag', () => { }, ]); fixture.nativeElement.setAttribute('dir', 'rtl'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.first.element.nativeElement; const list = fixture.componentInstance.dropInstance.element.nativeElement; @@ -4795,7 +4434,6 @@ describe('CdkDrag', () => { startDraggingViaMouse(fixture, item); dispatchMouseEvent(document, 'mousemove', listRect.left, listRect.top + listRect.height / 2); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); tickAnimationFrames(20); @@ -4805,7 +4443,6 @@ describe('CdkDrag', () => { it('should be able to start auto scrolling with a drag boundary', fakeAsync(() => { const fixture = createComponent(DraggableInScrollableHorizontalDropZone); fixture.componentInstance.boundarySelector = '.drop-list'; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.first.element.nativeElement; const list = fixture.componentInstance.dropInstance.element.nativeElement; @@ -4820,7 +4457,6 @@ describe('CdkDrag', () => { listRect.left + listRect.width, listRect.top + listRect.height / 2, ); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); tickAnimationFrames(20); @@ -4829,7 +4465,6 @@ describe('CdkDrag', () => { it('should stop scrolling if the user moves their pointer away', fakeAsync(() => { const fixture = createComponent(DraggableInScrollableVerticalDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.first.element.nativeElement; const list = fixture.componentInstance.dropInstance.element.nativeElement; @@ -4844,7 +4479,6 @@ describe('CdkDrag', () => { listRect.left + listRect.width / 2, listRect.top + listRect.height, ); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); tickAnimationFrames(20); @@ -4858,7 +4492,6 @@ describe('CdkDrag', () => { listRect.left + listRect.width / 2, listRect.top + listRect.height / 2, ); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); tickAnimationFrames(20); @@ -4867,7 +4500,6 @@ describe('CdkDrag', () => { it('should stop scrolling if the user stops dragging', fakeAsync(() => { const fixture = createComponent(DraggableInScrollableVerticalDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.first.element.nativeElement; const list = fixture.componentInstance.dropInstance.element.nativeElement; @@ -4882,7 +4514,6 @@ describe('CdkDrag', () => { listRect.left + listRect.width / 2, listRect.top + listRect.height, ); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); tickAnimationFrames(20); @@ -4890,7 +4521,6 @@ describe('CdkDrag', () => { expect(previousScrollTop).toBeGreaterThan(0); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); tickAnimationFrames(20); @@ -4899,7 +4529,6 @@ describe('CdkDrag', () => { it('should auto-scroll viewport down if the pointer is close to bottom edge', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const cleanup = makeScrollable(); @@ -4911,7 +4540,6 @@ describe('CdkDrag', () => { startDraggingViaMouse(fixture, item); dispatchMouseEvent(document, 'mousemove', viewportSize.width / 2, viewportSize.height); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); tickAnimationFrames(20); @@ -4922,7 +4550,6 @@ describe('CdkDrag', () => { it('should auto-scroll viewport up if the pointer is close to top edge', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const cleanup = makeScrollable(); @@ -4936,7 +4563,6 @@ describe('CdkDrag', () => { startDraggingViaMouse(fixture, item); dispatchMouseEvent(document, 'mousemove', viewportSize.width / 2, 0); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); tickAnimationFrames(20); @@ -4947,7 +4573,6 @@ describe('CdkDrag', () => { it('should auto-scroll viewport right if the pointer is near right edge', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const cleanup = makeScrollable('horizontal'); @@ -4959,7 +4584,6 @@ describe('CdkDrag', () => { startDraggingViaMouse(fixture, item); dispatchMouseEvent(document, 'mousemove', viewportSize.width, viewportSize.height / 2); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); tickAnimationFrames(20); @@ -4970,7 +4594,6 @@ describe('CdkDrag', () => { it('should auto-scroll viewport left if the pointer is close to left edge', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const cleanup = makeScrollable('horizontal'); @@ -4984,7 +4607,6 @@ describe('CdkDrag', () => { startDraggingViaMouse(fixture, item); dispatchMouseEvent(document, 'mousemove', 0, viewportSize.height / 2); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); tickAnimationFrames(20); @@ -4998,7 +4620,6 @@ describe('CdkDrag', () => { 'both the list and the viewport', fakeAsync(() => { const fixture = createComponent(DraggableInScrollableVerticalDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const list = fixture.componentInstance.dropInstance.element.nativeElement; @@ -5025,7 +4646,6 @@ describe('CdkDrag', () => { startDraggingViaMouse(fixture, item); dispatchMouseEvent(document, 'mousemove', listRect.left + listRect.width / 2, 0); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); tickAnimationFrames(20); @@ -5041,7 +4661,6 @@ describe('CdkDrag', () => { 'and the viewport, if the list cannot be scrolled in that direction', fakeAsync(() => { const fixture = createComponent(DraggableInScrollableVerticalDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const list = fixture.componentInstance.dropInstance.element.nativeElement; @@ -5068,7 +4687,6 @@ describe('CdkDrag', () => { startDraggingViaMouse(fixture, item); dispatchMouseEvent(document, 'mousemove', listRect.left + listRect.width / 2, 0); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); tickAnimationFrames(20); @@ -5081,7 +4699,6 @@ describe('CdkDrag', () => { it('should be able to auto-scroll a parent container', fakeAsync(() => { const fixture = createComponent(DraggableInScrollableParentContainer); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.first.element.nativeElement; const container = fixture.nativeElement.querySelector('.scroll-container'); @@ -5096,7 +4713,6 @@ describe('CdkDrag', () => { containerRect.left + containerRect.width / 2, containerRect.top + containerRect.height, ); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); tickAnimationFrames(20); @@ -5105,7 +4721,6 @@ describe('CdkDrag', () => { it('should be able to configure the auto-scroll speed', fakeAsync(() => { const fixture = createComponent(DraggableInScrollableVerticalDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); fixture.componentInstance.dropInstance.autoScrollStep = 20; const item = fixture.componentInstance.dragItems.first.element.nativeElement; @@ -5121,7 +4736,6 @@ describe('CdkDrag', () => { listRect.left + listRect.width / 2, listRect.top + listRect.height, ); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); tickAnimationFrames(10); @@ -5130,7 +4744,6 @@ describe('CdkDrag', () => { it('should pick up descendants inside of containers', fakeAsync(() => { const fixture = createComponent(DraggableInDropZoneWithContainer); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragItems = fixture.componentInstance.dragItems; const firstItem = dragItems.first; @@ -5143,7 +4756,6 @@ describe('CdkDrag', () => { thirdItemRect.top + 1, ); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(fixture.componentInstance.droppedSpy).toHaveBeenCalledTimes(1); @@ -5167,7 +4779,6 @@ describe('CdkDrag', () => { it('should not pick up items from descendant drop lists', fakeAsync(() => { const fixture = createComponent(NestedDropZones); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const {dragItems, innerList, outerList} = fixture.componentInstance; const innerClasses = innerList.nativeElement.classList; @@ -5184,7 +4795,6 @@ describe('CdkDrag', () => { ); startDraggingViaMouse(fixture, dragItems.first.element.nativeElement); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(innerClasses) @@ -5195,7 +4805,6 @@ describe('CdkDrag', () => { it('should be able to re-enable a disabled drop list', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragItems = fixture.componentInstance.dragItems; const tryDrag = () => { @@ -5208,7 +4817,6 @@ describe('CdkDrag', () => { thirdItemRect.top + 1, ); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); }; @@ -5219,8 +4827,7 @@ describe('CdkDrag', () => { 'Three', ]); - fixture.componentInstance.dropInstance.disabled = true; - fixture.changeDetectorRef.markForCheck(); + fixture.componentInstance.dropDisabled.set(true); fixture.detectChanges(); tryDrag(); @@ -5231,8 +4838,7 @@ describe('CdkDrag', () => { 'Three', ]); - fixture.componentInstance.dropInstance.disabled = false; - fixture.changeDetectorRef.markForCheck(); + fixture.componentInstance.dropDisabled.set(false); fixture.detectChanges(); tryDrag(); @@ -5259,7 +4865,6 @@ describe('CdkDrag', () => { useValue: config, }, ]); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const list = fixture.componentInstance.dropList; expect(list.disabled).toBe(true); @@ -5271,7 +4876,6 @@ describe('CdkDrag', () => { it('should disable scroll snapping while the user is dragging', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; const styles: any = fixture.componentInstance.dropInstance.element.nativeElement.style; @@ -5288,10 +4892,8 @@ describe('CdkDrag', () => { expect(styles.scrollSnapType || styles.msScrollSnapType).toBe('none'); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(styles.scrollSnapType || styles.msScrollSnapType).toBeFalsy(); @@ -5299,7 +4901,6 @@ describe('CdkDrag', () => { it('should restore the previous inline scroll snap value', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; const styles: any = fixture.componentInstance.dropInstance.element.nativeElement.style; @@ -5317,10 +4918,8 @@ describe('CdkDrag', () => { expect(styles.scrollSnapType || styles.msScrollSnapType).toBe('none'); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(styles.scrollSnapType || styles.msScrollSnapType).toBe('block'); @@ -5328,7 +4927,6 @@ describe('CdkDrag', () => { it('should be able to start dragging again if the dragged item is destroyed', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); let item = fixture.componentInstance.dragItems.first; @@ -5357,7 +4955,6 @@ describe('CdkDrag', () => { .toBeTruthy(); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); @@ -5366,7 +4963,6 @@ describe('CdkDrag', () => { it('should make the placeholder available in the start event', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; let placeholder: HTMLElement | undefined; @@ -5381,7 +4977,6 @@ describe('CdkDrag', () => { it('should not move item into position not allowed by the sort predicate', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragItems = fixture.componentInstance.dragItems; const spy = jasmine.createSpy('sort predicate spy').and.returnValue(false); @@ -5399,7 +4994,6 @@ describe('CdkDrag', () => { startDraggingViaMouse(fixture, firstItem.element.nativeElement); dispatchMouseEvent(document, 'mousemove', thirdItemRect.left + 1, thirdItemRect.top + 1); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(spy).toHaveBeenCalledWith(2, firstItem, fixture.componentInstance.dropInstance); @@ -5411,7 +5005,6 @@ describe('CdkDrag', () => { ]); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); @@ -5434,7 +5027,6 @@ describe('CdkDrag', () => { it('should not call the sort predicate for the same index', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const spy = jasmine.createSpy('sort predicate spy').and.returnValue(true); fixture.componentInstance.dropInstance.sortPredicate = spy; @@ -5444,7 +5036,6 @@ describe('CdkDrag', () => { startDraggingViaMouse(fixture, item); dispatchMouseEvent(document, 'mousemove', itemRect.left + 10, itemRect.top + 10); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(spy).not.toHaveBeenCalled(); @@ -5459,7 +5050,6 @@ describe('CdkDrag', () => { it('should preserve the original `transform` of items in the list', fakeAsync(() => { const fixture = createComponent(DraggableInScrollableVerticalDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const items = fixture.componentInstance.dragItems.map(item => item.element.nativeElement); items.forEach(element => (element.style.transform = 'rotate(180deg)')); @@ -5468,7 +5058,6 @@ describe('CdkDrag', () => { element.style.transform.indexOf('rotate(180deg)') > -1; startDraggingViaMouse(fixture, items[0]); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const preview = document.querySelector('.cdk-drag-preview') as HTMLElement; const placeholder = fixture.nativeElement.querySelector('.cdk-drag-placeholder'); @@ -5484,7 +5073,6 @@ describe('CdkDrag', () => { .toBe(true); dispatchMouseEvent(document, 'mousemove', thirdItemRect.left + 1, thirdItemRect.top + 1); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(items.every(hasInitialTransform)) .withContext('Expected items to preserve transform while dragging.') @@ -5497,10 +5085,8 @@ describe('CdkDrag', () => { .toBe(true); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(items.every(hasInitialTransform)) .withContext('Expected items to preserve transform when dragging stops.') @@ -5516,7 +5102,6 @@ describe('CdkDrag', () => { it('should sort correctly if the node has been offset', fakeAsync(() => { const documentElement = document.documentElement!; const fixture = createComponent(DraggableInDropZone); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); documentElement.style.position = 'absolute'; @@ -5537,7 +5122,6 @@ describe('CdkDrag', () => { describe('in a connected drop container', () => { it('should dispatch the `dropped` event when an item has been dropped into a new container', fakeAsync(() => { const fixture = createComponent(ConnectedDropZones); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const groups = fixture.componentInstance.groupedDragItems; @@ -5551,7 +5135,6 @@ describe('CdkDrag', () => { targetRect.top + 1, ); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(fixture.componentInstance.droppedSpy).toHaveBeenCalledTimes(1); @@ -5573,7 +5156,6 @@ describe('CdkDrag', () => { it('should be able to move the element over a new container and return it', fakeAsync(() => { const fixture = createComponent(ConnectedDropZones); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const groups = fixture.componentInstance.groupedDragItems; @@ -5592,7 +5174,6 @@ describe('CdkDrag', () => { .toBe(true); dispatchMouseEvent(document, 'mousemove', targetRect.left + 1, targetRect.top + 1); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dropZones[1].contains(placeholder)) @@ -5600,7 +5181,6 @@ describe('CdkDrag', () => { .toBe(true); dispatchMouseEvent(document, 'mousemove', initialRect.left + 1, initialRect.top + 1); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dropZones[0].contains(placeholder)) @@ -5608,7 +5188,6 @@ describe('CdkDrag', () => { .toBe(true); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(fixture.componentInstance.droppedSpy).not.toHaveBeenCalled(); @@ -5619,7 +5198,6 @@ describe('CdkDrag', () => { 'one, even if it no longer matches the enterPredicate', fakeAsync(() => { const fixture = createComponent(ConnectedDropZones); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const groups = fixture.componentInstance.groupedDragItems; @@ -5629,7 +5207,6 @@ describe('CdkDrag', () => { const targetRect = groups[1][2].element.nativeElement.getBoundingClientRect(); fixture.componentInstance.dropInstances.first.enterPredicate = () => false; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); startDraggingViaMouse(fixture, item.element.nativeElement); @@ -5642,7 +5219,6 @@ describe('CdkDrag', () => { .toBe(true); dispatchMouseEvent(document, 'mousemove', targetRect.left + 1, targetRect.top + 1); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dropZones[1].contains(placeholder)) @@ -5650,7 +5226,6 @@ describe('CdkDrag', () => { .toBe(true); dispatchMouseEvent(document, 'mousemove', initialRect.left + 1, initialRect.top + 1); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dropZones[0].contains(placeholder)) @@ -5658,7 +5233,6 @@ describe('CdkDrag', () => { .toBe(true); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(fixture.componentInstance.droppedSpy).not.toHaveBeenCalled(); @@ -5667,7 +5241,6 @@ describe('CdkDrag', () => { it('should transfer the DOM element from one drop zone to another', fakeAsync(() => { const fixture = createComponent(ConnectedDropZones); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const groups = fixture.componentInstance.groupedDragItems.slice(); @@ -5679,7 +5252,6 @@ describe('CdkDrag', () => { // after dragged item is removed from first container dragElementViaMouse(fixture, element, targetRect.left + 1, targetRect.top); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const event = fixture.componentInstance.droppedSpy.calls.mostRecent().args[0]; @@ -5700,11 +5272,9 @@ describe('CdkDrag', () => { it('should not be able to transfer an item into a container that is not in `connectedTo`', fakeAsync(() => { const fixture = createComponent(ConnectedDropZones); - - fixture.changeDetectorRef.markForCheck(); - fixture.detectChanges(); - fixture.componentInstance.dropInstances.forEach(d => (d.connectedTo = [])); - fixture.changeDetectorRef.markForCheck(); + fixture.componentInstance.todoConnectedTo.set([]); + fixture.componentInstance.doneConnectedTo.set([]); + fixture.componentInstance.extraConnectedTo.set([]); fixture.detectChanges(); const groups = fixture.componentInstance.groupedDragItems.slice(); @@ -5714,7 +5284,6 @@ describe('CdkDrag', () => { dragElementViaMouse(fixture, element, targetRect.left + 1, targetRect.top + 1); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const event = fixture.componentInstance.droppedSpy.calls.mostRecent().args[0]; @@ -5736,10 +5305,8 @@ describe('CdkDrag', () => { it('should not be able to transfer an item that does not match the `enterPredicate`', fakeAsync(() => { const fixture = createComponent(ConnectedDropZones); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); fixture.componentInstance.dropInstances.forEach(d => (d.enterPredicate = () => false)); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const groups = fixture.componentInstance.groupedDragItems.slice(); @@ -5749,7 +5316,6 @@ describe('CdkDrag', () => { dragElementViaMouse(fixture, element, targetRect.left + 1, targetRect.top + 1); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const event = fixture.componentInstance.droppedSpy.calls.mostRecent().args[0]; @@ -5770,7 +5336,6 @@ describe('CdkDrag', () => { it('should call the `enterPredicate` with the item and the container it is entering', fakeAsync(() => { const fixture = createComponent(ConnectedDropZones); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dropInstances = fixture.componentInstance.dropInstances.toArray(); @@ -5780,7 +5345,6 @@ describe('CdkDrag', () => { const targetRect = groups[1][2].element.nativeElement.getBoundingClientRect(); dropInstances[1].enterPredicate = spy; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dragElementViaMouse( @@ -5790,7 +5354,6 @@ describe('CdkDrag', () => { targetRect.top + 1, ); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(spy).toHaveBeenCalledWith(dragItem, dropInstances[1]); @@ -5798,7 +5361,6 @@ describe('CdkDrag', () => { it('should be able to start dragging after an item has been transferred', fakeAsync(() => { const fixture = createComponent(ConnectedDropZones); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const groups = fixture.componentInstance.groupedDragItems; @@ -5810,7 +5372,6 @@ describe('CdkDrag', () => { [1, -1].forEach(offset => { dragElementViaMouse(fixture, element, targetRect.left + offset, targetRect.top + offset); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); }); @@ -5822,7 +5383,6 @@ describe('CdkDrag', () => { // Make sure there's only one item in the first list. fixture.componentInstance.todo = ['things']; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const groups = fixture.componentInstance.groupedDragItems; @@ -5842,7 +5402,6 @@ describe('CdkDrag', () => { .toBe(true); dispatchMouseEvent(document, 'mousemove', targetRect.left + 1, targetRect.top + 1); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dropZones[1].contains(placeholder)) @@ -5850,7 +5409,6 @@ describe('CdkDrag', () => { .toBe(true); dispatchMouseEvent(document, 'mousemove', initialRect.left + 1, initialRect.top + 1); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dropZones[0].contains(placeholder)) @@ -5858,7 +5416,6 @@ describe('CdkDrag', () => { .toBe(true); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(fixture.componentInstance.droppedSpy).not.toHaveBeenCalled(); @@ -5869,7 +5426,6 @@ describe('CdkDrag', () => { // Make sure there's only one item in the first list. fixture.componentInstance.todo = ['things']; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dropInstances = fixture.componentInstance.dropInstances.toArray(); @@ -5887,7 +5443,6 @@ describe('CdkDrag', () => { expect(placeholder).toBeTruthy(); dispatchMouseEvent(document, 'mousemove', targetRect.left + 1, targetRect.top + 1); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(targetElement.previousSibling === placeholder) @@ -5902,13 +5457,11 @@ describe('CdkDrag', () => { // Swap with target dispatchMouseEvent(document, 'mousemove', targetRect.left + 1, targetRect.bottom - 1); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); // Drop and verify item drop positon and coontainer dispatchMouseEvent(document, 'mouseup', targetRect.left + 1, targetRect.bottom - 1); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const event = fixture.componentInstance.droppedSpy.calls.mostRecent().args[0]; @@ -5932,7 +5485,6 @@ describe('CdkDrag', () => { // Make sure there's only one item in the first list. fixture.componentInstance.todo = ['things']; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const groups = fixture.componentInstance.groupedDragItems; @@ -5955,7 +5507,6 @@ describe('CdkDrag', () => { .toBe(true); dispatchMouseEvent(document, 'mousemove', targetRect.left, targetRect.top); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dropZones[1].firstElementChild === placeholder) @@ -5970,7 +5521,6 @@ describe('CdkDrag', () => { // Make sure there's only one item in the first list. fixture.componentInstance.todo = ['things']; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const groups = fixture.componentInstance.groupedDragItems; @@ -5996,7 +5546,6 @@ describe('CdkDrag', () => { .toBe(true); dispatchMouseEvent(document, 'mousemove', targetRect.left, targetRect.top); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dropZones[1].lastChild === placeholder) @@ -6011,7 +5560,6 @@ describe('CdkDrag', () => { // Make sure there's only one item in the first list. fixture.componentInstance.todo = ['things']; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const groups = fixture.componentInstance.groupedDragItems; @@ -6025,14 +5573,12 @@ describe('CdkDrag', () => { expect(() => { dragElementViaMouse(fixture, item.element.nativeElement, targetRect.left, targetRect.top); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); }).not.toThrow(); })); it('should assign a default id on each drop zone', fakeAsync(() => { const fixture = createComponent(ConnectedDropZones); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect( @@ -6044,16 +5590,13 @@ describe('CdkDrag', () => { it('should be able to connect two drop zones by id', fakeAsync(() => { const fixture = createComponent(ConnectedDropZones); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); - const dropInstances = fixture.componentInstance.dropInstances.toArray(); + const [todoDropInstance, doneDropInstance] = + fixture.componentInstance.dropInstances.toArray(); - dropInstances[0].id = 'todo'; - dropInstances[1].id = 'done'; - dropInstances[0].connectedTo = ['done']; - dropInstances[1].connectedTo = ['todo']; - fixture.changeDetectorRef.markForCheck(); + fixture.componentInstance.todoConnectedTo.set([doneDropInstance.id]); + fixture.componentInstance.doneConnectedTo.set([todoDropInstance.id]); fixture.detectChanges(); const groups = fixture.componentInstance.groupedDragItems; @@ -6062,7 +5605,6 @@ describe('CdkDrag', () => { dragElementViaMouse(fixture, element, targetRect.left + 1, targetRect.top + 1); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const event = fixture.componentInstance.droppedSpy.calls.mostRecent().args[0]; @@ -6072,8 +5614,8 @@ describe('CdkDrag', () => { previousIndex: 1, currentIndex: 3, item: groups[0][1], - container: dropInstances[1], - previousContainer: dropInstances[0], + container: doneDropInstance, + previousContainer: todoDropInstance, isPointerOverContainer: true, distance: {x: jasmine.any(Number), y: jasmine.any(Number)}, dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}, @@ -6083,7 +5625,6 @@ describe('CdkDrag', () => { it('should be able to connect two drop zones using the drop list group', fakeAsync(() => { const fixture = createComponent(ConnectedDropZonesViaGroupDirective); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dropInstances = fixture.componentInstance.dropInstances.toArray(); @@ -6093,7 +5634,6 @@ describe('CdkDrag', () => { dragElementViaMouse(fixture, element, targetRect.left + 1, targetRect.top + 1); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const event = fixture.componentInstance.droppedSpy.calls.mostRecent().args[0]; @@ -6114,14 +5654,12 @@ describe('CdkDrag', () => { it('should be able to pass a single id to `connectedTo`', fakeAsync(() => { const fixture = createComponent(ConnectedDropZones); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); - const dropInstances = fixture.componentInstance.dropInstances.toArray(); + const [todoDropInstance, doneDropInstance] = + fixture.componentInstance.dropInstances.toArray(); - dropInstances[1].id = 'done'; - dropInstances[0].connectedTo = ['done']; - fixture.changeDetectorRef.markForCheck(); + fixture.componentInstance.todoConnectedTo.set([doneDropInstance.id]); fixture.detectChanges(); const groups = fixture.componentInstance.groupedDragItems; @@ -6130,7 +5668,6 @@ describe('CdkDrag', () => { dragElementViaMouse(fixture, element, targetRect.left + 1, targetRect.top + 1); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const event = fixture.componentInstance.droppedSpy.calls.mostRecent().args[0]; @@ -6140,8 +5677,8 @@ describe('CdkDrag', () => { previousIndex: 1, currentIndex: 3, item: groups[0][1], - container: dropInstances[1], - previousContainer: dropInstances[0], + container: doneDropInstance, + previousContainer: todoDropInstance, isPointerOverContainer: true, distance: {x: jasmine.any(Number), y: jasmine.any(Number)}, dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}, @@ -6154,7 +5691,6 @@ describe('CdkDrag', () => { 'with one draggable item', fakeAsync(() => { const fixture = createComponent(ConnectedDropZonesWithSingleItems); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const items = fixture.componentInstance.dragItems.toArray(); @@ -6178,7 +5714,6 @@ describe('CdkDrag', () => { targetRect.top + 1, ); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(fixture.componentInstance.droppedSpy).toHaveBeenCalledTimes(1); @@ -6211,49 +5746,47 @@ describe('CdkDrag', () => { 'even if it is not connected to the current container', fakeAsync(() => { const fixture = createComponent(ConnectedDropZones); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const groups = fixture.componentInstance.groupedDragItems; - const dropInstances = fixture.componentInstance.dropInstances.toArray(); - const dropZones = dropInstances.map(d => d.element.nativeElement); + const [todoDropInstance, doneDropInstance] = + fixture.componentInstance.dropInstances.toArray(); + const todoZone = todoDropInstance.element.nativeElement; + const doneZone = doneDropInstance.element.nativeElement; const item = groups[0][1]; const initialRect = item.element.nativeElement.getBoundingClientRect(); const targetRect = groups[1][2].element.nativeElement.getBoundingClientRect(); // Change the `connectedTo` so the containers are only connected one-way. - dropInstances[0].connectedTo = dropInstances[1]; - dropInstances[1].connectedTo = []; + fixture.componentInstance.todoConnectedTo.set([doneDropInstance]); + fixture.componentInstance.doneConnectedTo.set([]); + fixture.detectChanges(); startDraggingViaMouse(fixture, item.element.nativeElement); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); - const placeholder = dropZones[0].querySelector('.cdk-drag-placeholder')!; + const placeholder = todoZone.querySelector('.cdk-drag-placeholder')!; expect(placeholder).toBeTruthy(); - expect(dropZones[0].contains(placeholder)) + expect(todoZone.contains(placeholder)) .withContext('Expected placeholder to be inside the first container.') .toBe(true); dispatchMouseEvent(document, 'mousemove', targetRect.left + 1, targetRect.top + 1); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); - expect(dropZones[1].contains(placeholder)) + expect(doneZone.contains(placeholder)) .withContext('Expected placeholder to be inside second container.') .toBe(true); dispatchMouseEvent(document, 'mousemove', initialRect.left + 1, initialRect.top + 1); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); - expect(dropZones[0].contains(placeholder)) + expect(todoZone.contains(placeholder)) .withContext('Expected placeholder to be back inside first container.') .toBe(true); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(fixture.componentInstance.droppedSpy).not.toHaveBeenCalled(); @@ -6263,7 +5796,6 @@ describe('CdkDrag', () => { it('should not add child drop lists to the same group as their parents', fakeAsync(() => { const fixture = createComponent(NestedDropListGroups); const component = fixture.componentInstance; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(Array.from(component.group._items)).toEqual([component.listOne, component.listTwo]); @@ -6271,7 +5803,6 @@ describe('CdkDrag', () => { it('should not be able to drop an element into a container that is under another element', fakeAsync(() => { const fixture = createComponent(ConnectedDropZones); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const groups = fixture.componentInstance.groupedDragItems.slice(); @@ -6294,7 +5825,6 @@ describe('CdkDrag', () => { dragElementViaMouse(fixture, element, targetRect.left + 1, targetRect.top + 1); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const event = fixture.componentInstance.droppedSpy.calls.mostRecent().args[0]; @@ -6315,7 +5845,6 @@ describe('CdkDrag', () => { it('should set a class when a container can receive an item', fakeAsync(() => { const fixture = createComponent(ConnectedDropZones); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dropZones = fixture.componentInstance.dropInstances.map(d => d.element.nativeElement); @@ -6326,7 +5855,6 @@ describe('CdkDrag', () => { .toBe(true); startDraggingViaMouse(fixture, item.element.nativeElement); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dropZones[0].classList).not.toContain( @@ -6341,7 +5869,6 @@ describe('CdkDrag', () => { it('should toggle the `receiving` class when the item enters a new list', fakeAsync(() => { const fixture = createComponent(ConnectedDropZones); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const groups = fixture.componentInstance.groupedDragItems; @@ -6365,7 +5892,6 @@ describe('CdkDrag', () => { .toContain('cdk-drop-list-receiving'); dispatchMouseEvent(document, 'mousemove', targetRect.left + 1, targetRect.top + 1); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dropZones[0].classList) @@ -6379,7 +5905,6 @@ describe('CdkDrag', () => { it('should not set the receiving class if the item does not match the enter predicate', fakeAsync(() => { const fixture = createComponent(ConnectedDropZones); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); fixture.componentInstance.dropInstances.toArray()[1].enterPredicate = () => false; @@ -6391,7 +5916,6 @@ describe('CdkDrag', () => { .toBe(true); startDraggingViaMouse(fixture, item.element.nativeElement); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dropZones.every(c => !c.classList.contains('cdk-drop-list-receiving'))) @@ -6404,7 +5928,6 @@ describe('CdkDrag', () => { 'does not match', fakeAsync(() => { const fixture = createComponent(ConnectedDropZones); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); fixture.componentInstance.dropInstances.toArray()[0].enterPredicate = () => false; @@ -6428,7 +5951,6 @@ describe('CdkDrag', () => { .toContain('cdk-drop-list-receiving'); dispatchMouseEvent(document, 'mousemove', targetRect.left + 1, targetRect.top + 1); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dropZones[0].classList) @@ -6446,7 +5968,6 @@ describe('CdkDrag', () => { const fixture = createComponent(ConnectedDropListsInOnPush, undefined, undefined, [ DraggableInOnPushDropZone, ]); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dropZones = Array.from( @@ -6459,7 +5980,6 @@ describe('CdkDrag', () => { .toBe(true); startDraggingViaMouse(fixture, item); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dropZones[0].classList) @@ -6476,28 +5996,29 @@ describe('CdkDrag', () => { 'dropping it into the final one', fakeAsync(() => { const fixture = createComponent(ConnectedDropZones); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); - const dropInstances = fixture.componentInstance.dropInstances.toArray(); - dropInstances[0].connectedTo = [dropInstances[1], dropInstances[2]]; - dropInstances[1].connectedTo = []; - dropInstances[2].connectedTo = []; - fixture.changeDetectorRef.markForCheck(); + const [todoDropInstance, doneDropInstance, extraDropInstance] = + fixture.componentInstance.dropInstances.toArray(); + fixture.componentInstance.todoConnectedTo.set([doneDropInstance, extraDropInstance]); + fixture.componentInstance.doneConnectedTo.set([]); + fixture.componentInstance.extraConnectedTo.set([]); fixture.detectChanges(); const groups = fixture.componentInstance.groupedDragItems; - const dropZones = dropInstances.map(d => d.element.nativeElement); + const todoZone = todoDropInstance.element.nativeElement; + const doneZone = doneDropInstance.element.nativeElement; + const extraZone = extraDropInstance.element.nativeElement; const item = groups[0][1]; - const intermediateRect = dropZones[1].getBoundingClientRect(); - const finalRect = dropZones[2].getBoundingClientRect(); + const intermediateRect = doneZone.getBoundingClientRect(); + const finalRect = extraZone.getBoundingClientRect(); startDraggingViaMouse(fixture, item.element.nativeElement); - const placeholder = dropZones[0].querySelector('.cdk-drag-placeholder')!; + const placeholder = todoZone.querySelector('.cdk-drag-placeholder')!; expect(placeholder).toBeTruthy(); - expect(dropZones[0].contains(placeholder)) + expect(todoZone.contains(placeholder)) .withContext('Expected placeholder to be inside the first container.') .toBe(true); @@ -6507,26 +6028,22 @@ describe('CdkDrag', () => { intermediateRect.left + 1, intermediateRect.top + 1, ); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); - expect(dropZones[1].contains(placeholder)) + expect(doneZone.contains(placeholder)) .withContext('Expected placeholder to be inside second container.') .toBe(true); dispatchMouseEvent(document, 'mousemove', finalRect.left + 1, finalRect.top + 1); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); - expect(dropZones[2].contains(placeholder)) + expect(extraZone.contains(placeholder)) .withContext('Expected placeholder to be inside third container.') .toBe(true); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const event = fixture.componentInstance.droppedSpy.calls.mostRecent().args[0]; @@ -6537,8 +6054,8 @@ describe('CdkDrag', () => { previousIndex: 1, currentIndex: 0, item: groups[0][1], - container: dropInstances[2], - previousContainer: dropInstances[0], + container: extraDropInstance, + previousContainer: todoDropInstance, isPointerOverContainer: false, distance: {x: jasmine.any(Number), y: jasmine.any(Number)}, dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}, @@ -6553,28 +6070,29 @@ describe('CdkDrag', () => { 'not connected to by passing it over an intermediate one that is', fakeAsync(() => { const fixture = createComponent(ConnectedDropZones); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); - const dropInstances = fixture.componentInstance.dropInstances.toArray(); - dropInstances[0].connectedTo = [dropInstances[1]]; - dropInstances[1].connectedTo = [dropInstances[0], dropInstances[2]]; - dropInstances[2].connectedTo = [dropInstances[1]]; - fixture.changeDetectorRef.markForCheck(); + const [todoDropInstance, doneDropInstance, extraDropInstance] = + fixture.componentInstance.dropInstances.toArray(); + fixture.componentInstance.todoConnectedTo.set([doneDropInstance]); + fixture.componentInstance.doneConnectedTo.set([todoDropInstance, extraDropInstance]); + fixture.componentInstance.extraConnectedTo.set([doneDropInstance]); fixture.detectChanges(); const groups = fixture.componentInstance.groupedDragItems; - const dropZones = dropInstances.map(d => d.element.nativeElement); + const todoZone = todoDropInstance.element.nativeElement; + const doneZone = doneDropInstance.element.nativeElement; + const extraZone = extraDropInstance.element.nativeElement; const item = groups[0][1]; - const intermediateRect = dropZones[1].getBoundingClientRect(); - const finalRect = dropZones[2].getBoundingClientRect(); + const intermediateRect = doneZone.getBoundingClientRect(); + const finalRect = extraZone.getBoundingClientRect(); startDraggingViaMouse(fixture, item.element.nativeElement); - const placeholder = dropZones[0].querySelector('.cdk-drag-placeholder')!; + const placeholder = todoZone.querySelector('.cdk-drag-placeholder')!; expect(placeholder).toBeTruthy(); - expect(dropZones[0].contains(placeholder)) + expect(todoZone.contains(placeholder)) .withContext('Expected placeholder to be inside the first container.') .toBe(true); @@ -6584,26 +6102,22 @@ describe('CdkDrag', () => { intermediateRect.left + 1, intermediateRect.top + 1, ); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); - expect(dropZones[1].contains(placeholder)) + expect(doneZone.contains(placeholder)) .withContext('Expected placeholder to be inside second container.') .toBe(true); dispatchMouseEvent(document, 'mousemove', finalRect.left + 1, finalRect.top + 1); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); - expect(dropZones[1].contains(placeholder)) + expect(doneZone.contains(placeholder)) .withContext('Expected placeholder to remain in the second container.') .toBe(true); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const event = fixture.componentInstance.droppedSpy.calls.mostRecent().args[0]; @@ -6614,8 +6128,8 @@ describe('CdkDrag', () => { previousIndex: 1, currentIndex: 1, item: groups[0][1], - container: dropInstances[1], - previousContainer: dropInstances[0], + container: doneDropInstance, + previousContainer: todoDropInstance, isPointerOverContainer: false, }), ); @@ -6627,7 +6141,6 @@ describe('CdkDrag', () => { 'was disabled', fakeAsync(() => { const fixture = createComponent(ConnectedDropZones); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const groups = fixture.componentInstance.groupedDragItems; @@ -6649,7 +6162,6 @@ describe('CdkDrag', () => { .toBe(1); dispatchMouseEvent(document, 'mousemove', targetRect.left + 1, targetRect.top + 1); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dropZones[1].contains(placeholder)) @@ -6668,7 +6180,6 @@ describe('CdkDrag', () => { firstInitialSiblingRect.left + 1, firstInitialSiblingRect.top + 1, ); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dropZones[0].contains(placeholder)) @@ -6679,7 +6190,6 @@ describe('CdkDrag', () => { .toBe(1); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(fixture.componentInstance.droppedSpy).not.toHaveBeenCalled(); @@ -6691,7 +6201,6 @@ describe('CdkDrag', () => { 'sorting is enabled', fakeAsync(() => { const fixture = createComponent(ConnectedDropZones); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const groups = fixture.componentInstance.groupedDragItems; @@ -6714,7 +6223,6 @@ describe('CdkDrag', () => { .toBe(1); dispatchMouseEvent(document, 'mousemove', targetRect.left + 1, targetRect.top + 1); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dropZones[1].contains(placeholder)) @@ -6728,7 +6236,6 @@ describe('CdkDrag', () => { // Return the item to an index that is different from the initial one. dispatchMouseEvent(document, 'mousemove', nextTargetRect.left + 1, nextTargetRect.top + 1); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dropZones[0].contains(placeholder)) @@ -6742,7 +6249,6 @@ describe('CdkDrag', () => { it('should return the last item to initial position when dragging back into a container with disabled sorting', fakeAsync(() => { const fixture = createComponent(ConnectedDropZones); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const groups = fixture.componentInstance.groupedDragItems; @@ -6765,7 +6271,6 @@ describe('CdkDrag', () => { .toBe(lastIndex); dispatchMouseEvent(document, 'mousemove', targetRect.left + 1, targetRect.top + 1); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dropZones[1].contains(placeholder)) @@ -6784,7 +6289,6 @@ describe('CdkDrag', () => { firstInitialSiblingRect.left, firstInitialSiblingRect.top, ); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(dropZones[0].contains(placeholder)) @@ -6795,7 +6299,6 @@ describe('CdkDrag', () => { .toBe(lastIndex); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(fixture.componentInstance.droppedSpy).not.toHaveBeenCalled(); @@ -6808,7 +6311,6 @@ describe('CdkDrag', () => { const fixture = createComponent(ConnectedWrappedDropZones, [], 0, [ WrappedDropContainerComponent, ]); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const [startZone, targetZone] = fixture.nativeElement.querySelectorAll('.cdk-drop-list'); @@ -6834,7 +6336,6 @@ describe('CdkDrag', () => { .toContain('cdk-drop-list-dragging'); dispatchMouseEvent(document, 'mousemove', targetRect.left + 1, targetRect.top + 1); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(startZone.classList) @@ -6850,7 +6351,6 @@ describe('CdkDrag', () => { it('should dispatch an event when an item enters a new container', fakeAsync(() => { const fixture = createComponent(ConnectedDropZones); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const groups = fixture.componentInstance.groupedDragItems; @@ -6860,7 +6360,6 @@ describe('CdkDrag', () => { startDraggingViaMouse(fixture, item.element.nativeElement); dispatchMouseEvent(document, 'mousemove', targetRect.left + 1, targetRect.top + 1); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const containerEnterEvent = fixture.componentInstance.enteredSpy.calls.mostRecent().args[0]; @@ -6877,7 +6376,6 @@ describe('CdkDrag', () => { it('should not throw if dragging was interrupted as a result of the entered event', fakeAsync(() => { const fixture = createComponent(ConnectedDropZones); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const groups = fixture.componentInstance.groupedDragItems; @@ -6886,7 +6384,6 @@ describe('CdkDrag', () => { fixture.componentInstance.enteredSpy.and.callFake(() => { fixture.componentInstance.todo = []; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); }); @@ -6898,24 +6395,20 @@ describe('CdkDrag', () => { targetRect.top + 1, ); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); }).not.toThrow(); })); it('should be able to drop into a new container after scrolling into view', fakeAsync(() => { const fixture = createComponent(ConnectedDropZones); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); // Make the page scrollable and scroll the items out of view. const cleanup = makeScrollable(); scrollTo(0, 4000); dispatchFakeEvent(document, 'scroll'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const groups = fixture.componentInstance.groupedDragItems; @@ -6929,10 +6422,8 @@ describe('CdkDrag', () => { const targetRect = groups[1][2].element.nativeElement.getBoundingClientRect(); dispatchMouseEvent(document, 'mousemove', targetRect.left + 1, targetRect.top + 1); dispatchMouseEvent(document, 'mouseup', targetRect.left + 1, targetRect.top + 1); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(fixture.componentInstance.droppedSpy).toHaveBeenCalledTimes(1); @@ -6967,7 +6458,6 @@ describe('CdkDrag', () => { [], ViewEncapsulation.ShadowDom, ); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const groups = fixture.componentInstance.groupedDragItems; @@ -6981,7 +6471,6 @@ describe('CdkDrag', () => { targetRect.top + 1, ); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(fixture.componentInstance.droppedSpy).toHaveBeenCalledTimes(1); @@ -7008,7 +6497,6 @@ describe('CdkDrag', () => { } const fixture = createComponent(ConnectedDropZonesInsideShadowRootWithNgIf); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const groups = fixture.componentInstance.groupedDragItems; @@ -7022,7 +6510,6 @@ describe('CdkDrag', () => { targetRect.top + 1, ); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(fixture.componentInstance.droppedSpy).toHaveBeenCalledTimes(1); @@ -7055,35 +6542,29 @@ describe('CdkDrag', () => { [], ViewEncapsulation.ShadowDom, ); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const shadowRoot = fixture.nativeElement.shadowRoot; const item = fixture.componentInstance.groupedDragItems[0][1]; startDraggingViaMouse(fixture, item.element.nativeElement); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const initialSelectStart = dispatchFakeEvent(shadowRoot, 'selectstart'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(initialSelectStart.defaultPrevented).toBe(true); dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); const afterDropSelectStart = dispatchFakeEvent(shadowRoot, 'selectstart'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(afterDropSelectStart.defaultPrevented).toBe(false); })); it('should not throw if its next sibling is removed while dragging', fakeAsync(() => { const fixture = createComponent(ConnectedDropZonesWithSingleItems); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const items = fixture.componentInstance.dragItems.toArray(); @@ -7107,18 +6588,15 @@ describe('CdkDrag', () => { expect(() => { flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); }).not.toThrow(); })); it('should warn when the connected container ID does not exist', fakeAsync(() => { const fixture = createComponent(ConnectedDropZones); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); - fixture.componentInstance.dropInstances.first.connectedTo = 'does-not-exist'; - fixture.changeDetectorRef.markForCheck(); + fixture.componentInstance.todoConnectedTo.set(['does-not-exist']); fixture.detectChanges(); const groups = fixture.componentInstance.groupedDragItems; @@ -7127,7 +6605,6 @@ describe('CdkDrag', () => { spyOn(console, 'warn'); dragElementViaMouse(fixture, element, 0, 0); flush(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(console.warn).toHaveBeenCalledWith( @@ -7137,7 +6614,6 @@ describe('CdkDrag', () => { it('should not be able to start a drag sequence while a connected container is active', fakeAsync(() => { const fixture = createComponent(ConnectedDropZones); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.groupedDragItems[0][0]; const itemInOtherList = fixture.componentInstance.groupedDragItems[1][0]; @@ -7168,12 +6644,10 @@ describe('CdkDrag', () => { [], ViewEncapsulation.ShadowDom, ); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.groupedDragItems[0][1]; startDraggingViaMouse(fixture, item.element.nativeElement); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); // `querySelector` doesn't descend into the shadow DOM so we can assert that the preview @@ -7185,7 +6659,6 @@ describe('CdkDrag', () => { describe('with nested drags', () => { it('should not move draggable container when dragging child (multitouch)', fakeAsync(() => { const fixture = createComponent(NestedDragsComponent, [], 10); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); // First finger drags container (less then threshold) @@ -7238,7 +6711,6 @@ describe('CdkDrag', () => { it('should stop event propagation when dragging a nested item', fakeAsync(() => { const fixture = createComponent(NestedDragsComponent); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.item.nativeElement; @@ -7246,7 +6718,6 @@ describe('CdkDrag', () => { spyOn(event, 'stopPropagation').and.callThrough(); dispatchEvent(dragElement, event); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(event.stopPropagation).toHaveBeenCalled(); @@ -7254,7 +6725,6 @@ describe('CdkDrag', () => { it('should stop event propagation when dragging item nested via ng-template', fakeAsync(() => { const fixture = createComponent(NestedDragsThroughTemplate); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const dragElement = fixture.componentInstance.item.nativeElement; @@ -7262,7 +6732,6 @@ describe('CdkDrag', () => { spyOn(event, 'stopPropagation').and.callThrough(); dispatchEvent(dragElement, event); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(event.stopPropagation).toHaveBeenCalled(); @@ -7279,6 +6748,8 @@ describe('CdkDrag', () => { [cdkDragStartDelay]="dragStartDelay" [cdkDragConstrainPosition]="constrainPosition" [cdkDragFreeDragPosition]="freeDragPosition" + [cdkDragDisabled]="dragDisabled()" + [cdkDragLockAxis]="dragLockAxis()" (cdkDragStarted)="startedSpy($event)" (cdkDragReleased)="releasedSpy($event)" (cdkDragEnded)="endedSpy($event)" @@ -7295,8 +6766,15 @@ class StandaloneDraggable { releasedSpy = jasmine.createSpy('released spy'); boundary: string | HTMLElement; dragStartDelay: number | string | {touch: number; mouse: number}; - constrainPosition: (point: Point) => Point; + constrainPosition: ( + userPointerPosition: Point, + dragRef: DragRef, + dimensions: DOMRect, + pickupPositionInElement: Point, + ) => Point; freeDragPosition?: {x: number; y: number}; + dragDisabled = signal(false); + dragLockAxis = signal(undefined); } @Component({ @@ -7437,6 +6915,8 @@ const DROP_ZONE_FIXTURE_TEMPLATE = ` style="width: 100px; background: pink;" [id]="dropZoneId" [cdkDropListData]="items" + [cdkDropListDisabled]="dropDisabled()" + [cdkDropListLockAxis]="dropLockAxis()" (cdkDropListSorted)="sortedSpy($event)" (cdkDropListDropped)="droppedSpy($event)">
(undefined); constructor(protected _elementRef: ElementRef) {} @@ -7684,15 +7166,16 @@ class DraggableInScrollableHorizontalDropZone extends DraggableInHorizontalDropZ // https://github.com/angular/angular/pull/52515 @Component({ template: ` -
+
@for (item of items; track item) {
- {{item}} + {{item.label}} @@ -7709,12 +7192,18 @@ class DraggableInScrollableHorizontalDropZone extends DraggableInHorizontalDropZ class DraggableInDropZoneWithCustomPreview { @ViewChild(CdkDropList) dropInstance: CdkDropList; @ViewChildren(CdkDrag) dragItems: QueryList; - items = ['Zero', 'One', 'Two', 'Three']; + items: {label: string; lockAxis?: DragAxis}[] = [ + {label: 'Zero'}, + {label: 'One'}, + {label: 'Two'}, + {label: 'Three'}, + ]; boundarySelector: string; renderCustomPreview = true; matchPreviewSize = false; previewClass: string | string[]; constrainPosition: (point: Point) => Point; + dropLockAxis = signal(undefined); } @Component({ @@ -7852,7 +7341,7 @@ const CONNECTED_DROP_ZONES_TEMPLATE = ` cdkDropList #todoZone="cdkDropList" [cdkDropListData]="todo" - [cdkDropListConnectedTo]="[doneZone]" + [cdkDropListConnectedTo]="todoConnectedTo() || [doneZone]" (cdkDropListDropped)="droppedSpy($event)" (cdkDropListEntered)="enteredSpy($event)"> @for (item of todo; track item) { @@ -7867,7 +7356,7 @@ const CONNECTED_DROP_ZONES_TEMPLATE = ` cdkDropList #doneZone="cdkDropList" [cdkDropListData]="done" - [cdkDropListConnectedTo]="[todoZone]" + [cdkDropListConnectedTo]="doneConnectedTo() || [todoZone]" (cdkDropListDropped)="droppedSpy($event)" (cdkDropListEntered)="enteredSpy($event)"> @for (item of done; track item) { @@ -7882,6 +7371,7 @@ const CONNECTED_DROP_ZONES_TEMPLATE = ` cdkDropList #extraZone="cdkDropList" [cdkDropListData]="extra" + [cdkDropListConnectedTo]="extraConnectedTo()" (cdkDropListDropped)="droppedSpy($event)" (cdkDropListEntered)="enteredSpy($event)"> @for (item of extra; track item) { @@ -7901,6 +7391,7 @@ const CONNECTED_DROP_ZONES_TEMPLATE = ` class ConnectedDropZones implements AfterViewInit { @ViewChildren(CdkDrag) rawDragItems: QueryList; @ViewChildren(CdkDropList) dropInstances: QueryList; + changeDetectorRef = inject(ChangeDetectorRef); groupedDragItems: CdkDrag[][] = []; todo = ['Zero', 'One', 'Two', 'Three']; @@ -7909,6 +7400,9 @@ class ConnectedDropZones implements AfterViewInit { droppedSpy = jasmine.createSpy('dropped spy'); enteredSpy = jasmine.createSpy('entered spy'); itemEnteredSpy = jasmine.createSpy('item entered spy'); + todoConnectedTo = signal<(CdkDropList | string)[] | undefined>(undefined); + doneConnectedTo = signal<(CdkDropList | string)[] | undefined>(undefined); + extraConnectedTo = signal<(CdkDropList | string)[] | undefined>(undefined); ngAfterViewInit() { this.dropInstances.forEach((dropZone, index) => { @@ -7918,6 +7412,7 @@ class ConnectedDropZones implements AfterViewInit { this.groupedDragItems[index].push(...dropZone.getSortedItems()); }); + this.changeDetectorRef.markForCheck(); } } diff --git a/src/cdk/drag-drop/directives/test-utils.spec.ts b/src/cdk/drag-drop/directives/test-utils.spec.ts index 2096c9dd6c70..451a390a5e9c 100644 --- a/src/cdk/drag-drop/directives/test-utils.spec.ts +++ b/src/cdk/drag-drop/directives/test-utils.spec.ts @@ -17,11 +17,9 @@ export function dragElementViaMouse( startDraggingViaMouse(fixture, element); dispatchMouseEvent(document, 'mousemove', x, y); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchMouseEvent(document, 'mouseup', x, y); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); } @@ -39,11 +37,9 @@ export function startDraggingViaMouse( y?: number, ) { dispatchMouseEvent(element, 'mousedown', x, y); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchMouseEvent(document, 'mousemove', x, y); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); } @@ -71,11 +67,9 @@ export function dragElementViaTouch( */ export function startDraggingViaTouch(fixture: ComponentFixture, element: Element) { dispatchTouchEvent(element, 'touchstart'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchTouchEvent(document, 'touchmove'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); } @@ -86,7 +80,6 @@ export function startDraggingViaTouch(fixture: ComponentFixture, element: E */ export function continueDraggingViaTouch(fixture: ComponentFixture, x: number, y: number) { dispatchTouchEvent(document, 'touchmove', x, y); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); } @@ -97,7 +90,6 @@ export function continueDraggingViaTouch(fixture: ComponentFixture, x: numb */ export function stopDraggingViaTouch(fixture: ComponentFixture, x: number, y: number) { dispatchTouchEvent(document, 'touchend', x, y); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); } @@ -153,13 +145,11 @@ export function assertDownwardSorting(fixture: ComponentFixture, items: Ele // Add a few pixels to the top offset so we get some overlap. dispatchMouseEvent(document, 'mousemove', elementRect.left, elementRect.top + 5); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(getElementIndexByPosition(placeholder, 'top')).toBe(i); } dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); } @@ -183,13 +173,11 @@ export function assertUpwardSorting(fixture: ComponentFixture, items: Eleme // Remove a few pixels from the bottom offset so we get some overlap. dispatchMouseEvent(document, 'mousemove', elementRect.left, elementRect.bottom - 5); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(getElementIndexByPosition(placeholder, 'top')).toBe(i); } dispatchMouseEvent(document, 'mouseup'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); flush(); } diff --git a/src/cdk/drag-drop/drag-drop-registry.ts b/src/cdk/drag-drop/drag-drop-registry.ts index a09fcaab495c..53655ef1dcea 100644 --- a/src/cdk/drag-drop/drag-drop-registry.ts +++ b/src/cdk/drag-drop/drag-drop-registry.ts @@ -6,22 +6,24 @@ * found in the LICENSE file at https://angular.io/license */ +import {normalizePassiveListenerOptions} from '@angular/cdk/platform'; +import {DOCUMENT} from '@angular/common'; import { + ApplicationRef, + ChangeDetectionStrategy, + Component, + EnvironmentInjector, + Inject, Injectable, NgZone, OnDestroy, - Inject, - inject, - ApplicationRef, - EnvironmentInjector, - Component, ViewEncapsulation, - ChangeDetectionStrategy, + WritableSignal, createComponent, + inject, + signal, } from '@angular/core'; -import {DOCUMENT} from '@angular/common'; -import {normalizePassiveListenerOptions} from '@angular/cdk/platform'; -import {merge, Observable, Observer, Subject} from 'rxjs'; +import {Observable, Observer, Subject, merge} from 'rxjs'; /** Event options that can be used to bind an active, capturing event. */ const activeCapturingEventOptions = normalizePassiveListenerOptions({ @@ -67,7 +69,7 @@ export class DragDropRegistry implements O private _dragInstances = new Set(); /** Drag item instances that are currently being dragged. */ - private _activeDragInstances: I[] = []; + private _activeDragInstances: WritableSignal = signal([]); /** Keeps track of the event listeners that we've bound to the `document`. */ private _globalListeners = new Map< @@ -163,14 +165,14 @@ export class DragDropRegistry implements O */ startDragging(drag: I, event: TouchEvent | MouseEvent) { // Do not process the same drag twice to avoid memory leaks and redundant listeners - if (this._activeDragInstances.indexOf(drag) > -1) { + if (this._activeDragInstances().indexOf(drag) > -1) { return; } this._loadResets(); - this._activeDragInstances.push(drag); + this._activeDragInstances.update(instances => [...instances, drag]); - if (this._activeDragInstances.length === 1) { + if (this._activeDragInstances().length === 1) { const isTouchEvent = event.type.startsWith('touch'); // We explicitly bind __active__ listeners here, because newer browsers will default to @@ -215,20 +217,23 @@ export class DragDropRegistry implements O /** Stops dragging a drag item instance. */ stopDragging(drag: I) { - const index = this._activeDragInstances.indexOf(drag); - - if (index > -1) { - this._activeDragInstances.splice(index, 1); - - if (this._activeDragInstances.length === 0) { - this._clearGlobalListeners(); + this._activeDragInstances.update(instances => { + const index = instances.indexOf(drag); + if (index > -1) { + instances.splice(index, 1); + return [...instances]; } + return instances; + }); + + if (this._activeDragInstances().length === 0) { + this._clearGlobalListeners(); } } /** Gets whether a drag item instance is currently being dragged. */ isDragging(drag: I) { - return this._activeDragInstances.indexOf(drag) > -1; + return this._activeDragInstances().indexOf(drag) > -1; } /** @@ -250,7 +255,7 @@ export class DragDropRegistry implements O return this._ngZone.runOutsideAngular(() => { const eventOptions = true; const callback = (event: Event) => { - if (this._activeDragInstances.length) { + if (this._activeDragInstances().length) { observer.next(event); } }; @@ -281,18 +286,18 @@ export class DragDropRegistry implements O * @param event Event whose default action should be prevented. */ private _preventDefaultWhileDragging = (event: Event) => { - if (this._activeDragInstances.length > 0) { + if (this._activeDragInstances().length > 0) { event.preventDefault(); } }; /** Event listener for `touchmove` that is bound even if no dragging is happening. */ private _persistentTouchmoveListener = (event: TouchEvent) => { - if (this._activeDragInstances.length > 0) { + if (this._activeDragInstances().length > 0) { // Note that we only want to prevent the default action after dragging has actually started. // Usually this is the same time at which the item is added to the `_activeDragInstances`, // but it could be pushed back if the user has set up a drag delay or threshold. - if (this._activeDragInstances.some(this._draggingPredicate)) { + if (this._activeDragInstances().some(this._draggingPredicate)) { event.preventDefault(); } diff --git a/src/cdk/drag-drop/drag-drop.spec.ts b/src/cdk/drag-drop/drag-drop.spec.ts index 5c6c0ef26ceb..bdff7576c197 100644 --- a/src/cdk/drag-drop/drag-drop.spec.ts +++ b/src/cdk/drag-drop/drag-drop.spec.ts @@ -22,7 +22,6 @@ describe('DragDrop', () => { it('should be able to attach a DragRef to a DOM node', () => { const fixture = TestBed.createComponent(TestComponent); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const ref = service.createDrag(fixture.componentInstance.elementRef); @@ -31,7 +30,6 @@ describe('DragDrop', () => { it('should be able to attach a DropListRef to a DOM node', () => { const fixture = TestBed.createComponent(TestComponent); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const ref = service.createDropList(fixture.componentInstance.elementRef); diff --git a/src/cdk/drag-drop/drag-ref.ts b/src/cdk/drag-drop/drag-ref.ts index 860f52993983..b961326e84be 100644 --- a/src/cdk/drag-drop/drag-ref.ts +++ b/src/cdk/drag-drop/drag-ref.ts @@ -6,31 +6,38 @@ * found in the LICENSE file at https://angular.io/license */ -import {EmbeddedViewRef, ElementRef, NgZone, ViewContainerRef, TemplateRef} from '@angular/core'; -import {ViewportRuler} from '@angular/cdk/scrolling'; +import {isFakeMousedownFromScreenReader, isFakeTouchstartFromScreenReader} from '@angular/cdk/a11y'; import {Direction} from '@angular/cdk/bidi'; +import {coerceElement} from '@angular/cdk/coercion'; import { - normalizePassiveListenerOptions, _getEventTarget, _getShadowRoot, + normalizePassiveListenerOptions, } from '@angular/cdk/platform'; -import {coerceElement} from '@angular/cdk/coercion'; -import {isFakeMousedownFromScreenReader, isFakeTouchstartFromScreenReader} from '@angular/cdk/a11y'; -import {Subscription, Subject, Observable} from 'rxjs'; -import type {DropListRef} from './drop-list-ref'; -import {DragDropRegistry} from './drag-drop-registry'; +import {ViewportRuler} from '@angular/cdk/scrolling'; +import { + ElementRef, + EmbeddedViewRef, + NgZone, + TemplateRef, + ViewContainerRef, + signal, +} from '@angular/core'; +import {Observable, Subject, Subscription} from 'rxjs'; +import {deepCloneNode} from './dom/clone-node'; +import {adjustDomRect, getMutableClientRect} from './dom/dom-rect'; +import {ParentPositionTracker} from './dom/parent-position-tracker'; +import {getRootNode} from './dom/root-node'; import { - combineTransforms, DragCSSStyleDeclaration, + combineTransforms, getTransform, toggleNativeDragInteractions, toggleVisibility, } from './dom/styling'; -import {getMutableClientRect, adjustDomRect} from './dom/dom-rect'; -import {ParentPositionTracker} from './dom/parent-position-tracker'; -import {deepCloneNode} from './dom/clone-node'; +import {DragDropRegistry} from './drag-drop-registry'; +import type {DropListRef} from './drop-list-ref'; import {DragPreviewTemplate, PreviewRef} from './preview-ref'; -import {getRootNode} from './dom/root-node'; /** Object that can be used to configure the behavior of DragRef. */ export interface DragRefConfig { @@ -155,7 +162,7 @@ export class DragRef { * Whether the dragging sequence has been started. Doesn't * necessarily mean that the element has been moved. */ - private _hasStartedDragging = false; + private _hasStartedDragging = signal(false); /** Whether the element has moved since the user started dragging it. */ private _hasMoved: boolean; @@ -521,7 +528,7 @@ export class DragRef { /** Checks whether the element is currently being dragged. */ isDragging(): boolean { - return this._hasStartedDragging && this._dragDropRegistry.isDragging(this); + return this._hasStartedDragging() && this._dragDropRegistry.isDragging(this); } /** Resets a standalone drag item to its initial position. */ @@ -651,7 +658,7 @@ export class DragRef { private _pointerMove = (event: MouseEvent | TouchEvent) => { const pointerPosition = this._getPointerPositionOnPage(event); - if (!this._hasStartedDragging) { + if (!this._hasStartedDragging()) { const distanceX = Math.abs(pointerPosition.x - this._pickupPositionOnPage.x); const distanceY = Math.abs(pointerPosition.y - this._pickupPositionOnPage.y); const isOverThreshold = distanceX + distanceY >= this._config.dragStartThreshold; @@ -678,7 +685,7 @@ export class DragRef { if (event.cancelable) { event.preventDefault(); } - this._hasStartedDragging = true; + this._hasStartedDragging.set(true); this._ngZone.run(() => this._startDragSequence(event)); } } @@ -753,7 +760,7 @@ export class DragRef { this._rootElementTapHighlight; } - if (!this._hasStartedDragging) { + if (!this._hasStartedDragging()) { return; } @@ -908,7 +915,8 @@ export class DragRef { rootStyles.webkitTapHighlightColor = 'transparent'; } - this._hasStartedDragging = this._hasMoved = false; + this._hasMoved = false; + this._hasStartedDragging.set(this._hasMoved); // Avoid multiple subscriptions and memory leaks when multi touch // (isDragging check above isn't enough because of possible temporal and/or dimensional delays) diff --git a/src/cdk/listbox/listbox.spec.ts b/src/cdk/listbox/listbox.spec.ts index 4448e872fb62..e49c7951d14a 100644 --- a/src/cdk/listbox/listbox.spec.ts +++ b/src/cdk/listbox/listbox.spec.ts @@ -23,7 +23,6 @@ function setupComponent(component: Type, imports: any[] = []) declarations: [component], }).compileComponents(); const fixture = TestBed.createComponent(component); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const listboxDebugEl = fixture.debugElement.query(By.directive(CdkListbox)); @@ -71,7 +70,6 @@ describe('CdkOption and CdkListbox', () => { expect(optionEls[0].getAttribute('tabindex')).toBe('-1'); listbox.focus(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(listboxEl.getAttribute('tabindex')).toBe('-1'); @@ -90,7 +88,6 @@ describe('CdkOption and CdkListbox', () => { expect(optionEls[0].getAttribute('tabindex')).toBe('-1'); listbox.focus(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(listboxEl.getAttribute('tabindex')).toBe('-1'); @@ -106,7 +103,6 @@ describe('CdkOption and CdkListbox', () => { expect(optionEls[0].getAttribute('tabindex')).toBe('-1'); listbox.focus(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(optionEls[0].getAttribute('tabindex')).toBe('10'); @@ -119,7 +115,6 @@ describe('CdkOption and CdkListbox', () => { expect(options[0].getAttribute('tabindex')).toBe('-1'); listbox.focus(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(listboxEl.getAttribute('tabindex')).toBe('-1'); @@ -149,7 +144,6 @@ describe('CdkOption and CdkListbox', () => { it('should update when selection is changed programmatically', () => { const {fixture, listbox, options, optionEls} = setupComponent(ListboxWithOptions); options[1].select(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(listbox.value).toEqual(['orange']); @@ -161,7 +155,6 @@ describe('CdkOption and CdkListbox', () => { it('should update on option clicked', () => { const {fixture, listbox, options, optionEls} = setupComponent(ListboxWithOptions); optionEls[0].click(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(listbox.value).toEqual(['apple']); @@ -173,7 +166,6 @@ describe('CdkOption and CdkListbox', () => { it('should prevent the default click action', () => { const {fixture, optionEls} = setupComponent(ListboxWithOptions); const event = dispatchFakeEvent(optionEls[1], 'click'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(event.defaultPrevented).toBe(true); @@ -195,7 +187,6 @@ describe('CdkOption and CdkListbox', () => { undefined, {shift: true}, ); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(listbox.value).toEqual(['orange']); @@ -210,7 +201,6 @@ describe('CdkOption and CdkListbox', () => { undefined, {shift: true}, ); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(listbox.value).toEqual(['orange', 'banana', 'peach']); @@ -225,7 +215,6 @@ describe('CdkOption and CdkListbox', () => { undefined, {shift: true}, ); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(listbox.value).toEqual(['orange']); @@ -235,7 +224,6 @@ describe('CdkOption and CdkListbox', () => { const {fixture, listbox, listboxEl, options, optionEls} = setupComponent(ListboxWithOptions); listbox.focus(); dispatchKeyboardEvent(listboxEl, 'keydown', SPACE); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(listbox.value).toEqual(['apple']); @@ -247,14 +235,12 @@ describe('CdkOption and CdkListbox', () => { it('should deselect previously selected option in single-select listbox', () => { const {fixture, listbox, options, optionEls} = setupComponent(ListboxWithOptions); dispatchMouseEvent(optionEls[0], 'click'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(listbox.value).toEqual(['apple']); expect(options[0].isSelected()).toBeTrue(); dispatchMouseEvent(optionEls[2], 'click'); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(listbox.value).toEqual(['banana']); @@ -268,7 +254,6 @@ describe('CdkOption and CdkListbox', () => { fixture.detectChanges(); listbox.setAllSelected(true); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(listbox.value).toEqual(['apple', 'orange', 'banana', 'peach']); @@ -278,15 +263,14 @@ describe('CdkOption and CdkListbox', () => { const {testComponent, fixture, listbox, options, optionEls} = setupComponent(ListboxWithOptions); testComponent.isMultiselectable = true; - optionEls[0].click(); fixture.changeDetectorRef.markForCheck(); + optionEls[0].click(); fixture.detectChanges(); expect(listbox.value).toEqual(['apple']); expect(options[0].isSelected()).toBeTrue(); optionEls[2].click(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(listbox.value).toEqual(['apple', 'banana']); @@ -299,7 +283,6 @@ describe('CdkOption and CdkListbox', () => { fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); listbox.setAllSelected(true); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(listbox.value).toEqual(['apple', 'orange', 'banana', 'peach']); @@ -317,7 +300,6 @@ describe('CdkOption and CdkListbox', () => { fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); optionEls[0].click(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(listbox.value).toEqual(['apple']); @@ -337,7 +319,6 @@ describe('CdkOption and CdkListbox', () => { options[0].toggle(); listbox.toggle(options[1]); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(options[0].isSelected()).toBeTrue(); @@ -345,7 +326,6 @@ describe('CdkOption and CdkListbox', () => { options[0].toggle(); listbox.toggle(options[1]); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(options[0].isSelected()).toBeFalse(); @@ -360,7 +340,6 @@ describe('CdkOption and CdkListbox', () => { options[0].select(); listbox.select(options[1]); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(options[0].isSelected()).toBeTrue(); @@ -368,7 +347,6 @@ describe('CdkOption and CdkListbox', () => { options[0].deselect(); listbox.deselect(options[1]); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(options[0].isSelected()).toBeFalse(); @@ -409,7 +387,6 @@ describe('CdkOption and CdkListbox', () => { const {fixture, testComponent, listbox, listboxEl, options, optionEls} = setupComponent(ListboxWithOptions); testComponent.isListboxDisabled.set(true); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(listbox.disabled).toBeTrue(); @@ -438,7 +415,6 @@ describe('CdkOption and CdkListbox', () => { fixture.detectChanges(); optionEls[0].click(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(listbox.value).toEqual([]); @@ -448,11 +424,9 @@ describe('CdkOption and CdkListbox', () => { it('should not change selection on click in a disabled listbox', () => { const {fixture, testComponent, listbox, optionEls} = setupComponent(ListboxWithOptions); testComponent.isListboxDisabled.set(true); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); optionEls[0].click(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(listbox.value).toEqual([]); @@ -462,15 +436,12 @@ describe('CdkOption and CdkListbox', () => { it('should not change selection on keyboard activation in a disabled listbox', () => { const {fixture, testComponent, listbox, listboxEl} = setupComponent(ListboxWithOptions); listbox.focus(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); testComponent.isListboxDisabled.set(true); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchKeyboardEvent(listboxEl, 'keydown', SPACE); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(listbox.value).toEqual([]); @@ -480,7 +451,6 @@ describe('CdkOption and CdkListbox', () => { it('should not change selection on click of a disabled option', () => { const {fixture, testComponent, listbox, listboxEl} = setupComponent(ListboxWithOptions); listbox.focus(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); testComponent.isAppleDisabled = true; @@ -488,7 +458,6 @@ describe('CdkOption and CdkListbox', () => { fixture.detectChanges(); dispatchKeyboardEvent(listboxEl, 'keydown', SPACE); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(listbox.value).toEqual([]); @@ -499,11 +468,9 @@ describe('CdkOption and CdkListbox', () => { const {fixture, testComponent, listboxEl, options} = setupComponent(ListboxWithOptions); await fakeAsync(() => { testComponent.isListboxDisabled.set(true); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchKeyboardEvent(listboxEl, 'keydown', B); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); tick(200); @@ -517,14 +484,13 @@ describe('CdkOption and CdkListbox', () => { const {testComponent, fixture, listbox, listboxEl, options} = setupComponent(ListboxWithOptions); testComponent.isOrangeDisabled = true; - listbox.focus(); fixture.changeDetectorRef.markForCheck(); + listbox.focus(); fixture.detectChanges(); expect(options[0].isActive()).toBeTrue(); dispatchKeyboardEvent(listboxEl, 'keydown', DOWN_ARROW); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(options[2].isActive()).toBeTrue(); @@ -535,14 +501,13 @@ describe('CdkOption and CdkListbox', () => { setupComponent(ListboxWithOptions); testComponent.navigationSkipsDisabled = false; testComponent.isOrangeDisabled = true; - listbox.focus(); fixture.changeDetectorRef.markForCheck(); + listbox.focus(); fixture.detectChanges(); expect(options[0].isActive()).toBeTrue(); dispatchKeyboardEvent(listboxEl, 'keydown', DOWN_ARROW); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(options[1].isActive()).toBeTrue(); @@ -557,7 +522,6 @@ describe('CdkOption and CdkListbox', () => { listbox.focus(); dispatchKeyboardEvent(listboxEl, 'keydown', A, undefined, {control: true}); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(listbox.value).toEqual(['apple', 'banana', 'peach']); @@ -571,13 +535,11 @@ describe('CdkOption and CdkListbox', () => { [CommonModule], ); listbox.value = [{name: 'Banana'}]; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(options[2].isSelected()).toBeTrue(); listbox.value = [{name: 'Orange', extraStuff: true} as any]; - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(options[1].isSelected()).toBeTrue(); @@ -589,13 +551,11 @@ describe('CdkOption and CdkListbox', () => { const {fixture, listbox, listboxEl, options} = setupComponent(ListboxWithOptions); listbox.focus(); dispatchKeyboardEvent(listboxEl, 'keydown', DOWN_ARROW); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(options[1].isActive()).toBeTrue(); dispatchKeyboardEvent(listboxEl, 'keydown', UP_ARROW); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(options[0].isActive()).toBeTrue(); @@ -605,14 +565,12 @@ describe('CdkOption and CdkListbox', () => { const {fixture, listbox, listboxEl, options, optionEls} = setupComponent(ListboxWithOptions); listbox.focus(); dispatchKeyboardEvent(listboxEl, 'keydown', END); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(options[options.length - 1].isActive()).toBeTrue(); expect(optionEls[options.length - 1].classList).toContain('cdk-option-active'); dispatchKeyboardEvent(listboxEl, 'keydown', HOME); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(options[0].isActive()).toBeTrue(); @@ -623,11 +581,9 @@ describe('CdkOption and CdkListbox', () => { const {fixture, listbox, listboxEl, options} = setupComponent(ListboxWithOptions); await fakeAsync(() => { listbox.focus(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchKeyboardEvent(listboxEl, 'keydown', B); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); tick(200); @@ -639,11 +595,9 @@ describe('CdkOption and CdkListbox', () => { const {fixture, listbox, listboxEl, options} = setupComponent(ListboxWithCustomTypeahead); await fakeAsync(() => { listbox.focus(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchKeyboardEvent(listboxEl, 'keydown', B); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); tick(200); @@ -654,11 +608,9 @@ describe('CdkOption and CdkListbox', () => { it('should focus and toggle the next item when pressing SHIFT + DOWN_ARROW', () => { const {fixture, listbox, listboxEl, options} = setupComponent(ListboxWithOptions); listbox.focus(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchKeyboardEvent(listboxEl, 'keydown', DOWN_ARROW, undefined, {shift: true}); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(listbox.value).toEqual(['orange']); @@ -676,13 +628,11 @@ describe('CdkOption and CdkListbox', () => { listbox.focus(); dispatchKeyboardEvent(listboxEl, 'keydown', RIGHT_ARROW); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(options[1].isActive()).toBeTrue(); dispatchKeyboardEvent(listboxEl, 'keydown', LEFT_ARROW); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(options[0].isActive()).toBeTrue(); @@ -696,13 +646,11 @@ describe('CdkOption and CdkListbox', () => { listbox.focus(); dispatchKeyboardEvent(listboxEl, 'keydown', A, undefined, {control: true}); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(listbox.value).toEqual(['apple', 'orange', 'banana', 'peach']); dispatchKeyboardEvent(listboxEl, 'keydown', A, undefined, {control: true}); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(listbox.value).toEqual([]); @@ -717,7 +665,6 @@ describe('CdkOption and CdkListbox', () => { listbox.focus(); dispatchKeyboardEvent(listboxEl, 'keydown', DOWN_ARROW); dispatchKeyboardEvent(listboxEl, 'keydown', SPACE, undefined, {shift: true}); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(listbox.value).toEqual(['orange']); @@ -725,7 +672,6 @@ describe('CdkOption and CdkListbox', () => { dispatchKeyboardEvent(listboxEl, 'keydown', DOWN_ARROW); dispatchKeyboardEvent(listboxEl, 'keydown', DOWN_ARROW); dispatchKeyboardEvent(listboxEl, 'keydown', SPACE, undefined, {shift: true}); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(listbox.value).toEqual(['orange', 'banana', 'peach']); @@ -739,8 +685,8 @@ describe('CdkOption and CdkListbox', () => { it('should select and deselect range with CONTROL + SHIFT + HOME', () => { const {testComponent, fixture, listbox, listboxEl} = setupComponent(ListboxWithOptions); testComponent.isMultiselectable = true; - listbox.focus(); fixture.changeDetectorRef.markForCheck(); + listbox.focus(); fixture.detectChanges(); dispatchKeyboardEvent(listboxEl, 'keydown', DOWN_ARROW); @@ -759,8 +705,8 @@ describe('CdkOption and CdkListbox', () => { it('should select and deselect range with CONTROL + SHIFT + END', () => { const {testComponent, fixture, listbox, listboxEl} = setupComponent(ListboxWithOptions); testComponent.isMultiselectable = true; - listbox.focus(); fixture.changeDetectorRef.markForCheck(); + listbox.focus(); fixture.detectChanges(); dispatchKeyboardEvent(listboxEl, 'keydown', DOWN_ARROW); @@ -779,13 +725,11 @@ describe('CdkOption and CdkListbox', () => { const {fixture, listbox, listboxEl, options} = setupComponent(ListboxWithOptions); listbox.focus(); dispatchKeyboardEvent(listboxEl, 'keydown', END); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(options[options.length - 1].isActive()).toBeTrue(); dispatchKeyboardEvent(listboxEl, 'keydown', DOWN_ARROW); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(options[0].isActive()).toBeTrue(); @@ -800,13 +744,11 @@ describe('CdkOption and CdkListbox', () => { listbox.focus(); dispatchKeyboardEvent(listboxEl, 'keydown', END); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(options[options.length - 1].isActive()).toBeTrue(); dispatchKeyboardEvent(listboxEl, 'keydown', DOWN_ARROW); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(options[options.length - 1].isActive()).toBeTrue(); @@ -819,13 +761,11 @@ describe('CdkOption and CdkListbox', () => { fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); listbox.focus(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(options[3].isActive()).toBeTrue(); dispatchKeyboardEvent(listboxEl, 'keydown', UP_ARROW); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(options[2].isActive()).toBeTrue(); @@ -835,12 +775,10 @@ describe('CdkOption and CdkListbox', () => { const {testComponent, fixture, listbox, listboxEl, options} = setupComponent(ListboxWithOptions); listbox.focus(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(options[0].isActive()).toBeTrue(); dispatchKeyboardEvent(listboxEl, 'keydown', DOWN_ARROW); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(options[1].isActive()).toBeTrue(); @@ -855,14 +793,12 @@ describe('CdkOption and CdkListbox', () => { it('should shift focus on keyboard navigation', () => { const {fixture, listbox, listboxEl, optionEls} = setupComponent(ListboxWithOptions); listbox.focus(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(document.activeElement).toBe(optionEls[0]); expect(listboxEl.hasAttribute('aria-activedescendant')).toBeFalse(); dispatchKeyboardEvent(listboxEl, 'keydown', DOWN_ARROW); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(document.activeElement).toBe(optionEls[1]); @@ -872,7 +808,6 @@ describe('CdkOption and CdkListbox', () => { it('should focus first option on listbox focus', () => { const {fixture, listbox, optionEls} = setupComponent(ListboxWithOptions); listbox.focus(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(document.activeElement).toBe(optionEls[0]); @@ -882,7 +817,6 @@ describe('CdkOption and CdkListbox', () => { const {fixture, listbox, listboxEl} = setupComponent(ListboxWithNoOptions); listbox.focus(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(document.activeElement).toBe(listboxEl); @@ -898,14 +832,12 @@ describe('CdkOption and CdkListbox', () => { fixture.detectChanges(); listbox.focus(); dispatchKeyboardEvent(listboxEl, 'keydown', DOWN_ARROW); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(listboxEl.getAttribute('aria-activedescendant')).toBe(optionEls[0].id); expect(document.activeElement).toBe(listboxEl); dispatchKeyboardEvent(listboxEl, 'keydown', DOWN_ARROW); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(listboxEl.getAttribute('aria-activedescendant')).toBe(optionEls[1].id); @@ -918,7 +850,6 @@ describe('CdkOption and CdkListbox', () => { fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); listbox.focus(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); for (let option of options) { @@ -933,7 +864,6 @@ describe('CdkOption and CdkListbox', () => { fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); optionEls[2].focus(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(document.activeElement).toBe(listboxEl); @@ -947,7 +877,6 @@ describe('CdkOption and CdkListbox', () => { ReactiveFormsModule, ]); testComponent.formControl.disable(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(listbox.disabled).toBeTrue(); @@ -958,7 +887,6 @@ describe('CdkOption and CdkListbox', () => { ReactiveFormsModule, ]); testComponent.formControl.setValue(['banana']); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(options[2].isSelected()).toBeTrue(); @@ -970,13 +898,11 @@ describe('CdkOption and CdkListbox', () => { ]); const spy = jasmine.createSpy(); const subscription = testComponent.formControl.valueChanges.subscribe(spy); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(spy).not.toHaveBeenCalled(); optionEls[1].click(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(spy).toHaveBeenCalledWith(['orange']); @@ -991,7 +917,6 @@ describe('CdkOption and CdkListbox', () => { fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); testComponent.formControl.setValue(['orange', 'banana']); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(options[1].isSelected()).toBeTrue(); @@ -1007,18 +932,15 @@ describe('CdkOption and CdkListbox', () => { fixture.detectChanges(); const spy = jasmine.createSpy(); const subscription = testComponent.formControl.valueChanges.subscribe(spy); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(spy).not.toHaveBeenCalled(); optionEls[1].click(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(spy).toHaveBeenCalledWith(['orange']); optionEls[2].click(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(spy).toHaveBeenCalledWith(['orange', 'banana']); subscription.unsubscribe(); @@ -1031,7 +953,6 @@ describe('CdkOption and CdkListbox', () => { expect(() => { testComponent.formControl.setValue(['orange', 'banana']); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); }).toThrowError('Listbox cannot have more than one selected value in multi-selection mode.'); }); @@ -1046,7 +967,6 @@ describe('CdkOption and CdkListbox', () => { expect(() => { testComponent.formControl.setValue(['orange', 'dragonfruit', 'mango']); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); }).toThrowError('Listbox has selected values that do not match any of its options.'); }); diff --git a/src/cdk/listbox/listbox.ts b/src/cdk/listbox/listbox.ts index 3b7b81076aef..213d1f31adef 100644 --- a/src/cdk/listbox/listbox.ts +++ b/src/cdk/listbox/listbox.ts @@ -6,6 +6,23 @@ * found in the LICENSE file at https://angular.io/license */ +import {ActiveDescendantKeyManager, Highlightable, ListKeyManagerOption} from '@angular/cdk/a11y'; +import {Directionality} from '@angular/cdk/bidi'; +import {coerceArray} from '@angular/cdk/coercion'; +import {SelectionModel} from '@angular/cdk/collections'; +import { + A, + DOWN_ARROW, + END, + ENTER, + hasModifierKey, + HOME, + LEFT_ARROW, + RIGHT_ARROW, + SPACE, + UP_ARROW, +} from '@angular/cdk/keycodes'; +import {Platform} from '@angular/cdk/platform'; import { AfterContentInit, booleanAttribute, @@ -21,26 +38,9 @@ import { Output, QueryList, } from '@angular/core'; -import {ActiveDescendantKeyManager, Highlightable, ListKeyManagerOption} from '@angular/cdk/a11y'; -import { - A, - DOWN_ARROW, - END, - ENTER, - hasModifierKey, - HOME, - LEFT_ARROW, - RIGHT_ARROW, - SPACE, - UP_ARROW, -} from '@angular/cdk/keycodes'; -import {coerceArray} from '@angular/cdk/coercion'; -import {SelectionModel} from '@angular/cdk/collections'; +import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms'; import {defer, fromEvent, merge, Observable, Subject} from 'rxjs'; import {filter, map, startWith, switchMap, takeUntil} from 'rxjs/operators'; -import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms'; -import {Directionality} from '@angular/cdk/bidi'; -import {Platform} from '@angular/cdk/platform'; /** The next id to use for creating unique DOM IDs. */ let nextId = 0; @@ -585,6 +585,7 @@ export class CdkListbox implements AfterContentInit, OnDestroy, Con */ setDisabledState(isDisabled: boolean): void { this.disabled = isDisabled; + this.changeDetectorRef.markForCheck(); } /** Focus the listbox's host element. */ diff --git a/src/cdk/observers/observe-content.spec.ts b/src/cdk/observers/observe-content.spec.ts index f893280ec803..05d3c483f6c5 100644 --- a/src/cdk/observers/observe-content.spec.ts +++ b/src/cdk/observers/observe-content.spec.ts @@ -21,7 +21,6 @@ describe('Observe content directive', () => { it('should trigger the callback when the content of the element changes', done => { let fixture = TestBed.createComponent(ComponentWithTextContent); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); // If the hint label is empty, expect no label. @@ -39,7 +38,6 @@ describe('Observe content directive', () => { it('should trigger the callback when the content of the children changes', done => { let fixture = TestBed.createComponent(ComponentWithChildTextContent); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); // If the hint label is empty, expect no label. @@ -70,7 +68,6 @@ describe('Observe content directive', () => { }); const fixture = TestBed.createComponent(ComponentWithTextContent); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(observeSpy).toHaveBeenCalledTimes(1); @@ -114,7 +111,6 @@ describe('Observe content directive', () => { TestBed.compileComponents(); fixture = TestBed.createComponent(ComponentWithDebouncedListener); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); })); @@ -166,7 +162,6 @@ describe('ContentObserver injectable', () => { it('should trigger the callback when the content of the element changes', fakeAsync(() => { const spy = jasmine.createSpy('content observer'); const fixture = TestBed.createComponent(UnobservedComponentWithTextContent); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); contentObserver.observe(fixture.componentInstance.contentEl).subscribe(() => spy()); @@ -184,7 +179,6 @@ describe('ContentObserver injectable', () => { const spy = jasmine.createSpy('content observer'); spyOn(mof, 'create').and.callThrough(); const fixture = TestBed.createComponent(UnobservedComponentWithTextContent); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const sub1 = contentObserver diff --git a/src/cdk/overlay/overlay-directives.spec.ts b/src/cdk/overlay/overlay-directives.spec.ts index dd36f38e5fcf..e562e01c3fdb 100644 --- a/src/cdk/overlay/overlay-directives.spec.ts +++ b/src/cdk/overlay/overlay-directives.spec.ts @@ -54,7 +54,6 @@ describe('Overlay directives', () => { beforeEach(() => { fixture = TestBed.createComponent(ConnectedOverlayDirectiveTest); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); }); @@ -161,7 +160,6 @@ describe('Overlay directives', () => { fixture.detectChanges(); const event = dispatchKeyboardEvent(document.body, 'keydown', ESCAPE); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(overlayContainerElement.textContent!.trim()) @@ -177,7 +175,6 @@ describe('Overlay directives', () => { const event = createKeyboardEvent('keydown', ESCAPE, undefined, {alt: true}); dispatchEvent(document.body, event); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(overlayContainerElement.textContent!.trim()).toBeTruthy(); @@ -192,7 +189,6 @@ describe('Overlay directives', () => { const backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement; backdrop.click(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(overlayContainerElement.textContent!.trim()).toBeTruthy(); @@ -205,7 +201,6 @@ describe('Overlay directives', () => { fixture.detectChanges(); const event = dispatchKeyboardEvent(document.body, 'keydown', ESCAPE); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(overlayContainerElement.textContent!.trim()).toBeTruthy(); @@ -216,7 +211,6 @@ describe('Overlay directives', () => { fixture.destroy(); const propOrderFixture = TestBed.createComponent(ConnectedOverlayPropertyInitOrder); - propOrderFixture.changeDetectorRef.markForCheck(); propOrderFixture.detectChanges(); const overlayDirective = propOrderFixture.componentInstance.connectedOverlayDirective; @@ -224,7 +218,6 @@ describe('Overlay directives', () => { expect(() => { overlayDirective.open = true; overlayDirective.origin = propOrderFixture.componentInstance.trigger; - propOrderFixture.changeDetectorRef.markForCheck(); propOrderFixture.detectChanges(); }).not.toThrow(); })); @@ -657,7 +650,6 @@ describe('Overlay directives', () => { '.cdk-overlay-backdrop', ) as HTMLElement; backdrop.click(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(fixture.componentInstance.backdropClickHandler).toHaveBeenCalledWith( @@ -718,7 +710,6 @@ describe('Overlay directives', () => { fixture.detectChanges(); const event = dispatchKeyboardEvent(document.body, 'keydown', A); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(fixture.componentInstance.keydownHandler).toHaveBeenCalledWith(event); @@ -734,7 +725,6 @@ describe('Overlay directives', () => { expect(fixture.componentInstance.detachHandler).not.toHaveBeenCalled(); scrolledSubject.next(); - fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(fixture.componentInstance.detachHandler).toHaveBeenCalled();