From b30bb0a810512fc22236a9503e2ce1895e05db35 Mon Sep 17 00:00:00 2001 From: Marek Lewandowski Date: Wed, 22 Jan 2020 15:08:25 +0100 Subject: [PATCH 1/3] Tests: Extracted a common function for fetching performance data. --- tests/_utils/utils.js | 32 +++++++++++++++++++++++++++++ tests/manual/performance/setdata.js | 19 ++--------------- 2 files changed, 34 insertions(+), 17 deletions(-) create mode 100644 tests/_utils/utils.js diff --git a/tests/_utils/utils.js b/tests/_utils/utils.js new file mode 100644 index 00000000000..7a411a8003b --- /dev/null +++ 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.>} + */ +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/setdata.js b/tests/manual/performance/setdata.js index 5c239b9572b..244381ac612 100644 --- 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() ); - } -} From 27ae77948fb39538f461dfae8ef233fcb68328e9 Mon Sep 17 00:00:00 2001 From: Marek Lewandowski Date: Wed, 22 Jan 2020 15:10:21 +0100 Subject: [PATCH 2/3] Tests: Added manual performance test for initializing the editor. --- tests/manual/performance/editorinit.html | 17 ++++++ tests/manual/performance/editorinit.js | 69 ++++++++++++++++++++++++ tests/manual/performance/editorinit.md | 8 +++ 3 files changed, 94 insertions(+) create mode 100644 tests/manual/performance/editorinit.html create mode 100644 tests/manual/performance/editorinit.js create mode 100644 tests/manual/performance/editorinit.md diff --git a/tests/manual/performance/editorinit.html b/tests/manual/performance/editorinit.html new file mode 100644 index 00000000000..eedeefd4dc8 --- /dev/null +++ b/tests/manual/performance/editorinit.html @@ -0,0 +1,17 @@ +
+ Initialize editor with: + + + + HTML payload. +
+ + + +
+
+
diff --git a/tests/manual/performance/editorinit.js b/tests/manual/performance/editorinit.js new file mode 100644 index 00000000000..78c531734ee --- /dev/null +++ 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 new file mode 100644 index 00000000000..784675f8cf9 --- /dev/null +++ b/tests/manual/performance/editorinit.md @@ -0,0 +1,8 @@ +# Performance: editor initialization + +1. You might want to enable devtools profiling. +1. (optionally) Begin performance recording in devtools. +1. Use any button to initialize the editor with a given content. +1. (optionally) Stop performance recording. + +**Note:** You should initialize editor only once. To test it again / different scenario refresh the page to have clear reference. From f2fb922299c97806573e37f0ea991034f84fbcbd Mon Sep 17 00:00:00 2001 From: Marek Lewandowski Date: Thu, 23 Jan 2020 16:21:54 +0100 Subject: [PATCH 3/3] Tests: Cosmetic editor initialization performance manual test changes. --- tests/manual/performance/editorinit.html | 12 +++++++----- tests/manual/performance/editorinit.md | 5 ++--- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/tests/manual/performance/editorinit.html b/tests/manual/performance/editorinit.html index eedeefd4dc8..79322c3b62d 100644 --- a/tests/manual/performance/editorinit.html +++ b/tests/manual/performance/editorinit.html @@ -1,3 +1,9 @@ + +
Initialize editor with: @@ -6,11 +12,7 @@ HTML payload.
- +
diff --git a/tests/manual/performance/editorinit.md b/tests/manual/performance/editorinit.md index 784675f8cf9..206b6697272 100644 --- a/tests/manual/performance/editorinit.md +++ b/tests/manual/performance/editorinit.md @@ -1,8 +1,7 @@ # Performance: editor initialization -1. You might want to enable devtools profiling. -1. (optionally) Begin performance recording in devtools. +1. Begin performance recording in devtools. 1. Use any button to initialize the editor with a given content. -1. (optionally) Stop performance recording. +1. Stop performance recording. **Note:** You should initialize editor only once. To test it again / different scenario refresh the page to have clear reference.