浏览代码

Tests: added additional tests for ui element handling.

Szymon Cofalik 8 年之前
父节点
当前提交
93a54057e1

+ 91 - 0
packages/ckeditor5-engine/tests/view/document/jumpoveruielement.js

@@ -0,0 +1,91 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals document */
+
+import ViewDocument from '../../../src/view/document';
+import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
+import createElement from '@ckeditor/ckeditor5-utils/src/dom/createelement';
+import { setData } from '../../../src/dev-utils/view';
+
+describe( 'Document', () => {
+	let viewDocument, domRoot;
+
+	beforeEach( () => {
+		domRoot = createElement( document, 'div', {
+			contenteditable: 'true'
+		} );
+		document.body.appendChild( domRoot );
+
+		viewDocument = new ViewDocument();
+		viewDocument.createRoot( domRoot );
+
+		document.getSelection().removeAllRanges();
+
+		viewDocument.isFocused = true;
+	} );
+
+	afterEach( () => {
+		viewDocument.destroy();
+
+		domRoot.parentElement.removeChild( domRoot );
+	} );
+
+	describe( 'jump over ui element handler', () => {
+		it( 'jump over ui element when right arrow is pressed before ui element', () => {
+			setData( viewDocument, '<container:p>foo{}<ui:span></ui:span>bar</container:p>' );
+			viewDocument.render();
+
+			viewDocument.fire( 'keydown', { keyCode: keyCodes.arrowright, domTarget: viewDocument.domRoots.get( 'main' ) } );
+
+			const domSelection = document.getSelection();
+
+			expect( domSelection.anchorNode.nodeName.toUpperCase() ).to.equal( 'P' );
+			expect( domSelection.anchorOffset ).to.equal( 2 );
+			expect( domSelection.isCollapsed ).to.be.true;
+		} );
+
+		it( 'should do nothing when another key is pressed', () => {
+			setData( viewDocument, '<container:p>foo<ui:span></ui:span>{}bar</container:p>' );
+			viewDocument.render();
+
+			viewDocument.fire( 'keydown', { keyCode: keyCodes.arrowleft, domTarget: viewDocument.domRoots.get( 'main' ) } );
+
+			const domSelection = document.getSelection();
+
+			expect( domSelection.anchorNode.data ).to.equal( 'bar' );
+			expect( domSelection.anchorOffset ).to.equal( 0 );
+			expect( domSelection.isCollapsed ).to.be.true;
+		} );
+
+		it( 'should do nothing if range is not collapsed', () => {
+			setData( viewDocument, '<container:p>f{oo}<ui:span></ui:span>bar</container:p>' );
+			viewDocument.render();
+
+			viewDocument.fire( 'keydown', { keyCode: keyCodes.arrowright, domTarget: viewDocument.domRoots.get( 'main' ) } );
+
+			const domSelection = document.getSelection();
+
+			expect( domSelection.anchorNode.data ).to.equal( 'foo' );
+			expect( domSelection.anchorOffset ).to.equal( 1 );
+			expect( domSelection.focusNode.data ).to.equal( 'foo' );
+			expect( domSelection.focusOffset ).to.equal( 3 );
+			expect( domSelection.isCollapsed ).to.be.false;
+		} );
+
+		it( 'should do nothing if caret is not directly before ui element', () => {
+			setData( viewDocument, '<container:p>fo{}o<ui:span></ui:span>bar</container:p>' );
+			viewDocument.render();
+
+			viewDocument.fire( 'keydown', { keyCode: keyCodes.arrowright, domTarget: viewDocument.domRoots.get( 'main' ) } );
+
+			const domSelection = document.getSelection();
+
+			expect( domSelection.anchorNode.data ).to.equal( 'foo' );
+			expect( domSelection.anchorOffset ).to.equal( 2 );
+			expect( domSelection.isCollapsed ).to.be.true;
+		} );
+	} );
+} );

+ 22 - 6
packages/ckeditor5-engine/tests/view/domconverter/domconverter.js

@@ -9,6 +9,7 @@ import DomConverter from '../../../src/view/domconverter';
 import ViewEditable from '../../../src/view/editableelement';
 import ViewDocument from '../../../src/view/document';
 import ViewUIElement from '../../../src/view/uielement';
+import ViewContainerElement from '../../../src/view/containerelement';
 import { BR_FILLER, NBSP_FILLER, INLINE_FILLER, INLINE_FILLER_LENGTH } from '../../../src/view/filler';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 import global from '@ckeditor/ckeditor5-utils/src/dom/global';
