Browse Source

Add test for fast diff in renderer.

Maciej Gołaszewski 6 years ago
parent
commit
5d76a9fd9d
1 changed files with 121 additions and 0 deletions
  1. 121 0
      packages/ckeditor5-engine/tests/view/renderer.js

+ 121 - 0
packages/ckeditor5-engine/tests/view/renderer.js

@@ -3252,6 +3252,117 @@ describe( 'Renderer', () => {
 				] );
 			} );
 
+			describe( 'using fastDiff() - significant number of nodes in the editor', () => {
+				it( 'should add only one child (at the beginning)', () => {
+					viewRoot._appendChild( parse( makeContainers( 151 ) ) );
+
+					renderer.markToSync( 'children', viewRoot );
+					renderer.render();
+					cleanObserver( observer );
+
+					viewRoot._insertChild( 0, parse( '<container:p>x</container:p>' ) );
+
+					renderer.markToSync( 'children', viewRoot );
+					renderer.render();
+
+					expect( getMutationStats( observer.takeRecords() ) ).to.deep.equal( [
+						'added: 1, removed: 0'
+					] );
+				} );
+
+				it( 'should add only one child (at the end)', () => {
+					viewRoot._appendChild( parse( makeContainers( 151 ) ) );
+
+					renderer.markToSync( 'children', viewRoot );
+					renderer.render();
+					cleanObserver( observer );
+
+					viewRoot._appendChild( parse( '<container:p>x</container:p>' ) );
+
+					renderer.markToSync( 'children', viewRoot );
+					renderer.render();
+
+					expect( getMutationStats( observer.takeRecords() ) ).to.deep.equal( [
+						'added: 1, removed: 0'
+					] );
+				} );
+
+				it( 'should add only one child (in the middle)', () => {
+					viewRoot._appendChild( parse( makeContainers( 151 ) ) );
+
+					renderer.markToSync( 'children', viewRoot );
+					renderer.render();
+					cleanObserver( observer );
+
+					viewRoot._insertChild( 75, parse( '<container:p>x</container:p>' ) );
+
+					renderer.markToSync( 'children', viewRoot );
+					renderer.render();
+
+					expect( getMutationStats( observer.takeRecords() ) ).to.deep.equal( [
+						'added: 1, removed: 0'
+					] );
+				} );
+
+				it( 'should not touch elements at all (rendering texts is enough)', () => {
+					viewRoot._appendChild( parse( makeContainers( 151 ) ) );
+
+					renderer.markToSync( 'children', viewRoot );
+					renderer.render();
+					cleanObserver( observer );
+
+					viewRoot._insertChild( 1, parse( '<container:p>x</container:p>' ) );
+					viewRoot._removeChildren( 0, 1 );
+
+					renderer.markToSync( 'children', viewRoot );
+					renderer.render();
+
+					expect( getMutationStats( observer.takeRecords() ) ).to.be.empty;
+				} );
+
+				it( 'should add and remove one', () => {
+					viewRoot._appendChild( parse( makeContainers( 151 ) ) );
+
+					renderer.markToSync( 'children', viewRoot );
+					renderer.render();
+					cleanObserver( observer );
+
+					viewRoot._insertChild( 1, parse( '<container:h1>x</container:h1>' ) );
+					viewRoot._removeChildren( 0, 1 );
+
+					renderer.markToSync( 'children', viewRoot );
+					renderer.render();
+
+					expect( getMutationStats( observer.takeRecords() ) ).to.deep.equal( [
+						'added: 1, removed: 0',
+						'added: 0, removed: 1'
+					] );
+				} );
+
+				it( 'should not touch the FSC when rendering children', () => {
+					viewRoot._appendChild( parse( makeContainers( 151 ) ) );
+
+					// Set fake selection on the second paragraph.
+					selection._setTo( viewRoot.getChild( 1 ), 'on', { fake: true } );
+
+					renderer.markToSync( 'children', viewRoot );
+					renderer.render();
+					cleanObserver( observer );
+
+					// Remove the second paragraph.
+					viewRoot._removeChildren( 1, 1 );
+					// And set the fake selection on the first one.
+					selection._setTo( viewRoot.getChild( 0 ), 'on', { fake: true } );
+
+					renderer.markToSync( 'children', viewRoot );
+					renderer.render();
+
+					expect( getMutationStats( observer.takeRecords() ) ).to.deep.equal( [
+						'added: 0, removed: 1'
+					] );
+				} );
+			} );
+
 			function getMutationStats( mutationList ) {
 				return mutationList.map( mutation => {
 					return `added: ${ mutation.addedNodes.length }, removed: ${ mutation.removedNodes.length }`;
@@ -3261,6 +3372,16 @@ describe( 'Renderer', () => {
 			function cleanObserver( observer ) {
 				observer.takeRecords();
 			}
+
+			function makeContainers( howMany ) {
+				const containers = [];
+
+				for ( let i = 1; i <= howMany; i++ ) {
+					containers.push( `<container:p>${ i }</container:p>` );
+				}
+
+				return containers.join( '' );
+			}
 		} );
 
 		// #1560