Selaa lähdekoodia

Tests: Improved test coverage for image resizer.

Marek Lewandowski 6 vuotta sitten
vanhempi
commit
09f33ed4d4
1 muutettua tiedostoa jossa 105 lisäystä ja 29 poistoa
  1. 105 29
      packages/ckeditor5-image/tests/imageresize/resize.js

+ 105 - 29
packages/ckeditor5-image/tests/imageresize/resize.js

@@ -94,45 +94,121 @@ describe.only( 'Image resizer', () => {
 			viewDocument.fire( 'mousedown', domEventDataMock );
 		} );
 
-		it( 'shrinks correctly with left-bottom handler', () => {
-			const expectedWidth = 80;
+		it( 'shrinks correctly with left-bottom handler', generateResizeTest( {
+			expectedWidth: 80,
+			pointerOffset: { x: 10, y: -10 },
+			resizerPosition: 'bottom-left'
+		} ) );
+
+		it( 'shrinks correctly with right-bottom handler', generateResizeTest( {
+			expectedWidth: 80,
+			pointerOffset: { x: -10, y: -10 },
+			resizerPosition: 'bottom-right'
+		} ) );
+
+		it( 'enlarges correctly with right-bottom handler, x axis only', generateResizeTest( {
+			expectedWidth: 110,
+			pointerOffset: { x: 10, y: 0 },
+			resizerPosition: 'bottom-right'
+		} ) );
+
+		it( 'enlarges correctly with right-bottom handler, y axis only', generateResizeTest( {
+			expectedWidth: 120,
+			pointerOffset: { x: 0, y: 10 },
+			resizerPosition: 'bottom-right'
+		} ) );
+
+		it( 'enlarges correctly with left-bottom handler, x axis only', generateResizeTest( {
+			expectedWidth: 110,
+			pointerOffset: { x: -10, y: 0 },
+			resizerPosition: 'bottom-left'
+		} ) );
+
+		it( 'enlarges correctly with left-bottom handler, y axis only', generateResizeTest( {
+			expectedWidth: 120,
+			pointerOffset: { x: 0, y: 10 },
+			resizerPosition: 'bottom-left'
+		} ) );
+
+		// --- top handlers ---
+
+		it( 'enlarges correctly with left-top handler', generateResizeTest( {
+			expectedWidth: 120,
+			pointerOffset: { x: -10, y: -10 },
+			resizerPosition: 'top-left'
+		} ) );
+
+		it( 'enlarges correctly with left-top handler, y axis only', generateResizeTest( {
+			expectedWidth: 120,
+			pointerOffset: { x: 0, y: -10 },
+			resizerPosition: 'top-left'
+		} ) );
+
+		it( 'enlarges correctly with right-top handler', generateResizeTest( {
+			expectedWidth: 120,
+			pointerOffset: { x: 10, y: -10 },
+			resizerPosition: 'top-right'
+		} ) );
+
+		it( 'enlarges correctly with left-right handler, y axis only', generateResizeTest( {
+			expectedWidth: 120,
+			pointerOffset: { x: 0, y: -10 },
+			resizerPosition: 'top-right'
+		} ) );
+
+		function generateResizeTest( options ) {
+			// options.resizerPosition - top-left / top-right / bottom-right / bottom-left
+			// options.pointerOffset - object - pointer offset relative to the dragged corner. Negative values are perfectly fine.
+			// e.g. { x: 10, y: -5 }
+			// options.expectedWidth
+			// Returns a test case that puts
+			return () => {
+				const domResizeWrapper = view.domConverter.mapViewToDom( widget.getChild( 1 ) );
+				const domBottomLeftResizer = domResizeWrapper.querySelector( `.ck-widget__resizer-${ options.resizerPosition }` );
+				const domImage = view.domConverter.mapViewToDom( widget ).querySelector( 'img' );
+				const imageTopLeftPosition = getElementPosition( domImage );
+				const resizerPositionParts = options.resizerPosition.split( '-' );
+
+				const initialPointerPosition = {
+					pageX: imageTopLeftPosition.x,
+					pageY: imageTopLeftPosition.y
+				};
 
-			const domResizeWrapper = view.domConverter.mapViewToDom( widget.getChild( 1 ) );
-			const domBottomLeftResizer = domResizeWrapper.querySelector( '.ck-widget__resizer-bottom-left' );
-			const domImage = view.domConverter.mapViewToDom( widget ).querySelector( 'img' );
-			const imageTopLeftPosition = getElementPosition( domImage );
+				if ( resizerPositionParts.includes( 'right' ) ) {
+					initialPointerPosition.pageX += FIXTURE_WIDTH;
+				}
 
-			const initialPointerPosition = {
-				pageX: imageTopLeftPosition.x,
-				pageY: imageTopLeftPosition.y + FIXTURE_HEIGHT
-			};
+				if ( resizerPositionParts.includes( 'bottom' ) ) {
+					initialPointerPosition.pageY += FIXTURE_HEIGHT;
+				}
 
-			const finishPointerPosition = {
-				pageX: imageTopLeftPosition.x + 10,
-				pageY: imageTopLeftPosition.y + FIXTURE_HEIGHT - 10
-			};
+				const finishPointerPosition = Object.assign( {}, initialPointerPosition );
 
-			fireMouseEvent( domBottomLeftResizer, 'mousedown', initialPointerPosition );
-			fireMouseEvent( domBottomLeftResizer, 'mousemove', initialPointerPosition );
+				finishPointerPosition.pageX += options.pointerOffset.x || 0;
+				finishPointerPosition.pageY += options.pointerOffset.y || 0;
 
-			// We need to wait as mousemove events are throttled.
-			return wait( 30 )
-				.then( () => {
-					fireMouseEvent( domBottomLeftResizer, 'mousemove', finishPointerPosition );
+				fireMouseEvent( domBottomLeftResizer, 'mousedown', initialPointerPosition );
+				fireMouseEvent( domBottomLeftResizer, 'mousemove', initialPointerPosition );
 
-					expect( domImage.width ).to.be.closeTo( expectedWidth, 1, 'View width check' );
+				// We need to wait as mousemove events are throttled.
+				return wait( 30 )
+					.then( () => {
+						fireMouseEvent( domBottomLeftResizer, 'mousemove', finishPointerPosition );
 
-					fireMouseEvent( domBottomLeftResizer, 'mouseup', finishPointerPosition );
+						expect( domImage.width ).to.be.closeTo( options.expectedWidth, 1 );
 
-					expect( getData( editor.model, {
-						withoutSelection: true
-					} ) ).to.match( /<paragraph>foo<\/paragraph><image src=".+?" width="(\d+)"><\/image>/ );
+						fireMouseEvent( domBottomLeftResizer, 'mouseup', finishPointerPosition );
 
-					const modelItem = editor.model.document.getRoot().getChild( 1 );
+						expect( getData( editor.model, {
+							withoutSelection: true
+						} ) ).to.match( /<paragraph>foo<\/paragraph><image src=".+?" width="(\d+)"><\/image>/ );
 
-					expect( modelItem.getAttribute( 'width' ) ).to.be.closeTo( expectedWidth, 1, 'Model check' );
-				} );
-		} );
+						const modelItem = editor.model.document.getRoot().getChild( 1 );
+
+						expect( modelItem.getAttribute( 'width' ) ).to.be.closeTo( options.expectedWidth, 1, 'Model check' );
+					} );
+			};
+		}
 	} );
 
 	describe( 'side image', () => {