浏览代码

Tests: Added resizer integration test for tables and proper focus mocking in unit tests.

Marek Lewandowski 6 年之前
父节点
当前提交
04226bfd4d
共有 1 个文件被更改,包括 75 次插入18 次删除
  1. 75 18
      packages/ckeditor5-image/tests/imageresize/resize.js

+ 75 - 18
packages/ckeditor5-image/tests/imageresize/resize.js

@@ -5,12 +5,14 @@
 
 /* global document, window */
 
-import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
+// ClassicTestEditor can't be used, as it doesn't handle the focus, which is needed to test resizer visual cues.
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
 
 import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import ImagePlugin from '../../src/image';
 import ImageStyle from '../../src/imagestyle';
 import UndoPlugin from '@ckeditor/ckeditor5-undo/src/undo';
+import TablePlugin from '@ckeditor/ckeditor5-table/src/table';
 
 import {
 	getData
@@ -31,9 +33,9 @@ describe.only( 'Image resizer', () => {
 
 		document.body.appendChild( editorElement );
 
-		return ClassicTestEditor
+		return ClassicEditor
 			.create( editorElement, {
-				plugins: [ ImagePlugin, ImageStyle, ParagraphPlugin, UndoPlugin ]
+				plugins: [ ImagePlugin, ImageStyle, ParagraphPlugin, UndoPlugin, TablePlugin ]
 			} )
 			.then( newEditor => {
 				editor = newEditor;
@@ -71,6 +73,8 @@ describe.only( 'Image resizer', () => {
 					preventDefault: sinon.spy()
 				};
 
+				focusEditor( editor );
+
 				viewDocument.fire( 'mousedown', domEventDataMock );
 
 				for ( const resizer of allResizers ) {
@@ -207,7 +211,7 @@ describe.only( 'Image resizer', () => {
 			viewDocument.fire( 'mousedown', domEventDataMock );
 		} );
 
-		it( 'shrinks correctly with left-bottom handler', generateResizeTest( {
+		it( 'shrinks correctly with left-bottom handler', generateSideResizeTest( {
 			isSideImage: true,
 			expectedWidth: 80,
 			pointerOffset: {
@@ -217,7 +221,7 @@ describe.only( 'Image resizer', () => {
 			resizerPosition: 'bottom-left'
 		} ) );
 
-		it( 'shrinks correctly with right-bottom handler', generateResizeTest( {
+		it( 'shrinks correctly with right-bottom handler', generateSideResizeTest( {
 			isSideImage: true,
 			expectedWidth: 80,
 			pointerOffset: {
@@ -227,7 +231,7 @@ describe.only( 'Image resizer', () => {
 			resizerPosition: 'bottom-right'
 		} ) );
 
-		it( 'shrinks correctly with left-top handler', generateResizeTest( {
+		it( 'shrinks correctly with left-top handler', generateSideResizeTest( {
 			isSideImage: true,
 			expectedWidth: 80,
 			pointerOffset: {
@@ -237,7 +241,7 @@ describe.only( 'Image resizer', () => {
 			resizerPosition: 'top-left'
 		} ) );
 
-		it( 'shrinks correctly with right-top handler', generateResizeTest( {
+		it( 'shrinks correctly with right-top handler', generateSideResizeTest( {
 			isSideImage: true,
 			expectedWidth: 80,
 			pointerOffset: {
@@ -247,7 +251,7 @@ describe.only( 'Image resizer', () => {
 			resizerPosition: 'top-right'
 		} ) );
 
-		it( 'enlarges correctly with left-bottom handler', generateResizeTest( {
+		it( 'enlarges correctly with left-bottom handler', generateSideResizeTest( {
 			isSideImage: true,
 			expectedWidth: 120,
 			pointerOffset: {
@@ -257,7 +261,7 @@ describe.only( 'Image resizer', () => {
 			resizerPosition: 'bottom-left'
 		} ) );
 
-		it( 'enlarges correctly with right-bottom handler', generateResizeTest( {
+		it( 'enlarges correctly with right-bottom handler', generateSideResizeTest( {
 			isSideImage: true,
 			expectedWidth: 120,
 			pointerOffset: {
@@ -267,7 +271,7 @@ describe.only( 'Image resizer', () => {
 			resizerPosition: 'bottom-right'
 		} ) );
 
-		it( 'enlarges correctly with right-bottom handler, y axis only', generateResizeTest( {
+		it( 'enlarges correctly with right-bottom handler, y axis only', generateSideResizeTest( {
 			isSideImage: true,
 			expectedWidth: 140,
 			pointerOffset: {
@@ -277,7 +281,7 @@ describe.only( 'Image resizer', () => {
 			resizerPosition: 'bottom-right'
 		} ) );
 
-		it( 'enlarges correctly with right-bottom handler, x axis only', generateResizeTest( {
+		it( 'enlarges correctly with right-bottom handler, x axis only', generateSideResizeTest( {
 			isSideImage: true,
 			expectedWidth: 140,
 			pointerOffset: {
@@ -287,7 +291,7 @@ describe.only( 'Image resizer', () => {
 			resizerPosition: 'bottom-right'
 		} ) );
 
-		it( 'enlarges correctly with left-top handler', generateResizeTest( {
+		it( 'enlarges correctly with left-top handler', generateSideResizeTest( {
 			isSideImage: true,
 			expectedWidth: 120,
 			pointerOffset: {
@@ -297,7 +301,7 @@ describe.only( 'Image resizer', () => {
 			resizerPosition: 'top-left'
 		} ) );
 
-		it( 'enlarges correctly with right-top handler', generateResizeTest( {
+		it( 'enlarges correctly with right-top handler', generateSideResizeTest( {
 			isSideImage: true,
 			expectedWidth: 120,
 			pointerOffset: {
@@ -306,6 +310,13 @@ describe.only( 'Image resizer', () => {
 			},
 			resizerPosition: 'top-right'
 		} ) );
+
+		function generateSideResizeTest( options ) {
+			return generateResizeTest( Object.assign( {
+				isSideImage: true,
+				modelRegExp: /<paragraph>foo<\/paragraph><image imageStyle="side" src=".+?" width="(\d+)"><\/image>/
+			}, options ) );
+		}
 	} );
 
 	describe( 'undo integration', function() {
@@ -345,6 +356,45 @@ describe.only( 'Image resizer', () => {
 		} );
 	} );
 
+	describe( 'integration', function() {
+		beforeEach( async function() {
+			await editor.setData( `<figure class="table">
+				<table>
+					<tbody>
+						<tr>
+							<td>
+								<figure class="image"><img src="${ imageFixture }" alt="Sample image">
+								</figure>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</figure>` );
+
+			this.widget = viewDocument.getRoot().getChild( 0 ).getChild( 1 ).getChild( 0 ).getChild( 0 ).getChild( 0 ).getChild( 0 );
+
+			const domEventDataMock = {
+				target: this.widget,
+				preventDefault: sinon.spy()
+			};
+
+			viewDocument.fire( 'mousedown', domEventDataMock );
+		} );
+
+		it( 'works when resizing in a table', function() {
+			return generateResizeTest( {
+				getModel: () => editor.model.document.getRoot().getChild( 0 ).getChild( 0 ).getChild( 0 ).getChild( 0 ),
+				expectedWidth: 60,
+				modelRegExp: /.+/,
+				pointerOffset: {
+					x: -40,
+					y: -20
+				},
+				resizerPosition: 'bottom-right'
+			} );
+		} );
+	} );
+
 	function isVisible( element ) {
 		// Checks if the DOM element is visible to the end user.
 		return element.offsetParent !== null;
@@ -390,6 +440,11 @@ describe.only( 'Image resizer', () => {
 			const imageTopLeftPosition = getElementPosition( domImage );
 			const resizerPositionParts = options.resizerPosition.split( '-' );
 
+			const modelRegExp = options.modelRegExp ? options.modelRegExp :
+				/<paragraph>foo<\/paragraph><image src=".+?" width="(\d+)"><\/image>/;
+
+			focusEditor( editor );
+
 			const initialPointerPosition = {
 				pageX: imageTopLeftPosition.x,
 				pageY: imageTopLeftPosition.y
@@ -420,17 +475,19 @@ describe.only( 'Image resizer', () => {
 
 					fireMouseEvent( domBottomLeftResizer, 'mouseup', finishPointerPosition );
 
-					const modelDataRegExp = !options.isSideImage ? /<paragraph>foo<\/paragraph><image src=".+?" width="(\d+)"><\/image>/ :
-						/<paragraph>foo<\/paragraph><image imageStyle="side" src=".+?" width="(\d+)"><\/image>/;
-
 					expect( getData( editor.model, {
 						withoutSelection: true
-					} ) ).to.match( modelDataRegExp );
+					} ) ).to.match( modelRegExp );
 
-					const modelItem = editor.model.document.getRoot().getChild( 1 );
+					const modelItem = options.getModel ? options.getModel() : editor.model.document.getRoot().getChild( 1 );
 
 					expect( modelItem.getAttribute( 'width' ) ).to.be.closeTo( options.expectedWidth, 1, 'Model check' );
 				} );
 		};
 	}
+
+	function focusEditor( editor ) {
+		editor.editing.view.focus();
+		editor.ui.focusTracker.isFocused = true;
+	}
 } );