| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270 |
- /**
- * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
- /* bender-tags: treeview */
- 'use strict';
- import Renderer from '/ckeditor5/engine/treeview/renderer.js';
- import ViewElement from '/ckeditor5/engine/treeview/element.js';
- import ViewText from '/ckeditor5/engine/treeview/text.js';
- import DomConverter from '/ckeditor5/engine/treeview/domconverter.js';
- import CKEditorError from '/ckeditor5/utils/ckeditorerror.js';
- describe( 'Renderer', () => {
- let domConverter, renderer;
- before( () => {
- domConverter = new DomConverter();
- renderer = new Renderer( domConverter );
- } );
- describe( 'markToSync', () => {
- let viewNode;
- beforeEach( () => {
- viewNode = new ViewElement( 'p' );
- const domNode = document.createElement( 'p' );
- domConverter.bindElements( domNode, viewNode );
- viewNode.appendChildren( new ViewText( 'foo' ) );
- renderer.markedTexts.clear();
- renderer.markedAttributes.clear();
- renderer.markedChildren.clear();
- } );
- it( 'should mark attributes which need update', () => {
- viewNode.setAttribute( 'class', 'foo' );
- renderer.markToSync( 'ATTRIBUTES', viewNode );
- expect( renderer.markedAttributes.has( viewNode ) ).to.be.true;
- } );
- it( 'should mark children which need update', () => {
- viewNode.appendChildren( new ViewText( 'foo' ) );
- renderer.markToSync( 'CHILDREN', viewNode );
- expect( renderer.markedChildren.has( viewNode ) ).to.be.true;
- } );
- it( 'should not mark children if element has no corresponding node', () => {
- // Overwrite viewNode with node without coresponding DOM node.
- viewNode = new ViewElement( 'p' );
- viewNode.appendChildren( new ViewText( 'foo' ) );
- renderer.markToSync( 'CHILDREN', viewNode );
- expect( renderer.markedTexts.has( viewNode ) ).to.be.false;
- } );
- it( 'should mark text which need update', () => {
- const viewText = new ViewText( 'foo' );
- viewNode.appendChildren( viewText );
- viewText.data = 'bar';
- renderer.markToSync( 'TEXT', viewText );
- expect( renderer.markedTexts.has( viewText ) ).to.be.true;
- } );
- it( 'should not mark text if parent has no corresponding node', () => {
- const viewText = new ViewText( 'foo' );
- // Overwrite viewNode with node without coresponding DOM node.
- viewNode = new ViewElement( 'p' );
- viewNode.appendChildren( viewText );
- viewText.data = 'bar';
- renderer.markToSync( 'TEXT', viewText );
- expect( renderer.markedTexts.has( viewText ) ).to.be.false;
- } );
- it( 'should throw if the type is unknown', () => {
- expect( () => {
- renderer.markToSync( 'UNKNOWN', viewNode );
- } ).to.throw( CKEditorError, /^renderer-unknown-type/ );
- } );
- } );
- describe( 'render', () => {
- let viewNode, domNode;
- beforeEach( () => {
- viewNode = new ViewElement( 'p' );
- domNode = document.createElement( 'p' );
- domConverter.bindElements( domNode, viewNode );
- renderer.markedTexts.clear();
- renderer.markedAttributes.clear();
- renderer.markedChildren.clear();
- } );
- it( 'should update attributes', () => {
- viewNode.setAttribute( 'class', 'foo' );
- renderer.markToSync( 'ATTRIBUTES', viewNode );
- renderer.render();
- expect( domNode.getAttribute( 'class' ) ).to.equal( 'foo' );
- expect( renderer.markedAttributes.size ).to.equal( 0 );
- } );
- it( 'should remove attributes', () => {
- viewNode.setAttribute( 'class', 'foo' );
- domNode.setAttribute( 'id', 'bar' );
- domNode.setAttribute( 'class', 'bar' );
- renderer.markToSync( 'ATTRIBUTES', viewNode );
- renderer.render();
- expect( domNode.getAttribute( 'class' ) ).to.equal( 'foo' );
- expect( domNode.getAttribute( 'id' ) ).to.be.not.ok;
- expect( renderer.markedAttributes.size ).to.equal( 0 );
- } );
- it( 'should add children', () => {
- viewNode.appendChildren( new ViewText( 'foo' ) );
- renderer.markToSync( 'CHILDREN', viewNode );
- renderer.render();
- expect( domNode.childNodes.length ).to.equal( 1 );
- expect( domNode.childNodes[ 0 ].data ).to.equal( 'foo' );
- expect( renderer.markedChildren.size ).to.equal( 0 );
- } );
- it( 'should remove children', () => {
- viewNode.appendChildren( new ViewText( 'foo' ) );
- renderer.markToSync( 'CHILDREN', viewNode );
- renderer.render();
- expect( domNode.childNodes.length ).to.equal( 1 );
- expect( domNode.childNodes[ 0 ].data ).to.equal( 'foo' );
- viewNode.removeChildren( 0, 1 );
- renderer.markToSync( 'CHILDREN', viewNode );
- renderer.render();
- expect( domNode.childNodes.length ).to.equal( 0 );
- expect( renderer.markedChildren.size ).to.equal( 0 );
- } );
- it( 'should update text', () => {
- const viewText = new ViewText( 'foo' );
- viewNode.appendChildren( viewText );
- renderer.markToSync( 'CHILDREN', viewNode );
- renderer.render();
- expect( domNode.childNodes.length ).to.equal( 1 );
- expect( domNode.childNodes[ 0 ].data ).to.equal( 'foo' );
- viewText.data = 'bar';
- renderer.markToSync( 'TEXT', viewText );
- renderer.render();
- expect( domNode.childNodes.length ).to.equal( 1 );
- expect( domNode.childNodes[ 0 ].data ).to.equal( 'bar' );
- expect( renderer.markedTexts.size ).to.equal( 0 );
- } );
- it( 'should not update text parent child list changed', () => {
- const viewImg = new ViewElement( 'img' );
- const viewText = new ViewText( 'foo' );
- viewNode.appendChildren( [ viewImg, viewText ] );
- renderer.markToSync( 'CHILDREN', viewNode );
- renderer.markToSync( 'TEXT', viewText );
- renderer.render();
- expect( domNode.childNodes.length ).to.equal( 2 );
- expect( domNode.childNodes[ 0 ].tagName ).to.equal( 'IMG' );
- expect( domNode.childNodes[ 1 ].data ).to.equal( 'foo' );
- } );
- it( 'should not change text if it is the same during text rendering', () => {
- const viewText = new ViewText( 'foo' );
- viewNode.appendChildren( viewText );
- renderer.markToSync( 'CHILDREN', viewNode );
- renderer.render();
- // This should not be changed during the render.
- const domText = domNode.childNodes[ 0 ];
- renderer.markToSync( 'TEXT', viewText );
- renderer.render();
- expect( domNode.childNodes.length ).to.equal( 1 );
- expect( domNode.childNodes[ 0 ] ).to.equal( domText );
- } );
- it( 'should not change text if it is the same during children rendering', () => {
- const viewText = new ViewText( 'foo' );
- viewNode.appendChildren( viewText );
- renderer.markToSync( 'CHILDREN', viewNode );
- renderer.render();
- // This should not be changed during the render.
- const domText = domNode.childNodes[ 0 ];
- renderer.markToSync( 'CHILDREN', viewNode );
- renderer.render();
- expect( domNode.childNodes.length ).to.equal( 1 );
- expect( domNode.childNodes[ 0 ] ).to.equal( domText );
- } );
- it( 'should not change element if it is the same', () => {
- const viewImg = new ViewElement( 'img' );
- viewNode.appendChildren( viewImg );
- // This should not be changed during the render.
- const domImg = document.createElement( 'img' );
- domNode.appendChild( domImg );
- domConverter.bindElements( domImg, viewImg );
- renderer.markToSync( 'CHILDREN', viewNode );
- renderer.render();
- expect( domNode.childNodes.length ).to.equal( 1 );
- expect( domNode.childNodes[ 0 ] ).to.equal( domImg );
- } );
- it( 'should change element if it is different', () => {
- const viewImg = new ViewElement( 'img' );
- viewNode.appendChildren( viewImg );
- renderer.markToSync( 'CHILDREN', viewNode );
- renderer.render();
- const viewP = new ViewElement( 'p' );
- viewNode.removeChildren( 0, 1 );
- viewNode.appendChildren( viewP );
- renderer.markToSync( 'CHILDREN', viewNode );
- renderer.render();
- expect( domNode.childNodes.length ).to.equal( 1 );
- expect( domNode.childNodes[ 0 ].tagName ).to.equal( 'P' );
- } );
- } );
- } );
|