Merge pull request #96 from ckeditor/t/ckeditor5/1151

Tests: Added a manual test for widget selection handler in different UI language directions. See ckeditor/ckeditor5#1151.
ckeditor · Aug 12, 2019 · 4973676 · 4973676
2 parents 763c9ba + 39a2fae
commit 4973676
Show file tree

Hide file tree

Showing 3 changed files with 130 additions and 0 deletions.
diff --git a/tests/manual/selection-handler.html b/tests/manual/selection-handler.html
@@ -0,0 +1,31 @@
+<head>
+	<style>
+		body {
+			max-width: 800px;
+			margin: 20px auto;
+		}
+
+		.ck-content .widget {
+			background: rgba( 0, 0, 0, 0.1 );
+			min-height: 50px;
+		}
+	</style>
+</head>
+
+<h2>LTR UI</h2>
+
+<div id="editor-ltr">
+	<h2>Heading 1</h2>
+	<p>Paragraph</p>
+	<div class="widget"></div>
+	<p>Paragraph</p>
+</div>
+
+<h2>RTL UI</h2>
+
+<div id="editor-rtl">
+	<h2>Heading 1</h2>
+	<p>Paragraph</p>
+	<div class="widget"></div>
+	<p>Paragraph</p>
+</div>
diff --git a/tests/manual/selection-handler.js b/tests/manual/selection-handler.js
@@ -0,0 +1,82 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals console, window, document */
+
+import Widget from '../../src/widget';
+import { toWidget } from '../../src/utils';
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+
+function MyPlugin( editor ) {
+	editor.model.schema.register( 'div', {
+		allowIn: [ '$root' ],
+		isObject: true
+	} );
+
+	editor.conversion.for( 'downcast' ).elementToElement( {
+		model: 'div',
+		view: ( modelElement, writer ) => {
+			return toWidget( writer.createContainerElement( 'div', {
+				class: 'widget'
+			} ),
+			writer,
+			{ hasSelectionHandler: true } );
+		}
+	} );
+
+	editor.conversion.for( 'upcast' ).elementToElement( {
+		model: 'div',
+		view: 'div'
+	} );
+}
+
+const config = {
+	plugins: [ ArticlePluginSet, Widget, MyPlugin ],
+	toolbar: [
+		'heading',
+		'|',
+		'bold',
+		'italic',
+		'link',
+		'bulletedList',
+		'numberedList',
+		'blockQuote',
+		'insertTable',
+		'mediaEmbed',
+		'undo',
+		'redo'
+	],
+	image: {
+		toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
+	},
+	table: {
+		contentToolbar: [
+			'tableColumn',
+			'tableRow',
+			'mergeTableCells'
+		]
+	}
+};
+
+ClassicEditor
+	.create( document.querySelector( '#editor-ltr' ), config )
+	.then( editor => {
+		window.editorLtr = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
+ClassicEditor
+	.create( document.querySelector( '#editor-rtl' ), Object.assign( {}, config, {
+		language: 'ar'
+	} ) )
+	.then( editor => {
+		window.editorRtl = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
diff --git a/tests/manual/selection-handler.md b/tests/manual/selection-handler.md
@@ -0,0 +1,17 @@
+# Widget selection handler
+
+**Note**: For the best testing, run manual tests adding Arabic to [additional languages configuration](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/testing-environment.html#running-manual-tests).
+
+---
+
+1. Focus the widget.
+1. The outline of the widget and the selection handler should be continuous.
+1. The selection handler should be attached to the top of the widget.
+
+## LTR
+
+1. The selection handler should be displayed on the **left** side of the widget.
+
+## RTL
+
+1. The selection handler should be displayed on the **right** side of the widget.