Merge pull request #302 from ckeditor/t/ckeditor5-paste-from-office/14

Feature: Introduce `assertEqualMarkup()` test util method. Closes ckeditor/ckeditor5-paste-from-office#14.

package.json

@@ -17,9 +17,11 @@
     "@ckeditor/ckeditor5-editor-classic": "^12.1.4",
     "@ckeditor/ckeditor5-core": "^12.3.0",
     "@ckeditor/ckeditor5-engine": "^14.0.0",
+    "assertion-error": "^1.1.0",
     "eslint": "^5.5.0",
     "eslint-config-ckeditor5": "^2.0.0",
     "husky": "^1.3.1",
+    "js-beautify": "^1.10.2",
     "lint-staged": "^7.0.0"
   },
   "engines": {

tests/_utils-tests/utils.js

@@ -3,10 +3,11 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
+import AssertionError from 'assertion-error';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 import ObservableMixin from '../../src/observablemixin';
 import EmitterMixin from '../../src/emittermixin';
-import { createObserver } from '../_utils/utils';
+import { assertEqualMarkup, createObserver } from '../_utils/utils';
 
 describe( 'utils - testUtils', () => {
 	afterEach( () => {
@@ -81,4 +82,104 @@ describe( 'utils - testUtils', () => {
 			} );
 		} );
 	} );
+
+	describe( 'assertEqualMarkup()', () => {
+		it( 'should not throw for equal strings', () => {
+			expect( assertEqualMarkup( 'foo', 'foo' ) ).to.not.throw;
+		} );
+
+		it( 'should throw AssertionError for not equal strings', () => {
+			try {
+				assertEqualMarkup( 'foo', 'bar' );
+			} catch ( assertionError ) {
+				expect( assertionError ).to.be.instanceOf( AssertionError );
+			}
+		} );
+
+		it( 'should throw with default (short) message', () => {
+			try {
+				assertEqualMarkup( 'foo', 'bar' );
+			} catch ( assertionError ) {
+				expect( assertionError.message ).to.equal( 'Expected markup strings to be equal' );
+			}
+		} );
+
+		it( 'should throw with passed message', () => {
+			try {
+				assertEqualMarkup( 'foo', 'bar', 'baz' );
+			} catch ( assertionError ) {
+				expect( assertionError.message ).to.equal( 'baz' );
+			}
+		} );
+
+		it( 'should format actual string', () => {
+			try {
+				assertEqualMarkup( '<div><p><span>foo</span></p></div>', 'bar' );
+			} catch ( assertionError ) {
+				expect( assertionError.actual ).to.equal(
+					'<div>\n' +
+					'  <p><span>foo</span></p>\n' +
+					'</div>'
+				);
+			}
+		} );
+
+		it( 'should format expected string', () => {
+			try {
+				assertEqualMarkup( 'foo', '<div><p><span>foo</span></p></div>' );
+			} catch ( assertionError ) {
+				expect( assertionError.expected ).to.equal(
+					'<div>\n' +
+					'  <p><span>foo</span></p>\n' +
+					'</div>'
+				);
+			}
+		} );
+
+		it( 'should format model text node with attributes as inline', () => {
+			try {
+				assertEqualMarkup( 'foo', '<paragraph><$text bold="true">foo</$text></paragraph>' );
+			} catch ( assertionError ) {
+				expect( assertionError.expected ).to.equal(
+					'<paragraph><$text bold="true">foo</$text></paragraph>'
+				);
+			}
+		} );
+
+		it( 'should format nested model structure properly', () => {
+			try {
+				assertEqualMarkup( 'foo',
+					'<blockQuote>' +
+						'<table>' +
+							'<tableRow>' +
+								'<tableCell>' +
+									'<paragraph><$text bold="true">foo</$text></paragraph>' +
+								'</tableCell>' +
+								'<tableCell>' +
+									'<paragraph><$text bold="true">bar</$text></paragraph>' +
+									'<paragraph><$text bold="true">baz</$text></paragraph>' +
+								'</tableCell>' +
+							'</tableRow>' +
+						'</table>' +
+					'</blockQuote>'
+				);
+			} catch ( assertionError ) {
+				expect( assertionError.expected ).to.equal(
+					'<blockQuote>\n' +
+					'  <table>\n' +
+					'    <tableRow>\n' +
+					'      <tableCell>\n' +
+					'        <paragraph><$text bold="true">foo</$text></paragraph>\n' +
+					'      </tableCell>\n' +
+					'      <tableCell>\n' +
+					'        <paragraph><$text bold="true">bar</$text></paragraph>\n' +
+					'        <paragraph><$text bold="true">baz</$text></paragraph>\n' +
+					'      </tableCell>\n' +
+					'    </tableRow>\n' +
+					'  </table>\n' +
+					'</blockQuote>'
+				);
+			}
+		} );
+	} );
 } );

tests/_utils/utils.js

@@ -5,6 +5,9 @@
 
 /* global console:false */
 
+import AssertionError from 'assertion-error';
+import { html_beautify as beautify } from 'js-beautify/js/lib/beautify-html';
+
 import EmitterMixin from '../../src/emittermixin';
 import CKEditorError from '../../src/ckeditorerror';
 import areConnectedThroughProperties from '../../src/areconnectedthroughproperties';
@@ -141,3 +144,44 @@ export function assertCKEditorError( err, message, editorThatShouldBeFindableFro
 		expect( err.data ).to.deep.equal( data );
 	}
 }
+
+/**
+ * An assertion util test whether two given strings containing markup language are equal.
+ * Unlike `expect().to.equal()` form Chai assertion library, this util formats the markup before showing a diff.
+ *
+ * This util can be used to test HTML strings and string containing serialized model.
+ *
+ *		// Will throw an error that is handled as assertion error by Chai.
+ *		assertEqualMarkup(
+ *			'<paragraph><$text foo="bar">baz</$text></paragraph>',
+ *			'<paragraph><$text foo="bar">baaz</$text></paragraph>',
+ *		);
+ *
+ * @param {String} actual An actual string.
+ * @param {String} expected An expected string.
+ * @param {String} [message="Expected two markup strings to be equal"] Optional error message.
+ */
+export function assertEqualMarkup( actual, expected, message = 'Expected markup strings to be equal' ) {
+	if ( actual != expected ) {
+		throw new AssertionError( message, {
+			actual: formatMarkup( actual ),
+			expected: formatMarkup( expected ),
+			showDiff: true
+		} );
+	}
+}
+
+// Renames the $text occurrences as it is not properly formatted by the beautifier - it is tread as a block.
+const TEXT_TAG_PLACEHOLDER = 'span data-cke="true"';
+const TEXT_TAG_PLACEHOLDER_REGEXP = new RegExp( TEXT_TAG_PLACEHOLDER, 'g' );
+
+function formatMarkup( string ) {
+	const htmlSafeString = string.replace( /\$text/g, TEXT_TAG_PLACEHOLDER );
+
+	const beautifiedMarkup = beautify( htmlSafeString, {
+		indent_size: 2,
+		space_in_empty_paren: true
+	} );
+
+	return beautifiedMarkup.replace( TEXT_TAG_PLACEHOLDER_REGEXP, '$text' );
+}