瀏覽代碼

Tests: Added test case with external changes.

Oskar Wróbel 7 年之前
父節點
當前提交
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">
 <div id="editor">
 	<h2>The three greatest things you learn from traveling</h2>
 	<h2>The three greatest things you learn from traveling</h2>
 	<p>
 	<p>

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

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  * 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 BalloonEditor from '@ckeditor/ckeditor5-editor-balloon/src/ballooneditor';
 import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
 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 BalloonToolbar from '../../../src/toolbar/balloon/balloontoolbar';
 import BlockToolbar from '../../../src/toolbar/block/blocktoolbar';
 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 {
 class CustomBlockToolbar extends BlockToolbar {
 	init() {
 	init() {
 		super.init();
 		super.init();
@@ -34,7 +37,79 @@ BalloonEditor
 	} )
 	} )
 	.then( editor => {
 	.then( editor => {
 		window.editor = 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 => {
 	.catch( err => {
 		console.error( err.stack );
 		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
 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.
 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.