/**
* @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
import FontSizeEditing from './../../src/fontsize/fontsizeediting';
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 '@ckeditor/ckeditor5-engine/src/dev-utils/model';
import { assertCKEditorError } from '@ckeditor/ckeditor5-utils/tests/_utils/utils';
describe( 'FontSizeEditing', () => {
let editor, doc;
beforeEach( () => {
return VirtualTestEditor
.create( {
plugins: [ FontSizeEditing, Paragraph ]
} )
.then( newEditor => {
editor = newEditor;
doc = editor.document;
} );
} );
afterEach( () => {
editor.destroy();
} );
it( 'should have pluginName', () => {
expect( FontSizeEditing.pluginName ).to.equal( 'FontSizeEditing' );
} );
it( 'should set proper schema rules', () => {
expect( editor.model.schema.checkAttribute( [ '$block', '$text' ], 'fontSize' ) ).to.be.true;
expect( editor.model.schema.checkAttribute( [ '$clipboardHolder', '$text' ], 'fontSize' ) ).to.be.true;
expect( editor.model.schema.checkAttribute( [ '$block' ], 'fontSize' ) ).to.be.false;
} );
it( 'should be marked with a formatting property', () => {
expect( editor.model.schema.getAttributeProperties( 'fontSize' ) ).to.include( {
isFormatting: true
} );
} );
it( 'its attribute is marked with a copOnEnter property', () => {
expect( editor.model.schema.getAttributeProperties( 'fontSize' ) ).to.include( {
copyOnEnter: true
} );
} );
describe( 'config', () => {
describe( 'default value', () => {
it( 'should be set', () => {
expect( editor.config.get( 'fontSize.options' ) ).to.deep.equal( [ 'tiny', 'small', 'default', 'big', 'huge' ] );
expect( editor.config.get( 'fontSize.supportAllValues' ) ).to.equal( false );
} );
} );
describe( 'supportAllValues=true', () => {
let editor, doc;
beforeEach( () => {
return VirtualTestEditor
.create( {
plugins: [ FontSizeEditing, Paragraph ],
fontSize: {
supportAllValues: true,
options: [
'6.25%',
'8em',
'10px',
12,
{
model: 14,
title: '14px'
}
]
}
} )
.then( newEditor => {
editor = newEditor;
doc = editor.model;
} );
} );
afterEach( () => {
return editor.destroy();
} );
describe( 'editing pipeline conversion', () => {
it( 'should pass fontSize to data', () => {
setModelData( doc, '
foo
' ); } ); } ); describe( 'data pipeline conversions', () => { it( 'should convert from an element with defined style when with other styles', () => { const data = 'foo
'; editor.setData( data ); expect( getModelData( doc ) ).to.equal( 'foo
' ); } ); } ); it( 'should throw an error if used with default configuration of the plugin', () => { return VirtualTestEditor .create( { plugins: [ FontSizeEditing ], fontSize: { supportAllValues: true } } ) .then( () => { throw new Error( 'Supposed to be rejected' ); }, error => { assertCKEditorError( error, /font-size-invalid-use-of-named-presets/, null, { presets: [ 'tiny', 'small', 'big', 'huge' ] } ); } ); } ); } ); } ); describe( 'editing pipeline conversion', () => { beforeEach( () => { return VirtualTestEditor .create( { plugins: [ FontSizeEditing, Paragraph ], fontSize: { options: [ 'tiny', 'default', 18, { title: 'My setting', model: 'my', view: { name: 'mark', styles: { 'font-size': '30px' }, classes: 'my-style' } } ] } } ) .then( newEditor => { editor = newEditor; doc = editor.model; } ); } ); it( 'should discard unknown fontSize attribute values', () => { setModelData( doc, 'foo
' ); } ); it( 'should convert fontSize attribute to predefined named preset', () => { setModelData( doc, 'foo
' ); } ); it( 'should convert fontSize attribute to predefined pixel size preset', () => { setModelData( doc, 'foo
' ); } ); it( 'should convert fontSize attribute from user defined settings', () => { setModelData( doc, 'foo
' ); } ); } ); describe( 'data pipeline conversions', () => { beforeEach( () => { return VirtualTestEditor .create( { plugins: [ FontSizeEditing, Paragraph ], fontSize: { options: [ 'tiny', 'default', 18, { title: 'My setting', model: 'my', view: { name: 'mark', styles: { 'font-size': '30px' }, classes: 'my-style' } }, { title: 'Big multiple classes', model: 'big-multiple', view: { name: 'span', classes: [ 'foo', 'foo-big' ] } }, { title: 'Hybrid', model: 'complex', view: { name: 'span', classes: [ 'text-complex' ] }, upcastAlso: [ { name: 'span', styles: { 'font-size': '77em' } }, { name: 'span', attributes: { 'data-size': '77em' } } ] } ] } } ) .then( newEditor => { editor = newEditor; doc = editor.model; } ); } ); it( 'should convert from element with defined class', () => { const data = 'fo
'; editor.setData( data ); expect( getModelData( doc ) ).to.equal( 'foo
' ); } ); it( 'should convert from element with defined multiple classes', () => { const data = 'fo
'; editor.setData( data ); expect( getModelData( doc ) ).to.equal( 'foo
' ); } ); it( 'should convert from element with defined style', () => { const data = 'foo
'; editor.setData( data ); expect( getModelData( doc ) ).to.equal( 'foo
'; editor.setData( data ); expect( getModelData( doc ) ).to.equal( 'foo
' ); } ); it( 'should convert from user defined element', () => { const data = 'foo
'; editor.setData( data ); expect( getModelData( doc ) ).to.equal( 'foo
' + 'bar
' + 'baz
' ); expect( getModelData( doc ) ).to.equal( 'foo
' + 'bar
' + 'baz
' ); } ); } ); } );