Przeglądaj źródła

Refactor ImageResizeHandles unit test.

panr 5 lat temu
rodzic
commit
6ddb8fab25

+ 34 - 58
packages/ckeditor5-image/tests/imageresize/imageresizehandles.js

@@ -36,40 +36,18 @@ describe( 'ImageResizeHandles', () => {
 	const IMAGE_SRC_FIXTURE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAyCAQAAAAAPLY1AAAAQklEQVR42u3PQREAAAgDoK1/' +
 	const IMAGE_SRC_FIXTURE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAyCAQAAAAAPLY1AAAAQklEQVR42u3PQREAAAgDoK1/' +
 		'aM3g14MGNJMXKiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiJysRFNMgH0RpujAAAAAElFTkSuQmCC';
 		'aM3g14MGNJMXKiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiJysRFNMgH0RpujAAAAAElFTkSuQmCC';
 
 
-	let absoluteContainer, widget, editor, view, viewDocument, editorElement;
-
-	before( () => {
-		// This container is required to position editor element in a reliable element.
-		// @todo ensure whether it's required after migrating the tests.
-		absoluteContainer = document.createElement( 'div' );
-		absoluteContainer.style.top = '50px';
-		absoluteContainer.style.left = '50px';
-		absoluteContainer.style.height = '1000px';
-		absoluteContainer.style.width = '500px';
-		absoluteContainer.style.position = 'absolute';
-		document.body.appendChild( absoluteContainer );
-	} );
+	let widget, editor, view, viewDocument, editorElement;
 
 
-	after( () => {
-		absoluteContainer.remove();
+	beforeEach( () => {
+		editorElement = document.createElement( 'div' );
+		document.body.appendChild( editorElement );
 	} );
 	} );
 
 
-	beforeEach( () => createEditor() );
-
-	afterEach( () => {
-		const wrappers = Array.from( document.querySelectorAll( '.ck-body-wrapper' ) );
+	afterEach( async () => {
+		editorElement.remove();
 
 
 		if ( editor ) {
 		if ( editor ) {
-			editor.destroy();
-		}
-
-		if ( editorElement ) {
-			editorElement.remove();
-		}
-
-		// We need to remove all leftovers manually.
-		for ( const wrapper of wrappers ) {
-			wrapper.remove();
+			await editor.destroy();
 		}
 		}
 	} );
 	} );
 
 
@@ -89,10 +67,16 @@ describe( 'ImageResizeHandles', () => {
 		expect( attachToSpy.args[ 0 ][ 0 ] ).to.have.a.property( 'unit', '%' );
 		expect( attachToSpy.args[ 0 ][ 0 ] ).to.have.a.property( 'unit', '%' );
 
 
 		attachToSpy.restore();
 		attachToSpy.restore();
+
+		localEditor.destroy();
 	} );
 	} );
 
 
 	describe( 'command', () => {
 	describe( 'command', () => {
-		it( 'uses the command on commit', () => {
+		beforeEach( async () => {
+			editor = await createEditor();
+		} );
+
+		it( 'uses the command on commit', async () => {
 			const spy = sinon.spy( editor.commands.get( 'imageResize' ), 'execute' );
 			const spy = sinon.spy( editor.commands.get( 'imageResize' ), 'execute' );
 
 
 			setData( editor.model, `<paragraph>foo</paragraph>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]` );
 			setData( editor.model, `<paragraph>foo</paragraph>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]` );
@@ -107,7 +91,7 @@ describe( 'ImageResizeHandles', () => {
 			expect( spy.args[ 0 ][ 0 ] ).to.deep.equal( { width: '80px' } );
 			expect( spy.args[ 0 ][ 0 ] ).to.deep.equal( { width: '80px' } );
 		} );
 		} );
 
 
-		it( 'disables the resizer if the command is disabled', () => {
+		it( 'disables the resizer if the command is disabled', async () => {
 			setData( editor.model, `<paragraph>foo</paragraph>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]` );
 			setData( editor.model, `<paragraph>foo</paragraph>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]` );
 
 
 			const resizer = getSelectedImageResizer( editor );
 			const resizer = getSelectedImageResizer( editor );
@@ -127,7 +111,7 @@ describe( 'ImageResizeHandles', () => {
 			expect( resizer.isEnabled ).to.be.true;
 			expect( resizer.isEnabled ).to.be.true;
 		} );
 		} );
 
 
-		it( 'the resizer is disabled from the beginning when the command is disabled when the image is inserted', () => {
+		it( 'the resizer is disabled from the beginning when the command is disabled when the image is inserted', async () => {
 			setData( editor.model, '<paragraph>foo[]</paragraph>' );
 			setData( editor.model, '<paragraph>foo[]</paragraph>' );
 
 
 			editor.commands.get( 'imageResize' ).on( 'set:isEnabled', evt => {
 			editor.commands.get( 'imageResize' ).on( 'set:isEnabled', evt => {
@@ -150,7 +134,7 @@ describe( 'ImageResizeHandles', () => {
 
 
 	describe( 'side image resizing', () => {
 	describe( 'side image resizing', () => {
 		beforeEach( async () => {
 		beforeEach( async () => {
-			await createEditor();
+			editor = await createEditor();
 
 
 			setData( editor.model, `<paragraph>foo</paragraph>[<image imageStyle="side" src="${ IMAGE_SRC_FIXTURE }"></image>]` );
 			setData( editor.model, `<paragraph>foo</paragraph>[<image imageStyle="side" src="${ IMAGE_SRC_FIXTURE }"></image>]` );
 
 
@@ -192,7 +176,7 @@ describe( 'ImageResizeHandles', () => {
 
 
 	describe( 'undo integration', () => {
 	describe( 'undo integration', () => {
 		beforeEach( async () => {
 		beforeEach( async () => {
-			await createEditor();
+			editor = await createEditor();
 
 
 			setData( editor.model, `<paragraph>foo</paragraph>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]` );
 			setData( editor.model, `<paragraph>foo</paragraph>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]` );
 
 
@@ -210,7 +194,7 @@ describe( 'ImageResizeHandles', () => {
 				to: finalPointerPosition
 				to: finalPointerPosition
 			} );
 			} );
 
 
-			expect( '120px' ).to.equal( domParts.widget.style.width );
+			expect( domParts.widget.style.width ).to.equal( '120px' );
 
 
 			editor.commands.get( 'undo' ).execute();
 			editor.commands.get( 'undo' ).execute();
 
 
@@ -229,9 +213,9 @@ describe( 'ImageResizeHandles', () => {
 	} );
 	} );
 
 
 	describe( 'table integration', () => {
 	describe( 'table integration', () => {
-		beforeEach( () => createEditor() );
+		it( 'works when resizing in a table', async () => {
+			editor = await createEditor();
 
 
-		it( 'works when resizing in a table', () => {
 			setData( editor.model,
 			setData( editor.model,
 				'<table>' +
 				'<table>' +
 					`<tableRow><tableCell>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]</tableCell></tableRow>` +
 					`<tableRow><tableCell>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]</tableCell></tableRow>` +
@@ -276,7 +260,7 @@ describe( 'ImageResizeHandles', () => {
 		} );
 		} );
 
 
 		beforeEach( async () => {
 		beforeEach( async () => {
-			await createEditor();
+			editor = await createEditor();
 
 
 			editor.setData(
 			editor.setData(
 				`<figure class="image">
 				`<figure class="image">
@@ -340,7 +324,7 @@ describe( 'ImageResizeHandles', () => {
 		let widgetToolbarRepository;
 		let widgetToolbarRepository;
 
 
 		beforeEach( async () => {
 		beforeEach( async () => {
-			await createEditor( {
+			editor = await createEditor( {
 				plugins: [
 				plugins: [
 					Paragraph,
 					Paragraph,
 					Image,
 					Image,
@@ -417,26 +401,18 @@ describe( 'ImageResizeHandles', () => {
 	}
 	}
 
 
 	function createEditor( config ) {
 	function createEditor( config ) {
-		editorElement = document.createElement( 'div' );
-
-		absoluteContainer.appendChild( editorElement );
-
-		return ClassicEditor
-			.create( editorElement, config || {
-				plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResizeEditing, ImageResizeHandles ],
-				image: {
-					resizeUnit: 'px'
-				}
-			} )
-			.then( newEditor => {
-				editor = newEditor;
-				view = editor.editing.view;
-				viewDocument = view.document;
-				widget = viewDocument.getRoot().getChild( 1 );
+		return ClassicEditor.create( editorElement, config || {
+			plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResizeEditing, ImageResizeHandles ],
+			image: {
+				resizeUnit: 'px'
+			}
+		} ).then( newEditor => {
+			view = newEditor.editing.view;
+			viewDocument = view.document;
 
 
-				focusEditor( editor );
+			focusEditor( newEditor );
 
 
-				return newEditor;
-			} );
+			return newEditor;
+		} );
 	}
 	}
 } );
 } );