Merge pull request #6124 from ckeditor/i/5880b

Tests: Added editor setData manual performance test. Part of #5880.
ckeditor · Jan 23, 2020 · 67414e6 · 67414e6
2 parents 6d5a2b2 + f2fb922
commit 67414e6
Show file tree

Hide file tree

Showing 5 changed files with 129 additions and 17 deletions.
diff --git a/tests/_utils/utils.js b/tests/_utils/utils.js
@@ -0,0 +1,32 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals window */
+
+/**
+ * Loads a predefined set of performance markup files.
+ *
+ *		loadPerformanceData()
+ *			.then( fixtures => {
+ *				window.editor.setData( fixtures.small );
+ *			} );
+ *
+ * @returns {Promise.<Object.<String, String>>}
+ */
+export function loadPerformanceData() {
+	return Promise.all( [ getFileContents( 'small' ), getFileContents( 'medium' ), getFileContents( 'large' ) ] )
+		.then( responses => {
+			return {
+				small: responses[ 0 ],
+				medium: responses[ 1 ],
+				large: responses[ 2 ]
+			};
+		} );
+
+	function getFileContents( fileName ) {
+		return window.fetch( `_utils/${ fileName }.txt` )
+			.then( resp => resp.text() );
+	}
+}
diff --git a/tests/manual/performance/editorinit.html b/tests/manual/performance/editorinit.html
@@ -0,0 +1,19 @@
+<style>
+	.editor {
+		display: none;
+	}
+</style>
+
+<div id="test-controls">
+	Initialize editor with:
+	<button id="small-content" data-file-name="small" disabled>small</button>
+	<button id="medium-content" data-file-name="medium" disabled>medium</button>
+	<button id="large-content" data-file-name="large" disabled>large</button>
+	HTML payload.
+</div>
+
+<hr>
+
+<div id="editor_small" class="editor"></div>
+<div id="editor_medium" class="editor"></div>
+<div id="editor_large" class="editor"></div>
diff --git a/tests/manual/performance/editorinit.js b/tests/manual/performance/editorinit.js
@@ -0,0 +1,69 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals console, window, document */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+import { loadPerformanceData } from '../../_utils/utils';
+
+loadPerformanceData()
+	.then( fixtures => {
+		const buttons = document.querySelectorAll( '#test-controls button' );
+
+		for ( const button of buttons ) {
+			const fixtureName = button.getAttribute( 'data-file-name' );
+			const content = fixtures[ fixtureName ];
+			const editorElement = document.querySelector( `#editor_${ fixtureName }` );
+
+			// Put the source content in editor-related elements ahead of time, so that potentially
+			// big `innerHTML` change does not affect the benchmark when pressing the button.
+			editorElement.innerHTML = content;
+
+			button.addEventListener( 'click', function() {
+				ClassicEditor
+					.create( editorElement, {
+						plugins: [ ArticlePluginSet ],
+						toolbar: [
+							'heading',
+							'|',
+							'bold',
+							'italic',
+							'link',
+							'bulletedList',
+							'numberedList',
+							'|',
+							'outdent',
+							'indent',
+							'|',
+							'blockQuote',
+							'insertTable',
+							'mediaEmbed',
+							'undo',
+							'redo'
+						],
+						image: {
+							toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
+						},
+						table: {
+							contentToolbar: [
+								'tableColumn',
+								'tableRow',
+								'mergeTableCells'
+							]
+						}
+					} )
+					.then( editor => {
+						window.editor = editor;
+					} )
+					.catch( err => {
+						console.error( err.stack );
+					} );
+			} );
+
+			button.disabled = false;
+		}
+	} );
+
diff --git a/tests/manual/performance/editorinit.md b/tests/manual/performance/editorinit.md
@@ -0,0 +1,7 @@
+# Performance: editor initialization
+
+1. Begin performance recording in devtools.
+1. Use any button to initialize the editor with a given content.
+1. Stop performance recording.
+
+**Note:** You should initialize editor only once. To test it again / different scenario refresh the page to have clear reference.
diff --git a/tests/manual/performance/setdata.js b/tests/manual/performance/setdata.js
@@ -7,6 +7,7 @@
 
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
 import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+import { loadPerformanceData } from '../../_utils/utils';
 
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
@@ -37,7 +38,7 @@ ClassicEditor
 		console.error( err.stack );
 	} );
 
-preloadData()
+loadPerformanceData()
 	.then( fixtures => {
 		const buttons = document.querySelectorAll( '#test-controls button' );
 
@@ -50,19 +51,3 @@ preloadData()
 			button.disabled = false;
 		}
 	} );
-
-function preloadData() {
-	return Promise.all( [ getFileContents( 'small' ), getFileContents( 'medium' ), getFileContents( 'large' ) ] )
-		.then( responses => {
-			return {
-				small: responses[ 0 ],
-				medium: responses[ 1 ],
-				large: responses[ 2 ]
-			};
-		} );
-
-	function getFileContents( fileName ) {
-		return window.fetch( `_utils/${ fileName }.txt` )
-			.then( resp => resp.text() );
-	}
-}