Introduce automated manual test sample for performance testing

tests/_data/data-sets/formatting-long-paragraphs.js

@@ -0,0 +1,32 @@
+/**
+ * @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.
+// Note, that long, non-formatted paragraphs are not problematic as these texts are treated as one text node.
+// We had instances where long non-formatted paragraphs were problematic, but these had always some formatting and `<br>`s which also
+// spread text into multiple text nodes.
+export default function makeData() {
+	let initialData = '';
+
+	for ( let i = 0; i < 40; i++ ) {
+		initialData += '<p>';
+
+		for ( let j = 0; j < 1000; j++ ) {
+			if ( j % 3 === 0 ) {
+				initialData += '<strong>Lorem ipsum</strong>';
+			} else if ( j % 3 === 1 ) {
+				initialData += '<em> dolor sit </em>';
+			} else {
+				initialData += '<s>amet. </s>';
+			}
+		}
+
+		initialData += '</p>';
+	}
+
+	return initialData;
+}

tests/_data/data-sets/index.js

@@ -0,0 +1,16 @@
+/**
+ * @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';
+import formattingLongP from './formatting-long-paragraphs.js';
+import inlineStyles from './inline-styles.js';
+import mixed from './mixed.js';
+import wiki from './wiki.js';
+
+export default {
+	paragraphs, lists, tableHuge, formattingLongP, inlineStyles, mixed, wiki
+};

tests/_data/data-sets/inline-styles.js

@@ -0,0 +1,26 @@
+/**
+ * @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 = '';
+
+	for ( let i = 0; i < 30; i++ ) {
+		initialData += '<p>';
+
+		for ( let j = 0; j < 1000; j++ ) {
+			if ( j % 2 === 0 ) {
+				initialData += '<span style="font-weight:bold;font-style:italic;text-decoration:underline;color:#808080;' +
+					'font-family: Arial;background:#EEEEEE;">Lorem ipsum dolor</span>';
+			} else {
+				initialData += ' sit amet. ';
+			}
+		}
+
+		initialData += '</p>';
+	}
+
+	return initialData;
+}

tests/_data/data-sets/lists.js

@@ -0,0 +1,41 @@
+/**
+ * @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).
+export default function makeData() {
+	let initialData = '';
+
+	// Create 25 top-level lists, each with ~90 nested items total, on multiple levels.
+	for ( let i = 0; i < 25; i++ ) {
+		const tagName = i % 2 ? 'ul' : 'ol';
+
+		initialData += makeList( 40, tagName, 3 );
+	}
+
+	return initialData;
+}
+
+export function makeList( itemsCount, tagName, levels ) {
+	let initialData = `<${ tagName }>`;
+
+	for ( let i = 0; i < itemsCount / 2; i++ ) {
+		initialData += '<li>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</li>';
+	}
+
+	if ( levels > 1 ) {
+		initialData += '<li>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.';
+		initialData += makeList( itemsCount, levels % 2 ? 'ul' : 'ol', levels - 1 );
+	}
+
+	for ( let i = 0; i < itemsCount / 2; i++ ) {
+		initialData += '<li>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</li>';
+	}
+
+	initialData += `</${ tagName }>`;
+
+	return initialData;
+}

tests/_data/data-sets/mixed.js

@@ -0,0 +1,81 @@
+/**
+ * @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 { makeList } from './lists.js';
+
+// Creates long mixed content, including all kinds of features: paragraphs, list items, formatted content, tables and images.
+// This is a sum of all other data sets, where each data set has smaller volume.
+export default function makeData() {
+	let initialData = '';
+
+	// Each chunk of data will include: a few formatted and unformatted pararaphs, small list with sub-items, 40 cell table and two images.
+	for ( let i = 0; i < 100; i++ ) {
+		initialData +=
+			'<p>' +
+				'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. ' +
+			'</p>';
+
+		initialData += '<figure class="image"><img src="../sample.jpg" alt="Sample" width="" /><figcaption>Caption</figcaption></figure>';
+
+		initialData += '<p>';
+
+		for ( let j = 0; j < 50; j++ ) {
+			if ( j % 3 === 0 ) {
+				initialData += '<strong>Lorem ipsum</strong>';
+			} else if ( j % 3 === 1 ) {
+				initialData += '<em> dolor sit </em>';
+			} else {
+				initialData += '<s>amet. </s>';
+			}
+		}
+
+		initialData += '</p>';
+
+		initialData += makeList( 5, 'ul', 2 );
+
+		initialData += '<figure class="image"><img src="../sample.jpg" alt="Sample" width="" /><figcaption>Caption</figcaption></figure>';
+
+		for ( let j = 0; j < 5; j++ ) {
+			initialData +=
+				'<p>' +
+					'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. ' +
+				'</p>';
+		}
+
+		initialData += '<table>';
+
+		for ( let i = 0; i < 10; i++ ) {
+			initialData += '<tr>';
+
+			for ( let j = 0; j < 4; j++ ) {
+				initialData += '<td>Lorem foo bar</td>';
+			}
+
+			initialData += '</tr>';
+		}
+
+		initialData += '</table>';
+
+		initialData += '<p>';
+
+		for ( let j = 0; j < 50; j++ ) {
+			if ( j % 3 === 0 ) {
+				initialData += '<strong>Lorem ipsum</strong>';
+			} else if ( j % 3 === 1 ) {
+				initialData += '<em> dolor sit </em>';
+			} else {
+				initialData += '<s>amet. </s>';
+			}
+		}
+
+		initialData += '</p>';
+	}
+
+	return initialData;
+}

tests/_data/data-sets/paragraphs.js

@@ -0,0 +1,21 @@
+/**
+ * @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() {
+	let initialData = '';
+
+	for ( let i = 0; i < 5000; i++ ) {
+		initialData +=
+			'<p>' +
+				'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. ' +
+			'</p>';
+	}
+
+	return initialData;
+}

tests/_data/data-sets/table-huge.js

@@ -0,0 +1,26 @@
+/**
+ * @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 += '<table>';
+
+	for ( let i = 0; i < 2000; i++ ) {
+		initialData += '<tr>';
+
+		for ( let j = 0; j < 10; j++ ) {
+			initialData += '<td>Lorem foo bar</td>';
+		}
+
+		initialData += '</tr>';
+	}
+
+	initialData += '</table>';
+
+	return initialData;
+}