Selaa lähdekoodia

Tests: Added mouseMock.dragTo method, introduced Point class, changed returned type of getHandleCenterPoint().

Marek Lewandowski 5 vuotta sitten
vanhempi
commit
883e57e1d4

+ 32 - 75
packages/ckeditor5-widget/tests/widgetresize.js

@@ -11,40 +11,16 @@ import WidgetResize from '../src/widgetresize';
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
 import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
 
-import {
-	toWidget
-} from '../src/utils';
-import {
-	setData as setModelData
-} from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
+import { toWidget } from '../src/utils';
+import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 
 import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
+import { mouseMock, Point } from './widgetresize/_utils/utils';
 
 describe( 'WidgetResize', () => {
 	let editor, editorElement, widget, mouseListenerSpies;
 
 	const commitStub = sinon.stub();
-	const mouseMock = {
-		down( editor, domTarget ) {
-			this._getPlugin( editor )._mouseDownListener( {}, {
-				target: domTarget
-			} );
-		},
-		move( editor, domTarget, eventData ) {
-			const combinedEventData = Object.assign( {}, eventData, {
-				target: domTarget
-			} );
-
-			this._getPlugin( editor )._mouseMoveListener( {}, combinedEventData );
-		},
-		up() {
-			this._getPlugin( editor )._mouseUpListener();
-		},
-
-		_getPlugin( editor ) {
-			return editor.plugins.get( WidgetResize );
-		}
-	};
 
 	before( () => {
 		mouseListenerSpies = {
@@ -112,15 +88,10 @@ describe( 'WidgetResize', () => {
 		it( 'passes new width to the options.onCommit()', async () => {
 			const usedResizer = 'top-right';
 			const domParts = getWidgetDomParts( widget, usedResizer );
-			const initialPointerPosition = getElementCenterPoint( domParts.widget, usedResizer );
-			const finalPointerPosition = Object.assign( {}, initialPointerPosition );
-
-			finalPointerPosition.pageX += 20;
+			const initialPointerPosition = getHandleCenterPoint( domParts.widget, usedResizer );
+			const finalPointerPosition = initialPointerPosition.moveBy( 20, 0 );
 
-			mouseMock.down( editor, domParts.resizeHandle );
-
-			mouseMock.move( editor, domParts.resizeHandle, finalPointerPosition );
-			mouseMock.up();
+			mouseMock.dragTo( editor, domParts.resizeHandle, finalPointerPosition );
 
 			expect( commitStub.callCount ).to.be.equal( 1 );
 			sinon.assert.calledWithExactly( commitStub, '120px' );
@@ -146,14 +117,12 @@ describe( 'WidgetResize', () => {
 
 		const usedResizer = 'top-right';
 		const domParts = getWidgetDomParts( widget, usedResizer );
-		const initialPointerPosition = getElementCenterPoint( domParts.widget, usedResizer );
+		const initialPointerPosition = getHandleCenterPoint( domParts.widget, usedResizer );
 
 		editor.plugins.get( WidgetResize )._getResizerByHandle = sinon.stub().returns( null );
 
-		mouseMock.down( editor, domParts.resizeHandle );
-
-		mouseMock.move( editor, domParts.resizeHandle, initialPointerPosition );
-		mouseMock.up();
+		mouseMock.dragTo( editor, domParts.resizeHandle, initialPointerPosition );
+		// No exception should be thrown.
 	} );
 
 	describe( 'Integration (pixels)', () => {
@@ -166,21 +135,13 @@ describe( 'WidgetResize', () => {
 		it( 'properly sets the state for subsequent resizes', async () => {
 			const usedResizer = 'top-right';
 			const domParts = getWidgetDomParts( widget, usedResizer );
-			const initialPointerPosition = getElementCenterPoint( domParts.widget, usedResizer );
-			const finalPointerPosition = Object.assign( {}, initialPointerPosition );
+			const initialPointerPosition = getHandleCenterPoint( domParts.widget, usedResizer );
 
-			finalPointerPosition.pageX += 50;
+			const intermediatePointerPosition = initialPointerPosition.moveBy( 50, 0 );
+			mouseMock.dragTo( editor, domParts.resizeHandle, intermediatePointerPosition );
 
-			mouseMock.down( editor, domParts.resizeHandle );
-
-			mouseMock.move( editor, domParts.resizeHandle, finalPointerPosition );
-			mouseMock.up();
-
-			mouseMock.down( editor, domParts.resizeHandle );
-
-			finalPointerPosition.pageX += 50;
-			mouseMock.move( editor, domParts.resizeHandle, finalPointerPosition );
-			mouseMock.up();
+			const finalPointerPosition = intermediatePointerPosition.moveBy( 50, 0 );
+			mouseMock.dragTo( editor, domParts.resizeHandle, finalPointerPosition );
 
 			expect( commitStub.callCount ).to.be.equal( 2 );
 			sinon.assert.calledWithExactly( commitStub.firstCall, '150px' );
@@ -205,21 +166,13 @@ describe( 'WidgetResize', () => {
 		it( 'properly sets the state for subsequent resizes', async () => {
 			const usedResizer = 'top-right';
 			const domParts = getWidgetDomParts( widget, usedResizer );
-			const initialPointerPosition = getElementCenterPoint( domParts.widget, usedResizer );
-			const finalPointerPosition = Object.assign( {}, initialPointerPosition );
-
-			finalPointerPosition.pageX += 100;
+			const initialPointerPosition = getHandleCenterPoint( domParts.widget, usedResizer );
 
-			mouseMock.down( editor, domParts.resizeHandle );
+			const intermediatePointerPosition = initialPointerPosition.moveBy( 100, 0 );
+			mouseMock.dragTo( editor, domParts.resizeHandle, intermediatePointerPosition );
 
-			mouseMock.move( editor, domParts.resizeHandle, finalPointerPosition );
-			mouseMock.up();
-
-			mouseMock.down( editor, domParts.resizeHandle );
-
-			finalPointerPosition.pageX += 100;
-			mouseMock.move( editor, domParts.resizeHandle, finalPointerPosition );
-			mouseMock.up();
+			const finalPointerPosition = intermediatePointerPosition.moveBy( 100, 0 );
+			mouseMock.dragTo( editor, domParts.resizeHandle, finalPointerPosition );
 
 			expect( commitStub.callCount ).to.be.equal( 2 );
 			sinon.assert.calledWithExactly( commitStub.firstCall, '50%' );
@@ -298,23 +251,27 @@ describe( 'WidgetResize', () => {
 		};
 	}
 
-	function getElementCenterPoint( domWrapper, cornerPosition ) {
+	/**
+	 * Returns a center point for a given handle.
+	 *
+	 * @param {HTMLElement} domWrapper Wrapper of an element that contains the resizer.
+	 * @param {String} [handlePosition='top-left']
+	 * @returns {Point}
+	 */
+	function getHandleCenterPoint( domWrapper, handlePosition ) {
 		const wrapperRect = new Rect( domWrapper );
-		const initialPointerPosition = {
-			pageX: wrapperRect.left,
-			pageY: wrapperRect.top
-		};
-		const cornerPositionParts = cornerPosition.split( '-' );
+		let returnValue = new Point( wrapperRect.left, wrapperRect.top );
+		const cornerPositionParts = handlePosition.split( '-' );
 
 		if ( cornerPositionParts.includes( 'right' ) ) {
-			initialPointerPosition.pageX = wrapperRect.right;
+			returnValue = returnValue.moveToX( wrapperRect.right );
 		}
 
 		if ( cornerPositionParts.includes( 'bottom' ) ) {
-			initialPointerPosition.pageY = wrapperRect.bottom;
+			returnValue = returnValue.moveToY( wrapperRect.bottom );
 		}
 
-		return initialPointerPosition;
+		return returnValue;
 	}
 
 	function focusEditor( editor ) {

+ 95 - 0
packages/ckeditor5-widget/tests/widgetresize/_utils/utils.js

@@ -0,0 +1,95 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+import WidgetResize from '../../../src/widgetresize';
+
+export const mouseMock = {
+	down( editor, domTarget ) {
+		this._getPlugin( editor )._mouseDownListener( {}, {
+			target: domTarget
+		} );
+	},
+	move( editor, domTarget, eventData ) {
+		const combinedEventData = Object.assign( {}, eventData, {
+			target: domTarget
+		} );
+
+		this._getPlugin( editor )._mouseMoveListener( {}, combinedEventData );
+	},
+	up( editor ) {
+		this._getPlugin( editor )._mouseUpListener();
+	},
+
+	/**
+	 * Emulates mouse drag gesture by triggering:
+	 *
+	 * * the `mousedown` event on the `domTarget`,
+	 * * the `mousemove` event on `domTarget`, with the pointer coordinates at `finalPosition`,
+	 * * the `mouseup` event.
+	 *
+	 * @param {module:core/editor/editor~Editor} editor
+	 * @param {HTMLElement} domTarget
+	 * @param {Point} finalPosition
+	 */
+	dragTo( editor, domTarget, finalPosition ) {
+		const moveEventData = {
+			pageX: finalPosition.x,
+			pageY: finalPosition.y
+		};
+
+		this.down( editor, domTarget );
+		this.move( editor, domTarget, moveEventData );
+		this.up( editor );
+	},
+
+	_getPlugin( editor ) {
+		return editor.plugins.get( WidgetResize );
+	}
+};
+
+export class Point {
+	constructor( x, y ) {
+		/**
+		 * @readonly
+		 */
+		this.x = x;
+
+		/**
+		 * @readonly
+		 */
+		this.y = y;
+	}
+
+	/**
+	 * Moves the point by a given `changeX` and `changeY` and returns it as a **new instance**.
+	 *
+	 * @param {Number} changeX
+	 * @param {Number} changeY
+	 * @returns {Point}
+	 */
+	moveBy( changeX, changeY ) {
+		return new Point( this.x + changeX, this.y + changeY );
+	}
+
+	/**
+	 * Moves the point to a given position in x axis and returns it as a **new instance**.
+	 *
+	 * @param {Number} x
+	 * @returns {Point}
+	 */
+	moveToX( x ) {
+		return new Point( x, this.y );
+	}
+
+	/**
+	 * Moves the point to a given position in y axis and returns it as a **new instance**.
+	 *
+	 * @param {Number} y
+	 * @returns {Point}
+	 */
+	moveToY( y ) {
+		return new Point( this.x, y );
+	}
+}