浏览代码

Added image upload manual test.

Szymon Kupś 8 年之前
父节点
当前提交
6ab4345478

+ 3 - 1
packages/ckeditor5-upload/src/filerepository.js

@@ -266,7 +266,9 @@ class FileLoader {
 		 * @observable
 		 * @member {Number} #uploadedPercent
 		 */
-		this.set( 'uploadedPercent', 0 );
+		this.bind( 'uploadedPercent' ).to( this, 'uploaded', this, 'uploadTotal', ( uploaded, total ) => {
+			return total ? ( uploaded / total * 100 ) : 0;
+		} );
 
 		/**
 		 * Response of the upload.

+ 4 - 0
packages/ckeditor5-upload/tests/manual/imageupload.html

@@ -2,3 +2,7 @@
 	<h2>Image upload</h2>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum.</p>
 </div>
+
+<div style="margin-top: 10px;">
+	<button id="progress" disabled>Upload progress</button>
+</div>

+ 24 - 1
packages/ckeditor5-upload/tests/manual/imageupload.js

@@ -30,14 +30,37 @@ ClassicEditor.create( document.querySelector( '#editor' ), {
 	toolbar: [ 'headings', 'undo', 'redo', 'bold', 'italic', 'bulletedList', 'numberedList' ]
 } )
 .then( editor => {
+	let adapterMock, progress;
+	const total = 500;
+
 	window.editor = editor;
 
+	const progressButton = document.getElementById( 'progress' );
+
 	// Register fake adapter.
 	editor.plugins.get( 'fileRepository' ).createAdapter = loader => {
-		const adapterMock = new AdapterMock( loader );
+		adapterMock = new AdapterMock( loader );
+		progress = 0;
+		loader.on( 'change:uploadedPercent', () => {
+			console.log( `Loader upload progress: ${ loader.uploadedPercent }%` );
+		}  );
+
+		progressButton.removeAttribute( 'disabled' );
 
 		return adapterMock;
 	};
+
+	progressButton.addEventListener( 'click', () => {
+		if ( adapterMock ) {
+			progress += 100;
+			adapterMock.mockProgress( progress, total );
+
+			if ( progress == total ) {
+				progressButton.setAttribute( 'disabled', 'true' );
+				adapterMock.mockSuccess( { original: './sample.jpg' } );
+			}
+		}
+	} );
 } )
 .catch( err => {
 	console.error( err.stack );

+ 6 - 0
packages/ckeditor5-upload/tests/manual/imageupload.md

@@ -1 +1,7 @@
 ## Image upload
+
+1. Drop an image into editor.
+1. Image should be read and displayed.
+1. Open console.
+1. Press "Upload progress" button couple times to simulate upload process.
+1. After uploading is complete your image should be replaced with sample image from server.

二进制
packages/ckeditor5-upload/tests/manual/sample.jpg