8
0
Pārlūkot izejas kodu

Merge pull request #1676 from ckeditor/t/ckeditor5-utils/269

Tests: Rendering performance tests introduced.
Piotrek Koszuliński 6 gadi atpakaļ
vecāks
revīzija
8d8b39bea4
1 mainītis faili ar 98 papildinājumiem un 0 dzēšanām
  1. 98 0
      packages/ckeditor5-engine/tests/view/renderer.js

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

@@ -3198,6 +3198,104 @@ describe( 'Renderer', () => {
 				expect( domRoot.innerHTML ).to.equal( '<p>1</p><p>2</p>' );
 			} );
 		} );
+
+		// ckeditor/ckeditor5-utils#269
+		// The expected times has a significant margin above the usual execution time (which is around 40-50%
+		// of the expected time) because it depends on the browser and environment in which tests are run.
+		// However, for larger data sets the difference between using `diff()` and `fastDiff()` (see above issue for context)
+		// is more than 10x in execution time so it is clearly visible in these tests when something goes wrong.
+		describe( 'rendering performance', () => {
+			it( 'should not take more than 250ms to render around 300 element nodes (same html)', () => {
+				const renderingTime = measureRenderingTime( viewRoot, generateViewData1( 65 ), generateViewData1( 55 ) );
+				expect( renderingTime ).to.be.within( 0, 250 );
+			} );
+
+			it( 'should not take more than 250ms to render around 300 element nodes (different html)', () => {
+				const renderingTime = measureRenderingTime( viewRoot, generateViewData1( 55 ), generateViewData2( 65 ) );
+				expect( renderingTime ).to.be.within( 0, 250 );
+			} );
+
+			it( 'should not take more than 250ms to render around 500 element nodes (same html)', () => {
+				const renderingTime = measureRenderingTime( viewRoot, generateViewData1( 105 ), generateViewData1( 95 ) );
+				expect( renderingTime ).to.be.within( 0, 250 );
+			} );
+
+			it( 'should not take more than 250ms to render around 500 element nodes (different html)', () => {
+				const renderingTime = measureRenderingTime( viewRoot, generateViewData1( 95 ), generateViewData2( 105 ) );
+				expect( renderingTime ).to.be.within( 0, 250 );
+			} );
+
+			it( 'should not take more than 250ms to render around 1000 element nodes (same html)', () => {
+				const renderingTime = measureRenderingTime( viewRoot, generateViewData1( 195 ), generateViewData1( 205 ) );
+				expect( renderingTime ).to.be.within( 0, 250 );
+			} );
+
+			it( 'should not take more than 250ms to render around 1000 element nodes (different html)', () => {
+				const renderingTime = measureRenderingTime( viewRoot, generateViewData1( 205 ), generateViewData2( 195 ) );
+				expect( renderingTime ).to.be.within( 0, 250 );
+			} );
+
+			function measureRenderingTime( viewRoot, initialData, newData ) {
+				// Set initial data.
+				const initialView = parse( initialData );
+				viewRoot._appendChild( initialView );
+				renderer.markToSync( 'children', viewRoot );
+				renderer.render();
+
+				// Set new data.
+				const newView = parse( newData );
+				viewRoot._removeChildren( 0, viewRoot.childCount );
+				viewRoot._appendChild( newView );
+				renderer.markToSync( 'children', viewRoot );
+
+				// Measure render time.
+				const start = Date.now();
+
+				renderer.render();
+
+				return Date.now() - start;
+			}
+
+			function generateViewData1( repeat = 1 ) {
+				const viewData = '' +
+					'<container:h1>' +
+						'CKEditor 5 <attribute:strong>h1</attribute:strong> heading!' +
+					'</container:h1>' +
+					'<container:p>' +
+						'Foo <attribute:strong>Bar</attribute:strong> Baz and some text' +
+					'</container:p>' +
+					'<container:ul>' +
+						'<container:li>Item 1</container:li>' +
+					'</container:ul>' +
+					'<container:ul>' +
+						'<container:li>Item 2</container:li>' +
+					'</container:ul>' +
+					'<container:ul>' +
+						'<container:li>Item 3</container:li>' +
+					'</container:ul>';
+
+				return viewData.repeat( repeat );
+			}
+
+			function generateViewData2( repeat = 1 ) {
+				const viewData = '' +
+					'<container:ol>' +
+						'<container:li>' +
+							'<attribute:strong>Foo</attribute:strong>' +
+						'</container:li>' +
+					'</container:ol>' +
+					'<container:ol>' +
+						'<container:li>Item 1</container:li>' +
+					'</container:ol>' +
+					'<container:h1>Heading 1</container:h1>' +
+					'<container:h2>' +
+						'<attribute:strong>Heading</attribute:strong> 2' +
+					'</container:h2>' +
+					'<container:h3>Heading 4</container:h3>';
+
+				return viewData.repeat( repeat );
+			}
+		} );
 	} );
 
 	describe( '#922', () => {