8
0
Kamil Piechaczek 5 лет назад
Родитель
Сommit
4566179726

+ 3 - 33
packages/ckeditor5-font/tests/fontsize/fontsizeediting.js

@@ -88,12 +88,6 @@ describe( 'FontSizeEditing', () => {
 
 					expect( editor.getData() ).to.equal( '<p>f<span style="font-size:10px;">o</span>o</p>' );
 				} );
-
-				it( 'should add a unit to value if missing', () => {
-					setModelData( doc, '<paragraph>f<$text fontSize="10">o</$text>o</paragraph>' );
-
-					expect( editor.getData() ).to.equal( '<p>f<span style="font-size:10px;">o</span>o</p>' );
-				} );
 			} );
 
 			describe( 'data pipeline conversions', () => {
@@ -106,30 +100,6 @@ describe( 'FontSizeEditing', () => {
 
 					expect( editor.getData() ).to.equal( '<p>f<span style="font-size:18px;">o</span>o</p>' );
 				} );
-
-				it( 'should convert an element if it has a class that starts with "text-"', () => {
-					editor.setData( '<p>f<span class="text-huge">o</span>o</p>' );
-
-					expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontSize="1.8em">o</$text>o</paragraph>' );
-
-					expect( editor.getData() ).to.equal( '<p>f<span style="font-size:1.8em;">o</span>o</p>' );
-				} );
-
-				it( 'should ignore an element if it has a class starts with "text-" but does not match to any preset', () => {
-					editor.setData( '<p>f<span class="text-default">o</span>o</p>' );
-
-					expect( getModelData( doc ) ).to.equal( '<paragraph>[]foo</paragraph>' );
-
-					expect( editor.getData() ).to.equal( '<p>foo</p>' );
-				} );
-
-				it( 'should ignore an element if does not have a class that starts with "text-"', () => {
-					editor.setData( '<p>f<span class="foo">o</span>o</p>' );
-
-					expect( getModelData( doc ) ).to.equal( '<paragraph>[]foo</paragraph>' );
-
-					expect( editor.getData() ).to.equal( '<p>foo</p>' );
-				} );
 			} );
 		} );
 	} );
@@ -176,7 +146,7 @@ describe( 'FontSizeEditing', () => {
 		} );
 
 		it( 'should convert fontSize attribute to predefined pixel size preset', () => {
-			setModelData( doc, '<paragraph>f<$text fontSize="18">o</$text>o</paragraph>' );
+			setModelData( doc, '<paragraph>f<$text fontSize="18px">o</$text>o</paragraph>' );
 
 			expect( editor.getData() ).to.equal( '<p>f<span style="font-size:18px;">o</span>o</p>' );
 		} );
@@ -262,7 +232,7 @@ describe( 'FontSizeEditing', () => {
 
 			editor.setData( data );
 
-			expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontSize="18">o</$text>o</paragraph>' );
+			expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontSize="18px">o</$text>o</paragraph>' );
 
 			expect( editor.getData() ).to.equal( data );
 		} );
@@ -272,7 +242,7 @@ describe( 'FontSizeEditing', () => {
 
 			editor.setData( data );
 
-			expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontSize="18">o</$text>o</paragraph>' );
+			expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontSize="18px">o</$text>o</paragraph>' );
 
 			expect( editor.getData() ).to.equal( '<p>f<span style="font-size:18px;">o</span>o</p>' );
 		} );

+ 112 - 8
packages/ckeditor5-font/tests/fontsize/utils.js

@@ -4,6 +4,7 @@
  */
 
 import { normalizeOptions, FONT_SIZE_PRESET_UNITS } from '../../src/fontsize/utils';
