ソースを参照

Tests: Add more tests for `FontFamilyEditing` and `FontFamilyCommand`.

Maciej Gołaszewski 8 年 前
コミット
dff3a2a9db

+ 22 - 5
packages/ckeditor5-font/src/fontfamily/fontfamilyediting.js

@@ -28,7 +28,6 @@ export default class FontFamilyEditing extends Plugin {
 		// Define default configuration using named presets
 		editor.config.define( 'fontFamily', {
 			items: [
-				'default',
 				'Arial, Helvetica, sans-serif',
 				'Courier New, Courier, monospace'
 			]
@@ -92,18 +91,26 @@ function getItemDefinition( item ) {
 		return item;
 	}
 
+	// Ignore falsy values
+	if ( typeof item !== 'string' ) {
+		return;
+	}
+
 	return generateFontPreset( item );
 }
 
 // Creates a predefined preset for pixel size.
 function generateFontPreset( font ) {
-	const fontNames = font.split( ',' );
+	// Remove quotes from font names
+	const fontNames = font.replace( /"/g, '' ).split( ',' );
 
-	const cssFontNames = fontNames.join( fontNames );
+	const cssFontNames = fontNames.map( cleanFontName ).join( ', ' );
+
+	const firstFontName = fontNames[ 0 ];
 
 	return {
-		label: fontNames[ 0 ],
-		model: fontNames[ 0 ],
+		label: firstFontName,
+		model: firstFontName,
 		view: {
 			name: 'span',
 			styles: {
@@ -113,6 +120,16 @@ function generateFontPreset( font ) {
 	};
 }
 
+function cleanFontName( fontName ) {
+	fontName = fontName.trim();
+
+	if ( fontName.indexOf( ' ' ) > 0 ) {
+		fontName = `"${ fontName }"`;
+	}
+
+	return fontName;
+}
+
 /**
  * Font family option descriptor.
  *

+ 1 - 2
packages/ckeditor5-font/tests/fontfamily/fontfamilycommand.js

@@ -16,13 +16,12 @@ describe( 'FontFamilyCommand', () => {
 		return ModelTestEditor.create()
 			.then( newEditor => {
 				editor = newEditor;
-				command = new FontFamilyCommand( editor, 'arial' );
 				model = editor.model;
 
+				command = new FontFamilyCommand( editor, 'arial' );
 				editor.commands.add( 'fontFamily', command );
 
 				model.schema.registerItem( 'paragraph', '$block' );
-
 				model.schema.allow( { name: '$inline', attributes: 'fontFamily', inside: '$block' } );
 			} );
 	} );

+ 251 - 2
packages/ckeditor5-font/tests/fontfamily/fontfamilyediting.js

@@ -8,9 +8,10 @@ import FontFamilyEditing from './../../src/fontfamily/fontfamilyediting';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 
 import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor';
+import { getData as getModelData, setData as setModelData } from '../../../ckeditor5-engine/src/dev-utils/model';
 
 describe( 'FontFamilyEditing', () => {
-	let editor;
+	let editor, doc;
 
 	beforeEach( () => {
 		return VirtualTestEditor
@@ -19,6 +20,8 @@ describe( 'FontFamilyEditing', () => {
 			} )
 			.then( newEditor => {
 				editor = newEditor;
+
+				doc = editor.document;
 			} );
 	} );
 
@@ -35,11 +38,257 @@ describe( 'FontFamilyEditing', () => {
 		describe( 'default value', () => {
 			it( 'should be set', () => {
 				expect( editor.config.get( 'fontFamily.items' ) ).to.deep.equal( [
-					'default',
 					'Arial, Helvetica, sans-serif',
 					'Courier New, Courier, monospace'
 				] );
 			} );
 		} );
 	} );
+
+	describe( 'configuredItems', () => {
+		it( 'should discard unparsable values', () => {
+			return VirtualTestEditor
+				.create( {
+					plugins: [ FontFamilyEditing ],
+					fontFamily: {
+						items: [ () => {}, 0, true ]
+					}
+				} )
+				.then( newEditor => {
+					editor = newEditor;
+
+					const plugin = editor.plugins.get( FontFamilyEditing );
+
+					expect( plugin.configuredItems ).to.deep.equal( [] );
+				} );
+		} );
+
+		it( 'should pass through object definition', () => {
+			return VirtualTestEditor
+				.create( {
+					plugins: [ FontFamilyEditing ],
+					fontFamily: {
+						items: [
+							{
+								label: 'Comic Sans',
+								model: 'comic',
+								view: {
+									name: 'span',
+									styles: {
+										'font-family': 'Comic Sans'
+									}
+								}
+							}
+						]
+					}
+				} )
+				.then( newEditor => {
+					editor = newEditor;
+
+					const plugin = editor.plugins.get( FontFamilyEditing );
+
+					expect( plugin.configuredItems ).to.deep.equal( [
+						{
+							label: 'Comic Sans',
+							model: 'comic',
+							view: {
+								name: 'span', styles: {
+									'font-family': 'Comic Sans'
+								}
+							}
+						}
+					] );
+				} );
+		} );
+
+		describe( 'shorthand presets', () => {
+			it( 'should return full preset from string presets', () => {
+				return VirtualTestEditor
+					.create( {
+						plugins: [ FontFamilyEditing ],
+						fontFamily: {
+							items: [
+								'Arial',
+								'"Comic Sans MS", sans-serif',
+								'Lucida Console, Courier New, Courier, monospace'
+							]
+						}
+					} )
+					.then( newEditor => {
+						editor = newEditor;
+
+						const plugin = editor.plugins.get( FontFamilyEditing );
+
+						expect( plugin.configuredItems ).to.deep.equal( [
+							{
+								label: 'Arial',
+								model: 'Arial',
+								view: {
+									name: 'span',
+									styles: {
+										'font-family': 'Arial'
+									}
+								}
+							},
+							{
+								label: 'Comic Sans MS',
+								model: 'Comic Sans MS',
+								view: {
+									name: 'span',
+									styles: {
+										'font-family': '"Comic Sans MS", sans-serif'
+									}
+								}
+							},
+							{
+								label: 'Lucida Console',
+								model: 'Lucida Console',
+								view: {
+									name: 'span',
+									styles: {
+										'font-family': '"Lucida Console", "Courier New", Courier, monospace'
+									}
+								}
+							}
+						] );
+					} );
+			} );
+		} );
+	} );
+
+	describe( 'editing pipeline conversion', () => {
+		beforeEach( () => {
+			return VirtualTestEditor
+				.create( {
+					plugins: [ FontFamilyEditing, Paragraph ],
+					fontFamily: {
+						items: [
+							'Arial',
+							{
+								label: 'My font',
+								model: 'my',
+								view: {
+									name: 'mark',
+									classes: 'my-style'
+								}
+							}
+						]
+					}
+				} )
+				.then( newEditor => {
+					editor = newEditor;
+
+					doc = editor.model;
+				} );
+		} );
+
+		it( 'should discard unknown fontFamily attribute values', () => {
+			setModelData( doc, '<paragraph>f<$text fontFamily="foo-bar">o</$text>o</paragraph>' );
+
+			expect( editor.getData() ).to.equal( '<p>foo</p>' );
+		} );
+
+		it( 'should convert fontFamily attribute to configured preset', () => {
+			setModelData( doc, '<paragraph>f<$text fontFamily="Arial">o</$text>o</paragraph>' );
+
+			expect( editor.getData() ).to.equal( '<p>f<span style="font-family:Arial;">o</span>o</p>' );
+		} );
+
+		it( 'should convert fontFamily attribute from user defined settings', () => {
+			setModelData( doc, '<paragraph>f<$text fontFamily="my">o</$text>o</paragraph>' );
+
+			expect( editor.getData() ).to.equal( '<p>f<mark class="my-style">o</mark>o</p>' );
+		} );
+	} );
+
+	describe( 'data pipeline conversions', () => {
+		beforeEach( () => {
+			return VirtualTestEditor
+				.create( {
+					plugins: [ FontFamilyEditing, Paragraph ],
+					fontFamily: {
+						items: [
+							{
+								label: 'My other setting',
+								model: 'my-other',
+								view: {
+									name: 'span',
+									styles: { 'font-family': 'Other' }
+								}
+							},
+							{
+								label: 'My setting',
+								model: 'my',
+								view: {
+									name: 'mark',
+									styles: { 'font-family': 'Verdana' },
+									classes: 'my-style'
+								}
+							},
+							{
+								label: 'Hybrid',
+								model: 'complex',
+								view: {
+									name: 'span',
+									classes: [ 'text-complex' ]
+								},
+								acceptsAlso: [
+									{ name: 'span', styles: { 'font-family': 'Arial' } },
+									{ name: 'span', styles: { 'font-family': 'Arial,sans-serif' } },
+									{ name: 'span', attributes: { 'data-font': 'Arial' } }
+								]
+							}
+						]
+					}
+				} )
+				.then( newEditor => {
+					editor = newEditor;
+
+					doc = editor.model;
+				} );
+		} );
+
+		it( 'should convert from element with defined style when with other styles', () => {
+			const data = '<p>f<span style="font-family: Other;font-size: 18px">o</span>o</p>';
+
+			editor.setData( data );
+
+			expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontFamily="my-other">o</$text>o</paragraph>' );
+
+			expect( editor.getData() ).to.equal( '<p>f<span style="font-family:Other;">o</span>o</p>' );
+		} );
+
+		it( 'should convert from user defined element', () => {
+			const data = '<p>f<mark class="my-style" style="font-family:Verdana;">o</mark>o</p>';
+
+			editor.setData( data );
+
+			expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontFamily="my">o</$text>o</paragraph>' );
+
+			expect( editor.getData() ).to.equal( data );
+		} );
+
+		it( 'should convert from complex definitions', () => {
+			editor.setData(
+				'<p>f<span style="font-family:Arial;">o</span>o</p>' +
+				'<p>f<span style="font-family: Arial,sans-serif">o</span>o</p>' +
+				'<p>b<span data-font="Arial">a</span>r</p>' +
+				'<p>b<span class="text-complex">a</span>z</p>'
+			);
+
+			expect( getModelData( doc ) ).to.equal(
+				'<paragraph>[]f<$text fontFamily="complex">o</$text>o</paragraph>' +
+				'<paragraph>f<$text fontFamily="complex">o</$text>o</paragraph>' +
+				'<paragraph>b<$text fontFamily="complex">a</$text>r</paragraph>' +
+				'<paragraph>b<$text fontFamily="complex">a</$text>z</paragraph>'
+			);
+
+			expect( editor.getData() ).to.equal(
+				'<p>f<span class="text-complex">o</span>o</p>' +
+				'<p>f<span class="text-complex">o</span>o</p>' +
+				'<p>b<span class="text-complex">a</span>r</p>' +
+				'<p>b<span class="text-complex">a</span>z</p>'
+			);
+		} );
+	} );
 } );