浏览代码

Updated manual test to check multiple images upload.

Szymon Kupś 8 年之前
父节点
当前提交
2cdb775e72

+ 12 - 3
packages/ckeditor5-upload/tests/manual/imageupload.html

@@ -3,6 +3,15 @@
 	<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>
+<div id="button-container"></div>
+
+<style>
+	#button-container div {
+		margin-top: 10px;
+	}
+
+	#button-container button {
+		margin-right: 10px;
+	}
+</style>
+

+ 34 - 27
packages/ckeditor5-upload/tests/manual/imageupload.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-/* globals document, window, console */
+/* globals document, console */
 
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classic';
 import Enter from '@ckeditor/ckeditor5-enter/src/enter';
@@ -22,6 +22,8 @@ import List from '@ckeditor/ckeditor5-list/src/list';
 import ImageUpload from '../../src/imageupload';
 import { AdapterMock } from '../_utils/mocks';
 
+const buttonContainer = document.getElementById( 'button-container' );
+
 ClassicEditor.create( document.querySelector( '#editor' ), {
 	plugins: [
 		Enter, Typing, Paragraph, Heading, Undo, Bold, Italic, Heading, List, Image, ImageToolbar, Clipboard,
@@ -30,38 +32,43 @@ ClassicEditor.create( document.querySelector( '#editor' ), {
 	toolbar: [ 'headings', 'undo', 'redo', 'bold', 'italic', 'bulletedList', 'numberedList', 'insertImage' ]
 } )
 .then( editor => {
-	let adapterMock, progress;
-	const total = 500;
-
-	window.editor = editor;
-
-	const progressButton = document.getElementById( 'progress' );
-
 	// Register fake adapter.
 	editor.plugins.get( 'upload/filerepository' ).createAdapter = loader => {
-		adapterMock = new AdapterMock( loader );
-		progress = 0;
-		loader.on( 'change:uploadedPercent', () => {
-			console.log( `Loader upload progress: ${ loader.uploadedPercent }%` );
-		}  );
-
-		progressButton.removeAttribute( 'disabled' );
+		const adapterMock = new AdapterMock( loader );
+		createProgressButton( loader, adapterMock );
 
 		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 );
 } );
+
+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 button = document.createElement( 'button' );
+	button.innerHTML = 'Upload progress';
+
+	container.appendChild( button );
+	container.appendChild( progressInfo );
+
+	buttonContainer.appendChild( container );
+
+	let progress = 0;
+	const total = 500;
+	button.addEventListener( 'click', () => {
+		progress += 100;
+		adapterMock.mockProgress( progress, total );
+
+		if ( progress == total ) {
+			button.setAttribute( 'disabled', 'true' );
+			adapterMock.mockSuccess( { original: './sample.jpg' } );
+		}
+
+		progressInfo.innerHTML = `File: ${ fileName }. Progress: ${ loader.uploadedPercent }%.`;
+	} );
+}
+

+ 3 - 2
packages/ckeditor5-upload/tests/manual/imageupload.md

@@ -2,8 +2,9 @@
 
 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.
 
-Repeat all the steps but this time use toolbar button to add image.
+Repeat all the steps with:
+* dropping multiple images,
+* using toolbar button to add one and multiple images.