Procházet zdrojové kódy

Tests: Ported percentage widget resize tests.

Marek Lewandowski před 5 roky
rodič
revize
1a37795f48
1 změnil soubory, kde provedl 77 přidání a 35 odebrání
  1. 77 35
      packages/ckeditor5-widget/tests/widgetresize.js

+ 77 - 35
packages/ckeditor5-widget/tests/widgetresize.js

@@ -311,54 +311,96 @@ describe( 'WidgetResize', () => {
 				expectedWidth: '120px'
 			} ) );
 		} );
+	} );
+
+	describe( 'integration (percents)', () => {
+		describe( 'side aligned widget', () => {
+			beforeEach( () => {
+				createResizer( {
+					unit: undefined
+				} );
+			} );
+
+			it( 'properly sets the state for subsequent resizes', () => {
+				const usedResizer = 'top-right';
+				const domParts = getWidgetDomParts( widget, usedResizer );
+				const initialPointerPosition = getHandleCenterPoint( domParts.widget, usedResizer );
 
-		/**
-		 * @param {Object} options
-		 * @param {String} options.usedHandle Handle that should be used for resize, e.g. 'bottom-right'.
-		 * @param {Object} options.movePointerBy How much should the pointer move during the drag compared to the initial position.
-		 * @param {String} options.expectedWidth
-		 */
-		function generateResizeTest( options ) {
-			return () => {
-				options = options || {};
-
-				const usedHandle = options.usedHandle;
-				const domParts = getWidgetDomParts( widget, usedHandle );
-				const initialPointerPosition = getHandleCenterPoint( domParts.widget, usedHandle );
-				const pointerDifference = options.movePointerBy;
-				const finalPointerPosition = initialPointerPosition.moveBy( pointerDifference.x, pointerDifference.y );
+				const intermediatePointerPosition = initialPointerPosition.clone().moveBy( 100, 0 );
+				mouseMock.dragTo( editor, domParts.resizeHandle, intermediatePointerPosition );
+				sinon.assert.calledWithExactly( commitStub.firstCall, '50%' );
 
+				const finalPointerPosition = intermediatePointerPosition.clone().moveBy( 100, 0 );
 				mouseMock.dragTo( editor, domParts.resizeHandle, finalPointerPosition );
-				expect( commitStub.args[ 0 ][ 0 ] ).to.be.equal( options.expectedWidth );
-				sinon.assert.calledOnce( commitStub );
-			};
-		}
-	} );
+				sinon.assert.calledWithExactly( commitStub.secondCall, '75%' );
 
-	describe( 'integration (percents)', () => {
-		beforeEach( () => {
-			createResizer( {
-				unit: undefined
+				expect( commitStub.callCount ).to.be.equal( 2 );
 			} );
+
+			it( 'shrinks correctly with bottom-left handler', generateResizeTest( {
+				usedHandle: 'bottom-left',
+				movePointerBy: { x: 10, y: -10 },
+				expectedWidth: '22.5%'
+			} ) );
 		} );
 
-		it( 'properly sets the state for subsequent resizes', () => {
-			const usedResizer = 'top-right';
-			const domParts = getWidgetDomParts( widget, usedResizer );
-			const initialPointerPosition = getHandleCenterPoint( domParts.widget, usedResizer );
+		describe( 'centered widget', () => {
+			beforeEach( () => {
+				createResizer( {
+					isCentered: () => true,
+					unit: undefined
+				} );
+			} );
 
-			const intermediatePointerPosition = initialPointerPosition.clone().moveBy( 100, 0 );
-			mouseMock.dragTo( editor, domParts.resizeHandle, intermediatePointerPosition );
-			sinon.assert.calledWithExactly( commitStub.firstCall, '50%' );
+			it( 'shrinks correctly with bottom-left handler', generateResizeTest( {
+				usedHandle: 'bottom-left',
+				movePointerBy: { x: 10, y: -10 },
+				expectedWidth: '20%'
+			} ) );
 
-			const finalPointerPosition = intermediatePointerPosition.clone().moveBy( 100, 0 );
-			mouseMock.dragTo( editor, domParts.resizeHandle, finalPointerPosition );
-			sinon.assert.calledWithExactly( commitStub.secondCall, '75%' );
+			it( 'enlarges correctly with bottom-right handler', generateResizeTest( {
+				usedHandle: 'bottom-right',
+				movePointerBy: { x: 0, y: 5 },
+				expectedWidth: '27.5%'
+			} ) );
 
-			expect( commitStub.callCount ).to.be.equal( 2 );
+			it( 'enlarges correctly an image with unsupported width unit', () => {
+				editor.editing.view.change( writer => {
+					writer.setStyle( 'width', '100pt', widget );
+				} );
+
+				generateResizeTest( {
+					usedHandle: 'bottom-right',
+					movePointerBy: { x: 0, y: 5 },
+					expectedWidth: '36.67%'
+				} )();
+			} );
 		} );
 	} );
 
+	/**
+	 * @param {Object} options
+	 * @param {String} options.usedHandle Handle that should be used for resize, e.g. 'bottom-right'.
+	 * @param {Object} options.movePointerBy How much should the pointer move during the drag compared to the initial position.
+	 * @param {String} options.expectedWidth
+	 */
+	function generateResizeTest( options ) {
+		return () => {
+			options = options || {};
+
+			const usedHandle = options.usedHandle;
+			const domParts = getWidgetDomParts( widget, usedHandle );
+			const initialPointerPosition = getHandleCenterPoint( domParts.widget, usedHandle );
+			const pointerDifference = options.movePointerBy;
+			const finalPointerPosition = initialPointerPosition.moveBy( pointerDifference.x, pointerDifference.y );
+
+			mouseMock.dragTo( editor, domParts.resizeHandle, finalPointerPosition );
+			expect( commitStub.callCount, 'call count' ).to.be.eql( 1 );
+			expect( commitStub.args[ 0 ][ 0 ], 'width' ).to.be.equal( options.expectedWidth );
+			sinon.assert.calledOnce( commitStub );
+		};
+	}
+
 	function createEditor( element ) {
 		return ClassicEditor
 			.create( element, {