Bläddra i källkod

Tests: Added tests for changes in View#attachDomRoot and #detachDomRoot.

Aleksander Nowodzinski 7 år sedan
förälder
incheckning
a7a1733077

+ 4 - 4
packages/ckeditor5-engine/src/view/view.js

@@ -206,12 +206,12 @@ export default class View {
 			}
 		}
 
-		const onIsReadOnlyChange = () => {
+		const updateContenteditableAttribute = () => {
 			this._writer.setAttribute( 'contenteditable', !viewRoot.isReadOnly, viewRoot );
 		};
 
-		// Set initial values.
-		onIsReadOnlyChange();
+		// Set initial value.
+		updateContenteditableAttribute();
 
 		this.domRoots.set( name, domRoot );
 		this.domConverter.bindElements( domRoot, viewRoot );
@@ -222,7 +222,7 @@ export default class View {
 		viewRoot.on( 'change:children', ( evt, node ) => this._renderer.markToSync( 'children', node ) );
 		viewRoot.on( 'change:attributes', ( evt, node ) => this._renderer.markToSync( 'attributes', node ) );
 		viewRoot.on( 'change:text', ( evt, node ) => this._renderer.markToSync( 'text', node ) );
-		viewRoot.on( 'change:isReadOnly', () => this.change( onIsReadOnlyChange ) );
+		viewRoot.on( 'change:isReadOnly', () => this.change( updateContenteditableAttribute ) );
 
 		for ( const observer of this._observers.values() ) {
 			observer.observe( domRoot, name );

+ 73 - 0
packages/ckeditor5-engine/tests/view/view/view.js

@@ -119,6 +119,19 @@ describe( 'view', () => {
 			expect( view._renderer.markedChildren.has( viewH1 ) ).to.be.true;
 		} );
 
+		it( 'should handle the "contenteditable" attribute management on #isReadOnly change', () => {
+			const domDiv = document.createElement( 'div' );
+			const viewRoot = createViewRoot( viewDocument, 'div', 'main' );
+
+			view.attachDomRoot( domDiv );
+
+			viewRoot.isReadOnly = false;
+			expect( viewRoot.getAttribute( 'contenteditable' ) ).to.equal( 'true' );
+
+			viewRoot.isReadOnly = true;
+			expect( viewRoot.getAttribute( 'contenteditable' ) ).to.equal( 'false' );
+		} );
+
 		it( 'should call observe on each observer', () => {
 			// The variable will be overwritten.
 			view.destroy();
@@ -144,6 +157,66 @@ describe( 'view', () => {
 		} );
 	} );
 
+	describe( 'detachDomRoot()', () => {
+		it( 'should remove DOM root and unbind DOM element', () => {
+			const domDiv = document.createElement( 'div' );
+			const viewRoot = createViewRoot( viewDocument, 'div', 'main' );
+
+			view.attachDomRoot( domDiv );
+			expect( count( view.domRoots ) ).to.equal( 1 );
+			expect( view.domConverter.mapViewToDom( viewRoot ) ).to.equal( domDiv );
+
+			view.detachDomRoot( 'main' );
+			expect( count( view.domRoots ) ).to.equal( 0 );
+			expect( view.domConverter.mapViewToDom( viewRoot ) ).to.be.undefined;
+		} );
+
+		it( 'should restore the DOM root attributes to the state before attachDomRoot()', () => {
+			const domDiv = document.createElement( 'div' );
+			const viewRoot = createViewRoot( viewDocument, 'div', 'main' );
+
+			domDiv.setAttribute( 'foo', 'bar' );
+			domDiv.setAttribute( 'data-baz', 'qux' );
+			domDiv.classList.add( 'foo-class' );
+
+			view.attachDomRoot( domDiv );
+
+			view.change( writer => {
+				writer.addClass( 'addedClass', viewRoot );
+				writer.setAttribute( 'added-attribute', 'foo', viewRoot );
+				writer.setAttribute( 'foo', 'changed the value', viewRoot );
+			} );
+
+			view.detachDomRoot( 'main' );
+
+			const attributes = {};
+
+			for ( const attribute of domDiv.attributes ) {
+				attributes[ attribute.name ] = attribute.value;
+			}
+
+			expect( attributes ).to.deep.equal( {
+				foo: 'bar',
+				'data-baz': 'qux',
+				class: 'foo-class'
+			} );
+		} );
+
+		it( 'should remove the "contenteditable" attribute', () => {
+			const domDiv = document.createElement( 'div' );
+			const viewRoot = createViewRoot( viewDocument, 'div', 'main' );
+
+			view.attachDomRoot( domDiv );
+
+			viewRoot.isReadOnly = false;
+			expect( viewRoot.getAttribute( 'contenteditable' ) ).to.equal( 'true' );
+
+			view.detachDomRoot( 'main' );
+
+			expect( viewRoot.hasAttribute( 'contenteditable' ) ).to.be.false;
+		} );
+	} );
+
 	describe( 'addObserver()', () => {
 		beforeEach( () => {
 			// The variable will be overwritten.