8
0
Просмотр исходного кода

Added image upload manual test.

Szymon Kupś 8 лет назад
Родитель
Сommit
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.

BIN
packages/ckeditor5-upload/tests/manual/sample.jpg