+import { expectToThrowCKEditorError } from '@ckeditor/ckeditor5-utils/tests/_utils/utils';
 
 describe( 'FontSizeEditing Utils', () => {
 	describe( 'normalizeOptions()', () => {
@@ -15,12 +16,12 @@ describe( 'FontSizeEditing Utils', () => {
 			expect( normalizeOptions( [ {
 				title: 'My Size',
 				model: 'my-size',
-				view: { name: 'span', styles: 'font-size: 12em;' }
+				view: { name: 'span', styles: 'font-size: 12em;', priority: 7 }
 			} ] ) ).to.deep.equal( [
 				{
 					title: 'My Size',
 					model: 'my-size',
-					view: { name: 'span', styles: 'font-size: 12em;' }
+					view: { name: 'span', styles: 'font-size: 12em;', priority: 7 }
 				}
 			] );
 		} );
@@ -36,7 +37,7 @@ describe( 'FontSizeEditing Utils', () => {
 				] );
 			} );
 
-			it( 'should return defined presets with units in model values', () => {
+			it( 'should return defined presets with units in model values if disableValueMatching=true', () => {
 				const options = normalizeOptions( [ 'tiny', 'small', 'default', 'big', 'huge' ], { disableValueMatching: true } );
 
 				expect( options ).to.deep.equal( [
@@ -47,18 +48,121 @@ describe( 'FontSizeEditing Utils', () => {
 					{ title: 'Huge', model: '1.8em', view: { name: 'span', classes: 'text-huge', priority: 7 } }
 				] );
 			} );
+
+			it( 'should add "view" definition if missing', () => {
+				const tinyOption = {
+					title: 'Tiny',
+					model: 'tiny'
+				};
+
+				expect( normalizeOptions( [ tinyOption ] ) ).to.deep.equal( [
+					{ title: 'Tiny', model: 'tiny', view: { name: 'span', classes: 'text-tiny', priority: 7 } },
+				] );
+			} );
+
+			it( 'should add "view.priority" to returned definition if missing', () => {
+				const tinyOption = {
+					title: 'Tiny',
+					model: 'tiny',
+					view: {
+						name: 'span',
+						classes: 'text-tiny'
+					}
+				};
+
+				expect( normalizeOptions( [ tinyOption ] ) ).to.deep.equal( [
+					{ title: 'Tiny', model: 'tiny', view: { name: 'span', classes: 'text-tiny', priority: 7 } }
+				] );
+			} );
+
+			it( 'should not modify "view.priority" if already specified', () => {
+				const tinyOption = {
+					title: 'Tiny',
+					model: 'tiny',
+					view: {
+						name: 'span',
+						classes: 'text-tiny',
+						priority: 10
+					}
+				};
+
+				expect( normalizeOptions( [ tinyOption ] ) ).to.deep.equal( [
+					{ title: 'Tiny', model: 'tiny', view: { name: 'span', classes: 'text-tiny', priority: 10 } }
+				] );
+			} );
 		} );
 
 		describe( 'numerical presets', () => {
 			it( 'should return generated presets', () => {
-				expect( normalizeOptions( [ '10', 12, 'default', '14.1', 18.3 ] ) ).to.deep.equal( [
-					{ title: '10', model: 10, view: { name: 'span', styles: { 'font-size': '10px' }, priority: 7 } },
-					{ title: '12', model: 12, view: { name: 'span', styles: { 'font-size': '12px' }, priority: 7 } },
+				expect( normalizeOptions( [ '10', '12', 'default', '14.1', 18.3 ] ) ).to.deep.equal( [
+					{ title: '10', model: '10px', view: { name: 'span', styles: { 'font-size': '10px' }, priority: 7 } },
+					{ title: '12', model: '12px', view: { name: 'span', styles: { 'font-size': '12px' }, priority: 7 } },
 					{ title: 'Default', model: undefined },
-					{ title: '14.1', model: 14.1, view: { name: 'span', styles: { 'font-size': '14.1px' }, priority: 7 } },
-					{ title: '18.3', model: 18.3, view: { name: 'span', styles: { 'font-size': '18.3px' }, priority: 7 } }
+					{ title: '14.1', model: '14.1px', view: { name: 'span', styles: { 'font-size': '14.1px' }, priority: 7 } },
+					{ title: '18.3', model: '18.3px', view: { name: 'span', styles: { 'font-size': '18.3px' }, priority: 7 } }
 				] );
 			} );
+
+			it( 'should add "view" definition if missing', () => {
+				const numericOption = {
+					title: '18',
+					model: '18px'
+				};
+
+				expect( normalizeOptions( [ numericOption ] ) ).to.deep.equal( [
+					{ title: '18', model: '18px', view: { name: 'span', styles: { 'font-size': '18px' }, priority: 7 } },
+				] );
+			} );
+
+			it( 'should discard incomprehensible value', () => {
+				const numericOption = {
+					title: '18',
+					model: 'unknown'
+				};
+
+				expect( normalizeOptions( [ numericOption ] ) ).to.deep.equal( [] );
+			} );
+
+			it( 'should add "view.priority" to returned definition if missing', () => {
+				const numericOption = {
+					title: '18',
+					model: '18px',
+					view: {
+						name: 'span',
+						styles: { 'font-size': '18px' },
+					}
+				};
+
+				expect( normalizeOptions( [ numericOption ] ) ).to.deep.equal( [
+					{ title: '18', model: '18px', view: { name: 'span', styles: { 'font-size': '18px' }, priority: 7 } },
+				] );
+			} );
+
+			it( 'should not modify "view.priority" if already specified', () => {
+				const numericOption = {
+					title: '18',
+					model: '18px',
+					view: {
+						name: 'span',
+						styles: { 'font-size': '18px' },
+						priority: 10
+					}
+				};
+
+				expect( normalizeOptions( [ numericOption ] ) ).to.deep.equal( [
+					{ title: '18', model: '18px', view: { name: 'span', styles: { 'font-size': '18px' }, priority: 10 } },
+				] );
+			} );
+
+			it( 'should throw an error if definition misses "model" value', () => {
+				const definition = {
+					title: '18'
+				};
+
+				expectToThrowCKEditorError( () => {
+					normalizeOptions( [ definition ] );
+				}, /font-size-invalid-definition/, null, definition );
+			} );
 		} );
 	} );
 

+ 91 - 23
packages/ckeditor5-font/tests/integration.js

@@ -9,7 +9,6 @@ import Font from '../src/font';
 import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
 import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
 import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
-import env from '@ckeditor/ckeditor5-utils/src/env';
 
 describe( 'Integration test Font', () => {
 	let element, editor, model;
@@ -42,28 +41,57 @@ describe( 'Integration test Font', () => {
 				'</paragraph>'
 			);
 
-			if ( !env.isEdge ) {
-				expect( editor.getData() ).to.equal(
-					'<p>' +
-						'<span ' +
-							'class="text-big" ' +
-							'style="background-color:rgb(10,20,30);color:#123456;font-family:Arial, Helvetica, sans-serif;"' +
-						'>foo' +
-						'</span>' +
-					'</p>'
-				);
-			} else {
-				// Edge sorts attributes of an element.
-				expect( editor.getData() ).to.equal(
-					'<p>' +
-						'<span ' +
-							'class="text-big" ' +
-							'style="font-family:Arial, Helvetica, sans-serif;color:#123456;background-color:rgb(10,20,30);"' +
-						'>foo' +
-						'</span>' +
-					'</p>'
-				);
-			}
+			expect( editor.getData() ).to.equal(
+				'<p>' +
+					'<span ' +
+						'class="text-big" ' +
+						'style="background-color:rgb(10,20,30);color:#123456;font-family:Arial, Helvetica, sans-serif;"' +
+					'>foo' +
+					'</span>' +
+				'</p>'
+			);
+		} );
+
+		it( 'should render one span element for all types of font features (disableValueMatching=true)', () => {
+			const element = document.createElement( 'div' );
+			document.body.appendChild( element );
+
+			return ClassicTestEditor
+				.create( element, {
+					plugins: [ Font, ArticlePluginSet ],
+					fontFamily: {
+						disableValueMatching: true
+					},
+					fontSize: {
+						disableValueMatching: true
+					}
+				} )
+				.then( editor => {
+					const model = editor.model;
+
+					setModelData( model,
+						'<paragraph>' +
+							'<$text fontColor="#123456" fontBackgroundColor="rgb(10,20,30)" ' +
+								'fontSize="48px" fontFamily="docs-Roboto"' +
+								'>foo' +
+							'</$text>' +
+						'</paragraph>'
+					);
+
+					expect( editor.getData() ).to.equal(
+						'<p>' +
+							'<span ' +
+								'style="background-color:rgb(10,20,30);color:#123456;font-family:docs-Roboto;font-size:48px;"' +
+								'>foo' +
+							'</span>' +
+						'</p>'
+					);
+
+					return editor.destroy();
+				} )
+				.then( () => {
+					element.remove();
+				} );
 		} );
 	} );
 
@@ -85,5 +113,45 @@ describe( 'Integration test Font', () => {
 				'</p>'
 			);
 		} );
+
+		it( 'should render elements wrapped in proper order (disableValueMatching=true)', () => {
+			const element = document.createElement( 'div' );
+			document.body.appendChild( element );
+
+			return ClassicTestEditor
+				.create( element, {
+					plugins: [ Font, ArticlePluginSet ],
+					fontFamily: {
+						disableValueMatching: true
+					},
+					fontSize: {
+						disableValueMatching: true
+					}
+				} )
+				.then( editor => {
+					const model = editor.model;
+
+					setModelData( model,
+						'<paragraph>' +
+							'<$text bold="true" linkHref="foo" fontColor="red" fontSize="18px">foo</$text>' +
+						'</paragraph>'
+					);
+
+					expect( editor.getData() ).to.equal(
+						'<p>' +
+							'<a href="foo">' +
+								'<span style="color:red;font-size:18px;">' +
+									'<strong>foo</strong>' +
+								'</span>' +
+							'</a>' +
+						'</p>'
+					);
+
+					return editor.destroy();
+				} )
+				.then( () => {
+					element.remove();
+				} );
+		} );
 	} );
 } );