瀏覽代碼

Refactored manual test.

Oskar Wróbel 8 年之前
父節點
當前提交
a32acb0c52

文件差異過大導致無法顯示
+ 5 - 3
packages/ckeditor5-ui/tests/manual/tickets/198/1.html


+ 12 - 24
packages/ckeditor5-ui/tests/manual/tickets/198/1.js

@@ -12,7 +12,6 @@ import ContextualToolbar from '../../../../src/toolbar/contextual/contextualtool
 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';
-import Range from '@ckeditor/ckeditor5-engine/src/model/range';
 
 // Editor for the ContextualToolbar plugin.
 ClassicEditor.create( document.querySelector( '#editor-ct' ), {
@@ -45,19 +44,18 @@ ClassicEditor.create( document.querySelector( '#editor-image-toolbar' ), {
 	}
 } )
 .then( editor => {
-	initExternalChangesHandler( editor, document.querySelector( '#button-image-toolbar' ), [ [ 7 ], 1 ] );
+	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, deleteData ) {
+export function initExternalChangesHandler( editor, element ) {
 	element.addEventListener( 'click', () => {
 		element.disabled = true;
-		startExternalChanges( editor, deleteData );
+		startExternalChanges( editor );
 	} );
 }
 
-function startExternalChanges( editor, deleteData = [ [ 4, 180 ], 35 ] ) {
+function startExternalChanges( editor ) {
 	const document = editor.document;
 	const bath = document.batch( 'transparent' );
 
@@ -95,22 +93,13 @@ function startExternalChanges( editor, deleteData = [ [ 4, 180 ], 35 ] ) {
 	}
 
 	function insertNewLine( path ) {
-		return wait( 200 ).then( () => {
-			document.enqueueChanges( () => {
-				bath.insert( new Position( document.getRoot(), path ), new Element( 'paragraph' ) );
-			} );
-
-			return Promise.resolve();
-		} );
-	}
-
-	function removeText( path, howMany ) {
-		return wait( 200 ).then( () => {
-			document.enqueueChanges( () => {
-				bath.remove( Range.createFromPositionAndShift( new Position( document.getRoot(), path ), howMany ) );
-			} );
-
-			return Promise.resolve();
+		return new Promise( ( resolve ) => {
+			setTimeout( () => {
+				document.enqueueChanges( () => {
+					bath.insert( new Position( document.getRoot(), path ), new Element( 'paragraph' ) );
+					resolve();
+				} );
+			}, 200 );
 		} );
 	}
 
@@ -123,6 +112,5 @@ function startExternalChanges( editor, deleteData = [ [ 4, 180 ], 35 ] ) {
 		.then( () => insertNewLine( [ 2 ] ) )
 		.then( () => type( [ 2, 0 ], 'c' ) )
 		.then( () => insertNewLine( [ 0 ] ) )
-		.then( () => type( [ 0, 0 ], 'DONE :)' ) )
-		.then( () => removeText( deleteData[ 0 ], deleteData[ 1 ] ) );
+		.then( () => type( [ 0, 0 ], 'DONE :)' ) );
 }

+ 6 - 11
packages/ckeditor5-ui/tests/manual/tickets/198/1.md

@@ -15,9 +15,10 @@
 
 ### Link #2
 
-1. Click `Start external changes` and quickly select some text after the place where external changes will start and press
+1. Refresh test page.
+2. 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.
+3. Observe if balloon is attached to the target selection.
 
 ### Image toolbar #1
 
@@ -26,13 +27,7 @@ toolbar link button (or `Cmd` + `K`) to display Link balloon.
 
 ### 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.
-
-## Deleted test
-
 1. Refresh test page.
-2. Click `Start external changes` and attach balloon to this part of content which will be deleted.
-3. Observe if balloon hide.
-4. Repeat `2` and `3` for the each section.
+2. Click `Start external changes` and quickly click on image element then choose alt component from toolbar
+to display Text alternative balloon.
+3. Observe if balloon is attached to the target element.

+ 25 - 0
packages/ckeditor5-ui/tests/manual/tickets/198/2.html

@@ -0,0 +1,25 @@
+<h2>Contextual Toolbar:</h2>
+<p><button id="button-ct">Start external changes</button></p>
+<div id="editor-ct">
+	<p>This specification defines the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML).</p>
+	<p>THIS PARAGRAPH WILL BE REMOVE This specification defines the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML).</p>
+	<p>This specification defines the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML).</p>
+</div>
+
+<h2>Link:</h2>
+<p><button id="button-link">Start external changes</button></p>
+<div id="editor-link">
+	<p>This specification defines the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML).</p>
+
+	<p>THIS PARAGRAPH WILL BE REMOVE This specification <a href="http://ckeditor.com">defines the 5th</a> major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML).</p>
+
+	<p>This specification defines the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML).</p>
+</div>
+
+<h2>Image toolbar:</h2>
+<p><button id="button-image-toolbar">Start external changes</button></p>
+<div id="editor-image-toolbar">
+	<p>This specification defines the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML).</p>
+	<figure class="image"><img src="sample-to-delete.jpg" alt="CKEditor logo" /></figure>
+	<p>This specification defines the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML).</p>
+</div>

