diff --git a/src/cdk/a11y/focus-monitor/focus-monitor.spec.ts b/src/cdk/a11y/focus-monitor/focus-monitor.spec.ts index d0a0f05aaac8..3e03eba9de0b 100644 --- a/src/cdk/a11y/focus-monitor/focus-monitor.spec.ts +++ b/src/cdk/a11y/focus-monitor/focus-monitor.spec.ts @@ -1,7 +1,7 @@ import {TAB} from '@angular/cdk/keycodes'; import {Platform} from '@angular/cdk/platform'; import {DOCUMENT} from '@angular/common'; -import {Component, ViewChild, provideZoneChangeDetection} from '@angular/core'; +import {Component, ViewChild} from '@angular/core'; import {ComponentFixture, TestBed, fakeAsync, flush, inject, tick} from '@angular/core/testing'; import {By} from '@angular/platform-browser'; import { @@ -34,7 +34,6 @@ describe('FocusMonitor', () => { TestBed.configureTestingModule({ imports: [A11yModule, PlainButton], providers: [ - provideZoneChangeDetection(), { provide: DOCUMENT, useFactory: () => { @@ -900,25 +899,6 @@ describe('FocusMonitor input label detection', () => { })); }); -describe('cdkMonitorFocus with change detection counter', () => { - beforeEach(() => { - TestBed.configureTestingModule({ - imports: [A11yModule, ButtonWithCDCounter], - providers: [{provide: Platform, useValue: {isBrowser: true}}], - }).compileComponents(); - }); - - it('should detect changes caused by focus change', async () => { - const fixture = TestBed.createComponent(ButtonWithCDCounter); - fixture.autoDetectChanges(); - const buttonElement = fixture.nativeElement.querySelector('button'); - buttonElement.focus(); - await fixture.whenStable(); - const focusChangeCounter = fixture.nativeElement.querySelector('.focus-change-counter'); - expect(focusChangeCounter.innerText).toBe('1'); - }); -}); - @Component({ template: `
`, standalone: true, @@ -981,15 +961,3 @@ class CheckboxWithLabel {} class ExportedFocusMonitor { @ViewChild('exportedDir') exportedDirRef: CdkMonitorFocus; } - -@Component({ - template: ` - -
{{focusChangeCount}}
- `, - standalone: true, - imports: [A11yModule], -}) -class ButtonWithCDCounter { - focusChangeCount = 0; -} diff --git a/src/cdk/a11y/focus-monitor/focus-monitor.zone.spec.ts b/src/cdk/a11y/focus-monitor/focus-monitor.zone.spec.ts new file mode 100644 index 000000000000..7b8c2638ca49 --- /dev/null +++ b/src/cdk/a11y/focus-monitor/focus-monitor.zone.spec.ts @@ -0,0 +1,47 @@ +import {Platform} from '@angular/cdk/platform'; +import {patchElementFocus} from '@angular/cdk/testing/private'; +import {Component, NgZone, provideZoneChangeDetection} from '@angular/core'; +import {ComponentFixture, TestBed, fakeAsync, inject, tick} from '@angular/core/testing'; +import {A11yModule} from '../a11y-module'; +import {FocusMonitor} from './focus-monitor'; + +describe('FocusMonitor observable stream Zone.js integration', () => { + let fixture: ComponentFixture; + let buttonElement: HTMLElement; + let focusMonitor: FocusMonitor; + let fakePlatform: Platform; + + beforeEach(() => { + fakePlatform = {isBrowser: true} as Platform; + TestBed.configureTestingModule({ + imports: [A11yModule, PlainButton], + providers: [{provide: Platform, useValue: fakePlatform}, provideZoneChangeDetection()], + }).compileComponents(); + }); + + beforeEach(inject([FocusMonitor], (fm: FocusMonitor) => { + fixture = TestBed.createComponent(PlainButton); + focusMonitor = fm; + fixture.detectChanges(); + buttonElement = fixture.debugElement.nativeElement.querySelector('button'); + patchElementFocus(buttonElement); + })); + + it('should emit inside the NgZone', fakeAsync(() => { + const spy = jasmine.createSpy('zone spy'); + focusMonitor.monitor(buttonElement).subscribe(() => spy(NgZone.isInAngularZone())); + expect(spy).not.toHaveBeenCalled(); + + buttonElement.focus(); + fixture.detectChanges(); + tick(); + expect(spy).toHaveBeenCalledWith(true); + })); +}); + +@Component({ + template: `
`, + standalone: true, + imports: [A11yModule], +}) +class PlainButton {} diff --git a/src/cdk/drag-drop/directives/drag.spec.ts b/src/cdk/drag-drop/directives/drag.spec.ts index c2106f234287..9d7585905c85 100644 --- a/src/cdk/drag-drop/directives/drag.spec.ts +++ b/src/cdk/drag-drop/directives/drag.spec.ts @@ -86,7 +86,7 @@ describe('CdkDrag', () => { const dragElement = fixture.componentInstance.dragElement.nativeElement; expect(dragElement.style.transform).toBeFalsy(); - dragElementViaMouse(dragElement, 50, 100); + dragElementViaMouse(fixture, dragElement, 50, 100); expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)'); })); @@ -100,7 +100,7 @@ describe('CdkDrag', () => { scrollTo(0, 500); expect(dragElement.style.transform).toBeFalsy(); - dragElementViaMouse(dragElement, 50, 100); + dragElementViaMouse(fixture, dragElement, 50, 100); expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)'); cleanup(); })); @@ -113,10 +113,10 @@ describe('CdkDrag', () => { expect(dragElement.style.transform).toBeFalsy(); - dragElementViaMouse(dragElement, 50, 100); + dragElementViaMouse(fixture, dragElement, 50, 100); expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)'); - dragElementViaMouse(dragElement, 100, 200); + dragElementViaMouse(fixture, dragElement, 100, 200); expect(dragElement.style.transform).toBe('translate3d(150px, 300px, 0px)'); })); @@ -131,10 +131,10 @@ describe('CdkDrag', () => { scrollTo(0, 500); expect(dragElement.style.transform).toBeFalsy(); - dragElementViaMouse(dragElement, 50, 100); + dragElementViaMouse(fixture, dragElement, 50, 100); expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)'); - dragElementViaMouse(dragElement, 100, 200); + dragElementViaMouse(fixture, dragElement, 100, 200); expect(dragElement.style.transform).toBe('translate3d(150px, 300px, 0px)'); cleanup(); @@ -171,7 +171,7 @@ describe('CdkDrag', () => { const dragElement = fixture.componentInstance.dragElement.nativeElement; expect(dragElement.style.transform).toBeFalsy(); - dragElementViaMouse(dragElement, 2, 2); + dragElementViaMouse(fixture, dragElement, 2, 2); expect(dragElement.style.transform).toBeFalsy(); })); @@ -196,7 +196,7 @@ describe('CdkDrag', () => { fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); - dragElementViaMouse(dragElement, 50, 50); + dragElementViaMouse(fixture, dragElement, 50, 50); dispatchMouseEvent(document, 'mousemove', 100, 100); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -211,7 +211,7 @@ describe('CdkDrag', () => { const dragElement = fixture.componentInstance.dragElement.nativeElement; dragElement.style.transform = 'translateX(-50%)'; - dragElementViaMouse(dragElement, 50, 100); + dragElementViaMouse(fixture, dragElement, 50, 100); expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px) translateX(-50%)'); })); @@ -223,10 +223,10 @@ describe('CdkDrag', () => { dragElement.style.transform = 'translateY(-50%)'; - dragElementViaMouse(dragElement, 50, 100); + dragElementViaMouse(fixture, dragElement, 50, 100); expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px) translateY(-50%)'); - dragElementViaMouse(dragElement, 100, 200); + dragElementViaMouse(fixture, dragElement, 100, 200); expect(dragElement.style.transform).toBe('translate3d(150px, 300px, 0px) translateY(-50%)'); })); @@ -461,7 +461,7 @@ describe('CdkDrag', () => { const dragElement = fixture.componentInstance.dragElement.nativeElement; dragElement.style.transform = 'none'; - dragElementViaMouse(dragElement, 50, 100); + dragElementViaMouse(fixture, dragElement, 50, 100); expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)'); })); }); @@ -471,7 +471,7 @@ describe('CdkDrag', () => { fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); - startDraggingViaMouse(fixture.componentInstance.dragElement.nativeElement); + startDraggingViaMouse(fixture, fixture.componentInstance.dragElement.nativeElement); expect(fixture.componentInstance.startedSpy).toHaveBeenCalled(); @@ -490,7 +490,7 @@ describe('CdkDrag', () => { fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); - dragElementViaMouse(fixture.componentInstance.dragElement.nativeElement, 5, 10); + dragElementViaMouse(fixture, fixture.componentInstance.dragElement.nativeElement, 5, 10); expect(fixture.componentInstance.endedSpy).toHaveBeenCalled(); @@ -511,7 +511,7 @@ describe('CdkDrag', () => { fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); - dragElementViaMouse(fixture.componentInstance.dragElement.nativeElement, 25, 30); + dragElementViaMouse(fixture, fixture.componentInstance.dragElement.nativeElement, 25, 30); let event = fixture.componentInstance.endedSpy.calls.mostRecent().args[0]; expect(event).toEqual({ @@ -521,7 +521,7 @@ describe('CdkDrag', () => { event: jasmine.anything(), }); - dragElementViaMouse(fixture.componentInstance.dragElement.nativeElement, 40, 50); + dragElementViaMouse(fixture, fixture.componentInstance.dragElement.nativeElement, 40, 50); event = fixture.componentInstance.endedSpy.calls.mostRecent().args[0]; expect(event).toEqual({ @@ -540,10 +540,10 @@ describe('CdkDrag', () => { const spy = jasmine.createSpy('move spy'); const subscription = fixture.componentInstance.dragInstance.moved.subscribe(spy); - dragElementViaMouse(fixture.componentInstance.dragElement.nativeElement, 5, 10); + dragElementViaMouse(fixture, fixture.componentInstance.dragElement.nativeElement, 5, 10); expect(spy).toHaveBeenCalledTimes(1); - dragElementViaMouse(fixture.componentInstance.dragElement.nativeElement, 10, 20); + dragElementViaMouse(fixture, fixture.componentInstance.dragElement.nativeElement, 10, 20); expect(spy).toHaveBeenCalledTimes(2); subscription.unsubscribe(); @@ -557,7 +557,7 @@ describe('CdkDrag', () => { const moveSpy = jasmine.createSpy('move spy'); const subscription = fixture.componentInstance.dragInstance.moved.subscribe(moveSpy); - dragElementViaMouse(fixture.componentInstance.dragElement.nativeElement, 2, 2); + dragElementViaMouse(fixture, fixture.componentInstance.dragElement.nativeElement, 2, 2); expect(fixture.componentInstance.startedSpy).not.toHaveBeenCalled(); expect(fixture.componentInstance.releasedSpy).not.toHaveBeenCalled(); @@ -566,17 +566,6 @@ describe('CdkDrag', () => { subscription.unsubscribe(); }); - it('should detect changes cased by `cdkDragMoved`', async () => { - const fixture = createComponent(StandaloneDraggable); - fixture.autoDetectChanges(); - - dragElementViaMouse(fixture.componentInstance.dragElement.nativeElement, 10, 20); - await fixture.whenStable(); - - const movedCounter = fixture.nativeElement.querySelector('.moved-counter'); - expect(movedCounter.innerText).toBe('1'); - }); - it('should complete the `moved` stream on destroy', () => { const fixture = createComponent(StandaloneDraggable); fixture.changeDetectorRef.markForCheck(); @@ -600,10 +589,10 @@ describe('CdkDrag', () => { expect(dragElement.style.transform).toBeFalsy(); - dragElementViaMouse(dragElement, 50, 100); + dragElementViaMouse(fixture, dragElement, 50, 100); expect(dragElement.style.transform).toBe('translate3d(50px, 0px, 0px)'); - dragElementViaMouse(dragElement, 100, 200); + dragElementViaMouse(fixture, dragElement, 100, 200); expect(dragElement.style.transform).toBe('translate3d(150px, 0px, 0px)'); })); @@ -627,10 +616,10 @@ describe('CdkDrag', () => { expect(dragElement.style.transform).toBeFalsy(); - dragElementViaMouse(dragElement, 50, 100); + dragElementViaMouse(fixture, dragElement, 50, 100); expect(dragElement.style.transform).toBe('translate3d(50px, 0px, 0px)'); - dragElementViaMouse(dragElement, 100, 200); + dragElementViaMouse(fixture, dragElement, 100, 200); expect(dragElement.style.transform).toBe('translate3d(150px, 0px, 0px)'); })); @@ -644,10 +633,10 @@ describe('CdkDrag', () => { expect(dragElement.style.transform).toBeFalsy(); - dragElementViaMouse(dragElement, 50, 100); + dragElementViaMouse(fixture, dragElement, 50, 100); expect(dragElement.style.transform).toBe('translate3d(0px, 100px, 0px)'); - dragElementViaMouse(dragElement, 100, 200); + dragElementViaMouse(fixture, dragElement, 100, 200); expect(dragElement.style.transform).toBe('translate3d(0px, 300px, 0px)'); })); @@ -672,10 +661,10 @@ describe('CdkDrag', () => { expect(dragElement.style.transform).toBeFalsy(); - dragElementViaMouse(dragElement, 50, 100); + dragElementViaMouse(fixture, dragElement, 50, 100); expect(dragElement.style.transform).toBe('translate3d(0px, 100px, 0px)'); - dragElementViaMouse(dragElement, 100, 200); + dragElementViaMouse(fixture, dragElement, 100, 200); expect(dragElement.style.transform).toBe('translate3d(0px, 300px, 0px)'); })); @@ -688,9 +677,7 @@ describe('CdkDrag', () => { expect(element.classList).not.toContain('cdk-drag-dragging'); - startDraggingViaMouse(element); - fixture.changeDetectorRef.markForCheck(); - fixture.detectChanges(); + startDraggingViaMouse(fixture, element); expect(element.classList).toContain('cdk-drag-dragging'); @@ -710,9 +697,7 @@ describe('CdkDrag', () => { expect(element.classList).not.toContain('cdk-drag-dragging'); - startDraggingViaMouse(element); - fixture.changeDetectorRef.markForCheck(); - fixture.detectChanges(); + startDraggingViaMouse(fixture, element); expect(element.classList).toContain('cdk-drag-dragging'); @@ -732,7 +717,7 @@ describe('CdkDrag', () => { expect(element.classList).not.toContain('cdk-drag-dragging'); - startDraggingViaMouse(element); + startDraggingViaMouse(fixture, element); expect(element.classList).not.toContain('cdk-drag-dragging'); })); @@ -749,7 +734,7 @@ describe('CdkDrag', () => { expect(dragRoot.style.transform).toBeFalsy(); expect(dragElement.style.transform).toBeFalsy(); - dragElementViaMouse(dragRoot, 50, 100); + dragElementViaMouse(fixture, dragRoot, 50, 100); expect(dragRoot.style.transform).toBe('translate3d(50px, 100px, 0px)'); expect(dragElement.style.transform).toBeFalsy(); @@ -767,13 +752,13 @@ describe('CdkDrag', () => { expect(dragElement.style.transform).toBeFalsy(); // Try dragging the root. This should be possible since the drag element is the handle. - dragElementViaMouse(dragRoot, 50, 100); + dragElementViaMouse(fixture, dragRoot, 50, 100); expect(dragRoot.style.transform).toBeFalsy(); expect(dragElement.style.transform).toBeFalsy(); // Drag via the drag element which acts as the handle. - dragElementViaMouse(dragElement, 50, 100); + dragElementViaMouse(fixture, dragElement, 50, 100); expect(dragRoot.style.transform).toBe('translate3d(50px, 100px, 0px)'); expect(dragElement.style.transform).toBeFalsy(); @@ -788,7 +773,7 @@ describe('CdkDrag', () => { expect(dragRoot.style.transform).toBeFalsy(); - dragElementViaMouse(dragRoot, 50, 100); + dragElementViaMouse(fixture, dragRoot, 50, 100); expect(dragRoot.style.transform).toBe('translate3d(50px, 100px, 0px)'); })); @@ -801,7 +786,7 @@ describe('CdkDrag', () => { const alternateRoot = fixture.componentInstance.dragRoot.nativeElement; dragElement.style.transform = 'translateX(-50%)'; - dragElementViaMouse(dragElement, 50, 100); + dragElementViaMouse(fixture, dragElement, 50, 100); expect(dragElement.style.transform).toContain('translateX(-50%)'); alternateRoot.style.transform = 'scale(2)'; @@ -809,7 +794,7 @@ describe('CdkDrag', () => { fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); - dragElementViaMouse(alternateRoot, 50, 100); + dragElementViaMouse(fixture, alternateRoot, 50, 100); expect(alternateRoot.style.transform).not.toContain('translateX(-50%)'); expect(alternateRoot.style.transform).toContain('scale(2)'); @@ -831,7 +816,7 @@ describe('CdkDrag', () => { expect(dragRoot.style.transform).toBeFalsy(); expect(dragElement.style.transform).toBeFalsy(); - dragElementViaMouse(dragRoot, 50, 100); + dragElementViaMouse(fixture, dragRoot, 50, 100); expect(dragRoot.style.transform).toBe('translate3d(50px, 100px, 0px)'); expect(dragElement.style.transform).toBeFalsy(); @@ -851,7 +836,7 @@ describe('CdkDrag', () => { expect(dragElement.classList).toContain('cdk-drag-disabled'); expect(dragElement.style.transform).toBeFalsy(); - dragElementViaMouse(dragElement, 50, 100); + dragElementViaMouse(fixture, dragElement, 50, 100); expect(dragElement.style.transform).toBeFalsy(); })); @@ -890,7 +875,7 @@ describe('CdkDrag', () => { expect(styles.touchAction || (styles as any).webkitUserDrag).toBeFalsy(); - startDraggingViaMouse(dragElement); + startDraggingViaMouse(fixture, dragElement); dispatchMouseEvent(document, 'mousemove', 50, 100); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -905,7 +890,7 @@ describe('CdkDrag', () => { const dragElement = fixture.componentInstance.dragElement.nativeElement; const styles = dragElement.style; - startDraggingViaMouse(dragElement); + startDraggingViaMouse(fixture, dragElement); dispatchMouseEvent(document, 'mousemove', 50, 100); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -1006,7 +991,7 @@ describe('CdkDrag', () => { const dragElement = fixture.componentInstance.dragElement.nativeElement; expect(dragElement.style.transform).toBeFalsy(); - dragElementViaMouse(dragElement, 50, 100); + dragElementViaMouse(fixture, dragElement, 50, 100); expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)'); fixture.componentInstance.dragInstance.reset(); @@ -1021,7 +1006,7 @@ describe('CdkDrag', () => { dragElement.style.transform = 'scale(2)'; - dragElementViaMouse(dragElement, 50, 100); + dragElementViaMouse(fixture, dragElement, 50, 100); expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px) scale(2)'); fixture.componentInstance.dragInstance.reset(); @@ -1035,11 +1020,11 @@ describe('CdkDrag', () => { const dragElement = fixture.componentInstance.dragElement.nativeElement; expect(dragElement.style.transform).toBeFalsy(); - dragElementViaMouse(dragElement, 50, 100); + dragElementViaMouse(fixture, dragElement, 50, 100); expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)'); fixture.componentInstance.dragInstance.reset(); - dragElementViaMouse(dragElement, 25, 50); + dragElementViaMouse(fixture, dragElement, 25, 50); expect(dragElement.style.transform).toBe('translate3d(25px, 50px, 0px)'); })); @@ -1060,7 +1045,7 @@ describe('CdkDrag', () => { tick(); // Immediately dispatch a mouse sequence to simulate a fake event. - startDraggingViaMouse(dragElement); + startDraggingViaMouse(fixture, dragElement); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); dispatchMouseEvent(dragElement, 'mouseup'); @@ -1079,7 +1064,7 @@ describe('CdkDrag', () => { const dragElement = fixture.componentInstance.dragElement.nativeElement; expect(dragElement.style.transform).toBeFalsy(); - dragElementViaMouse(dragElement, 13.37, 37); + dragElementViaMouse(fixture, dragElement, 13.37, 37); expect(dragElement.style.transform).toBe('translate3d(13px, 37px, 0px)'); })); @@ -1091,7 +1076,7 @@ describe('CdkDrag', () => { const dragElement = fixture.componentInstance.dragElement.nativeElement; expect(dragElement.style.transform).toBeFalsy(); - dragElementViaMouse(dragElement, 300, 300); + dragElementViaMouse(fixture, dragElement, 300, 300); expect(dragElement.style.transform).toBe('translate3d(100px, 100px, 0px)'); })); @@ -1115,7 +1100,7 @@ describe('CdkDrag', () => { const dragElement = fixture.componentInstance.dragElement.nativeElement; expect(dragElement.style.transform).toBeFalsy(); - dragElementViaMouse(dragElement, 300, 300); + dragElementViaMouse(fixture, dragElement, 300, 300); expect(dragElement.style.transform).toBe('translate3d(100px, 100px, 0px)'); })); @@ -1127,7 +1112,7 @@ describe('CdkDrag', () => { const dragElement = fixture.componentInstance.dragElement.nativeElement; expect(dragElement.style.transform).toBeFalsy(); - dragElementViaMouse(dragElement, 300, 300); + dragElementViaMouse(fixture, dragElement, 300, 300); expect(dragElement.style.transform).toBe('translate3d(100px, 100px, 0px)'); })); @@ -1139,7 +1124,7 @@ describe('CdkDrag', () => { fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; - dragElementViaMouse(dragElement, 300, 300); + dragElementViaMouse(fixture, dragElement, 300, 300); expect(dragElement.style.transform).toBe('translate3d(100px, 100px, 0px)'); boundary.style.width = '150px'; @@ -1157,7 +1142,7 @@ describe('CdkDrag', () => { fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; - dragElementViaMouse(dragElement, 300, 300); + dragElementViaMouse(fixture, dragElement, 300, 300); expect(dragElement.style.transform).toBe('translate3d(100px, 100px, 0px)'); boundary.style.display = 'none'; @@ -1175,14 +1160,14 @@ describe('CdkDrag', () => { fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; - dragElementViaMouse(dragElement, 300, 300); + dragElementViaMouse(fixture, dragElement, 300, 300); expect(dragElement.style.transform).toBe('translate3d(100px, 100px, 0px)'); // Bump the width and height of both the boundary and the drag element. boundary.style.width = boundary.style.height = '300px'; dragElement.style.width = dragElement.style.height = '150px'; - dragElementViaMouse(dragElement, 300, 300); + dragElementViaMouse(fixture, dragElement, 300, 300); expect(dragElement.style.transform).toBe('translate3d(150px, 150px, 0px)'); })); @@ -1194,7 +1179,7 @@ describe('CdkDrag', () => { fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; - dragElementViaMouse(dragElement, 300, 300); + dragElementViaMouse(fixture, dragElement, 300, 300); expect(dragElement.style.transform).toBe('translate3d(100px, 100px, 0px)'); boundary.style.height = '150px'; @@ -1215,7 +1200,7 @@ describe('CdkDrag', () => { fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; - dragElementViaMouse(dragElement, 300, 300); + dragElementViaMouse(fixture, dragElement, 300, 300); expect(dragElement.style.transform).toBe('translate3d(100px, 100px, 0px)'); boundary.style.width = '50px'; @@ -1234,7 +1219,7 @@ describe('CdkDrag', () => { fixture.detectChanges(); const dragElement = fixture.componentInstance.dragElement.nativeElement; - dragElementViaMouse(dragElement, 300, 300); + dragElementViaMouse(fixture, dragElement, 300, 300); expect(dragElement.style.transform).toBe('translate3d(100px, 100px, 0px)'); boundary.style.height = '50px'; @@ -1257,7 +1242,7 @@ describe('CdkDrag', () => { const dragElement = fixture.componentInstance.dragElement.nativeElement; expect(dragElement.style.transform).toBeFalsy(); - dragElementViaMouse(dragElement, 300, 300); + dragElementViaMouse(fixture, dragElement, 300, 300); expect(spy).toHaveBeenCalledWith( jasmine.objectContaining({x: 300, y: 300}), @@ -1299,7 +1284,7 @@ describe('CdkDrag', () => { .withContext('Expected element not to be moved by default.') .toBeFalsy(); - startDraggingViaMouse(dragElement); + startDraggingViaMouse(fixture, dragElement); currentTime += 750; dispatchMouseEvent(document, 'mousemove', 50, 100); currentTime += 500; @@ -1327,7 +1312,7 @@ describe('CdkDrag', () => { .withContext('Expected element not to be moved by default.') .toBeFalsy(); - startDraggingViaMouse(dragElement); + startDraggingViaMouse(fixture, dragElement); currentTime += 750; dispatchMouseEvent(document, 'mousemove', 50, 100); currentTime += 500; @@ -1441,7 +1426,7 @@ describe('CdkDrag', () => { .withContext('Expected element not to be moved via touch because it has a delay.') .toBeFalsy(); - dragElementViaMouse(dragElement, 50, 100); + dragElementViaMouse(fixture, dragElement, 50, 100); expect(dragElement.style.transform) .withContext('Expected element to be moved via mouse because it has no delay.') .toBe('translate3d(50px, 100px, 0px)'); @@ -1457,10 +1442,10 @@ describe('CdkDrag', () => { expect(dragInstance.getFreeDragPosition()).toEqual({x: 0, y: 0}); - dragElementViaMouse(dragElement, 50, 100); + dragElementViaMouse(fixture, dragElement, 50, 100); expect(dragInstance.getFreeDragPosition()).toEqual({x: 50, y: 100}); - dragElementViaMouse(dragElement, 100, 200); + dragElementViaMouse(fixture, dragElement, 100, 200); expect(dragInstance.getFreeDragPosition()).toEqual({x: 150, y: 300}); })); @@ -1501,7 +1486,7 @@ describe('CdkDrag', () => { expect(dragInstance.getFreeDragPosition()).toEqual({x: 0, y: 0}); - startDraggingViaMouse(dragElement); + startDraggingViaMouse(fixture, dragElement); dispatchMouseEvent(document, 'mousemove', 50, 100); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -1541,7 +1526,7 @@ describe('CdkDrag', () => { expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)'); - dragElementViaMouse(dragElement, 100, 200); + dragElementViaMouse(fixture, dragElement, 100, 200); expect(dragElement.style.transform).toBe('translate3d(150px, 300px, 0px)'); })); @@ -1554,7 +1539,7 @@ describe('CdkDrag', () => { const spy = jasmine.createSpy('moved spy'); const subscription = fixture.componentInstance.dragInstance.moved.subscribe(spy); - startDraggingViaMouse(dragElement); + startDraggingViaMouse(fixture, dragElement); dispatchMouseEvent(document, 'mousemove', 50, 100); fixture.changeDetectorRef.markForCheck(); @@ -1636,7 +1621,7 @@ describe('CdkDrag', () => { const dragElement = fixture.componentInstance.dragElement.nativeElement; expect(dragElement.style.transform).toBeFalsy(); - startDraggingViaMouse(dragElement, 0, 0); + startDraggingViaMouse(fixture, dragElement, 0, 0); dispatchMouseEvent(document, 'mousemove', 50, 100); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -1664,7 +1649,7 @@ describe('CdkDrag', () => { const dragElement = fixture.componentInstance.dragElement.nativeElement; expect(dragElement.style.transform).toBeFalsy(); - startDraggingViaMouse(dragElement, 0, 0); + startDraggingViaMouse(fixture, dragElement, 0, 0); dispatchMouseEvent(document, 'mousemove', 50, 100); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -1694,7 +1679,7 @@ describe('CdkDrag', () => { const dragElement = fixture.componentInstance.dragElement.nativeElement; expect(dragElement.style.transform).toBeFalsy(); - dragElementViaMouse(dragElement, 50, 100); + dragElementViaMouse(fixture, dragElement, 50, 100); expect(dragElement.style.transform).toBeFalsy(); })); @@ -1706,7 +1691,7 @@ describe('CdkDrag', () => { const handle = fixture.componentInstance.handleElement.nativeElement; expect(dragElement.style.transform).toBeFalsy(); - dragElementViaMouse(handle, 50, 100); + dragElementViaMouse(fixture, handle, 50, 100); expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)'); })); @@ -1720,7 +1705,7 @@ describe('CdkDrag', () => { fixture.componentInstance.handleInstance.disabled = true; expect(dragElement.style.transform).toBeFalsy(); - dragElementViaMouse(handle, 50, 100); + dragElementViaMouse(fixture, handle, 50, 100); expect(dragElement.style.transform).toBeFalsy(); })); @@ -1732,7 +1717,7 @@ describe('CdkDrag', () => { const handle = fixture.componentInstance.handleElement.nativeElement; expect(dragElement.style.transform).toBeFalsy(); - dragElementViaMouse(handle, 50, 100); + dragElementViaMouse(fixture, handle, 50, 100); expect(dragElement.style.transform).toBeFalsy(); })); @@ -1746,7 +1731,7 @@ describe('CdkDrag', () => { fixture.componentInstance.dragInstance.disabled = true; expect(dragElement.style.transform).toBeFalsy(); - dragElementViaMouse(handle, 50, 100); + dragElementViaMouse(fixture, handle, 50, 100); expect(dragElement.style.transform).toBeFalsy(); })); @@ -1763,7 +1748,7 @@ describe('CdkDrag', () => { const handle = fixture.componentInstance.handleElement.nativeElement; expect(dragElement.style.transform).toBeFalsy(); - dragElementViaMouse(handle, 50, 100); + dragElementViaMouse(fixture, handle, 50, 100); expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)'); })); @@ -1776,10 +1761,10 @@ describe('CdkDrag', () => { const handles = fixture.componentInstance.handles.map(handle => handle.element.nativeElement); expect(dragElement.style.transform).toBeFalsy(); - dragElementViaMouse(handles[1], 50, 100); + dragElementViaMouse(fixture, handles[1], 50, 100); expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)'); - dragElementViaMouse(handles[0], 100, 200); + dragElementViaMouse(fixture, handles[0], 100, 200); expect(dragElement.style.transform).toBe('translate3d(150px, 300px, 0px)'); })); @@ -1791,13 +1776,13 @@ describe('CdkDrag', () => { const handle = fixture.componentInstance.handleElement.nativeElement; expect(dragElement.style.transform).toBeFalsy(); - dragElementViaMouse(dragElement, 50, 100); + dragElementViaMouse(fixture, dragElement, 50, 100); expect(dragElement.style.transform) .withContext('Expected not to be able to drag the element by itself.') .toBeFalsy(); - dragElementViaMouse(handle, 50, 100); + dragElementViaMouse(fixture, handle, 50, 100); expect(dragElement.style.transform) .withContext('Expected to drag the element by its handle.') .toBe('translate3d(50px, 100px, 0px)'); @@ -1817,7 +1802,7 @@ describe('CdkDrag', () => { expect((dragElement.style as any).webkitTapHighlightColor).toBeFalsy(); - startDraggingViaMouse(handle); + startDraggingViaMouse(fixture, handle); expect((dragElement.style as any).webkitTapHighlightColor).toBe('transparent'); @@ -1846,7 +1831,7 @@ describe('CdkDrag', () => { (dragElement.style as any).webkitTapHighlightColor = 'purple'; - startDraggingViaMouse(handle); + startDraggingViaMouse(fixture, handle); expect((dragElement.style as any).webkitTapHighlightColor).toBe('transparent'); @@ -1885,7 +1870,7 @@ describe('CdkDrag', () => { const handleChild = fixture.componentInstance.handleChild.nativeElement; expect(dragElement.style.transform).toBeFalsy(); - dragElementViaMouse(handleChild, 50, 100); + dragElementViaMouse(fixture, handleChild, 50, 100); expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)'); })); @@ -2024,9 +2009,7 @@ describe('CdkDrag', () => { expect(dropZone.element.nativeElement.classList).not.toContain('cdk-drop-list-dragging'); - startDraggingViaMouse(item); - fixture.changeDetectorRef.markForCheck(); - fixture.detectChanges(); + startDraggingViaMouse(fixture, item); expect(dropZone.element.nativeElement.classList).toContain('cdk-drop-list-dragging'); @@ -2050,9 +2033,7 @@ describe('CdkDrag', () => { expect(dropZone.element.nativeElement.classList).not.toContain('cdk-drop-list-dragging'); expect(item.classList).not.toContain('cdk-drag-dragging'); - startDraggingViaMouse(item); - fixture.changeDetectorRef.markForCheck(); - fixture.detectChanges(); + startDraggingViaMouse(fixture, item); expect(dropZone.element.nativeElement.classList).toContain('cdk-drop-list-dragging'); expect(item.classList).toContain('cdk-drag-dragging'); @@ -2077,9 +2058,7 @@ describe('CdkDrag', () => { expect(dropZone.element.nativeElement.classList).not.toContain('cdk-drop-list-dragging'); - startDraggingViaMouse(item); - fixture.changeDetectorRef.markForCheck(); - fixture.detectChanges(); + startDraggingViaMouse(fixture, item); expect(dropZone.element.nativeElement.classList).toContain('cdk-drop-list-dragging'); @@ -2102,7 +2081,7 @@ describe('CdkDrag', () => { expect(dropZone.element.nativeElement.classList).not.toContain('cdk-drop-dragging'); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); expect(dropZone.element.nativeElement.classList).not.toContain('cdk-drop-dragging'); })); @@ -2124,6 +2103,7 @@ describe('CdkDrag', () => { const thirdItemRect = dragItems.toArray()[2].element.nativeElement.getBoundingClientRect(); dragElementViaMouse( + fixture, firstItem.element.nativeElement, thirdItemRect.left + 1, thirdItemRect.top + 1, @@ -2167,6 +2147,7 @@ describe('CdkDrag', () => { const thirdItemRect = dragItems.toArray()[2].element.nativeElement.getBoundingClientRect(); dragElementViaMouse( + fixture, firstItem.element.nativeElement, thirdItemRect.left + 1, thirdItemRect.top + 1, @@ -2190,7 +2171,7 @@ describe('CdkDrag', () => { const dragItems = fixture.componentInstance.dragItems; const firstItem = dragItems.first; - dragElementViaMouse(firstItem.element.nativeElement, 50, 60); + dragElementViaMouse(fixture, firstItem.element.nativeElement, 50, 60); flush(); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -2214,6 +2195,7 @@ describe('CdkDrag', () => { fixture.componentInstance.dropInstance.element.nativeElement.getBoundingClientRect(); dragElementViaMouse( + fixture, firstItem.element.nativeElement, containerRect.right + 10, containerRect.bottom + 10, @@ -2239,7 +2221,7 @@ describe('CdkDrag', () => { const draggedItem = items[0]; const {top, left} = draggedItem.getBoundingClientRect(); - startDraggingViaMouse(draggedItem, left, top); + startDraggingViaMouse(fixture, draggedItem, left, top); // Drag over each item one-by-one going downwards. for (let i = 1; i < items.length; i++) { @@ -2275,7 +2257,7 @@ describe('CdkDrag', () => { const draggedItem = fixture.componentInstance.dragItems.first.element.nativeElement; const {top, left} = draggedItem.getBoundingClientRect(); - startDraggingViaMouse(draggedItem, left, top); + startDraggingViaMouse(fixture, draggedItem, left, top); for (let i = 0; i < 5; i++) { dispatchMouseEvent(document, 'mousemove', left, top + 1); @@ -2310,6 +2292,7 @@ describe('CdkDrag', () => { // Move the cursor all the way to the right so it doesn't intersect along the x axis. dragElementViaMouse( + fixture, firstItem.element.nativeElement, thirdItemRect.right + 1000, thirdItemRect.top + 1, @@ -2360,6 +2343,7 @@ describe('CdkDrag', () => { const thirdItemRect = dragElements[2].getBoundingClientRect(); dragElementViaMouse( + fixture, fixture.componentInstance.dragItems.first.element.nativeElement, thirdItemRect.left + 1, thirdItemRect.top + 1, @@ -2389,6 +2373,7 @@ describe('CdkDrag', () => { const thirdItemRect = dragItems.toArray()[2].element.nativeElement.getBoundingClientRect(); dragElementViaMouse( + fixture, firstItem.element.nativeElement, thirdItemRect.left + 1, thirdItemRect.top + 1, @@ -2447,6 +2432,7 @@ describe('CdkDrag', () => { const thirdItemRect = dragItems.toArray()[2].element.nativeElement.getBoundingClientRect(); dragElementViaMouse( + fixture, firstItem.element.nativeElement, thirdItemRect.right - 1, thirdItemRect.top + 1, @@ -2499,6 +2485,7 @@ describe('CdkDrag', () => { // Move the cursor all the way to the bottom so it doesn't intersect along the y axis. dragElementViaMouse( + fixture, firstItem.element.nativeElement, thirdItemRect.left + 1, thirdItemRect.bottom + 1000, @@ -2542,7 +2529,7 @@ describe('CdkDrag', () => { const thirdItemRect = dragItems.toArray()[2].element.nativeElement.getBoundingClientRect(); const list = fixture.componentInstance.dropInstance.element.nativeElement; - startDraggingViaMouse(firstItem.element.nativeElement); + startDraggingViaMouse(fixture, firstItem.element.nativeElement); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -2601,7 +2588,7 @@ describe('CdkDrag', () => { const thirdItemRect = dragItems.toArray()[2].element.nativeElement.getBoundingClientRect(); const list = fixture.componentInstance.dropInstance.element.nativeElement; - startDraggingViaMouse(firstItem.element.nativeElement); + startDraggingViaMouse(fixture, firstItem.element.nativeElement); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -2657,7 +2644,7 @@ describe('CdkDrag', () => { const firstItem = dragItems.first; const thirdItemRect = dragItems.toArray()[2].element.nativeElement.getBoundingClientRect(); - startDraggingViaMouse(firstItem.element.nativeElement); + startDraggingViaMouse(fixture, firstItem.element.nativeElement); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -2706,7 +2693,7 @@ describe('CdkDrag', () => { const itemRect = item.getBoundingClientRect(); const initialParent = item.parentNode; - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); const preview = document.querySelector('.cdk-drag-preview') as HTMLElement; const previewRect = preview.getBoundingClientRect(); @@ -2793,7 +2780,7 @@ describe('CdkDrag', () => { fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); const preview = document.querySelector('.cdk-drag-preview')! as HTMLElement; expect(preview.style.zIndex).toBe('3000'); @@ -2808,11 +2795,11 @@ describe('CdkDrag', () => { const listRect = fixture.componentInstance.dropInstance.element.nativeElement.getBoundingClientRect(); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); const preview = document.querySelector('.cdk-drag-preview')! as HTMLElement; - startDraggingViaMouse(item, listRect.right + 50, listRect.bottom + 50); + startDraggingViaMouse(fixture, item, listRect.right + 50, listRect.bottom + 50); flush(); dispatchMouseEvent(document, 'mousemove', listRect.right + 50, listRect.bottom + 50); fixture.changeDetectorRef.markForCheck(); @@ -2836,8 +2823,8 @@ describe('CdkDrag', () => { scrollTo(0, 10); let listRect = list.getBoundingClientRect(); // Note that we need to measure after scrolling. - startDraggingViaMouse(item); - startDraggingViaMouse(item, listRect.right, listRect.bottom); + startDraggingViaMouse(fixture, item); + startDraggingViaMouse(fixture, item, listRect.right, listRect.bottom); flush(); dispatchMouseEvent(document, 'mousemove', listRect.right, listRect.bottom); fixture.changeDetectorRef.markForCheck(); @@ -2874,8 +2861,8 @@ describe('CdkDrag', () => { container.scrollTop = 10; let listRect = list.getBoundingClientRect(); // Note that we need to measure after scrolling. - startDraggingViaMouse(item); - startDraggingViaMouse(item, listRect.right, listRect.bottom); + startDraggingViaMouse(fixture, item); + startDraggingViaMouse(fixture, item, listRect.right, listRect.bottom); flush(); dispatchMouseEvent(document, 'mousemove', listRect.right, listRect.bottom); fixture.changeDetectorRef.markForCheck(); @@ -2929,8 +2916,8 @@ describe('CdkDrag', () => { // Note that we need to measure after scrolling. let listRect = list.getBoundingClientRect(); - startDraggingViaMouse(item); - startDraggingViaMouse(item, listRect.right, listRect.bottom); + startDraggingViaMouse(fixture, item); + startDraggingViaMouse(fixture, item, listRect.right, listRect.bottom); flush(); dispatchMouseEvent(document, 'mousemove', listRect.right, listRect.bottom); fixture.changeDetectorRef.markForCheck(); @@ -2966,7 +2953,7 @@ describe('CdkDrag', () => { const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; item.id = 'custom-id'; - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); const preview = document.querySelector('.cdk-drag-preview')! as HTMLElement; @@ -2991,7 +2978,7 @@ describe('CdkDrag', () => { .withContext('Expected source canvas to have data.') .toBe(true); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); const preview = document.querySelector('.cdk-drag-preview')! as HTMLElement; const previewCanvas = preview.querySelector('canvas')!; @@ -3008,7 +2995,7 @@ describe('CdkDrag', () => { const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; expect(() => { - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); tick(); }).not.toThrow(); @@ -3029,7 +3016,7 @@ describe('CdkDrag', () => { expect(sourceTextarea.value).toBe(value); expect(sourceSelect.value).toBe(value); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); const preview = document.querySelector('.cdk-drag-preview')!; const previewInput = preview.querySelector('input')!; @@ -3050,7 +3037,7 @@ describe('CdkDrag', () => { expect(sourceRadioInput.checked).toBeTruthy(); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); const preview = document.querySelector('.cdk-drag-preview')!; const previewRadioInput = preview.querySelector('input[type="radio"]')!; @@ -3085,7 +3072,7 @@ describe('CdkDrag', () => { extraChild.classList.add('preview-child'); item.appendChild(extraChild); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); expect(document.querySelectorAll('.preview-child').length).toBeGreaterThan(1); expect(document.querySelectorAll('[id="child-id"]').length).toBe(1); @@ -3097,7 +3084,7 @@ describe('CdkDrag', () => { fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); expect(document.querySelector('.cdk-drag-preview')).toBeFalsy(); })); @@ -3114,7 +3101,7 @@ describe('CdkDrag', () => { fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); expect(document.querySelector('.cdk-drag-preview')!.getAttribute('dir')) .withContext('Expected preview to inherit the directionality.') @@ -3127,7 +3114,7 @@ describe('CdkDrag', () => { fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); const preview = document.querySelector('.cdk-drag-preview') as HTMLElement; @@ -3162,7 +3149,7 @@ describe('CdkDrag', () => { fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); const preview = document.querySelector('.cdk-drag-preview')! as HTMLElement; expect(preview.classList).toContain('custom-class'); @@ -3175,7 +3162,7 @@ describe('CdkDrag', () => { fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); const preview = document.querySelector('.cdk-drag-preview')! as HTMLElement; expect(preview.classList).toContain('custom-class-1'); @@ -3192,7 +3179,7 @@ describe('CdkDrag', () => { const endedSubscription = item.ended.subscribe(endedSpy); const releasedSubscription = item.released.subscribe(releasedSpy); - startDraggingViaMouse(item.element.nativeElement); + startDraggingViaMouse(fixture, item.element.nativeElement); const preview = document.querySelector('.cdk-drag-preview')! as HTMLElement; @@ -3230,13 +3217,13 @@ describe('CdkDrag', () => { const subscription = itemInstance.dropped.subscribe(spy); // Do an initial drag and drop sequence. - dragElementViaMouse(item, 50, 50); + dragElementViaMouse(fixture, item, 50, 50); tick(0); // Important to tick with 0 since we don't want to flush any pending timeouts. expect(spy).toHaveBeenCalledTimes(1); // Start another drag. - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); // Add a duration since the tests won't include one. const preview = document.querySelector('.cdk-drag-preview')! as HTMLElement; @@ -3259,7 +3246,7 @@ describe('CdkDrag', () => { fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); const preview = document.querySelector('.cdk-drag-preview')! as HTMLElement; preview.style.transition = 'opacity 500ms ease'; @@ -3284,7 +3271,7 @@ describe('CdkDrag', () => { fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); const preview = document.querySelector('.cdk-drag-preview')! as HTMLElement; preview.style.transition = 'opacity 500ms ease, transform 1000ms ease'; @@ -3318,7 +3305,7 @@ describe('CdkDrag', () => { const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; const initialParent = item.parentNode; - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); const placeholder = document.querySelector('.cdk-drag-placeholder')! as HTMLElement; @@ -3350,7 +3337,7 @@ describe('CdkDrag', () => { fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); const preview = document.querySelector('.cdk-drag-preview') as HTMLElement; expect(preview.parentNode).toBe(document.body); })); @@ -3363,7 +3350,7 @@ describe('CdkDrag', () => { const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; const list = fixture.nativeElement.querySelector('.drop-list'); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); const preview = document.querySelector('.cdk-drag-preview') as HTMLElement; expect(list).toBeTruthy(); expect(preview.parentNode).toBe(list); @@ -3381,7 +3368,7 @@ describe('CdkDrag', () => { fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); const preview = document.querySelector('.cdk-drag-preview') as HTMLElement; expect(preview.parentNode).toBe(previewContainer.nativeElement); })); @@ -3394,7 +3381,7 @@ describe('CdkDrag', () => { item.id = 'custom-id'; - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); const placeholder = document.querySelector('.cdk-drag-placeholder')! as HTMLElement; @@ -3411,7 +3398,7 @@ describe('CdkDrag', () => { extraChild.classList.add('placeholder-child'); item.appendChild(extraChild); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); expect(document.querySelectorAll('.placeholder-child').length).toBeGreaterThan(1); expect(document.querySelectorAll('[id="child-id"]').length).toBe(1); @@ -3423,7 +3410,7 @@ describe('CdkDrag', () => { fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); expect(document.querySelector('.cdk-drag-placeholder')).toBeFalsy(); })); @@ -3493,7 +3480,7 @@ describe('CdkDrag', () => { const draggedItem = items[0].element.nativeElement; const {top, left} = draggedItem.getBoundingClientRect(); - startDraggingViaMouse(draggedItem, left, top); + startDraggingViaMouse(fixture, draggedItem, left, top); const placeholder = document.querySelector('.cdk-drag-placeholder')! as HTMLElement; @@ -3523,7 +3510,7 @@ describe('CdkDrag', () => { const draggedItem = items[items.length - 1].element.nativeElement; const {top, left} = draggedItem.getBoundingClientRect(); - startDraggingViaMouse(draggedItem, left, top); + startDraggingViaMouse(fixture, draggedItem, left, top); const placeholder = document.querySelector('.cdk-drag-placeholder')! as HTMLElement; @@ -3556,7 +3543,7 @@ describe('CdkDrag', () => { const draggedItem = items[0]; const {top, left} = draggedItem.getBoundingClientRect(); - startDraggingViaMouse(draggedItem, left, top); + startDraggingViaMouse(fixture, draggedItem, left, top); const placeholder = document.querySelector('.cdk-drag-placeholder')! as HTMLElement; const targetRect = items[items.length - 1].getBoundingClientRect(); @@ -3589,7 +3576,7 @@ describe('CdkDrag', () => { fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); - startDraggingViaMouse(items[0], left, top); + startDraggingViaMouse(fixture, items[0], left, top); const placeholder = document.querySelector('.cdk-drag-placeholder')! as HTMLElement; const target = items[1]; @@ -3621,7 +3608,7 @@ describe('CdkDrag', () => { fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); - startDraggingViaMouse(items[1], left, top); + startDraggingViaMouse(fixture, items[1], left, top); const placeholder = document.querySelector('.cdk-drag-placeholder')! as HTMLElement; const target = items[0]; @@ -3653,7 +3640,7 @@ describe('CdkDrag', () => { fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); - startDraggingViaMouse(items[0], left, top); + startDraggingViaMouse(fixture, items[0], left, top); const placeholder = document.querySelector('.cdk-drag-placeholder')! as HTMLElement; const target = items[1]; @@ -3685,7 +3672,7 @@ describe('CdkDrag', () => { const draggedItem = items[0]; const {top, left} = draggedItem.getBoundingClientRect(); - startDraggingViaMouse(draggedItem, left, top); + startDraggingViaMouse(fixture, draggedItem, left, top); const placeholder = document.querySelector('.cdk-drag-placeholder')! as HTMLElement; const targetRect = items[items.length - 1].getBoundingClientRect(); @@ -3718,7 +3705,7 @@ describe('CdkDrag', () => { fixture.detectChanges(); const {top, left} = items[0].getBoundingClientRect(); - startDraggingViaMouse(items[0], left, top); + startDraggingViaMouse(fixture, items[0], left, top); const placeholder = document.querySelector('.cdk-drag-placeholder')! as HTMLElement; const target = items[1]; @@ -3749,7 +3736,7 @@ describe('CdkDrag', () => { fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); - startDraggingViaMouse(items[1], left, top); + startDraggingViaMouse(fixture, items[1], left, top); const placeholder = document.querySelector('.cdk-drag-placeholder')! as HTMLElement; const target = items[0]; @@ -3780,7 +3767,7 @@ describe('CdkDrag', () => { fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); - startDraggingViaMouse(items[0], left, top); + startDraggingViaMouse(fixture, items[0], left, top); const placeholder = document.querySelector('.cdk-drag-placeholder')! as HTMLElement; const target = items[1]; @@ -3812,7 +3799,7 @@ describe('CdkDrag', () => { // Bump the height so the pointer doesn't leave after swapping. target.style.height = `${ITEM_HEIGHT * 3}px`; - startDraggingViaMouse(draggedItem, left, top); + startDraggingViaMouse(fixture, draggedItem, left, top); const placeholder = document.querySelector('.cdk-drag-placeholder')! as HTMLElement; @@ -3858,7 +3845,7 @@ describe('CdkDrag', () => { // Bump the height so the pointer doesn't leave after swapping. target.style.height = `${ITEM_HEIGHT * 3}px`; - startDraggingViaMouse(draggedItem, left, top); + startDraggingViaMouse(fixture, draggedItem, left, top); const placeholder = document.querySelector('.cdk-drag-placeholder')! as HTMLElement; @@ -3904,7 +3891,7 @@ describe('CdkDrag', () => { const target = items[items.length - 1]; const itemRect = draggedItem.getBoundingClientRect(); - startDraggingViaMouse(draggedItem, itemRect.left, itemRect.top); + startDraggingViaMouse(fixture, draggedItem, itemRect.left, itemRect.top); const placeholder = document.querySelector('.cdk-drag-placeholder')! as HTMLElement; @@ -3950,7 +3937,7 @@ describe('CdkDrag', () => { fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); const preview = document.querySelector('.cdk-drag-preview') as HTMLElement; @@ -3973,7 +3960,7 @@ describe('CdkDrag', () => { fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); const preview = document.querySelector('.cdk-drag-preview')! as HTMLElement; @@ -3992,7 +3979,7 @@ describe('CdkDrag', () => { fixture.componentInstance.renderCustomPreview = false; fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); const preview = document.querySelector('.cdk-drag-preview')! as HTMLElement; @@ -4010,11 +3997,11 @@ describe('CdkDrag', () => { const listRect = fixture.componentInstance.dropInstance.element.nativeElement.getBoundingClientRect(); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); const preview = document.querySelector('.cdk-drag-preview')! as HTMLElement; - startDraggingViaMouse(item, listRect.right + 50, listRect.bottom + 50); + startDraggingViaMouse(fixture, item, listRect.right + 50, listRect.bottom + 50); flush(); dispatchMouseEvent(document, 'mousemove', listRect.right + 50, listRect.bottom + 50); fixture.changeDetectorRef.markForCheck(); @@ -4038,11 +4025,11 @@ describe('CdkDrag', () => { fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); const preview = document.querySelector('.cdk-drag-preview')! as HTMLElement; - startDraggingViaMouse(item, 200, 200); + startDraggingViaMouse(fixture, item, 200, 200); flush(); dispatchMouseEvent(document, 'mousemove', 200, 200); fixture.changeDetectorRef.markForCheck(); @@ -4076,7 +4063,7 @@ describe('CdkDrag', () => { .toBe(true); // The coordinates don't matter. - dragElementViaMouse(item, 10, 10); + dragElementViaMouse(fixture, item, 10, 10); flush(); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -4093,7 +4080,7 @@ describe('CdkDrag', () => { fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; - startDraggingViaMouse(item, 50, 50); + startDraggingViaMouse(fixture, item, 50, 50); const preview = document.querySelector('.cdk-drag-preview')! as HTMLElement; @@ -4107,7 +4094,7 @@ describe('CdkDrag', () => { const cleanup = makeScrollable(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; - startDraggingViaMouse(item, 50, 50); + startDraggingViaMouse(fixture, item, 50, 50); const preview = document.querySelector('.cdk-drag-preview')! as HTMLElement; expect(preview.style.transform).toBe('translate3d(50px, 50px, 0px)'); @@ -4136,7 +4123,7 @@ describe('CdkDrag', () => { item.lockAxis = 'x'; - startDraggingViaMouse(element, 50, 50); + startDraggingViaMouse(fixture, element, 50, 50); dispatchMouseEvent(element, 'mousemove', 100, 100); fixture.changeDetectorRef.markForCheck(); @@ -4157,7 +4144,7 @@ describe('CdkDrag', () => { item.lockAxis = 'y'; - startDraggingViaMouse(element, 50, 50); + startDraggingViaMouse(fixture, element, 50, 50); dispatchMouseEvent(element, 'mousemove', 100, 100); fixture.changeDetectorRef.markForCheck(); @@ -4177,7 +4164,7 @@ describe('CdkDrag', () => { fixture.componentInstance.dropInstance.lockAxis = 'x'; - startDraggingViaMouse(element, 50, 50); + startDraggingViaMouse(fixture, element, 50, 50); dispatchMouseEvent(element, 'mousemove', 100, 100); fixture.changeDetectorRef.markForCheck(); @@ -4195,7 +4182,7 @@ describe('CdkDrag', () => { fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); const preview = document.querySelector('.cdk-drag-preview')! as HTMLElement; expect(preview.classList).toContain('custom-preview'); @@ -4210,7 +4197,7 @@ describe('CdkDrag', () => { const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; const itemRect = item.getBoundingClientRect(); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); const preview = document.querySelector('.cdk-drag-preview')! as HTMLElement; @@ -4229,7 +4216,7 @@ describe('CdkDrag', () => { fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; - startDraggingViaMouse(item, 50, 50); + startDraggingViaMouse(fixture, item, 50, 50); const preview = document.querySelector('.cdk-drag-preview')! as HTMLElement; @@ -4244,7 +4231,7 @@ describe('CdkDrag', () => { const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; const itemRect = item.getBoundingClientRect(); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -4262,7 +4249,7 @@ describe('CdkDrag', () => { const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; expect(() => { - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); }).not.toThrow(); const preview = document.querySelector('.cdk-drag-preview')! as HTMLElement; @@ -4278,7 +4265,7 @@ describe('CdkDrag', () => { const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; expect(() => { - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); }).not.toThrow(); const preview = document.querySelector('.cdk-drag-preview')! as HTMLElement; @@ -4293,7 +4280,7 @@ describe('CdkDrag', () => { fixture.detectChanges(); const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); const placeholder = document.querySelector('.cdk-drag-placeholder')! as HTMLElement; @@ -4314,7 +4301,7 @@ describe('CdkDrag', () => { fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); const placeholder = document.querySelector('.cdk-drag-placeholder')! as HTMLElement; @@ -4331,7 +4318,7 @@ describe('CdkDrag', () => { const dragItems = fixture.componentInstance.dragItems; const item = dragItems.toArray()[0].element.nativeElement; - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); const thirdItem = dragItems.toArray()[2].element.nativeElement; const thirdItemRect = thirdItem.getBoundingClientRect(); @@ -4358,7 +4345,7 @@ describe('CdkDrag', () => { const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; expect(() => { - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); }).not.toThrow(); const placeholder = document.querySelector('.cdk-drag-placeholder')! as HTMLElement; @@ -4374,7 +4361,7 @@ describe('CdkDrag', () => { const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; expect(() => { - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); }).not.toThrow(); const placeholder = document.querySelector('.cdk-drag-placeholder')! as HTMLElement; @@ -4393,7 +4380,7 @@ describe('CdkDrag', () => { const thirdItem = dragItems.toArray()[2].element.nativeElement; const thirdItemRect = thirdItem.getBoundingClientRect(); - startDraggingViaMouse(firstItem.element.nativeElement); + startDraggingViaMouse(fixture, firstItem.element.nativeElement); dispatchMouseEvent(document, 'mousemove', thirdItemRect.left + 1, thirdItemRect.top + 1); fixture.changeDetectorRef.markForCheck(); @@ -4436,6 +4423,7 @@ describe('CdkDrag', () => { const thirdItemRect = dragItems.toArray()[2].element.nativeElement.getBoundingClientRect(); dragElementViaMouse( + fixture, firstItem.element.nativeElement, thirdItemRect.right + 1, thirdItemRect.top + 1, @@ -4503,6 +4491,7 @@ describe('CdkDrag', () => { const thirdItemRect = dragItems[2].element.nativeElement.getBoundingClientRect(); dragElementViaMouse( + fixture, firstItem.element.nativeElement, thirdItemRect.right + 1, thirdItemRect.top + 1, @@ -4543,7 +4532,7 @@ describe('CdkDrag', () => { const targetX = thirdItemRect.left + 1; const targetY = thirdItemRect.top + 1; - startDraggingViaMouse(firstItem.element.nativeElement); + startDraggingViaMouse(fixture, firstItem.element.nativeElement); const placeholder = document.querySelector('.cdk-drag-placeholder') as HTMLElement; @@ -4598,7 +4587,7 @@ describe('CdkDrag', () => { const lastItemRect = dragItems.last.element.nativeElement.getBoundingClientRect(); // Start dragging. - startDraggingViaMouse(firstElement); + startDraggingViaMouse(fixture, firstElement); // Remove the last item. fixture.componentInstance.items.pop(); @@ -4620,17 +4609,13 @@ describe('CdkDrag', () => { fixture.detectChanges(); const [item, otherItem] = fixture.componentInstance.dragItems.toArray(); - startDraggingViaMouse(item.element.nativeElement); - fixture.changeDetectorRef.markForCheck(); - fixture.detectChanges(); + startDraggingViaMouse(fixture, item.element.nativeElement); expect(document.querySelectorAll('.cdk-drag-dragging').length) .withContext('Expected one item to be dragged initially.') .toBe(1); - startDraggingViaMouse(otherItem.element.nativeElement); - fixture.changeDetectorRef.markForCheck(); - fixture.detectChanges(); + startDraggingViaMouse(fixture, otherItem.element.nativeElement); expect(document.querySelectorAll('.cdk-drag-dragging').length) .withContext('Expected only one item to continue to be dragged.') @@ -4651,7 +4636,7 @@ describe('CdkDrag', () => { expect(list.scrollTop).toBe(0); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); dispatchMouseEvent( document, 'mousemove', @@ -4675,7 +4660,7 @@ describe('CdkDrag', () => { expect(list.scrollTop).toBe(0); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); dispatchMouseEvent( document, 'mousemove', @@ -4698,7 +4683,7 @@ describe('CdkDrag', () => { const listRect = list.getBoundingClientRect(); const initialScrollDistance = (list.scrollTop = list.scrollHeight); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); dispatchMouseEvent(document, 'mousemove', listRect.left + listRect.width / 2, listRect.top); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -4717,7 +4702,7 @@ describe('CdkDrag', () => { expect(list.scrollLeft).toBe(0); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); dispatchMouseEvent( document, 'mousemove', @@ -4740,7 +4725,7 @@ describe('CdkDrag', () => { const listRect = list.getBoundingClientRect(); const initialScrollDistance = (list.scrollLeft = list.scrollWidth); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); dispatchMouseEvent(document, 'mousemove', listRect.left, listRect.top + listRect.height / 2); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -4764,7 +4749,7 @@ describe('CdkDrag', () => { const listRect = list.getBoundingClientRect(); const initialScrollDistance = (list.scrollLeft = -list.scrollWidth); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); dispatchMouseEvent( document, 'mousemove', @@ -4794,7 +4779,7 @@ describe('CdkDrag', () => { expect(list.scrollLeft).toBe(0); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); dispatchMouseEvent(document, 'mousemove', listRect.left, listRect.top + listRect.height / 2); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -4814,7 +4799,7 @@ describe('CdkDrag', () => { expect(list.scrollLeft).toBe(0); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); dispatchMouseEvent( document, 'mousemove', @@ -4838,7 +4823,7 @@ describe('CdkDrag', () => { expect(list.scrollTop).toBe(0); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); dispatchMouseEvent( document, 'mousemove', @@ -4876,7 +4861,7 @@ describe('CdkDrag', () => { expect(list.scrollTop).toBe(0); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); dispatchMouseEvent( document, 'mousemove', @@ -4910,7 +4895,7 @@ describe('CdkDrag', () => { expect(viewportRuler.getViewportScrollPosition().top).toBe(0); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); dispatchMouseEvent(document, 'mousemove', viewportSize.width / 2, viewportSize.height); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -4935,7 +4920,7 @@ describe('CdkDrag', () => { const initialScrollDistance = viewportRuler.getViewportScrollPosition().top; expect(initialScrollDistance).toBeGreaterThan(0); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); dispatchMouseEvent(document, 'mousemove', viewportSize.width / 2, 0); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -4958,7 +4943,7 @@ describe('CdkDrag', () => { expect(viewportRuler.getViewportScrollPosition().left).toBe(0); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); dispatchMouseEvent(document, 'mousemove', viewportSize.width, viewportSize.height / 2); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -4983,7 +4968,7 @@ describe('CdkDrag', () => { const initialScrollDistance = viewportRuler.getViewportScrollPosition().left; expect(initialScrollDistance).toBeGreaterThan(0); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); dispatchMouseEvent(document, 'mousemove', 0, viewportSize.height / 2); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -5024,7 +5009,7 @@ describe('CdkDrag', () => { expect(initialScrollDistance).toBeGreaterThan(0); expect(list.scrollTop).toBe(50); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); dispatchMouseEvent(document, 'mousemove', listRect.left + listRect.width / 2, 0); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -5067,7 +5052,7 @@ describe('CdkDrag', () => { expect(initialScrollDistance).toBeGreaterThan(0); expect(list.scrollTop).toBe(0); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); dispatchMouseEvent(document, 'mousemove', listRect.left + listRect.width / 2, 0); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -5090,7 +5075,7 @@ describe('CdkDrag', () => { expect(container.scrollTop).toBe(0); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); dispatchMouseEvent( document, 'mousemove', @@ -5115,7 +5100,7 @@ describe('CdkDrag', () => { expect(list.scrollTop).toBe(0); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); dispatchMouseEvent( document, 'mousemove', @@ -5138,6 +5123,7 @@ describe('CdkDrag', () => { const thirdItemRect = dragItems.toArray()[2].element.nativeElement.getBoundingClientRect(); dragElementViaMouse( + fixture, firstItem.element.nativeElement, thirdItemRect.left + 1, thirdItemRect.top + 1, @@ -5183,7 +5169,7 @@ describe('CdkDrag', () => { 'Expected outer list to start off as not dragging.', ); - startDraggingViaMouse(dragItems.first.element.nativeElement); + startDraggingViaMouse(fixture, dragItems.first.element.nativeElement); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -5202,6 +5188,7 @@ describe('CdkDrag', () => { const firstItem = dragItems.first; const thirdItemRect = dragItems.toArray()[2].element.nativeElement.getBoundingClientRect(); dragElementViaMouse( + fixture, firstItem.element.nativeElement, thirdItemRect.left + 1, thirdItemRect.top + 1, @@ -5282,7 +5269,7 @@ describe('CdkDrag', () => { expect(styles.scrollSnapType || styles.msScrollSnapType).toBeFalsy(); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); expect(styles.scrollSnapType || styles.msScrollSnapType).toBe('none'); @@ -5311,7 +5298,7 @@ describe('CdkDrag', () => { styles.scrollSnapType = styles.msScrollSnapType = 'block'; expect(styles.scrollSnapType || styles.msScrollSnapType).toBe('block'); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); expect(styles.scrollSnapType || styles.msScrollSnapType).toBe('none'); @@ -5331,9 +5318,7 @@ describe('CdkDrag', () => { fixture.detectChanges(); let item = fixture.componentInstance.dragItems.first; - startDraggingViaMouse(item.element.nativeElement); - fixture.changeDetectorRef.markForCheck(); - fixture.detectChanges(); + startDraggingViaMouse(fixture, item.element.nativeElement); expect(document.querySelector('.cdk-drop-list-dragging')) .withContext('Expected to drag initially.') .toBeTruthy(); @@ -5351,9 +5336,7 @@ describe('CdkDrag', () => { .toBeFalsy(); item = fixture.componentInstance.dragItems.first; - startDraggingViaMouse(item.element.nativeElement); - fixture.changeDetectorRef.markForCheck(); - fixture.detectChanges(); + startDraggingViaMouse(fixture, item.element.nativeElement); expect(document.querySelector('.cdk-drop-list-dragging')) .withContext('Expected to be able to start a new drag sequence.') @@ -5378,7 +5361,7 @@ describe('CdkDrag', () => { placeholder = event.source.getPlaceholderElement(); }); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); expect(placeholder).toBeTruthy(); })); @@ -5400,7 +5383,7 @@ describe('CdkDrag', () => { const firstItem = dragItems.first; const thirdItemRect = dragItems.toArray()[2].element.nativeElement.getBoundingClientRect(); - startDraggingViaMouse(firstItem.element.nativeElement); + startDraggingViaMouse(fixture, firstItem.element.nativeElement); dispatchMouseEvent(document, 'mousemove', thirdItemRect.left + 1, thirdItemRect.top + 1); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -5445,7 +5428,7 @@ describe('CdkDrag', () => { const item = fixture.componentInstance.dragItems.first.element.nativeElement; const itemRect = item.getBoundingClientRect(); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); dispatchMouseEvent(document, 'mousemove', itemRect.left + 10, itemRect.top + 10); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -5470,7 +5453,7 @@ describe('CdkDrag', () => { const hasInitialTransform = (element: HTMLElement) => element.style.transform.indexOf('rotate(180deg)') > -1; - startDraggingViaMouse(items[0]); + startDraggingViaMouse(fixture, items[0]); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); const preview = document.querySelector('.cdk-drag-preview') as HTMLElement; @@ -5547,7 +5530,12 @@ describe('CdkDrag', () => { const item = groups[0][1]; const targetRect = groups[1][2].element.nativeElement.getBoundingClientRect(); - dragElementViaMouse(item.element.nativeElement, targetRect.left + 1, targetRect.top + 1); + dragElementViaMouse( + fixture, + item.element.nativeElement, + targetRect.left + 1, + targetRect.top + 1, + ); flush(); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -5580,7 +5568,7 @@ describe('CdkDrag', () => { const initialRect = item.element.nativeElement.getBoundingClientRect(); const targetRect = groups[1][2].element.nativeElement.getBoundingClientRect(); - startDraggingViaMouse(item.element.nativeElement); + startDraggingViaMouse(fixture, item.element.nativeElement); const placeholder = dropZones[0].querySelector('.cdk-drag-placeholder')!; @@ -5630,7 +5618,7 @@ describe('CdkDrag', () => { fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); - startDraggingViaMouse(item.element.nativeElement); + startDraggingViaMouse(fixture, item.element.nativeElement); const placeholder = dropZones[0].querySelector('.cdk-drag-placeholder')!; @@ -5675,7 +5663,7 @@ describe('CdkDrag', () => { // Use coordinates of [1] item corresponding to [2] item // after dragged item is removed from first container - dragElementViaMouse(element, targetRect.left + 1, targetRect.top); + dragElementViaMouse(fixture, element, targetRect.left + 1, targetRect.top); flush(); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -5710,7 +5698,7 @@ describe('CdkDrag', () => { const dropInstances = fixture.componentInstance.dropInstances.toArray(); const targetRect = groups[1][2].element.nativeElement.getBoundingClientRect(); - dragElementViaMouse(element, targetRect.left + 1, targetRect.top + 1); + dragElementViaMouse(fixture, element, targetRect.left + 1, targetRect.top + 1); flush(); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -5745,7 +5733,7 @@ describe('CdkDrag', () => { const dropInstances = fixture.componentInstance.dropInstances.toArray(); const targetRect = groups[1][2].element.nativeElement.getBoundingClientRect(); - dragElementViaMouse(element, targetRect.left + 1, targetRect.top + 1); + dragElementViaMouse(fixture, element, targetRect.left + 1, targetRect.top + 1); flush(); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -5781,7 +5769,12 @@ describe('CdkDrag', () => { fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); - dragElementViaMouse(dragItem.element.nativeElement, targetRect.left + 1, targetRect.top + 1); + dragElementViaMouse( + fixture, + dragItem.element.nativeElement, + targetRect.left + 1, + targetRect.top + 1, + ); flush(); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -5801,7 +5794,7 @@ describe('CdkDrag', () => { // Drag the element into the drop zone and move it to the top. [1, -1].forEach(offset => { - dragElementViaMouse(element, targetRect.left + offset, targetRect.top + offset); + dragElementViaMouse(fixture, element, targetRect.left + offset, targetRect.top + offset); flush(); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -5824,7 +5817,7 @@ describe('CdkDrag', () => { const initialRect = item.element.nativeElement.getBoundingClientRect(); const targetRect = groups[1][0].element.nativeElement.getBoundingClientRect(); - startDraggingViaMouse(item.element.nativeElement); + startDraggingViaMouse(fixture, item.element.nativeElement); const placeholder = dropZones[0].querySelector('.cdk-drag-placeholder')!; @@ -5873,7 +5866,7 @@ describe('CdkDrag', () => { const targetElement = groups[1][groups[1].length - 1].element.nativeElement; let targetRect = targetElement.getBoundingClientRect(); - startDraggingViaMouse(item.element.nativeElement); + startDraggingViaMouse(fixture, item.element.nativeElement); const placeholder = dropZones[0].querySelector('.cdk-drag-placeholder')!; @@ -5937,7 +5930,7 @@ describe('CdkDrag', () => { const targetRect = dropZones[1].getBoundingClientRect(); - startDraggingViaMouse(item.element.nativeElement); + startDraggingViaMouse(fixture, item.element.nativeElement); const placeholder = dropZones[0].querySelector('.cdk-drag-placeholder')!; @@ -5978,7 +5971,7 @@ describe('CdkDrag', () => { const targetRect = dropZones[1].getBoundingClientRect(); - startDraggingViaMouse(item.element.nativeElement); + startDraggingViaMouse(fixture, item.element.nativeElement); const placeholder = dropZones[0].querySelector('.cdk-drag-placeholder')!; @@ -6016,7 +6009,7 @@ describe('CdkDrag', () => { const targetRect = dropZones[1].getBoundingClientRect(); expect(() => { - dragElementViaMouse(item.element.nativeElement, targetRect.left, targetRect.top); + dragElementViaMouse(fixture, item.element.nativeElement, targetRect.left, targetRect.top); flush(); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -6053,7 +6046,7 @@ describe('CdkDrag', () => { const element = groups[0][1].element.nativeElement; const targetRect = groups[1][2].element.nativeElement.getBoundingClientRect(); - dragElementViaMouse(element, targetRect.left + 1, targetRect.top + 1); + dragElementViaMouse(fixture, element, targetRect.left + 1, targetRect.top + 1); flush(); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -6084,7 +6077,7 @@ describe('CdkDrag', () => { const element = groups[0][1].element.nativeElement; const targetRect = groups[1][2].element.nativeElement.getBoundingClientRect(); - dragElementViaMouse(element, targetRect.left + 1, targetRect.top + 1); + dragElementViaMouse(fixture, element, targetRect.left + 1, targetRect.top + 1); flush(); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -6121,7 +6114,7 @@ describe('CdkDrag', () => { const element = groups[0][1].element.nativeElement; const targetRect = groups[1][2].element.nativeElement.getBoundingClientRect(); - dragElementViaMouse(element, targetRect.left + 1, targetRect.top + 1); + dragElementViaMouse(fixture, element, targetRect.left + 1, targetRect.top + 1); flush(); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -6164,7 +6157,12 @@ describe('CdkDrag', () => { .withContext('Expected CdkDrag to be in first container in memory') .toBe(fixture.componentInstance.dropInstances.first); - dragElementViaMouse(item.element.nativeElement, targetRect.left + 1, targetRect.top + 1); + dragElementViaMouse( + fixture, + item.element.nativeElement, + targetRect.left + 1, + targetRect.top + 1, + ); flush(); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -6213,7 +6211,7 @@ describe('CdkDrag', () => { dropInstances[0].connectedTo = dropInstances[1]; dropInstances[1].connectedTo = []; - startDraggingViaMouse(item.element.nativeElement); + startDraggingViaMouse(fixture, item.element.nativeElement); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -6280,7 +6278,7 @@ describe('CdkDrag', () => { background: 'orange', }); - dragElementViaMouse(element, targetRect.left + 1, targetRect.top + 1); + dragElementViaMouse(fixture, element, targetRect.left + 1, targetRect.top + 1); flush(); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -6313,7 +6311,7 @@ describe('CdkDrag', () => { .withContext('Expected neither of the containers to have the class.') .toBe(true); - startDraggingViaMouse(item.element.nativeElement); + startDraggingViaMouse(fixture, item.element.nativeElement); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -6341,9 +6339,7 @@ describe('CdkDrag', () => { .withContext('Expected neither of the containers to have the class.') .toBe(true); - startDraggingViaMouse(item.element.nativeElement); - fixture.changeDetectorRef.markForCheck(); - fixture.detectChanges(); + startDraggingViaMouse(fixture, item.element.nativeElement); expect(dropZones[0].classList).not.toContain( 'cdk-drop-list-receiving', @@ -6380,7 +6376,7 @@ describe('CdkDrag', () => { .withContext('Expected neither of the containers to have the class.') .toBe(true); - startDraggingViaMouse(item.element.nativeElement); + startDraggingViaMouse(fixture, item.element.nativeElement); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -6407,9 +6403,7 @@ describe('CdkDrag', () => { .withContext('Expected neither of the containers to have the class.') .toBe(true); - startDraggingViaMouse(item.element.nativeElement); - fixture.changeDetectorRef.markForCheck(); - fixture.detectChanges(); + startDraggingViaMouse(fixture, item.element.nativeElement); expect(dropZones[0].classList) .not.withContext('Expected source container not to have the receiving class.') @@ -6450,7 +6444,7 @@ describe('CdkDrag', () => { .withContext('Expected neither of the containers to have the class.') .toBe(true); - startDraggingViaMouse(item); + startDraggingViaMouse(fixture, item); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -6484,7 +6478,7 @@ describe('CdkDrag', () => { const intermediateRect = dropZones[1].getBoundingClientRect(); const finalRect = dropZones[2].getBoundingClientRect(); - startDraggingViaMouse(item.element.nativeElement); + startDraggingViaMouse(fixture, item.element.nativeElement); const placeholder = dropZones[0].querySelector('.cdk-drag-placeholder')!; @@ -6561,7 +6555,7 @@ describe('CdkDrag', () => { const intermediateRect = dropZones[1].getBoundingClientRect(); const finalRect = dropZones[2].getBoundingClientRect(); - startDraggingViaMouse(item.element.nativeElement); + startDraggingViaMouse(fixture, item.element.nativeElement); const placeholder = dropZones[0].querySelector('.cdk-drag-placeholder')!; @@ -6628,7 +6622,7 @@ describe('CdkDrag', () => { const targetRect = groups[1][2].element.nativeElement.getBoundingClientRect(); fixture.componentInstance.dropInstances.first.sortingDisabled = true; - startDraggingViaMouse(item.element.nativeElement); + startDraggingViaMouse(fixture, item.element.nativeElement); const placeholder = dropZones[0].querySelector('.cdk-drag-placeholder')!; @@ -6693,7 +6687,7 @@ describe('CdkDrag', () => { // Explicitly enable just in case. fixture.componentInstance.dropInstances.first.sortingDisabled = false; - startDraggingViaMouse(item.element.nativeElement); + startDraggingViaMouse(fixture, item.element.nativeElement); const placeholder = dropZones[0].querySelector('.cdk-drag-placeholder')!; @@ -6744,7 +6738,7 @@ describe('CdkDrag', () => { const targetRect = groups[1][2].element.nativeElement.getBoundingClientRect(); fixture.componentInstance.dropInstances.first.sortingDisabled = true; - startDraggingViaMouse(lastItem.element.nativeElement); + startDraggingViaMouse(fixture, lastItem.element.nativeElement); const placeholder = dropZones[0].querySelector('.cdk-drag-placeholder')!; @@ -6816,9 +6810,7 @@ describe('CdkDrag', () => { 'Expected target not to have dragging class on init.', ); - startDraggingViaMouse(item); - fixture.changeDetectorRef.markForCheck(); - fixture.detectChanges(); + startDraggingViaMouse(fixture, item); expect(startZone.classList) .withContext('Expected start to have dragging class after dragging has started.') @@ -6851,7 +6843,7 @@ describe('CdkDrag', () => { const item = groups[0][1]; const targetRect = groups[1][2].element.nativeElement.getBoundingClientRect(); - startDraggingViaMouse(item.element.nativeElement); + startDraggingViaMouse(fixture, item.element.nativeElement); dispatchMouseEvent(document, 'mousemove', targetRect.left + 1, targetRect.top + 1); fixture.changeDetectorRef.markForCheck(); @@ -6885,7 +6877,12 @@ describe('CdkDrag', () => { }); expect(() => { - dragElementViaMouse(item.element.nativeElement, targetRect.left + 1, targetRect.top + 1); + dragElementViaMouse( + fixture, + item.element.nativeElement, + targetRect.left + 1, + targetRect.top + 1, + ); flush(); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -6911,7 +6908,7 @@ describe('CdkDrag', () => { const item = groups[0][1]; // Start dragging and then scroll the elements back into view. - startDraggingViaMouse(item.element.nativeElement); + startDraggingViaMouse(fixture, item.element.nativeElement); scrollTo(0, 0); dispatchFakeEvent(document, 'scroll'); @@ -6963,7 +6960,12 @@ describe('CdkDrag', () => { const item = groups[0][1]; const targetRect = groups[1][2].element.nativeElement.getBoundingClientRect(); - dragElementViaMouse(item.element.nativeElement, targetRect.left + 1, targetRect.top + 1); + dragElementViaMouse( + fixture, + item.element.nativeElement, + targetRect.left + 1, + targetRect.top + 1, + ); flush(); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -6999,7 +7001,12 @@ describe('CdkDrag', () => { const item = groups[0][1]; const targetRect = groups[1][2].element.nativeElement.getBoundingClientRect(); - dragElementViaMouse(item.element.nativeElement, targetRect.left + 1, targetRect.top + 1); + dragElementViaMouse( + fixture, + item.element.nativeElement, + targetRect.left + 1, + targetRect.top + 1, + ); flush(); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -7040,7 +7047,7 @@ describe('CdkDrag', () => { const shadowRoot = fixture.nativeElement.shadowRoot; const item = fixture.componentInstance.groupedDragItems[0][1]; - startDraggingViaMouse(item.element.nativeElement); + startDraggingViaMouse(fixture, item.element.nativeElement); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -7074,7 +7081,12 @@ describe('CdkDrag', () => { // Manually insert an element after the node to simulate an external package. nextSibling.parentNode!.insertBefore(extraSibling, nextSibling); - dragElementViaMouse(item.element.nativeElement, targetRect.left + 1, targetRect.top + 1); + dragElementViaMouse( + fixture, + item.element.nativeElement, + targetRect.left + 1, + targetRect.top + 1, + ); // Remove the extra node after the element was dropped, but before the animation is over. extraSibling.remove(); @@ -7099,7 +7111,7 @@ describe('CdkDrag', () => { const element = groups[0][1].element.nativeElement; spyOn(console, 'warn'); - dragElementViaMouse(element, 0, 0); + dragElementViaMouse(fixture, element, 0, 0); flush(); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -7116,17 +7128,13 @@ describe('CdkDrag', () => { const item = fixture.componentInstance.groupedDragItems[0][0]; const itemInOtherList = fixture.componentInstance.groupedDragItems[1][0]; - startDraggingViaMouse(item.element.nativeElement); - fixture.changeDetectorRef.markForCheck(); - fixture.detectChanges(); + startDraggingViaMouse(fixture, item.element.nativeElement); expect(document.querySelectorAll('.cdk-drag-dragging').length) .withContext('Expected one item to be dragged initially.') .toBe(1); - startDraggingViaMouse(itemInOtherList.element.nativeElement); - fixture.changeDetectorRef.markForCheck(); - fixture.detectChanges(); + startDraggingViaMouse(fixture, itemInOtherList.element.nativeElement); expect(document.querySelectorAll('.cdk-drag-dragging').length) .withContext('Expected only one item to continue to be dragged.') @@ -7150,7 +7158,7 @@ describe('CdkDrag', () => { fixture.detectChanges(); const item = fixture.componentInstance.groupedDragItems[0][1]; - startDraggingViaMouse(item.element.nativeElement); + startDraggingViaMouse(fixture, item.element.nativeElement); fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -7260,11 +7268,9 @@ describe('CdkDrag', () => { (cdkDragStarted)="startedSpy($event)" (cdkDragReleased)="releasedSpy($event)" (cdkDragEnded)="endedSpy($event)" - (cdkDragMoved)="movedCount = movedCount + 1" #dragElement style="width: 100px; height: 100px; background: red;"> -
{{movedCount}}
`, }) class StandaloneDraggable { @@ -7277,7 +7283,6 @@ class StandaloneDraggable { dragStartDelay: number | string | {touch: number; mouse: number}; constrainPosition: (point: Point) => Point; freeDragPosition?: {x: number; y: number}; - movedCount = 0; } @Component({ @@ -8504,10 +8509,21 @@ class DraggableNgContainerWithAlternateRoot { * @param x Position along the x axis to which to drag the element. * @param y Position along the y axis to which to drag the element. */ -function dragElementViaMouse(element: Element, x: number, y: number) { - startDraggingViaMouse(element); +function dragElementViaMouse( + fixture: ComponentFixture, + element: Element, + x: number, + y: number, +) { + startDraggingViaMouse(fixture, element); + dispatchMouseEvent(document, 'mousemove', x, y); + fixture.changeDetectorRef.markForCheck(); + fixture.detectChanges(); + dispatchMouseEvent(document, 'mouseup', x, y); + fixture.changeDetectorRef.markForCheck(); + fixture.detectChanges(); } /** @@ -8517,9 +8533,19 @@ function dragElementViaMouse(element: Element, x: number, y: number) { * @param x Position along the x axis to which to drag the element. * @param y Position along the y axis to which to drag the element. */ -function startDraggingViaMouse(element: Element, x?: number, y?: number) { +function startDraggingViaMouse( + fixture: ComponentFixture, + element: Element, + x?: number, + y?: number, +) { dispatchMouseEvent(element, 'mousedown', x, y); + fixture.changeDetectorRef.markForCheck(); + fixture.detectChanges(); + dispatchMouseEvent(document, 'mousemove', x, y); + fixture.changeDetectorRef.markForCheck(); + fixture.detectChanges(); } /** @@ -8618,7 +8644,7 @@ function assertDownwardSorting(fixture: ComponentFixture, items: Element[]) const draggedItem = items[0]; const {top, left} = draggedItem.getBoundingClientRect(); - startDraggingViaMouse(draggedItem, left, top); + startDraggingViaMouse(fixture, draggedItem, left, top); const placeholder = document.querySelector('.cdk-drag-placeholder')! as HTMLElement; @@ -8648,7 +8674,7 @@ function assertUpwardSorting(fixture: ComponentFixture, items: Element[]) { const draggedItem = items[items.length - 1]; const {top, left} = draggedItem.getBoundingClientRect(); - startDraggingViaMouse(draggedItem, left, top); + startDraggingViaMouse(fixture, draggedItem, left, top); const placeholder = document.querySelector('.cdk-drag-placeholder')! as HTMLElement; diff --git a/src/cdk/drag-drop/directives/drag.zone.spec.ts b/src/cdk/drag-drop/directives/drag.zone.spec.ts new file mode 100644 index 000000000000..55bb8bf5c57c --- /dev/null +++ b/src/cdk/drag-drop/directives/drag.zone.spec.ts @@ -0,0 +1,158 @@ +import {CdkScrollableModule} from '@angular/cdk/scrolling'; +import {dispatchMouseEvent} from '@angular/cdk/testing/private'; +import { + Component, + ElementRef, + NgZone, + Provider, + Type, + ViewChild, + ViewEncapsulation, + provideZoneChangeDetection, +} from '@angular/core'; +import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {DragDropModule} from '../drag-drop-module'; +import {Point} from '../drag-ref'; +import {CDK_DRAG_CONFIG, DragDropConfig} from './config'; +import {CdkDrag} from './drag'; + +describe('CdkDrag Zone.js integration', () => { + function createComponent( + componentType: Type, + providers: Provider[] = [], + dragDistance = 0, + extraDeclarations: Type[] = [], + encapsulation?: ViewEncapsulation, + ): ComponentFixture { + TestBed.configureTestingModule({ + imports: [DragDropModule, CdkScrollableModule], + providers: [ + provideZoneChangeDetection(), + { + provide: CDK_DRAG_CONFIG, + useValue: { + // We default the `dragDistance` to zero, because the majority of the tests + // don't care about it and drags are a lot easier to simulate when we don't + // have to deal with thresholds. + dragStartThreshold: dragDistance, + pointerDirectionChangeThreshold: 5, + } as DragDropConfig, + }, + ...providers, + ], + declarations: [PassthroughComponent, componentType, ...extraDeclarations], + }); + + if (encapsulation != null) { + TestBed.overrideComponent(componentType, { + set: {encapsulation}, + }); + } + + TestBed.compileComponents(); + return TestBed.createComponent(componentType); + } + + describe('standalone draggable', () => { + it('should emit to `moved` inside the NgZone', () => { + const fixture = createComponent(StandaloneDraggable); + fixture.changeDetectorRef.markForCheck(); + fixture.detectChanges(); + + const spy = jasmine.createSpy('move spy'); + const subscription = fixture.componentInstance.dragInstance.moved.subscribe(() => + spy(NgZone.isInAngularZone()), + ); + + dragElementViaMouse(fixture, fixture.componentInstance.dragElement.nativeElement, 10, 20); + expect(spy).toHaveBeenCalledWith(true); + + subscription.unsubscribe(); + }); + }); +}); + +/** + * Dispatches the events for starting a drag sequence. + * @param fixture Fixture on which to run change detection. + * @param element Element on which to dispatch the events. + * @param x Position along the x axis to which to drag the element. + * @param y Position along the y axis to which to drag the element. + */ +function startDraggingViaMouse( + fixture: ComponentFixture, + element: Element, + x?: number, + y?: number, +) { + dispatchMouseEvent(element, 'mousedown', x, y); + fixture.changeDetectorRef.markForCheck(); + fixture.detectChanges(); + + dispatchMouseEvent(document, 'mousemove', x, y); + fixture.changeDetectorRef.markForCheck(); + fixture.detectChanges(); +} + +/** + * Drags an element to a position on the page using the mouse. + * @param fixture Fixture on which to run change detection. + * @param element Element which is being dragged. + * @param x Position along the x axis to which to drag the element. + * @param y Position along the y axis to which to drag the element. + */ +function dragElementViaMouse( + fixture: ComponentFixture, + element: Element, + x: number, + y: number, +) { + startDraggingViaMouse(fixture, element); + + dispatchMouseEvent(document, 'mousemove', x, y); + fixture.changeDetectorRef.markForCheck(); + fixture.detectChanges(); + + dispatchMouseEvent(document, 'mouseup', x, y); + fixture.changeDetectorRef.markForCheck(); + fixture.detectChanges(); +} + +/** + * Component that passes through whatever content is projected into it. + * Used to test having drag elements being projected into a component. + */ +@Component({ + selector: 'passthrough-component', + template: '', +}) +class PassthroughComponent {} + +@Component({ + template: ` +
+
+
+ `, +}) +class StandaloneDraggable { + @ViewChild('dragElement') dragElement: ElementRef; + @ViewChild(CdkDrag) dragInstance: CdkDrag; + startedSpy = jasmine.createSpy('started spy'); + endedSpy = jasmine.createSpy('ended spy'); + releasedSpy = jasmine.createSpy('released spy'); + boundary: string | HTMLElement; + dragStartDelay: number | string | {touch: number; mouse: number}; + constrainPosition: (point: Point) => Point; + freeDragPosition?: {x: number; y: number}; +} diff --git a/src/cdk/overlay/overlay-directives.spec.ts b/src/cdk/overlay/overlay-directives.spec.ts index ce8d4d48cd74..dd36f38e5fcf 100644 --- a/src/cdk/overlay/overlay-directives.spec.ts +++ b/src/cdk/overlay/overlay-directives.spec.ts @@ -1,6 +1,6 @@ import {Directionality} from '@angular/cdk/bidi'; import {A, ESCAPE} from '@angular/cdk/keycodes'; -import {Component, ElementRef, Input, ViewChild} from '@angular/core'; +import {Component, ElementRef, ViewChild} from '@angular/core'; import { ComponentFixture, TestBed, @@ -759,24 +759,6 @@ describe('Overlay directives', () => { }); }); -describe('Overlay directives with change detection counter', () => { - beforeEach(() => { - TestBed.configureTestingModule({ - imports: [ConnectedOverlayWithCDCounter], - }).compileComponents(); - }); - - it('should detect changes caused by position change', waitForAsync(async () => { - const fixture = TestBed.createComponent(ConnectedOverlayWithCDCounter); - fixture.autoDetectChanges(); - fixture.componentInstance.isOpen = true; - fixture.changeDetectorRef.markForCheck(); - await fixture.whenStable(); - const positionChangeCounter = fixture.nativeElement.querySelector('.position-change-counter'); - expect(positionChangeCounter.innerText).toBe('1'); - })); -}); - @Component({ template: ` @@ -860,23 +842,3 @@ class ConnectedOverlayPropertyInitOrder { @ViewChild(CdkConnectedOverlay) connectedOverlayDirective: CdkConnectedOverlay; @ViewChild('trigger') trigger: CdkOverlayOrigin; } - -@Component({ - template: ` -
{{positionChangeCount}}
- - - Menu content - - `, - standalone: true, - imports: [OverlayModule], -}) -class ConnectedOverlayWithCDCounter { - @Input() isOpen = false; - positionChangeCount = 0; -} diff --git a/src/cdk/overlay/overlay-directives.zone.spec.ts b/src/cdk/overlay/overlay-directives.zone.spec.ts new file mode 100644 index 000000000000..19b79c3709e9 --- /dev/null +++ b/src/cdk/overlay/overlay-directives.zone.spec.ts @@ -0,0 +1,149 @@ +import {Component, ElementRef, NgZone, ViewChild, provideZoneChangeDetection} from '@angular/core'; +import {ComponentFixture, TestBed, inject} from '@angular/core/testing'; +import {Subject} from 'rxjs'; +import {Directionality} from '../bidi'; +import {ScrollDispatcher} from '../scrolling'; +import {Overlay} from './overlay'; +import {OverlayContainer} from './overlay-container'; +import {CdkConnectedOverlay, CdkOverlayOrigin} from './overlay-directives'; +import {OverlayModule} from './overlay-module'; +import { + ConnectionPositionPair, + FlexibleConnectedPositionStrategy, + FlexibleConnectedPositionStrategyOrigin, +} from './public-api'; +import {ScrollStrategy} from './scroll'; + +describe('Overlay directives Zone.js integration', () => { + let overlay: Overlay; + let overlayContainerElement: HTMLElement; + let fixture: ComponentFixture; + let dir: {value: string}; + let scrolledSubject = new Subject(); + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [OverlayModule, ConnectedOverlayDirectiveTest, ConnectedOverlayPropertyInitOrder], + providers: [ + provideZoneChangeDetection(), + {provide: Directionality, useFactory: () => (dir = {value: 'ltr'})}, + { + provide: ScrollDispatcher, + useFactory: () => ({ + scrolled: () => scrolledSubject, + }), + }, + ], + }); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ConnectedOverlayDirectiveTest); + fixture.changeDetectorRef.markForCheck(); + fixture.detectChanges(); + }); + + beforeEach(inject([OverlayContainer, Overlay], (oc: OverlayContainer, o: Overlay) => { + overlay = o; + overlayContainerElement = oc.getContainerElement(); + })); + + describe('outputs', () => { + it('should emit the position change handler inside the zone', () => { + let callsInZone: boolean[] = []; + + fixture.componentInstance.positionChangeHandler.and.callFake(() => { + callsInZone.push(NgZone.isInAngularZone()); + }); + fixture.componentInstance.isOpen = true; + fixture.changeDetectorRef.markForCheck(); + fixture.detectChanges(); + + expect(callsInZone).toEqual([true]); + }); + }); +}); + +@Component({ + template: ` + + + + + +

Menu content

+ `, + standalone: true, + imports: [OverlayModule], +}) +class ConnectedOverlayDirectiveTest { + @ViewChild(CdkConnectedOverlay) connectedOverlayDirective: CdkConnectedOverlay; + @ViewChild('trigger') trigger: CdkOverlayOrigin; + @ViewChild('otherTrigger') otherTrigger: CdkOverlayOrigin; + @ViewChild('nonDirectiveTrigger') nonDirectiveTrigger: ElementRef; + + isOpen = false; + width: number | string; + height: number | string; + minWidth: number | string; + positionStrategy: FlexibleConnectedPositionStrategy; + minHeight: number | string; + offsetX: number; + offsetY: number; + triggerOverride: CdkOverlayOrigin | FlexibleConnectedPositionStrategyOrigin; + hasBackdrop: boolean; + disableClose: boolean; + viewportMargin: number; + flexibleDimensions: boolean; + growAfterOpen: boolean; + push: boolean; + scrollStrategy: ScrollStrategy; + backdropClickHandler = jasmine.createSpy('backdropClick handler'); + positionChangeHandler = jasmine.createSpy('positionChange handler'); + keydownHandler = jasmine.createSpy('keydown handler'); + positionOverrides: ConnectionPositionPair[]; + attachHandler = jasmine.createSpy('attachHandler').and.callFake(() => { + const overlayElement = this.connectedOverlayDirective.overlayRef.overlayElement; + this.attachResult = overlayElement.querySelector('p') as HTMLElement; + }); + detachHandler = jasmine.createSpy('detachHandler'); + attachResult: HTMLElement; + transformOriginSelector: string; +} + +@Component({ + template: ` + + Menu content`, + standalone: true, + imports: [OverlayModule], +}) +class ConnectedOverlayPropertyInitOrder { + @ViewChild(CdkConnectedOverlay) connectedOverlayDirective: CdkConnectedOverlay; + @ViewChild('trigger') trigger: CdkOverlayOrigin; +}