Преглед на файлове

Added test case for deleted content.

Oskar Wróbel преди 8 години
родител
ревизия
66579473f7

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

@@ -1,17 +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 -> This specification defines the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML).</p>
+	<p>EXTERNAL CHANGES WILL START HERE -> This specification defines the 5th major revision THIS TEXT FRAGMENT WILL BE DELETED 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>EXTERNAL CHANGES WILL START HERE -> This specification defines the 5th major <a href="http://ckeditor.com">revision</a> of the core language of the World Wide Web: the Hypertext Markup Language (HTML).</p>
+	<p>EXTERNAL CHANGES WILL START HERE -> This specification <a href="http://ckeditor.com">defines the 5th</a> major revision THIS TEXT <a href="http://ckeditor.com">FRAGMENT WILL</a> BE DELETED 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>EXTERNAL CHANGES WILL START HERE -> In this version, new features are introduced to help Web <figure class="image"><img src="sample.jpg" alt="CKEditor logo" /></figure> application authors  new elements are introduced based on research into prevailing authoring practices, and special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability.</p></p>
+	<p>EXTERNAL CHANGES WILL START HERE -> In this version, new features are introduced to help Web <figure class="image"><img src="sample.jpg" alt="CKEditor logo" /></figure> application authors  new elements are introduced based on <figure class="image"><img src="sample-to-delete.jpg" alt="CKEditor logo" /></figure> research into prevailing authoring practices, and special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability.</p></p>
 </div>

+ 38 - 19
packages/ckeditor5-ui/tests/manual/tickets/198/1.js

@@ -12,6 +12,7 @@ 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' ), {
@@ -19,7 +20,9 @@ ClassicEditor.create( document.querySelector( '#editor-ct' ), {
 	toolbar: [ 'undo', 'redo' ],
 	contextualToolbar: [ 'bold', 'italic' ]
 } )
-.then( editor => initExternalChangesHandler( editor, document.querySelector( '#button-ct' ) ) )
+.then( editor => {
+	initExternalChangesHandler( editor, document.querySelector( '#button-ct' ) );
+} )
 .catch( err => console.error( err.stack ) );
 
 // Editor for the Link plugin.
@@ -28,30 +31,42 @@ ClassicEditor.create( document.querySelector( '#editor-link' ), {
 	toolbar: [ 'undo', 'redo', 'link' ],
 	contextualToolbar: [ 'bold', 'italic' ]
 } )
-.then( editor => initExternalChangesHandler( editor, document.querySelector( '#button-link' ) ) )
+.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' ]
+	image: {
+		toolbar: [ 'imageStyleFull', 'imageStyleSide', '|' , 'imageTextAlternative' ]
+	}
+} )
+.then( editor => {
+	initExternalChangesHandler( editor, document.querySelector( '#button-image-toolbar' ), [ [ 7 ], 1 ] );
 } )
-.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 ) {
+function initExternalChangesHandler( editor, element, deleteData ) {
 	element.addEventListener( 'click', () => {
 		element.disabled = true;
-		startExternalChanges( editor ).then( () => element.disabled = false );
+		startExternalChanges( editor, deleteData );
 	} );
 }
 
-function startExternalChanges( editor ) {
+function startExternalChanges( editor, deleteData = [ [ 4, 180 ], 35 ] ) {
 	const document = editor.document;
 	const bath = document.batch( 'transparent' );
 
+	function wait( delay ) {
+		return new Promise( ( resolve ) => {
+			setTimeout( () => resolve(), delay );
+		} );
+	}
+
 	function type( path, text ) {
 		return new Promise( ( resolve ) => {
 			let position = new Position( document.getRoot(), path );
@@ -80,23 +95,26 @@ function startExternalChanges( editor ) {
 	}
 
 	function insertNewLine( path ) {
-		return new Promise( ( resolve ) => {
-			setTimeout( () => {
-				document.enqueueChanges( () => {
-					bath.insert( new Position( document.getRoot(), path  ), new Element( 'paragraph' ) );
-					resolve();
-				} );
-			}, 200 );
+		return wait( 200 ).then( () => {
+			document.enqueueChanges( () => {
+				bath.insert( new Position( document.getRoot(), path ), new Element( 'paragraph' ) );
+			} );
+
+			return Promise.resolve();
 		} );
 	}
 
-	function wait( delay ) {
-		return new Promise( ( resolve ) => {
-			setTimeout( () => resolve(), delay );
+	function removeText( path, howMany ) {
+		return wait( 200 ).then( () => {
+			document.enqueueChanges( () => {
+				bath.remove( Range.createFromPositionAndShift( new Position( document.getRoot(), path ), howMany ) );
+			} );
+
+			return Promise.resolve();
 		} );
 	}
 
-	return wait( 3000 )
+	wait( 3000 )
 		.then( () => type( [ 0, 36 ], `This specification defines the 5th major revision of the core language of the World Wide Web. ` ) )
 		.then( () => insertNewLine( [ 0 ] ) )
 		.then( () => type( [ 0, 0 ], 'a' ) )
@@ -105,5 +123,6 @@ function startExternalChanges( editor ) {
 		.then( () => insertNewLine( [ 2 ] ) )
 		.then( () => type( [ 2, 0 ], 'c' ) )
 		.then( () => insertNewLine( [ 0 ] ) )
-		.then( () => type( [ 0, 0 ], 'EXTERNAL CHANGES WILL START FROM HERE -> ' ) );
+		.then( () => type( [ 0, 0 ], 'DONE :)' ) )
+		.then( () => removeText( deleteData[ 0 ], deleteData[ 1 ] ) );
 }

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

@@ -29,3 +29,9 @@ toolbar link button (or `Cmd` + `K`) to display Link balloon.
 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.
+
+## Refresh test page
+
+1. Click `Start external changes` and attach balloon to this part of content which will be deleted.
+2. Observe if balloon hide.
+3. Repeat for the each section.

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


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