/**
* @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
/* global document */
// ClassicTestEditor can't be used, as it doesn't handle the focus, which is needed to test resizer visual cues.
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Image from '../../src/image';
import ImageResizeEditing from '../../src/imageresize/imageresizeediting';
import ImageResizeCommand from '../../src/imageresize/imageresizecommand';
import ImageStyle from '../../src/imagestyle';
import { setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
import { focusEditor } from '@ckeditor/ckeditor5-widget/tests/widgetresize/_utils/utils';
describe( 'ImageResizeEditing', () => {
// 100x50 black png image
const IMAGE_SRC_FIXTURE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAyCAQAAAAAPLY1AAAAQklEQVR42u3PQREAAAgDoK1/' +
'aM3g14MGNJMXKiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiJysRFNMgH0RpujAAAAAElFTkSuQmCC';
let editor, editorElement;
beforeEach( () => {
editorElement = document.createElement( 'div' );
document.body.appendChild( editorElement );
} );
afterEach( async () => {
if ( editorElement ) {
editorElement.remove();
}
if ( editor ) {
await editor.destroy();
}
} );
it( 'should be named', () => {
expect( ImageResizeEditing.pluginName ).to.equal( 'ImageResizeEditing' );
} );
describe( 'constructor()', () => {
beforeEach( async () => {
editor = await createEditor( {
plugins: [ Paragraph, Image, ImageStyle, ImageResizeEditing ]
} );
} );
it( 'should define the default value for config.image.resizeUnit', () => {
expect( editor.config.get( 'image.resizeUnit' ) ).to.equal( '%' );
} );
it( 'should define the default value for config.image.resizeOptions', () => {
expect( editor.config.get( 'image.resizeOptions' ) ).to.deep.equal( [ {
name: 'imageResize:original',
value: null,
icon: 'original'
},
{
name: 'imageResize:25',
value: '25',
icon: 'small'
},
{
name: 'imageResize:50',
value: '50',
icon: 'medium'
},
{
name: 'imageResize:75',
value: '75',
icon: 'large'
} ] );
} );
} );
describe( 'conversion', () => {
beforeEach( async () => {
editor = await createEditor();
} );
it( 'upcasts 100px width correctly', () => {
editor.setData( `
` );
expect( editor.model.document.getRoot().getChild( 0 ).getAttribute( 'width' ) ).to.equal( '100px' );
} );
it( 'upcasts 50% width correctly', () => {
editor.setData( `
` );
expect( editor.model.document.getRoot().getChild( 0 ).getAttribute( 'width' ) ).to.equal( '50%' );
} );
it( 'downcasts 100px width correctly', () => {
setData( editor.model, `` );
expect( editor.getData() )
.to.equal( `
` );
} );
it( 'downcasts 50% width correctly', () => {
setData( editor.model, `` );
expect( editor.getData() )
.to.equal( `
` );
} );
it( 'removes style and extra class when no longer resized', () => {
setData( editor.model, `` );
const imageModel = editor.model.document.getRoot().getChild( 0 );
editor.model.change( writer => {
writer.removeAttribute( 'width', imageModel );
} );
expect( editor.getData() )
.to.equal( `
` );
} );
it( 'doesn\'t downcast consumed tokens', () => {
editor.conversion.for( 'downcast' ).add( dispatcher =>
dispatcher.on( 'attribute:width:image', ( evt, data, conversionApi ) => {
conversionApi.consumable.consume( data.item, 'attribute:width:image' );
}, { priority: 'high' } )
);
setData( editor.model, `` );
expect( editor.getData() )
.to.equal( `
` );
} );
} );
describe( 'schema', () => {
beforeEach( async () => {
editor = await createEditor();
} );
it( 'allows the width attribute', () => {
expect( editor.model.schema.checkAttribute( 'image', 'width' ) ).to.be.true;
} );
it( 'defines width as a formatting attribute', () => {
expect( editor.model.schema.getAttributeProperties( 'width' ) ).to.have.property( 'isFormatting', true );
} );
} );
describe( 'command', () => {
beforeEach( async () => {
editor = await createEditor();
} );
it( 'defines the imageResize command', () => {
expect( editor.commands.get( 'imageResize' ) ).to.be.instanceOf( ImageResizeCommand );
} );
} );
function createEditor( config ) {
return ClassicEditor
.create( editorElement, config || {
plugins: [ Paragraph, Image, ImageStyle, ImageResizeEditing ],
image: {
resizeUnit: 'px'
}
} )
.then( newEditor => {
focusEditor( newEditor );
return newEditor;
} );
}
} );