瀏覽代碼

Tests: Adjusted tests to changes in upload plugin.

Krzysztof Krztoń 7 年之前
父節點
當前提交
6f808d88e1

+ 88 - 74
packages/ckeditor5-image/tests/imageupload/imageuploadediting.js

@@ -338,18 +338,19 @@ describe( 'ImageUploadEditing', () => {
 		editor.execute( 'imageUpload', { file } );
 
 		model.once( '_change', () => {
-			expect( getViewData( view ) ).to.equal(
-				'[<figure class="ck-widget image" contenteditable="false">' +
-				`<img src="${ base64Sample }"></img>` +
-				'</figure>]' +
-				'<p>foo bar</p>' );
-			expect( loader.status ).to.equal( 'uploading' );
-
-			done();
+			tryExpect( done, () => {
+				expect( getViewData( view ) ).to.equal(
+					'[<figure class="ck-widget image" contenteditable="false">' +
+					`<img src="${ base64Sample }"></img>` +
+					'</figure>]' +
+					'<p>foo bar</p>' );
+				expect( loader.status ).to.equal( 'uploading' );
+			} );
 		} );
 
 		expect( loader.status ).to.equal( 'reading' );
-		nativeReaderMock.mockSuccess( base64Sample );
+
+		loader.file.then( () => nativeReaderMock.mockSuccess( base64Sample ) );
 	} );
 
 	it( 'should replace read data with server response once it is present', done => {
@@ -359,18 +360,18 @@ describe( 'ImageUploadEditing', () => {
 
 		model.document.once( 'change', () => {
 			model.document.once( 'change', () => {
-				expect( getViewData( view ) ).to.equal(
-					'[<figure class="ck-widget image" contenteditable="false"><img src="image.png"></img></figure>]<p>foo bar</p>'
-				);
-				expect( loader.status ).to.equal( 'idle' );
-
-				done();
+				tryExpect( done, () => {
+					expect( getViewData( view ) ).to.equal(
+						'[<figure class="ck-widget image" contenteditable="false"><img src="image.png"></img></figure>]<p>foo bar</p>'
+					);
+					expect( loader.status ).to.equal( 'idle' );
+				} );
 			}, { priority: 'lowest' } );
 
-			adapterMocks[ 0 ].mockSuccess( { default: 'image.png' } );
+			loader.file.then( () => adapterMocks[ 0 ].mockSuccess( { default: 'image.png' } ) );
 		} );
 
-		nativeReaderMock.mockSuccess( base64Sample );
+		loader.file.then( () => nativeReaderMock.mockSuccess( base64Sample ) );
 	} );
 
 	it( 'should fire notification event in case of error', done => {
@@ -378,17 +379,17 @@ describe( 'ImageUploadEditing', () => {
 		const file = createNativeFileMock();
 
 		notification.on( 'show:warning', ( evt, data ) => {
-			expect( data.message ).to.equal( 'Reading error.' );
-			expect( data.title ).to.equal( 'Upload failed' );
-			evt.stop();
-
-			done();
+			tryExpect( done, () => {
+				expect( data.message ).to.equal( 'Reading error.' );
+				expect( data.title ).to.equal( 'Upload failed' );
+				evt.stop();
+			} );
 		}, { priority: 'high' } );
 
 		setModelData( model, '<paragraph>{}foo bar</paragraph>' );
 		editor.execute( 'imageUpload', { file } );
 
-		nativeReaderMock.mockError( 'Reading error.' );
+		loader.file.then( () => nativeReaderMock.mockError( 'Reading error.' ) );
 	} );
 
 	it( 'should not fire notification on abort', done => {
@@ -403,12 +404,15 @@ describe( 'ImageUploadEditing', () => {
 
 		setModelData( model, '<paragraph>{}foo bar</paragraph>' );
 		editor.execute( 'imageUpload', { file } );
-		nativeReaderMock.abort();
 
-		setTimeout( () => {
-			sinon.assert.notCalled( spy );
-			done();
-		}, 0 );
+		loader.file.then( () => {
+			nativeReaderMock.abort();
+
+			setTimeout( () => {
+				sinon.assert.notCalled( spy );
+				done();
+			}, 0 );
+		} );
 	} );
 
 	it( 'should throw when other error happens during upload', done => {
@@ -435,13 +439,15 @@ describe( 'ImageUploadEditing', () => {
 		// Check if error can be caught.
 		promise.catch( catchSpy );
 
-		nativeReaderMock.mockSuccess();
+		loader.file.then( () => {
+			nativeReaderMock.mockSuccess();
 
-		setTimeout( () => {
-			sinon.assert.calledOnce( catchSpy );
-			sinon.assert.calledWithExactly( catchSpy, error );
-			done();
-		}, 0 );
+			setTimeout( () => {
+				sinon.assert.calledOnce( catchSpy );
+				sinon.assert.calledWithExactly( catchSpy, error );
+				done();
+			}, 0 );
+		} );
 	} );
 
 	it( 'should do nothing if image does not have uploadId', () => {
@@ -467,17 +473,17 @@ describe( 'ImageUploadEditing', () => {
 
 		model.document.once( 'change', () => {
 			model.document.once( 'change', () => {
-				expect( getModelData( model ) ).to.equal( '<paragraph>[]foo bar</paragraph>' );
-				sinon.assert.calledOnce( spy );
-
-				done();
+				tryExpect( done, () => {
+					expect( getModelData( model ) ).to.equal( '<paragraph>[]foo bar</paragraph>' );
+					sinon.assert.calledOnce( spy );
+				} );
 			} );
 		} );
 
-		nativeReaderMock.mockError( 'Upload error.' );
+		loader.file.then( () => nativeReaderMock.mockError( 'Upload error.' ) );
 	} );
 
-	it( 'should abort upload if image is removed', () => {
+	it( 'should abort upload if image is removed', done => {
 		const file = createNativeFileMock();
 		setModelData( model, '<paragraph>{}foo bar</paragraph>' );
 		editor.execute( 'imageUpload', { file } );
@@ -485,15 +491,20 @@ describe( 'ImageUploadEditing', () => {
 		const abortSpy = testUtils.sinon.spy( loader, 'abort' );
 
 		expect( loader.status ).to.equal( 'reading' );
-		nativeReaderMock.mockSuccess( base64Sample );
 
-		const image = doc.getRoot().getChild( 0 );
-		model.change( writer => {
-			writer.remove( image );
-		} );
+		loader.file.then( () => {
+			nativeReaderMock.mockSuccess( base64Sample );
+
+			const image = doc.getRoot().getChild( 0 );
+			model.change( writer => {
+				writer.remove( image );
+			} );
 
-		expect( loader.status ).to.equal( 'aborted' );
-		sinon.assert.calledOnce( abortSpy );
+			tryExpect( done, () => {
+				expect( loader.status ).to.equal( 'aborted' );
+				sinon.assert.calledOnce( abortSpy );
+			} );
+		} );
 	} );
 
 	it( 'should not abort and not restart upload when image is moved', () => {
@@ -564,20 +575,20 @@ describe( 'ImageUploadEditing', () => {
 
 		model.document.once( 'change', () => {
 			model.document.once( 'change', () => {
-				expect( getViewData( view ) ).to.equal(
-					'[<figure class="ck-widget image" contenteditable="false">' +
-					'<img sizes="100vw" src="image.png" srcset="image-500.png 500w, image-800.png 800w" width="800"></img>' +
-					'</figure>]<p>foo bar</p>'
-				);
-				expect( loader.status ).to.equal( 'idle' );
-
-				done();
+				tryExpect( done, () => {
+					expect( getViewData( view ) ).to.equal(
+						'[<figure class="ck-widget image" contenteditable="false">' +
+						'<img sizes="100vw" src="image.png" srcset="image-500.png 500w, image-800.png 800w" width="800"></img>' +
+						'</figure>]<p>foo bar</p>'
+					);
+					expect( loader.status ).to.equal( 'idle' );
+				} );
 			}, { priority: 'lowest' } );
 
-			adapterMocks[ 0 ].mockSuccess( { default: 'image.png', 500: 'image-500.png', 800: 'image-800.png' } );
+			loader.file.then( () => adapterMocks[ 0 ].mockSuccess( { default: 'image.png', 500: 'image-500.png', 800: 'image-800.png' } ) );
 		} );
 
-		nativeReaderMock.mockSuccess( base64Sample );
+		loader.file.then( () => nativeReaderMock.mockSuccess( base64Sample ) );
 	} );
 
 	it( 'should prevent from browser redirecting when an image is dropped on another image', () => {
@@ -761,12 +772,9 @@ describe( 'ImageUploadEditing', () => {
 	// Skip this test on Edge as we mock `File` object there so there is no sense in testing it.
 	( isEdgeEnv ? it.skip : it )( 'should get file extension from base64 string', done => {
 		editor.plugins.get( 'Clipboard' ).on( 'inputTransformation', () => {
-			try {
-				expect( loader.file.name.split( '.' ).pop() ).to.equal( 'png' );
-				done();
-			} catch ( err ) {
-				done( err );
-			}
+			tryExpect( done, () => {
+				loader.file.then( file => expect( file.name.split( '.' ).pop() ).to.equal( 'png' ) );
+			} );
 		}, { priority: 'low' } );
 
 		setModelData( model, '<paragraph>[]foo</paragraph>' );
@@ -792,12 +800,9 @@ describe( 'ImageUploadEditing', () => {
 	// Skip this test on Edge as we mock `File` object there so there is no sense in testing it.
 	( isEdgeEnv ? it.skip : it )( 'should use fallback file extension', done => {
 		editor.plugins.get( 'Clipboard' ).on( 'inputTransformation', () => {
-			try {
-				expect( loader.file.name.split( '.' ).pop() ).to.equal( 'jpeg' );
-				done();
-			} catch ( err ) {
-				done( err );
-			}
+			tryExpect( done, () => {
+				loader.file.then( file => expect( file.name.split( '.' ).pop() ).to.equal( 'jpeg' ) );
+			} );
 		}, { priority: 'low' } );
 
 		setModelData( model, '<paragraph>[]foo</paragraph>' );
@@ -822,18 +827,27 @@ describe( 'ImageUploadEditing', () => {
 } );
 
 // Asserts actual and expected model data.
-// Note: Since this function is run inside a promise, all errors needs to be caught
-// and rethrow to be correctly processed by a testing framework.
 //
 // @param {function} done Callback function to be called when assertion is done.
 // @param {String} actual Actual model data.
 // @param {String} expected Expected model data.
 function expectModel( done, actual, expected ) {
-	try {
+	tryExpect( done, () => {
 		expect( actual ).to.equal( expected );
-		done();
+	} );
+}
+
+// Runs given expect function in a try-catch. It should be used only when `expect` is called as a result of a `Promise`
+// resolution as all errors may be caught by tested code and needs to be rethrow to be correctly processed by a testing framework.
+//
+// @param {Function} doneFn Function to run when assertion is done.
+// @param {Function} expectFn Function containing all assertions.
+function tryExpect( doneFn, expectFn ) {
+	try {
+		expectFn();
+		doneFn();
 	} catch ( err ) {
-		done( err );
+		doneFn( err );
 	}
 }
 

+ 47 - 31
packages/ckeditor5-image/tests/imageupload/imageuploadprogress.js

@@ -90,17 +90,21 @@ describe( 'ImageUploadProgress', () => {
 		editor.execute( 'imageUpload', { file: createNativeFileMock() } );
 
 		model.document.once( 'change', () => {
-			expect( getViewData( view ) ).to.equal(
-				'[<figure class="ck-appear ck-widget image" contenteditable="false">' +
+			try {
+				expect( getViewData( view ) ).to.equal(
+					'[<figure class="ck-appear ck-widget image" contenteditable="false">' +
 					`<img src="${ base64Sample }"></img>` +
 					'<div class="ck-progress-bar"></div>' +
-				'</figure>]<p>foo</p>'
-			);
+					'</figure>]<p>foo</p>'
+				);
 
-			done();
+				done();
+			} catch ( err ) {
+				done( err );
+			}
 		}, { priority: 'lowest' } );
 
-		nativeReaderMock.mockSuccess( base64Sample );
+		loader.file.then( () => nativeReaderMock.mockSuccess( base64Sample ) );
 	} );
 
 	it( 'should work correctly when there is no "reading" status and go straight to "uploading"', () => {
@@ -173,17 +177,21 @@ describe( 'ImageUploadProgress', () => {
 		model.document.once( 'change', () => {
 			adapterMock.mockProgress( 40, 100 );
 
-			expect( getViewData( view ) ).to.equal(
-				'[<figure class="ck-appear ck-widget image" contenteditable="false">' +
+			try {
+				expect( getViewData( view ) ).to.equal(
+					'[<figure class="ck-appear ck-widget image" contenteditable="false">' +
 					`<img src="${ base64Sample }"></img>` +
 					'<div class="ck-progress-bar" style="width:40%"></div>' +
-				'</figure>]<p>foo</p>'
-			);
+					'</figure>]<p>foo</p>'
+				);
 
-			done();
+				done();
+			} catch ( err ) {
+				done( err );
+			}
 		}, { priority: 'lowest' } );
 
-		nativeReaderMock.mockSuccess( base64Sample );
+		loader.file.then( () => nativeReaderMock.mockSuccess( base64Sample ) );
 	} );
 
 	it( 'should convert image\'s "complete" uploadStatus attribute and display temporary icon', done => {
@@ -194,28 +202,32 @@ describe( 'ImageUploadProgress', () => {
 
 		model.document.once( 'change', () => {
 			model.document.once( 'change', () => {
-				expect( getViewData( view ) ).to.equal(
-					'[<figure class="ck-widget image" contenteditable="false">' +
+				try {
+					expect( getViewData( view ) ).to.equal(
+						'[<figure class="ck-widget image" contenteditable="false">' +
 						'<img src="image.png"></img>' +
 						'<div class="ck-image-upload-complete-icon"></div>' +
-					'</figure>]<p>foo</p>'
-				);
+						'</figure>]<p>foo</p>'
+					);
 
-				clock.tick( 3000 );
+					clock.tick( 3000 );
 
-				expect( getViewData( view ) ).to.equal(
-					'[<figure class="ck-widget image" contenteditable="false">' +
+					expect( getViewData( view ) ).to.equal(
+						'[<figure class="ck-widget image" contenteditable="false">' +
 						'<img src="image.png"></img>' +
-					'</figure>]<p>foo</p>'
-				);
+						'</figure>]<p>foo</p>'
+					);
 
-				done();
+					done();
+				} catch ( err ) {
+					done( err );
+				}
 			}, { priority: 'lowest' } );
 
-			adapterMock.mockSuccess( { default: 'image.png' } );
+			loader.file.then( () => adapterMock.mockSuccess( { default: 'image.png' } ) );
 		} );
 
-		nativeReaderMock.mockSuccess( base64Sample );
+		loader.file.then( () => nativeReaderMock.mockSuccess( base64Sample ) );
 	} );
 
 	it( 'should allow to customize placeholder image', () => {
@@ -281,18 +293,22 @@ describe( 'ImageUploadProgress', () => {
 
 		model.document.once( 'change', () => {
 			model.document.once( 'change', () => {
-				expect( getViewData( view ) ).to.equal(
-					'[<figure class="ck-widget image">' +
+				try {
+					expect( getViewData( view ) ).to.equal(
+						'[<figure class="ck-widget image">' +
 						'<img src="image.png"></img>' +
-					'</figure>]<p>foo</p>'
-				);
+						'</figure>]<p>foo</p>'
+					);
 
-				done();
+					done();
+				} catch ( err ) {
+					done( err );
+				}
 			}, { priority: 'lowest' } );
 
-			adapterMock.mockSuccess( { default: 'image.png' } );
+			loader.file.then( () => adapterMock.mockSuccess( { default: 'image.png' } ) );
 		} );
 
-		nativeReaderMock.mockSuccess( base64Sample );
+		loader.file.then( () => nativeReaderMock.mockSuccess( base64Sample ) );
 	} );
 } );

+ 45 - 43
packages/ckeditor5-image/tests/manual/imageupload.js

@@ -51,52 +51,54 @@ ClassicEditor
 	} );
 
 function createProgressButton( loader, adapterMock ) {
-	const fileName = loader.file.name;
-	const container = document.createElement( 'div' );
-	const progressInfo = document.createElement( 'span' );
-	progressInfo.innerHTML = `File: ${ fileName }. Progress: 0%.`;
-	const progressButton = document.createElement( 'button' );
-	const errorButton = document.createElement( 'button' );
-	const abortButton = document.createElement( 'button' );
-	progressButton.innerHTML = 'Upload progress';
-	errorButton.innerHTML = 'Simulate error';
-	abortButton.innerHTML = 'Simulate aborting';
-
-	container.appendChild( progressButton );
-	container.appendChild( errorButton );
-	container.appendChild( abortButton );
-	container.appendChild( progressInfo );
-
-	buttonContainer.appendChild( container );
-
-	let progress = 0;
-	const total = 500;
-	progressButton.addEventListener( 'click', () => {
-		progress += 100;
-		adapterMock.mockProgress( progress, total );
-
-		if ( progress == total ) {
+	loader.file.then( file => {
+		const fileName = file.name;
+		const container = document.createElement( 'div' );
+		const progressInfo = document.createElement( 'span' );
+		progressInfo.innerHTML = `File: ${ fileName }. Progress: 0%.`;
+		const progressButton = document.createElement( 'button' );
+		const errorButton = document.createElement( 'button' );
+		const abortButton = document.createElement( 'button' );
+		progressButton.innerHTML = 'Upload progress';
+		errorButton.innerHTML = 'Simulate error';
+		abortButton.innerHTML = 'Simulate aborting';
+
+		container.appendChild( progressButton );
+		container.appendChild( errorButton );
+		container.appendChild( abortButton );
+		container.appendChild( progressInfo );
+
+		buttonContainer.appendChild( container );
+
+		let progress = 0;
+		const total = 500;
+		progressButton.addEventListener( 'click', () => {
+			progress += 100;
+			adapterMock.mockProgress( progress, total );
+
+			if ( progress == total ) {
+				disableButtons();
+				adapterMock.mockSuccess( { default: './sample.jpg' } );
+			}
+
+			progressInfo.innerHTML = `File: ${ fileName }. Progress: ${ loader.uploadedPercent }%.`;
+		} );
+
+		errorButton.addEventListener( 'click', () => {
+			adapterMock.mockError( 'Upload error!' );
 			disableButtons();
-			adapterMock.mockSuccess( { default: './sample.jpg' } );
-		}
-
-		progressInfo.innerHTML = `File: ${ fileName }. Progress: ${ loader.uploadedPercent }%.`;
-	} );
+		} );
 
-	errorButton.addEventListener( 'click', () => {
-		adapterMock.mockError( 'Upload error!' );
-		disableButtons();
-	} );
+		abortButton.addEventListener( 'click', () => {
+			loader.abort();
+			disableButtons();
+		} );
 
-	abortButton.addEventListener( 'click', () => {
-		loader.abort();
-		disableButtons();
+		function disableButtons() {
+			progressButton.setAttribute( 'disabled', 'true' );
+			errorButton.setAttribute( 'disabled', 'true' );
+			abortButton.setAttribute( 'disabled', 'true' );
+		}
 	} );
-
-	function disableButtons() {
-		progressButton.setAttribute( 'disabled', 'true' );
-		errorButton.setAttribute( 'disabled', 'true' );
-		abortButton.setAttribute( 'disabled', 'true' );
-	}
 }