diff --git a/tests/_data/generated/formatting-long-paragraphs.js b/tests/_data/generated/formatting-long-paragraphs.js index 8d9cd0fa8f1..2fbcffbafd5 100644 --- a/tests/_data/generated/formatting-long-paragraphs.js +++ b/tests/_data/generated/formatting-long-paragraphs.js @@ -1,3 +1,8 @@ +/** + * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. + * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license + */ + // Creates 40 paragraphs, each with a 1000 of text nodes, each text node is wrapped in an HTML tag that will be converted to text attribute. // This is a counterpart data set to `formatting-short-paragraphs` where both tests have same total number of text nodes, but // we observed that longer paragraphs have significant negative impact on editor performance. diff --git a/tests/_data/generated/formatting-short-paragraphs.js b/tests/_data/generated/formatting-short-paragraphs.js index 91e87d27b6c..f8e3ea6883e 100644 --- a/tests/_data/generated/formatting-short-paragraphs.js +++ b/tests/_data/generated/formatting-short-paragraphs.js @@ -1,3 +1,8 @@ +/** + * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. + * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license + */ + // Creates 800 paragraphs, each with a 50 of text nodes, each text node is wrapped in an HTML tag that will be converted to text attribute. // This test how text formatting affects the editor loading speed. export default function makeData() { diff --git a/tests/_data/generated/index.js b/tests/_data/generated/index.js index 9e253770609..62b5deb576f 100644 --- a/tests/_data/generated/index.js +++ b/tests/_data/generated/index.js @@ -1,3 +1,8 @@ +/** + * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. + * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license + */ + import paragraphs from './paragraphs.js'; import lists from './lists.js'; import tableHuge from './table-huge.js'; diff --git a/tests/_data/generated/inline-styles.js b/tests/_data/generated/inline-styles.js index b892de112d4..630e04cd1a3 100644 --- a/tests/_data/generated/inline-styles.js +++ b/tests/_data/generated/inline-styles.js @@ -1,3 +1,8 @@ +/** + * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. + * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license + */ + // Creates 30 paragraphs, each with a 1000 of text nodes, half of the text nodes is wrapped in a span with inline styles. export default function makeData() { let initialData = ''; @@ -7,7 +12,8 @@ export default function makeData() { for ( let j = 0; j < 1000; j++ ) { if ( j % 2 === 0 ) { - initialData += 'Lorem ipsum dolor'; + initialData += 'Lorem ipsum dolor'; } else { initialData += ' sit amet. '; } diff --git a/tests/_data/generated/lists.js b/tests/_data/generated/lists.js index 64aded30c73..ab8945a76cd 100644 --- a/tests/_data/generated/lists.js +++ b/tests/_data/generated/lists.js @@ -1,3 +1,8 @@ +/** + * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. + * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license + */ + // Creates multiple, nested lists, for a total of 3000 list items. Text in lists is simple, short, non-formatted text. // This tests editor performance when huge lists are in the content. // Below data creates 100 pages when copy-pasted to Google Docs (default page settings). diff --git a/tests/_data/generated/paragraphs.js b/tests/_data/generated/paragraphs.js index 3049112b081..3772e17c797 100644 --- a/tests/_data/generated/paragraphs.js +++ b/tests/_data/generated/paragraphs.js @@ -1,3 +1,8 @@ +/** + * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. + * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license + */ + // This is the most basic performance test, where we load many paragraphs (5000) and fill them with reasonable text volume, no formatting. // Below data creates 400 pages when copy-pasted to Google Docs (default page settings). export default function makeData() { @@ -9,7 +14,7 @@ export default function makeData() { 'Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. ' + 'Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. ' + 'Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. ' + - '

' + '