+ 66 - 0
packages/ckeditor5-ui/tests/manual/tickets/198/2.js

@@ -0,0 +1,66 @@
+/**
+ * @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 Position from '@ckeditor/ckeditor5-engine/src/model/position';
+import Range from '@ckeditor/ckeditor5-engine/src/model/range';
+
+// 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' ],
+	image: {
+		toolbar: [ 'imageStyleFull', 'imageStyleSide', '|' , 'imageTextAlternative' ]
+	}
+} )
+.then( editor => {
+	initExternalChangesHandler( editor, document.querySelector( '#button-image-toolbar' ) );
+} )
+.catch( err => console.error( err.stack ) );
+
+export function initExternalChangesHandler( editor, element, deleteData ) {
+	element.addEventListener( 'click', () => {
+		element.disabled = true;
+		startExternalDelete( editor, deleteData );
+	} );
+}
+
+function startExternalDelete( editor, deleteData = [ [ 1 ], 1 ] ) {
+	const document = editor.document;
+	const bath = document.batch( 'transparent' );
+
+	setTimeout( () => {
+		document.enqueueChanges( () => {
+			bath.remove( Range.createFromPositionAndShift( new Position( document.getRoot(), deleteData[ 0 ] ), deleteData[ 1 ] ) );
+		} );
+	}, 3000 );
+}

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

@@ -0,0 +1,31 @@
+# Issue [#198](https://github.com/ckeditor/ckeditor5-ui/issues/198) manual test.
+
+## Balloon should hide on external changes.
+
+### Contextual toolbar
+
+1. Click `Start external changes` and quickly select some text from second paragraph  (contextual toolbar should appear).
+2. Check if balloon hide and there is no errors on browser console.
+
+### Link #1
+
+1. Click `Start external changes` and quickly click on link element from second paragraph  to display Link balloon.
+2. Check if balloon hide and there is no errors on browser console.
+
+### Link #2
+
+1. Refresh test page.
+2. Click `Start external changes` and quickly select some text from second paragraph and press toolbar link button (or `Cmd` + `K`) to display Link balloon.
+2. Check if balloon hide and there is no errors on browser console.
+
+### Image toolbar #1
+
+1. Click `Start external changes` and quickly click on image element to display image toolbar.
+2. Check if balloon hide and there is no errors on browser console.
+
+### Image toolbar #2
+
+1. Refresh test page.
+2. Click `Start external changes` and quickly click on image element then choose alt component from toolbar
+to display Text alternative balloon.
+2. Check if balloon hide and there is no errors on browser console.