8
0
Quellcode durchsuchen

Test: Added manual test for PendingActions plugin.

Oskar Wróbel vor 7 Jahren
Ursprung
Commit
a2de798cb0

+ 12 - 0
packages/ckeditor5-core/tests/manual/pendingactions.html

@@ -0,0 +1,12 @@
+<div>
+	<button id="add-action">Add pending action</button>
+	<button id="add-action-progress">Add progressing pending action</button>
+</div>
+
+<h3>Pending actions list:</h3>
+<ol class="pending-actions"></ol>
+
+<div id="editor">
+	<h2>Heading 1</h2>
+	<p>Paragraph</p>
+</div>

+ 80 - 0
packages/ckeditor5-core/tests/manual/pendingactions.js

@@ -0,0 +1,80 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals console, window, document, setTimeout */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+
+import ArticlePluginSet from '../_utils/articlepluginset';
+import PendingActions from '@ckeditor/ckeditor5-core/src/pendingactions';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ ArticlePluginSet, PendingActions ],
+		toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo' ],
+		image: {
+			toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ],
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+
+		const pendingActions = editor.plugins.get( PendingActions );
+		const actionsEl = document.querySelector( '.pending-actions' );
+
+		document.querySelector( '#add-action' ).addEventListener( 'click', () => {
+			const action = pendingActions.add( 'Static pending action.' );
+
+			wait( 5000 ).then( () => pendingActions.remove( action ) );
+		} );
+
+		document.querySelector( '#add-action-progress' ).addEventListener( 'click', () => {
+			const action = pendingActions.add( 'Dynamic pending action 0%.' );
+
+			wait( 1000 )
+				.then( () => ( action.message = 'Dynamic pending action 0%.' ) )
+				.then( () => wait( 500 ) )
+				.then( () => ( action.message = 'Dynamic pending action 20%.' ) )
+				.then( () => wait( 500 ) )
+				.then( () => ( action.message = 'Dynamic pending action 40%.' ) )
+				.then( () => wait( 500 ) )
+				.then( () => ( action.message = 'Dynamic pending action 60%.' ) )
+				.then( () => wait( 500 ) )
+				.then( () => ( action.message = 'Dynamic pending action 80%.' ) )
+				.then( () => wait( 500 ) )
+				.then( () => ( action.message = 'Dynamic pending action 1000%.' ) )
+				.then( () => wait( 500 ) )
+				.then( () => pendingActions.remove( action ) );
+		} );
+
+		pendingActions.on( 'add', () => displayActions() );
+		pendingActions.on( 'remove', () => displayActions() );
+
+		function displayActions() {
+			const frag = document.createDocumentFragment();
+
+			for ( const action of pendingActions ) {
+				const item = document.createElement( 'li' );
+
+				item.textContent = action.message;
+
+				action.on( 'change:message', () => {
+					item.textContent = action.message;
+				} );
+
+				frag.appendChild( item );
+			}
+
+			actionsEl.innerHTML = '';
+			actionsEl.appendChild( frag );
+		}
+
+		function wait( ms ) {
+			return new Promise( resolve => setTimeout( resolve, ms ) );
+		}
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 8 - 0
packages/ckeditor5-core/tests/manual/pendingactions.md

@@ -0,0 +1,8 @@
+## Pending actions
+
+1. Click `Add pending action`
+2. Check if action is displayed as an item of Pending Actions list (action should disappear after 5 seconds)
+3. Click `Add progressing pending actions`
+4. Check if action message changes (action should disappear when progress reaches 100%)
+5. Try to reload page or close the browser tab when pending action is displayed, you should see a prompt
+6. Try to reload page when there are no pending actions, you shouldn't see a prompt