'; } return initialData; diff --git a/tests/_data/generated/table-huge.js b/tests/_data/generated/table-huge.js index 0a4273c910d..b30fd1cb589 100644 --- a/tests/_data/generated/table-huge.js +++ b/tests/_data/generated/table-huge.js @@ -1,9 +1,14 @@ +/** + * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. + * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license + */ + // Creates one table with 2000 rows and 10 columns, total 20000 cells. // This tests editor performance when huge tables are in content. export default function makeData() { let initialData = ''; - initialData += '' + initialData += '
'; for ( let i = 0; i < 2000; i++ ) { initialData += ''; diff --git a/tests/_data/generated/tables-many-smaller.js b/tests/_data/generated/tables-many-smaller.js index 7d59aa3d9fe..90e268539f4 100644 --- a/tests/_data/generated/tables-many-smaller.js +++ b/tests/_data/generated/tables-many-smaller.js @@ -1,10 +1,15 @@ +/** + * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. + * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license + */ + // Creates 40 smaller tables with 50 rows and 10 columns each, total 20000 cells. // This is a counterpart data set for `table-huge` to see if it is just about cells quantity, or maybe longer tables have other problems. export default function makeData() { let initialData = ''; for ( let t = 0; t < 40; t++ ) { - initialData += '
' + initialData += '
'; for ( let i = 0; i < 50; i++ ) { initialData += ''; diff --git a/tests/_utils/performance-config.js b/tests/_utils/performance-config.js index 816dffca6e1..e49b5769110 100644 --- a/tests/_utils/performance-config.js +++ b/tests/_utils/performance-config.js @@ -1,3 +1,8 @@ +/** + * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. + * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license + */ + import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment.js'; import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset.js'; import AutoImage from '@ckeditor/ckeditor5-image/src/autoimage.js'; diff --git a/tests/manual/performance/editorinit.html b/tests/manual/performance/editorinit.html deleted file mode 100644 index 01ffae1165a..00000000000 --- a/tests/manual/performance/editorinit.html +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - -
- Initialize editor with: - - HTML payload. -

