Sfoglia il codice sorgente

Tests: Added test case with external changes.

Oskar Wróbel 7 anni fa
parent
commit
4aa0da6643

+ 3 - 0
packages/ckeditor5-ui/tests/manual/blocktoolbar/blocktoolbar.html

@@ -1,3 +1,6 @@
+<button class="external-type">Start external typing</button>
+<button class="external-delete">Start external deleting</button>
+
 <div id="editor">
 	<h2>The three greatest things you learn from traveling</h2>
 	<p>

+ 76 - 1
packages/ckeditor5-ui/tests/manual/blocktoolbar/blocktoolbar.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-/* globals window, document, console:false */
+/* globals window, document, console:false, setTimeout */
 
 import BalloonEditor from '@ckeditor/ckeditor5-editor-balloon/src/ballooneditor';
 import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
@@ -12,6 +12,9 @@ import ParagraphButtonUI from '@ckeditor/ckeditor5-paragraph/src/paragraphbutton
 import BalloonToolbar from '../../../src/toolbar/balloon/balloontoolbar';
 import BlockToolbar from '../../../src/toolbar/block/blocktoolbar';
 
+import Position from '@ckeditor/ckeditor5-engine/src/model/position';
+import Range from '@ckeditor/ckeditor5-engine/src/model/range';
+
 class CustomBlockToolbar extends BlockToolbar {
 	init() {
 		super.init();
@@ -34,7 +37,79 @@ BalloonEditor
 	} )
 	.then( editor => {
 		window.editor = editor;
+
+		const externalChanges = createExternalChangesSimulator( editor );
+
+		document.querySelector( '.external-type' ).addEventListener( 'click', () => {
+			externalChanges.wait( 4000 )
+				.then( () => externalChanges.insertNewLine( [ 1 ] ) )
+				.then( () => externalChanges.type( [ 1, 0 ], 'New line' ) )
+				.then( () => externalChanges.insertNewLine( [ 2 ] ) )
+				.then( () => externalChanges.type( [ 2, 0 ], 'New line' ) )
+				.then( () => externalChanges.insertNewLine( [ 3 ] ) )
+				.then( () => externalChanges.type( [ 3, 0 ], 'New line' ) );
+		} );
+
+		document.querySelector( '.external-delete' ).addEventListener( 'click', () => {
+			externalChanges.wait( 4000 )
+				.then( () => externalChanges.removeElement( [ 1 ] ) );
+		} );
 	} )
 	.catch( err => {
 		console.error( err.stack );
 	} );
+
+// Move it to the test utils.
+// See https://github.com/ckeditor/ckeditor5-ui/issues/393.
+function createExternalChangesSimulator( editor ) {
+	const { model } = editor;
+
+	function wait( delay ) {
+		return new Promise( resolve => setTimeout( () => resolve(), delay ) );
+	}
+
+	function insertNewLine( path ) {
+		model.enqueueChange( 'transparent', writer => {
+			writer.insertElement( 'paragraph', new Position( model.document.getRoot(), path ) );
+		} );
+
+		return Promise.resolve();
+	}
+
+	function type( path, text ) {
+		return new Promise( resolve => {
+			let position = new Position( model.document.getRoot(), path );
+			let index = 0;
+
+			function typing() {
+				wait( 40 ).then( () => {
+					model.enqueueChange( 'transparent', writer => {
+						writer.insertText( text[ index ], position );
+						position = position.getShiftedBy( 1 );
+
+						const nextLetter = text[ ++index ];
+
+						if ( nextLetter ) {
+							typing( nextLetter );
+						} else {
+							index = 0;
+							resolve();
+						}
+					} );
+				} );
+			}
+
+			typing();
+		} );
+	}
+
+	function removeElement( path ) {
+		model.enqueueChange( 'transparent', writer => {
+			writer.remove( Range.createFromPositionAndShift( new Position( model.document.getRoot(), path ), 1 ) );
+		} );
+
+		return Promise.resolve();
+	}
+
+	return { wait, insertNewLine, type, removeElement };
+}

+ 13 - 0
packages/ckeditor5-ui/tests/manual/blocktoolbar/blocktoolbar.md

@@ -5,3 +5,16 @@
 3. Put selection in the one of the last blocks, click on button to display panel then start resize browser window
 and observe if button and panel are properly repositioned.
 
+### External changes
+
+## Typing
+
+1. Click `Start external typing`
+2. Put selection to the first paragraph (`Like all the great things...`) and click the button to open panel (be quick).
+3. Check if button and panel are repositioned correctly.
+
+## Removing
+
+1. Click `Start external deleting`
+2. Put selection to the first paragraph (`Like all the great things...`) and click the button to open panel (be quick).
+3. Check if button and panel are removed.