/** * @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, 'f<$text fontSize="10px">oo' ); expect( editor.getData() ).to.equal( '

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( '[]f<$text fontSize="18px">oo' ); expect( editor.getData() ).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, 'f<$text fontSize="foo-bar">oo' ); expect( editor.getData() ).to.equal( '

foo

' ); } ); it( 'should convert fontSize attribute to predefined named preset', () => { setModelData( doc, 'f<$text fontSize="tiny">oo' ); expect( editor.getData() ).to.equal( '

foo

' ); } ); it( 'should convert fontSize attribute to predefined pixel size preset', () => { setModelData( doc, 'f<$text fontSize="18px">oo' ); expect( editor.getData() ).to.equal( '

foo

' ); } ); it( 'should convert fontSize attribute from user defined settings', () => { setModelData( doc, 'f<$text fontSize="my">oo' ); expect( editor.getData() ).to.equal( '

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 = '

foo

'; editor.setData( data ); expect( getModelData( doc ) ).to.equal( '[]f<$text fontSize="tiny">oo' ); expect( editor.getData() ).to.equal( '

foo

' ); } ); it( 'should convert from element with defined multiple classes', () => { const data = '

foo

'; editor.setData( data ); expect( getModelData( doc ) ).to.equal( '[]f<$text fontSize="big-multiple">oo' ); expect( editor.getData() ).to.equal( '

foo

' ); } ); it( 'should convert from element with defined style', () => { const data = '

foo

'; editor.setData( data ); expect( getModelData( doc ) ).to.equal( '[]f<$text fontSize="18px">oo' ); expect( editor.getData() ).to.equal( data ); } ); it( 'should convert from element with defined style when with other styles', () => { const data = '

foo

'; editor.setData( data ); expect( getModelData( doc ) ).to.equal( '[]f<$text fontSize="18px">oo' ); expect( editor.getData() ).to.equal( '

foo

' ); } ); it( 'should convert from user defined element', () => { const data = '

foo

'; editor.setData( data ); expect( getModelData( doc ) ).to.equal( '[]f<$text fontSize="my">oo' ); expect( editor.getData() ).to.equal( data ); } ); it( 'should convert from complex definitions', () => { editor.setData( '

foo

' + '

bar

' + '

baz

' ); expect( getModelData( doc ) ).to.equal( '[]f<$text fontSize="complex">oo' + 'b<$text fontSize="complex">ar' + 'b<$text fontSize="complex">az' ); expect( editor.getData() ).to.equal( '

foo

' + '

bar

' + '

baz

' ); } ); } ); } );