- Cases marked with "(semantic)" contain elements known by the editor. Cases with "(styled)" focuses on styling using the [style] attribute. -
- -
- -
-
-
-
-
diff --git a/tests/manual/performance/editorinit.js b/tests/manual/performance/editorinit.js deleted file mode 100644 index 2e37a310fc3..00000000000 --- a/tests/manual/performance/editorinit.js +++ /dev/null @@ -1,33 +0,0 @@ -/** - * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. - * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license - */ - -/* globals console, document */ - -import { getPerformanceData, createPerformanceEditor, renderPerformanceDataButtons } from '../../_utils/utils.js'; - -renderPerformanceDataButtons( document.querySelector( '#fixture-buttons' ) ); - -const fixtures = getPerformanceData(); -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() { - createPerformanceEditor( editorElement ) - .catch( err => { - console.error( err.stack ); - } ); - } ); - - button.disabled = false; -} - diff --git a/tests/manual/performance/editorinit.md b/tests/manual/performance/editorinit.md deleted file mode 100644 index 206b6697272..00000000000 --- a/tests/manual/performance/editorinit.md +++ /dev/null @@ -1,7 +0,0 @@ -# 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/2024/init-single.html b/tests/manual/performance/init-single.html similarity index 92% rename from tests/manual/performance/2024/init-single.html rename to tests/manual/performance/init-single.html index ef4028189d2..20a54eb4fd2 100644 --- a/tests/manual/performance/2024/init-single.html +++ b/tests/manual/performance/init-single.html @@ -8,4 +8,6 @@ }'> + +
diff --git a/tests/manual/performance/2024/init-single.js b/tests/manual/performance/init-single.js similarity index 50% rename from tests/manual/performance/2024/init-single.js rename to tests/manual/performance/init-single.js index 00cbc9f5369..3ca9cc4b3fb 100644 --- a/tests/manual/performance/2024/init-single.js +++ b/tests/manual/performance/init-single.js @@ -5,8 +5,8 @@ /* globals console, window, document */ -import config from '../../../_utils/performance-config.js'; -import allDataSets from '../../../_data/generated/index.js'; +import config from '../../_utils/performance-config.js'; +import allDataSets from '../../_data/generated/index.js'; import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor.js'; const initialData = allDataSets.paragraphs(); @@ -15,13 +15,21 @@ const editorElement = document.querySelector( '#editor' ); const startTime = window.performance.now(); -ClassicEditor - .create( editorElement, finalConfig ) - .then( () => { - const testTime = window.performance.now() - startTime; +function startTest() { + ClassicEditor + .create( editorElement, finalConfig ) + .then( () => { + const testTime = window.performance.now() - startTime; - console.log( testTime ); - } ) - .catch( err => { - console.error( err.stack ); - } ); + console.log( testTime ); + } ) + .catch( err => { + console.error( err.stack ); + } ); +} + +document.getElementById( 'btnStart' ).addEventListener( 'click', () => { + document.getElementById( 'btnStart' ).remove(); + + startTest(); +} ); diff --git a/tests/manual/performance/2024/init-single.md b/tests/manual/performance/init-single.md similarity index 100% rename from tests/manual/performance/2024/init-single.md rename to tests/manual/performance/init-single.md diff --git a/tests/manual/performance/2024/init.html b/tests/manual/performance/init.html similarity index 92% rename from tests/manual/performance/2024/init.html rename to tests/manual/performance/init.html index aa13c5ca81d..ea40330dd2a 100644 --- a/tests/manual/performance/2024/init.html +++ b/tests/manual/performance/init.html @@ -8,6 +8,8 @@ }'> + +
diff --git a/tests/manual/performance/2024/init.js b/tests/manual/performance/init.js similarity index 85% rename from tests/manual/performance/2024/init.js rename to tests/manual/performance/init.js index c2d0d2c7956..65fc7e9b4d8 100644 --- a/tests/manual/performance/2024/init.js +++ b/tests/manual/performance/init.js @@ -3,10 +3,10 @@ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ -/* globals console, window, document */ +/* globals console, window, document, sessionStorage, navigator, alert */ -import config from '../../../_utils/performance-config.js'; -import allDataSets from '../../../_data/generated/index.js'; +import config from '../../_utils/performance-config.js'; +import allDataSets from '../../_data/generated/index.js'; import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor.js'; // TEST CONFIG. @@ -27,11 +27,19 @@ const dataSetNames = Object.keys( dataSets ); run(); function run() { + const btnEl = document.getElementById( 'btnStart' ); + if ( !isStarted() ) { - startTests(); - } + btnEl.addEventListener( 'click', () => { + btnEl.remove(); - performTest(); + setupTests(); + performTest(); + } ); + } else { + btnEl.remove(); + performTest(); + } } function performTest() { @@ -63,7 +71,8 @@ function setStatus() { const dataSetName = getCurrentDataSetName(); const tryNumber = sessionStorage.getItem( 'performanceTestTryNumber' ); - statusEl.innerHTML = `Dataset "${ dataSetName }" (${ dataSetIndex + 1 } / ${ dataSetNames.length }), try ${ tryNumber } / ${ TRIES_PER_DATA_SET }`; + statusEl.innerHTML = `Dataset "${ dataSetName }" (${ dataSetIndex + 1 } / ${ dataSetNames.length }), ` + + `try ${ tryNumber } / ${ TRIES_PER_DATA_SET }`; } function getCurrentDataSetName() { @@ -72,7 +81,7 @@ function getCurrentDataSetName() { return dataSetNames[ dataSetIndex ]; } -function startTests() { +function setupTests() { sessionStorage.setItem( 'performanceTestTryNumber', '1' ); sessionStorage.setItem( 'performanceTestResults', '{}' ); sessionStorage.setItem( 'performanceTestDataSetIndex', '0' ); @@ -149,7 +158,8 @@ function finishTests() { console.log( resultsProcessed ); navigator.clipboard.writeText( resultsProcessed ).then( () => { - alert( "Tests finished!\nResults are copied to your clipboard\nYou can paste them to a spreadsheet" ); + // eslint-disable-next-line no-alert + alert( 'Tests finished!\nResults are copied to your clipboard\nYou can paste them to a spreadsheet' ); } ); } @@ -165,7 +175,10 @@ function prepareResults( dataObj ) { const results = entry[ 1 ]; for ( let i = 0; i < REMOVE_OUTLIERS; i++ ) { - let maxV = 0, minV = Number.MAX_VALUE, maxJ = 0, minJ = 0; + let maxV = 0; + let minV = Number.MAX_VALUE; + let maxJ = 0; + let minJ = 0; for ( let j = 0; j < results.length - 1; j++ ) { if ( results[ j ] === '' ) { @@ -188,6 +201,6 @@ function prepareResults( dataObj ) { results[ minJ ] = ''; } - return dataSetName + "\t\t" + results.join( "\t" ) + "\n"; + return dataSetName + '\t\t' + results.join( '\t' ) + '\n'; } ).join( '' ); } diff --git a/tests/manual/performance/2024/init.md b/tests/manual/performance/init.md similarity index 100% rename from tests/manual/performance/2024/init.md rename to tests/manual/performance/init.md