Parcourir la source

Added manual test to check balloons position after external changes.

Oskar Wróbel il y a 8 ans
Parent
commit
e61543602d

+ 17 - 0
packages/ckeditor5-ui/tests/manual/tickets/198/1.html

@@ -0,0 +1,17 @@
+<h2>Contextual Toolbar:</h2>
+<p><button id="button-ct">Start external changes</button></p>
+<div id="editor-ct">
+	<p>EXTERNAL CHANGES WILL START HERE -> Get me a vodka rocks. And a piece of toast. Not tricks, Michael, illusions. I've opened a door here that I regret. But I bought a yearbook ad from you, doesn't that mean anything anymore? Marry me. Across from where?</p>
+</div>
+
+<h2>Link:</h2>
+<p><button id="button-link">Start external changes</button></p>
+<div id="editor-link">
+	<p>EXTERNAL CHANGES WILL START HERE -> Get me a vodka rocks. <a href="http://ckeditor.com">And a piece</a> of toast. Not tricks, Michael, illusions. I've opened a door here that I regret. But I bought a yearbook ad from you, doesn't that mean anything anymore? Marry me. Across from where?</p>
+</div>
+
+<h2>Image toolbar:</h2>
+<p><button id="button-image-toolbar">Start external changes</button></p>
+<div id="editor-image-toolbar">
+	<p>EXTERNAL CHANGES WILL START HERE -> Get me a vodka rocks. And a piece of toast. <figure class="image"><img src="sample.jpg" alt="CKEditor logo" /></figure> Not tricks, Michael, illusions. I've opened a door here that I regret. But I bought a yearbook ad from you, doesn't that mean anything anymore? Marry me. Across from where?</p>
+</div>

+ 109 - 0
packages/ckeditor5-ui/tests/manual/tickets/198/1.js

@@ -0,0 +1,109 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals console:false, document, setTimeout */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classic';
+import ArticlePresets from '@ckeditor/ckeditor5-presets/src/article';
+import ContextualToolbar from '../../../../src/toolbar/contextual/contextualtoolbar';
+
+import Element from '@ckeditor/ckeditor5-engine/src/model/element';
+import Text from '@ckeditor/ckeditor5-engine/src/model/text';
+import Position from '@ckeditor/ckeditor5-engine/src/model/position';
+
+// Editor for the ContextualToolbar plugin.
+ClassicEditor.create( document.querySelector( '#editor-ct' ), {
+	plugins: [ ArticlePresets, ContextualToolbar ],
+	toolbar: [ 'undo', 'redo' ],
+	contextualToolbar: [ 'bold', 'italic' ]
+} )
+.then( editor => initExternalChangesHandler( editor, document.querySelector( '#button-ct' ) ) )
+.catch( err => console.error( err.stack ) );
+
+// Editor for the Link plugin.
+ClassicEditor.create( document.querySelector( '#editor-link' ), {
+	plugins: [ ArticlePresets ],
+	toolbar: [ 'undo', 'redo', 'link' ],
+	contextualToolbar: [ 'bold', 'italic' ]
+} )
+.then( editor => initExternalChangesHandler( editor, document.querySelector( '#button-link' ) ) )
+.catch( err => console.error( err.stack ) );
+
+// Editor for the Link plugin.
+ClassicEditor.create( document.querySelector( '#editor-image-toolbar' ), {
+	plugins: [ ArticlePresets ],
+	toolbar: [ 'undo', 'redo' ],
+	contextualToolbar: [ 'bold', 'italic' ]
+} )
+.then( editor => initExternalChangesHandler( editor, document.querySelector( '#button-image-toolbar' ) ) )
+.catch( err => console.error( err.stack ) );
+
+// Handles button click and starts external changes for the specified editor.
+function initExternalChangesHandler( editor, element ) {
+	element.addEventListener( 'click', () => {
+		element.disabled = true;
+		startExternalChanges( editor ).then( () => element.disabled = false );
+	} );
+}
+
+function startExternalChanges( editor ) {
+	const document = editor.document;
+	const bath = document.batch( 'transparent' );
+
+	function type( path, text ) {
+		return new Promise( ( resolve ) => {
+			let position = new Position( document.getRoot(), path );
+			let index = 0;
+
+			function typing() {
+				setTimeout( () => {
+					document.enqueueChanges( () => {
+						bath.insert( position, new Text( text[ index ] ) );
+						position = position.getShiftedBy( 1 );
+
+						let nextLetter = text[ ++index ];
+
+						if ( nextLetter ) {
+							typing( nextLetter );
+						} else {
+							index = 0;
+							resolve();
+						}
+					} );
+				}, 40 );
+			}
+
+			typing();
+		} );
+	}
+
+	function insertNewLine( path ) {
+		return new Promise( ( resolve ) => {
+			setTimeout( () => {
+				document.enqueueChanges( () => {
+					bath.insert( new Position( document.getRoot(), path  ), new Element( 'paragraph' ) );
+					resolve();
+				} );
+			}, 200 );
+		} );
+	}
+
+	function wait( delay ) {
+		return new Promise( ( resolve ) => {
+			setTimeout( () => resolve(), delay );
+		} );
+	}
+
+	return wait( 3000 )
+		.then( () => type( [ 0, 36 ], `It's a hug, Michael. I'm hugging you. Guy's a pro. There's only one man I've ever called a coward` ) )
+		.then( () => insertNewLine( [ 0 ] ) )
+		.then( () => type( [ 0, 0 ], 'a' ) )
+		.then( () => insertNewLine( [ 1 ] ) )
+		.then( () => type( [ 1, 0 ], 'b' ) )
+		.then( () => insertNewLine( [ 2 ] ) )
+		.then( () => type( [ 2, 0 ], 'c' ) )
+		.then( () => insertNewLine( [ 0 ] ) )
+		.then( () => type( [ 0, 0 ], 'EXTERNAL CHANGES WILL START FROM HERE -> ' ) );
+}

+ 31 - 0
packages/ckeditor5-ui/tests/manual/tickets/198/1.md

@@ -0,0 +1,31 @@
+# Issue [#198](https://github.com/ckeditor/ckeditor5-ui/issues/198) manual test.
+
+## Position of balloons should be updated on external changes.
+
+### Contextual toolbar
+
+1. Click `Start external changes` and quickly select some text after the place where external changes will star
+(contextual toolbar should appear).
+2. Observe if balloon is attached to the target selection.
+
+### Link #1
+
+1. Click `Start external changes` and quickly click on link element to display Link balloon.
+2. Observe if balloon is attached to the target element.
+
+### Link #2
+
+1. Click `Start external changes` and quickly select some text after the place where external changes will start and press
+toolbar link button (or `Cmd` + `K`) to display Link balloon.
+2. Observe if balloon is attached to the target selection.
+
+### Image toolbar #1
+
+1. Click `Start external changes` and quickly click on image element to display image toolbar.
+2. Observe if balloon is attached to the target element.
+
+### Image toolbar #2
+
+1. Click `Start external changes` and quickly click on image element then choose alt component from toolbar
+to display Text alternative balloon.
+2. Observe if balloon is attached to the target element.

BIN
packages/ckeditor5-ui/tests/manual/tickets/198/sample.jpg