浏览代码

Enhanced manual test with a second editor and more advanced testing instructions.

Aleksander Nowodzinski 8 年之前
父节点
当前提交
49ebc98ae7

+ 12 - 7
packages/ckeditor5-editor-inline/tests/manual/inline.html

@@ -1,23 +1,28 @@
 <p>
-	<button id="destroyEditor">Destroy editor</button>
-	<button id="initEditor">Init editor</button>
+	<button id="destroyEditors">Destroy editor</button>
+	<button id="initEditors">Init editors</button>
 </p>
 
-<div id="editor" contenteditable="true" class="custom-class" custom-attr="foo">
-	<h2>Hello world!</h2>
+<div id="editor-1" contenteditable="true" class="custom-class" custom-attr="foo">
+	<h2>Editor 1</h2>
 	<p>This is an editor instance.</p>
 </div>
 
+<div id="editor-2" contenteditable="true" class="custom-class" custom-attr="foo">
+	<h2>Editor 2</h2>
+	<p>This is another editor instance.</p>
+</div>
+
 <style>
 	body {
 		width: 10000px;
 		height: 10000px;
 	}
 
-	#editor {
-		margin-top: 200px;
+	.custom-class {
+		margin-top: 100px;
 		margin-left: 100px;
-		margin-bottom: 200px;
+		margin-bottom: 100px;
 		width: 450px;
 	}
 </style>

+ 47 - 31
packages/ckeditor5-editor-inline/tests/manual/inline.js

@@ -16,40 +16,56 @@ import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
 import Link from '@ckeditor/ckeditor5-link/src/link';
 import testUtils from '@ckeditor/ckeditor5-utils/tests/_utils/utils';
 
-let editor, editable, observer;
-
-function initEditor() {
-	InlineEditor.create( document.querySelector( '#editor' ), {
-		plugins: [ Link, Enter, Typing, Paragraph, Undo, Heading, Bold, Italic ],
-		toolbar: [ 'headings', 'bold', 'italic', 'undo', 'redo', 'link', 'unlink' ]
-	} )
-	.then( newEditor => {
-		console.log( 'Editor was initialized', newEditor );
-		console.log( 'You can now play with it using global `editor` and `editable` variables.' );
-
-		window.editor = editor = newEditor;
-		window.editable = editable = editor.editing.view.getRoot();
-
-		observer = testUtils.createObserver();
-		observer.observe( 'editor.ui.focusTracker', editor.ui.focusTracker, [ 'isFocused' ] );
-	} )
-	.catch( err => {
-		console.error( err.stack );
-	} );
-}
+window.editors = {};
+window.editables = [];
+window._observers = [];
+
+function initEditors() {
+	init( '#editor-1' );
+	init( '#editor-2' );
+
+	function init( selector ) {
+		InlineEditor.create( document.querySelector( selector ), {
+			plugins: [ Link, Enter, Typing, Paragraph, Undo, Heading, Bold, Italic ],
+			toolbar: [ 'headings', 'bold', 'italic', 'undo', 'redo', 'link', 'unlink' ]
+		} )
+		.then( editor => {
+			console.log( `${ selector } has been initialized`, editor );
+			console.log( 'It has been added to global `editors` and `editables`.' );
 
-function destroyEditor() {
-	editor.destroy()
-		.then( () => {
-			window.editor = editor = null;
-			window.editable = editable = null;
+			window.editors[ selector ] = editor;
+			window.editables.push( editor.editing.view.getRoot() );
 
-			observer.stopListening();
-			observer = null;
+			let observer = testUtils.createObserver();
 
-			console.log( 'Editor was destroyed' );
+			observer.observe(
+				`${ selector }.ui.focusTracker`,
+				editor.ui.focusTracker,
+				[ 'isFocused' ]
+			);
+
+			window._observers.push( observer );
+		} )
+		.catch( err => {
+			console.error( err.stack );
 		} );
+	}
+}
+
+function destroyEditors() {
+	for ( let selector in window.editors ) {
+		window.editors[ selector ].destroy().then( () => {
+			console.log( `${ selector } was destroyed.` );
+		} );
+	}
+
+	for ( let observer of window._observers ) {
+		observer.stopListening();
+	}
+
+	window.editors = {};
+	window.editables.length = window._observers.length = 0;
 }
 
-document.getElementById( 'initEditor' ).addEventListener( 'click', initEditor );
-document.getElementById( 'destroyEditor' ).addEventListener( 'click', destroyEditor );
+document.getElementById( 'initEditors' ).addEventListener( 'click', initEditors );
+document.getElementById( 'destroyEditors' ).addEventListener( 'click', destroyEditors );

+ 18 - 15
packages/ckeditor5-editor-inline/tests/manual/inline.md

@@ -1,24 +1,27 @@
-1. Click "Init editor".
+1. Click "Init editors".
 2. Expected:
-  * Inline editor should be created.
-  * The element used as editable should remain visible.
-    * It should preserve `.custom-class` and `custom-attr="foo"`.
-  * There should be a floating toolbar with "Bold", "Italic", "Undo", "Redo", "Link" and "Unlink" buttons.
+  * Two inline editor should be created.
+  * Elements used as editables should remain visible.
+    * They should preserve `.custom-class` and `custom-attr="foo"`.
+  * There should be floating toolbars with "Bold", "Italic", "Undo", "Redo", "Link" and "Unlink" buttons.
 3. Scroll the webpage.
 4. Expected:
-  * The toolbar should float around but always stick to editable.
-  * The toolbar should stick to the bottom of the editable if there's not enough space above.
-5. Click "Destroy editor".
+  * Focused editor's toolbar should float around but always stick to editable.
+  * Focused editor's toolbar should stick to the bottom of the editable if there's not enough space above.
+5. Press <kbd>Alt+F10</kbd> when focusing the editor.
 6. Expected:
-  * Editor should be destroyed.
-  * The element used as editable should remain visible.
-    * It should preserve `.custom-class` and `custom-attr="foo"`.
-  * The element should contain its data (updated).
-  * The 'ck-body region' should be removed.
+  * Toolbar should gain focus. Editable should keep its styling.
+7. Click "Destroy editors".
+8. Expected:
+  * Editors should be destroyed.
+  * Element used as editables should remain visible.
+    * They should preserve `.custom-class` and `custom-attr="foo"`.
+  * Elements should contain its data (updated).
+  * `.ck-body` regions should be removed from `<body>`.
 
 ## Notes:
 
 * You can play with:
-  * `editable.isReadOnly`,
-* Changes to `editor.focusTracker.isFocused` should be logged to the console.
+  * `window.editables[ N ].isReadOnly`,
+* Changes to `window.editors[ name ].focusTracker.isFocused` should be logged to the console.
 * Features should work.