|
|
@@ -4,9 +4,12 @@
|
|
|
*/
|
|
|
|
|
|
import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor';
|
|
|
+import ModelElement from '@ckeditor/ckeditor5-engine/src/model/element';
|
|
|
+import ModelPosition from '@ckeditor/ckeditor5-engine/src/model/position';
|
|
|
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 { getData as getViewData } from '@ckeditor/ckeditor5-engine/src/dev-utils/view';
|
|
|
import buildViewConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildviewconverter';
|
|
|
import buildModelConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildmodelconverter';
|
|
|
|
|
|
@@ -83,4 +86,138 @@ describe( 'ImageCaptioningEngine', () => {
|
|
|
} );
|
|
|
} );
|
|
|
} );
|
|
|
+
|
|
|
+ describe( 'editing pipeline', () => {
|
|
|
+ describe( 'model to view', () => {
|
|
|
+ it( 'should convert caption element to figcaption contenteditable', () => {
|
|
|
+ setModelData( document, '<image src="img.png"><caption>Foo bar baz.</caption></image>' );
|
|
|
+
|
|
|
+ expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
|
|
|
+ '<figure class="image ck-widget" contenteditable="false">' +
|
|
|
+ '<img src="img.png"></img>' +
|
|
|
+ '<figcaption contenteditable="true">Foo bar baz.</figcaption>' +
|
|
|
+ '</figure>'
|
|
|
+ );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'should not convert caption if it\'s empty', () => {
|
|
|
+ setModelData( document, '<image src="img.png"><caption></caption></image>' );
|
|
|
+
|
|
|
+ expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
|
|
|
+ '<figure class="image ck-widget" contenteditable="false"><img src="img.png"></img></figure>'
|
|
|
+ );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'should not convert caption from other elements', () => {
|
|
|
+ setModelData( document, '<widget>foo bar<caption></caption></widget>' );
|
|
|
+ expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal( '<widget>foo bar</widget>' );
|
|
|
+ } );
|
|
|
+ } );
|
|
|
+ } );
|
|
|
+
|
|
|
+ describe( 'inserting image to document', () => {
|
|
|
+ it( 'should add caption element if image does not have it', () => {
|
|
|
+ const image = new ModelElement( 'image', { src: '', alt: '' } );
|
|
|
+ const batch = document.batch();
|
|
|
+
|
|
|
+ document.enqueueChanges( () => {
|
|
|
+ batch.insert( new ModelPosition( document.getRoot(), [ 0 ] ), image );
|
|
|
+ } );
|
|
|
+
|
|
|
+ expect( getModelData( document, { withoutSelection: true } ) ).to.equal(
|
|
|
+ '<image alt="" src=""><caption></caption></image>'
|
|
|
+ );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'should not add caption element if image does not have it', () => {
|
|
|
+ const caption = new ModelElement( 'caption', null, 'foo bar' );
|
|
|
+ const image = new ModelElement( 'image', { src: '', alt: '' }, caption );
|
|
|
+ const batch = document.batch();
|
|
|
+
|
|
|
+ document.enqueueChanges( () => {
|
|
|
+ batch.insert( new ModelPosition( document.getRoot(), [ 0 ] ), image );
|
|
|
+ } );
|
|
|
+
|
|
|
+ expect( getModelData( document, { withoutSelection: true } ) ).to.equal(
|
|
|
+ '<image alt="" src=""><caption>foo bar</caption></image>'
|
|
|
+ );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'should do nothing for other changes than insert', () => {
|
|
|
+ setModelData( document, '<image src=""><caption>foo bar</caption></image>' );
|
|
|
+ const image = document.getRoot().getChild( 0 );
|
|
|
+ const batch = document.batch();
|
|
|
+
|
|
|
+ document.enqueueChanges( () => {
|
|
|
+ batch.setAttribute( image, 'alt', 'alt text' );
|
|
|
+ } );
|
|
|
+
|
|
|
+ expect( getModelData( document, { withoutSelection: true } ) ).to.equal(
|
|
|
+ '<image alt="alt text" src=""><caption>foo bar</caption></image>'
|
|
|
+ );
|
|
|
+ } );
|
|
|
+ } );
|
|
|
+
|
|
|
+ describe( 'editing view', () => {
|
|
|
+ it( 'image should have empty figcaption element when is selected', () => {
|
|
|
+ setModelData( document, '[<image src=""><caption></caption></image>]' );
|
|
|
+
|
|
|
+ expect( getViewData( viewDocument ) ).to.equal(
|
|
|
+ '[<figure class="image ck-widget ck-widget_selected" contenteditable="false">' +
|
|
|
+ '<img src=""></img>' +
|
|
|
+ '<figcaption contenteditable="true"></figcaption>' +
|
|
|
+ '</figure>]'
|
|
|
+ );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'image should not have empty figcaption element when is not selected', () => {
|
|
|
+ setModelData( document, '[]<image src=""><caption></caption></image>' );
|
|
|
+
|
|
|
+ expect( getViewData( viewDocument ) ).to.equal(
|
|
|
+ '[]<figure class="image ck-widget" contenteditable="false">' +
|
|
|
+ '<img src=""></img>' +
|
|
|
+ '</figure>'
|
|
|
+ );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'should not add additional figcaption if one is already present', () => {
|
|
|
+ setModelData( document, '[<image src=""><caption>foo bar</caption></image>]' );
|
|
|
+
|
|
|
+ expect( getViewData( viewDocument ) ).to.equal(
|
|
|
+ '[<figure class="image ck-widget ck-widget_selected" contenteditable="false">' +
|
|
|
+ '<img src=""></img>' +
|
|
|
+ '<figcaption contenteditable="true">foo bar</figcaption>' +
|
|
|
+ '</figure>]'
|
|
|
+ );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'should remove figcaption when caption is empty and image is no longer selected', () => {
|
|
|
+ setModelData( document, '[<image src=""><caption></caption></image>]' );
|
|
|
+
|
|
|
+ document.enqueueChanges( () => {
|
|
|
+ document.selection.removeAllRanges();
|
|
|
+ } );
|
|
|
+
|
|
|
+ expect( getViewData( viewDocument ) ).to.equal(
|
|
|
+ '[]<figure class="image ck-widget" contenteditable="false">' +
|
|
|
+ '<img src=""></img>' +
|
|
|
+ '</figure>'
|
|
|
+ );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'should not remove figcatpion when selection is inside it even when it is empty', () => {
|
|
|
+ setModelData( document, '<image src=""><caption>[foo bar]</caption></image>' );
|
|
|
+
|
|
|
+ document.enqueueChanges( () => {
|
|
|
+ document.batch().remove( document.selection.getFirstRange() );
|
|
|
+ } );
|
|
|
+
|
|
|
+ expect( getViewData( viewDocument ) ).to.equal(
|
|
|
+ '<figure class="image ck-widget ck-widget_selected" contenteditable="false">' +
|
|
|
+ '<img src=""></img>' +
|
|
|
+ '<figcaption contenteditable="true">[]</figcaption>' +
|
|
|
+ '</figure>'
|
|
|
+ );
|
|
|
+ } );
|
|
|
+ } );
|
|
|
} );
|