/** * @license Copyright (c) 2003-2019, 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'; describe( 'FontSizeEditing', () => { let editor, doc; beforeEach( () => { return VirtualTestEditor .create( { plugins: [ FontSizeEditing, Paragraph ] } ) .then( newEditor => { editor = newEditor; doc = editor.document; } ); } ); afterEach( () => { editor.destroy(); } ); 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' ] ); } ); } ); } ); 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="18">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="18">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="18">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

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