8
0
Просмотр исходного кода

Fix tests to match setting focus outside the editor

panr 6 лет назад
Родитель
Сommit
bbf0650d91

+ 38 - 0
packages/ckeditor5-restricted-editing/tests/manual/restrictedediting-inputs.html

@@ -0,0 +1,38 @@
+<p>
+	<b>Mode</b>:
+	<input type="radio" id="mode-standard" name="mode" value="standard" checked><label for="mode-standard">Standard</label>
+	<input type="radio" id="mode-restricted" name="mode" value="restricted"><label for="mode-restricted">Restricted</label>
+</p>
+
+<form style="margin: 20px 0;">
+	<input type="text" placeholder="Type your name..." value="Nick" />
+	<input type="text" placeholder="Type your surname..." value="Thomas" disabled />
+</form>
+
+<div id="editor">
+	<h2>Heading 1</h2>
+	<p>Paragraph <span class="restricted-editing-exception">it is editable</span></p>
+	<p>Exception on part of a word: <a href="ckeditor.com">coompi</a><span class="restricted-editing-exception"><a href="ckeditor.com">ter</a> (fix spelling in Firefox).</span></p>
+	<p><strong>Bold</strong> <i>Italic</i> <a href="foo">Link</a></p>
+	<ul>
+		<li>UL List item 1</li>
+		<li>UL List item 2</li>
+	</ul>
+	<ol>
+		<li><span class="restricted-editing-exception">OL List item 1</span></li>
+		<li>OL List item 2</li>
+	</ol>
+	<blockquote>
+		<p>Quote</p>
+		<ul>
+			<li>Quoted UL List item 1</li>
+			<li>Quoted UL List item <span class="restricted-editing-exception">2</span></li>
+		</ul>
+		<p>Quote</p>
+	</blockquote>
+</div>
+
+<form style="margin: 20px 0;">
+	<label><input type="radio" name="test" value="test1" checked />Test 1</label>
+	<label><input type="radio" name="test" value="test2" /> Test 2</label>
+</form>

+ 69 - 0
packages/ckeditor5-restricted-editing/tests/manual/restrictedediting-inputs.js

@@ -0,0 +1,69 @@
+/**
+ * @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 window, document */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+import Table from '@ckeditor/ckeditor5-table/src/table';
+
+import StandardEditingMode from '../../src/standardeditingmode';
+import RestrictedEditingMode from '../../src/restrictededitingmode';
+
+const restrictedModeButton = document.getElementById( 'mode-restricted' );
+const standardModeButton = document.getElementById( 'mode-standard' );
+
+restrictedModeButton.addEventListener( 'change', handleModeChange );
+standardModeButton.addEventListener( 'change', handleModeChange );
+
+startMode( document.querySelector( 'input[name="mode"]:checked' ).value );
+
+async function handleModeChange( evt ) {
+	await startMode( evt.target.value );
+}
+
+async function startMode( selectedMode ) {
+	if ( selectedMode === 'standard' ) {
+		await startStandardEditingMode();
+	} else {
+		await startRestrictedEditingMode();
+	}
+}
+
+async function startStandardEditingMode() {
+	await reloadEditor( {
+		plugins: [ ArticlePluginSet, Table, StandardEditingMode ],
+		toolbar: [
+			'heading', '|', 'bold', 'italic', 'link', '|',
+			'bulletedList', 'numberedList', 'blockQuote', 'insertTable', '|',
+			'restrictedEditingException', '|', 'undo', 'redo'
+		],
+		image: {
+			toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
+		},
+		table: {
+			contentToolbar: [
+				'tableColumn',
+				'tableRow',
+				'mergeTableCells'
+			]
+		}
+	} );
+}
+
+async function startRestrictedEditingMode() {
+	await reloadEditor( {
+		plugins: [ ArticlePluginSet, Table, RestrictedEditingMode ],
+		toolbar: [ 'bold', 'italic', 'link', '|', 'restrictedEditing', '|', 'undo', 'redo' ]
+	} );
+}
+
+async function reloadEditor( config ) {
+	if ( window.editor ) {
+		await window.editor.destroy();
+	}
+
+	window.editor = await ClassicEditor.create( document.querySelector( '#editor' ), config );
+}

+ 19 - 0
packages/ckeditor5-restricted-editing/tests/manual/restrictedediting-inputs.md

@@ -0,0 +1,19 @@
+## Restricted editing - Standard mode surrounded by forms
+
+1. The editor should behave exactely the same as editor in Standard Mode.
+
+**Expected behaviour**:
+  - Pressing "Tab" should set focus on:
+    - Mode form
+    - Editor
+    - Radio form below the editor
+  - Pressing "Tab+Shift" from the latest element should set focus in the oposite direction.
+
+## Restricted editing - Restricted mode surrounded by forms
+
+1. The editor should behave exactely the same as editor in Restricted Mode.
+2. The editor is surrounded by forms to test keyboard navigation events using "Tab" and "Tab+Shift".
+
+**Expected behaviour**:
+  - When selection is on the **first** restricted exception, pressing "Tab+Shift" should set focus on the text input with a "value" ("Nick") above the editor
+  - When selection is on the **last** restricted exception, pressing "Tab" should set focus on the radio input with a "label" ("Test 1") below the editor.

+ 6 - 6
packages/ckeditor5-restricted-editing/tests/restrictededitingmodeediting.js

@@ -1039,7 +1039,7 @@ describe( 'RestrictedEditingModeEditing', () => {
 			sinon.assert.calledOnce( domEvtDataStub.stopPropagation );
 		} );
 
-		it( 'should not move to the closest next exception on tab key when there is none', () => {
+		it( 'should set focus outside the editor on tab key when there is none', () => {
 			setModelData( model, '<paragraph>foo qux[]</paragraph>' );
 
 			const paragraph = model.document.getRoot().getChild( 0 );
@@ -1056,8 +1056,8 @@ describe( 'RestrictedEditingModeEditing', () => {
 			view.document.fire( 'keydown', domEvtDataStub );
 
 			sinon.assert.notCalled( editor.execute );
-			sinon.assert.calledOnce( domEvtDataStub.preventDefault );
-			sinon.assert.calledOnce( domEvtDataStub.stopPropagation );
+			sinon.assert.notCalled( domEvtDataStub.preventDefault );
+			sinon.assert.notCalled( domEvtDataStub.stopPropagation );
 		} );
 
 		it( 'should move to the closest previous exception on shift+tab key', () => {
@@ -1092,7 +1092,7 @@ describe( 'RestrictedEditingModeEditing', () => {
 			sinon.assert.calledOnce( domEvtDataStub.stopPropagation );
 		} );
 
-		it( 'should not move to the closest previous exception on shift+tab key when there is none', () => {
+		it( 'should set focus outside the editor on tab+shift key when there is none', () => {
 			setModelData( model, '<paragraph>[]foo qux</paragraph>' );
 
 			const paragraph = model.document.getRoot().getChild( 0 );
@@ -1110,8 +1110,8 @@ describe( 'RestrictedEditingModeEditing', () => {
 			view.document.fire( 'keydown', domEvtDataStub );
 
 			sinon.assert.notCalled( editor.execute );
-			sinon.assert.calledOnce( domEvtDataStub.preventDefault );
-			sinon.assert.calledOnce( domEvtDataStub.stopPropagation );
+			sinon.assert.notCalled( domEvtDataStub.preventDefault );
+			sinon.assert.notCalled( domEvtDataStub.stopPropagation );
 		} );
 	} );