test: share drag&drop test utils

Author: mmalerba

src/cdk/drag-drop/directives/drag.spec.ts

@@ -37,6 +37,20 @@ import {CdkDrag} from './drag';
 import {CdkDragHandle} from './drag-handle';
 import {CdkDropList} from './drop-list';
 import {CdkDropListGroup} from './drop-list-group';
+import {
+  assertDownwardSorting,
+  assertUpwardSorting,
+  continueDraggingViaTouch,
+  dragElementViaMouse,
+  dragElementViaTouch,
+  getElementIndexByPosition,
+  getElementSibligsByPosition,
+  makeScrollable,
+  startDraggingViaMouse,
+  startDraggingViaTouch,
+  stopDraggingViaTouch,
+  tickAnimationFrames,
+} from './test-utils.spec';
 
 const ITEM_HEIGHT = 25;
 const ITEM_WIDTH = 75;
@@ -8501,201 +8515,3 @@ class DraggableNgContainerWithAlternateRoot {
   @ViewChild('dragRoot') dragRoot: ElementRef<HTMLElement>;
   @ViewChild(CdkDrag) dragInstance: CdkDrag;
 }
-
-/**
- * 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<any>,
-  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();
-}
-
-/**
- * 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<any>,
-  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 a touch device.
- * @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 dragElementViaTouch(
-  fixture: ComponentFixture<any>,
-  element: Element,
-  x: number,
-  y: number,
-) {
-  startDraggingViaTouch(fixture, element);
-  continueDraggingViaTouch(fixture, x, y);
-  stopDraggingViaTouch(fixture, x, y);
-}
-
-/**
- * @param fixture Fixture on which to run change detection.
- * @param element Element which is being dragged.
- */
-function startDraggingViaTouch(fixture: ComponentFixture<any>, element: Element) {
-  dispatchTouchEvent(element, 'touchstart');
-  fixture.changeDetectorRef.markForCheck();
-  fixture.detectChanges();
-
-  dispatchTouchEvent(document, 'touchmove');
-  fixture.changeDetectorRef.markForCheck();
-  fixture.detectChanges();
-}
-
-/**
- * @param fixture Fixture on which to run change detection.
- * @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 continueDraggingViaTouch(fixture: ComponentFixture<any>, x: number, y: number) {
-  dispatchTouchEvent(document, 'touchmove', x, y);
-  fixture.changeDetectorRef.markForCheck();
-  fixture.detectChanges();
-}
-
-/**
- * @param fixture Fixture on which to run change detection.
- * @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 stopDraggingViaTouch(fixture: ComponentFixture<any>, x: number, y: number) {
-  dispatchTouchEvent(document, 'touchend', x, y);
-  fixture.changeDetectorRef.markForCheck();
-  fixture.detectChanges();
-}
-
-/** Gets the index of an element among its siblings, based on their position on the page. */
-function getElementIndexByPosition(element: Element, direction: 'top' | 'left') {
-  return getElementSibligsByPosition(element, direction).indexOf(element);
-}
-
-/** Gets the siblings of an element, sorted by their position on the page. */
-function getElementSibligsByPosition(element: Element, direction: 'top' | 'left') {
-  return element.parentElement
-    ? Array.from(element.parentElement.children).sort((a, b) => {
-        return a.getBoundingClientRect()[direction] - b.getBoundingClientRect()[direction];
-      })
-    : [];
-}
-
-/**
- * Adds a large element to the page in order to make it scrollable.
- * @returns Function that should be used to clean up after the test is done.
- */
-function makeScrollable(
-  direction: 'vertical' | 'horizontal' = 'vertical',
-  element = document.body,
-) {
-  const veryTallElement = document.createElement('div');
-  veryTallElement.style.width = direction === 'vertical' ? '100%' : '4000px';
-  veryTallElement.style.height = direction === 'vertical' ? '2000px' : '5px';
-  element.appendChild(veryTallElement);
-
-  return () => {
-    scrollTo(0, 0);
-    veryTallElement.remove();
-  };
-}
-
-/**
- * Asserts that sorting an element down works correctly.
- * @param fixture Fixture against which to run the assertions.
- * @param items Array of items against which to test sorting.
- */
-function assertDownwardSorting(fixture: ComponentFixture<any>, items: Element[]) {
-  const draggedItem = items[0];
-  const {top, left} = draggedItem.getBoundingClientRect();
-
-  startDraggingViaMouse(fixture, draggedItem, left, top);
-
-  const placeholder = document.querySelector('.cdk-drag-placeholder')! as HTMLElement;
-
-  // Drag over each item one-by-one going downwards.
-  for (let i = 0; i < items.length; i++) {
-    const elementRect = items[i].getBoundingClientRect();
-
-    // Add a few pixels to the top offset so we get some overlap.
-    dispatchMouseEvent(document, 'mousemove', elementRect.left, elementRect.top + 5);
-    fixture.changeDetectorRef.markForCheck();
-    fixture.detectChanges();
-    expect(getElementIndexByPosition(placeholder, 'top')).toBe(i);
-  }
-
-  dispatchMouseEvent(document, 'mouseup');
-  fixture.changeDetectorRef.markForCheck();
-  fixture.detectChanges();
-  flush();
-}
-
-/**
- * Asserts that sorting an element up works correctly.
- * @param fixture Fixture against which to run the assertions.
- * @param items Array of items against which to test sorting.
- */
-function assertUpwardSorting(fixture: ComponentFixture<any>, items: Element[]) {
-  const draggedItem = items[items.length - 1];
-  const {top, left} = draggedItem.getBoundingClientRect();
-
-  startDraggingViaMouse(fixture, draggedItem, left, top);
-
-  const placeholder = document.querySelector('.cdk-drag-placeholder')! as HTMLElement;
-
-  // Drag over each item one-by-one going upwards.
-  for (let i = items.length - 1; i > -1; i--) {
-    const elementRect = items[i].getBoundingClientRect();
-
-    // Remove a few pixels from the bottom offset so we get some overlap.
-    dispatchMouseEvent(document, 'mousemove', elementRect.left, elementRect.bottom - 5);
-    fixture.changeDetectorRef.markForCheck();
-    fixture.detectChanges();
-    expect(getElementIndexByPosition(placeholder, 'top')).toBe(i);
-  }
-
-  dispatchMouseEvent(document, 'mouseup');
-  fixture.changeDetectorRef.markForCheck();
-  fixture.detectChanges();
-  flush();
-}
-
-/** Ticks the specified amount of `requestAnimationFrame`-s. */
-function tickAnimationFrames(amount: number) {
-  tick(16.6 * amount); // Angular turns rAF calls into 16.6ms timeouts in tests.
-}

src/cdk/drag-drop/directives/drag.zone.spec.ts

@@ -1,5 +1,4 @@
 import {CdkScrollableModule} from '@angular/cdk/scrolling';
-import {dispatchMouseEvent} from '@angular/cdk/testing/private';
 import {
   Component,
   ElementRef,
@@ -15,6 +14,7 @@ import {DragDropModule} from '../drag-drop-module';
 import {Point} from '../drag-ref';
 import {CDK_DRAG_CONFIG, DragDropConfig} from './config';
 import {CdkDrag} from './drag';
+import {dragElementViaMouse} from './test-utils.spec';
 
 describe('CdkDrag Zone.js integration', () => {
   function createComponent<T>(
@@ -72,52 +72,6 @@ describe('CdkDrag Zone.js integration', () => {
   });
 });
 
-/**
- * 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<any>,
-  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<any>,
-  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.