@@ -202,7 +203,7 @@ describe( 'DomConverter', () => {
 			return sel;
 		}
 
-		let domP, domFillerTextNode, domUiSpan;
+		let domP, domFillerTextNode, domUiSpan, domUiDeepSpan;
 
 		beforeEach( () => {
 			// <p>INLINE_FILLERfoo<span></span></p>.
@@ -210,12 +211,17 @@ describe( 'DomConverter', () => {
 			domFillerTextNode = document.createTextNode( INLINE_FILLER + 'foo' );
 			domUiSpan = document.createElement( 'span' );
 
+			domUiDeepSpan = document.createElement( 'span' );
+			domUiSpan.appendChild( domUiDeepSpan );
+
 			const viewUiSpan = new ViewUIElement( 'span' );
+			const viewElementSpan = new ViewContainerElement( 'span' );
 
 			domP.appendChild( domFillerTextNode );
 			domP.appendChild( domUiSpan );
 
 			converter.bindElements( domUiSpan, viewUiSpan );
+			converter.bindElements( domUiDeepSpan, viewElementSpan );
 
 			document.body.appendChild( domP );
 		} );
@@ -237,7 +243,7 @@ describe( 'DomConverter', () => {
 		describe( 'should return false', () => {
 			it( 'if anchor or focus is before filler node', () => {
 				// Tests forward and backward selection.
-				// <p>[INLINE_FILLERfoo]<span></span></p>.
+				// <p>[INLINE_FILLERfoo]<span-ui><span-container></span></span></p>.
 				const sel1 = domSelection( domP, 0, domP, 1 );
 				expect( converter.isDomSelectionCorrect( sel1 ) ).to.be.false;
 
@@ -247,7 +253,7 @@ describe( 'DomConverter', () => {
 
 			it( 'if anchor or focus is before filler sequence', () => {
 				// Tests forward and backward selection.
-				// <p>{INLINE_FILLERfoo}<span></span></p>.
+				// <p>{INLINE_FILLERfoo}<span-ui><span-container></span></span></p>.
 				const sel1 = domSelection( domFillerTextNode, 0, domFillerTextNode, INLINE_FILLER_LENGTH + 3 );
 				expect( converter.isDomSelectionCorrect( sel1 ) ).to.be.false;
 
@@ -257,7 +263,7 @@ describe( 'DomConverter', () => {
 
 			it( 'if anchor or focus is in the middle of filler sequence', () => {
 				// Tests forward and backward selection.
-				// <p>I{NLINE_FILLERfoo}<span></span></p>.
+				// <p>I{NLINE_FILLERfoo}<span-ui><span-container></span></span></p>.
 				const sel1 = domSelection( domFillerTextNode, 1, domFillerTextNode, INLINE_FILLER_LENGTH + 3 );
 				expect( converter.isDomSelectionCorrect( sel1 ) ).to.be.false;
 
@@ -265,15 +271,25 @@ describe( 'DomConverter', () => {
 				expect( converter.isDomSelectionCorrect( sel2 ) ).to.be.false;
 			} );
 
-			it( 'if anchor or focus is inside dom element that represents view ui element', () => {
+			it( 'if anchor or focus is directly inside dom element that represents view ui element', () => {
 				// Tests forward and backward selection.
-				// <p>INLINE_FILLER{foo<span>]</span></p>.
+				// <p>INLINE_FILLER{foo<span-ui>]<span-container></span></span></p>.
 				const sel1 = domSelection( domFillerTextNode, INLINE_FILLER_LENGTH + 3, domUiSpan, 0 );
 				expect( converter.isDomSelectionCorrect( sel1 ) ).to.be.false;
 
 				const sel2 = domSelection( domUiSpan, 0, domFillerTextNode, INLINE_FILLER_LENGTH + 3 );
 				expect( converter.isDomSelectionCorrect( sel2 ) ).to.be.false;
 			} );
+
+			it( 'if anchor or focus is inside deep ui element structure (not directly in ui element)', () => {
+				// Tests forward and backward selection.
+				// <p>INLINE_FILLER{foo<span-ui><span-container>]</span></span></p>.
+				const sel1 = domSelection( domFillerTextNode, INLINE_FILLER_LENGTH + 3, domUiDeepSpan, 0 );
+				expect( converter.isDomSelectionCorrect( sel1 ) ).to.be.false;
+
+				const sel2 = domSelection( domUiDeepSpan, 0, domFillerTextNode, INLINE_FILLER_LENGTH + 3 );
+				expect( converter.isDomSelectionCorrect( sel2 ) ).to.be.false;
+			} );
 		} );
 	} );
 } );