浏览代码

Added tests to captioning converters.

Szymon Kupś 9 年之前
父节点
当前提交
2e8fab8904

+ 23 - 9
packages/ckeditor5-image/src/imagecaptioning/imagecaptioningengine.js

@@ -53,18 +53,32 @@ export default class ImageCaptioningEngine extends Plugin {
 			.from( matcher )
 			.toElement( 'caption' );
 
-		// Model to view converter for editing pipeline.
-		const insertConverter = insertElement( new ViewEditableElement( 'figcaption', { contenteditable: true } ) );
-		editing.modelToView.on( 'insert:caption', ( evt, data, consumable, conversionApi ) => {
-			const captionElement = data.item;
+		// Model to view converter for data pipeline.
+		data.modelToView.on(
+			'insert:caption',
+			captionModelToView( new ViewEditableElement( 'figcaption' ), false )
+		);
 
-			if ( isImage( captionElement.parent ) ) {
-				insertConverter( evt, data, consumable, conversionApi );
-			}
-		} );
+		// Model to view converter for editing pipeline.
+		editing.modelToView.on(
+			'insert:caption',
+			captionModelToView( new ViewEditableElement( 'figcaption', { contenteditable: true } ), false )
+		);
 	}
 }
 
+function captionModelToView( element, convertEmpty = true ) {
+	const insertConverter = insertElement( element );
+
+	return ( evt, data, consumable, conversionApi ) => {
+		const captionElement = data.item;
+
+		if ( isImage( captionElement.parent ) && ( convertEmpty || captionElement.childCount > 0 ) ) {
+			insertConverter( evt, data, consumable, conversionApi );
+		}
+	};
+}
+
 function insertCaptionElement( evt, changeType, data, batch ) {
 	if ( changeType !== 'insert' ) {
 		return;
@@ -78,7 +92,7 @@ function insertCaptionElement( evt, changeType, data, batch ) {
 	for ( let value of walker ) {
 		const item = value.item;
 
-		if ( value.type == 'elementStart' && item.name == 'image' && !hasCaption( item ) ) {
+		if ( value.type == 'elementStart' && isImage( item ) && !hasCaption( item ) ) {
 			// Using batch of insertion.
 			batch.document.enqueueChanges( () => {
 				batch.insert( ModelPosition.createAt( item, 'end' ), new ModelElement( 'caption' ) );

+ 56 - 1
packages/ckeditor5-image/tests/imagecaptioning/imagecaptioningengine.js

@@ -5,18 +5,29 @@
 
 import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor';
 import ImageCaptioningEngine from '../../src/imagecaptioning/imagecaptioningengine';
+import ImageEngine from '../../src/imageengine';
+import { getData as getModelData, setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
+import buildViewConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildviewconverter';
+import buildModelConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildmodelconverter';
 
 describe( 'ImageCaptioningEngine', () => {
 	let editor, document, viewDocument;
 
 	beforeEach( () => {
 		return VirtualTestEditor.create( {
-			plugins: [ ImageCaptioningEngine ]
+			plugins: [ ImageCaptioningEngine, ImageEngine ]
 		} )
 			.then( newEditor => {
 				editor = newEditor;
 				document = editor.document;
 				viewDocument = editor.editing.view;
+				document.schema.registerItem( 'widget' );
+				document.schema.allow( { name: 'widget', inside: '$root' } );
+				document.schema.allow( { name: 'caption', inside: 'widget' } );
+				document.schema.allow( { name: '$inline', inside: 'widget' } );
+
+				buildViewConverter().for( editor.data.viewToModel ).fromElement( 'widget' ).toElement( 'widget' );
+				buildModelConverter().for( editor.data.modelToView, editor.editing.modelToView ).fromElement( 'widget' ).toElement( 'widget' );
 			} );
 	} );
 
@@ -28,4 +39,48 @@ describe( 'ImageCaptioningEngine', () => {
 		expect( document.schema.check( { name: 'caption', iniside: 'image' } ) ).to.be.true;
 		expect( document.schema.check( { name: '$inline', inside: 'caption' } ) ).to.be.true;
 	} );
+
+	describe( 'data pipeline', () => {
+		describe( 'view to model', () => {
+			it( 'should convert figcaption inside image figure', () => {
+				editor.setData( '<figure class="image"><img src="foo.png"/><figcaption>foo bar</figcaption></figure>' );
+
+				expect( getModelData( document, { withoutSelection: true } ) )
+					.to.equal( '<image src="foo.png"><caption>foo bar</caption></image>' );
+			} );
+
+			it( 'should add empty caption if there is no figcaption', () => {
+				editor.setData( '<figure class="image"><img src="foo.png"/></figure>' );
+
+				expect( getModelData( document, { withoutSelection: true } ) )
+					.to.equal( '<image src="foo.png"><caption></caption></image>' );
+			} );
+
+			it( 'should not convert figcaption inside other elements than image', () => {
+				editor.setData( '<widget><figcaption>foobar</figcaption></widget>' );
+
+				expect( getModelData( document, { withoutSelection: true } ) )
+					.to.equal( '<widget>foobar</widget>' );
+			} );
+		} );
+
+		describe( 'model to view', () => {
+			it( 'should convert caption element to figcaption', () => {
+				setModelData( document, '<image src="img.png"><caption>Foo bar baz.</caption></image>' );
+
+				expect( editor.getData() ).to.equal( '<figure class="image"><figcaption>Foo bar baz.</figcaption><img src="img.png"></figure>' );
+			} );
+
+			it( 'should not convert caption if it\'s empty', () => {
+				setModelData( document, '<image src="img.png"><caption></caption></image>' );
+
+				expect( editor.getData() ).to.equal( '<figure class="image"><img src="img.png"></figure>' );
+			} );
+
+			it( 'should not convert caption from other elements', () => {
+				setModelData( document, '<widget>foo bar<caption></caption></widget>' );
+				expect( editor.getData() ).to.equal( '<widget>foo bar</widget>' );
+			} );
+		} );
+	} );
 } );