foo
' ); + } ); + + it( 'should convert fontFamily attribute to configured simple preset', () => { + setModelData( doc, 'foo
' ); + } ); + + it( 'should convert fontFamily attribute to configured complex preset', () => { + setModelData( doc, 'foo
' ); + } ); + + it( 'should convert fontFamily attribute from user defined settings', () => { + setModelData( doc, 'foo
' ); + } ); + } ); + + describe( 'data pipeline conversions', () => { + beforeEach( () => { + return VirtualTestEditor + .create( { + plugins: [ FontFamilyEditing, Paragraph ], + fontFamily: { + options: [ + 'Lucida Sans Unicode, Lucida Grande, sans-serif', + { + title: 'My other setting', + model: 'my-other', + view: { + name: 'span', + style: { 'font-family': 'Other' } + } + }, + { + title: 'My setting', + model: 'my', + view: { + name: 'mark', + style: { 'font-family': 'Verdana' }, + class: 'my-style' + } + }, + { + title: 'Hybrid', + model: 'complex', + view: { + name: 'span', + class: [ 'text-complex' ] + }, + upcastAlso: [ + { name: 'span', style: { 'font-family': 'Arial' } }, + { name: 'span', style: { 'font-family': 'Arial,sans-serif' } }, + { name: 'span', attribute: { 'data-font': 'Arial' } } + ] + } + ] + } + } ) + .then( newEditor => { + editor = newEditor; + + doc = editor.model; + } ); + } ); + + it( 'should convert from element with defined style when with other styles', () => { + const data = '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
' + + 'foo
' + + 'bar
' + + 'baz
' + ); + + expect( getModelData( doc ) ).to.equal( + 'foo
' + + 'foo
' + + 'bar
' + + 'baz
' + ); + } ); + } ); +} ); diff --git a/tests/fontfamily/fontfamilyui.js b/tests/fontfamily/fontfamilyui.js new file mode 100644 index 0000000..37e27d2 --- /dev/null +++ b/tests/fontfamily/fontfamilyui.js @@ -0,0 +1,163 @@ +/** + * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +/* global document */ + +import FontFamilyEditing from '../../src/fontfamily/fontfamilyediting'; +import FontFamilyUI from '../../src/fontfamily/fontfamilyui'; + +import fontFamilyIcon from '../../theme/icons/font-family.svg'; + +import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor'; +import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils'; +import { add as addTranslations, _clear as clearTranslations } from '@ckeditor/ckeditor5-utils/src/translation-service'; + +testUtils.createSinonSandbox(); + +describe( 'FontFamilyUI', () => { + let editor, command, element; + + before( () => { + addTranslations( 'en', { + 'Font Family': 'Font Family', + 'Default': 'Default' + } ); + + addTranslations( 'pl', { + 'Font Family': 'Czcionka', + 'Default': 'Domyślna' + } ); + } ); + + after( () => { + clearTranslations(); + } ); + + beforeEach( () => { + element = document.createElement( 'div' ); + document.body.appendChild( element ); + + return ClassicTestEditor + .create( element, { + plugins: [ FontFamilyEditing, FontFamilyUI ] + } ) + .then( newEditor => { + editor = newEditor; + } ); + } ); + + afterEach( () => { + element.remove(); + + return editor.destroy(); + } ); + + describe( 'fontFamily Dropdown', () => { + let dropdown; + + beforeEach( () => { + command = editor.commands.get( 'fontFamily' ); + dropdown = editor.ui.componentFactory.create( 'fontFamily' ); + } ); + + it( 'button has the base properties', () => { + const button = dropdown.buttonView; + + expect( button ).to.have.property( 'label', 'Font Family' ); + expect( button ).to.have.property( 'tooltip', true ); + expect( button ).to.have.property( 'icon', fontFamilyIcon ); + } ); + + it( 'should add custom CSS class to dropdown', () => { + const dropdown = editor.ui.componentFactory.create( 'fontFamily' ); + + dropdown.render(); + + expect( dropdown.element.classList.contains( 'ck-font-family-dropdown' ) ).to.be.true; + } ); + + it( 'should focus view after command execution', () => { + const focusSpy = testUtils.sinon.spy( editor.editing.view, 'focus' ); + const dropdown = editor.ui.componentFactory.create( 'fontFamily' ); + + dropdown.commandName = 'fontFamily'; + dropdown.fire( 'execute' ); + + sinon.assert.calledOnce( focusSpy ); + } ); + + it( 'should activate current option in dropdown', () => { + const listView = dropdown.listView; + + command.value = undefined; + + // The first item is 'default' font family. + expect( listView.items.map( item => item.isActive ) ) + .to.deep.equal( [ true, false, false, false, false, false, false, false, false ] ); + + command.value = 'Arial'; + + // The second item is 'Arial' font family. + expect( listView.items.map( item => item.isActive ) ) + .to.deep.equal( [ false, true, false, false, false, false, false, false, false ] ); + } ); + + describe( 'model to command binding', () => { + it( 'isEnabled', () => { + command.isEnabled = false; + + expect( dropdown.buttonView.isEnabled ).to.be.false; + + command.isEnabled = true; + expect( dropdown.buttonView.isEnabled ).to.be.true; + } ); + } ); + + describe( 'localization', () => { + beforeEach( () => { + return localizedEditor( [ 'default', 'Arial' ] ); + } ); + + it( 'works for the #buttonView', () => { + const buttonView = dropdown.buttonView; + + expect( buttonView.label ).to.equal( 'Czcionka' ); + } ); + + it( 'works for the listView#items in the panel', () => { + const listView = dropdown.listView; + + expect( listView.items.map( item => item.label ) ).to.deep.equal( [ + 'Domyślna', + 'Arial' + ] ); + } ); + + function localizedEditor( options ) { + const editorElement = document.createElement( 'div' ); + document.body.appendChild( editorElement ); + + return ClassicTestEditor + .create( editorElement, { + plugins: [ FontFamilyEditing, FontFamilyUI ], + toolbar: [ 'fontFamily' ], + language: 'pl', + fontFamily: { + options + } + } ) + .then( newEditor => { + editor = newEditor; + dropdown = editor.ui.componentFactory.create( 'fontFamily' ); + command = editor.commands.get( 'fontFamily' ); + + editorElement.remove(); + + return editor.destroy(); + } ); + } + } ); + } ); +} ); diff --git a/tests/fontfamily/utils.js b/tests/fontfamily/utils.js new file mode 100644 index 0000000..ffb4947 --- /dev/null +++ b/tests/fontfamily/utils.js @@ -0,0 +1,86 @@ +/** + * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +import { normalizeOptions } from '../../src/fontfamily/utils'; + +describe( 'FontFamily utils', () => { + describe( 'normalizeOptions()', () => { + it( 'should discard unsupported values', () => { + expect( normalizeOptions( [ () => {}, 0, true ] ) ).to.deep.equal( [] ); + } ); + + it( 'should pass through object definition', () => { + expect( normalizeOptions( [ + 'default', + { + title: 'Comic Sans', + model: 'comic', + view: { + name: 'span', + style: { + 'font-family': 'Comic Sans' + } + } + } + ] ) ).to.deep.equal( [ + { + model: undefined, + title: 'Default' + }, + { + title: 'Comic Sans', + model: 'comic', + view: { + name: 'span', + style: { + 'font-family': 'Comic Sans' + } + } + } + ] ); + } ); + + describe( 'shorthand presets', () => { + it( 'should return full preset from string presets', () => { + expect( normalizeOptions( ( [ + 'Arial', + '"Comic Sans MS", sans-serif', + 'Lucida Console, \'Courier New\', Courier, monospace' + ] ) ) ).to.deep.equal( [ + { + title: 'Arial', + model: 'Arial', + view: { + name: 'span', + style: { + 'font-family': 'Arial' + } + } + }, + { + title: 'Comic Sans MS', + model: 'Comic Sans MS', + view: { + name: 'span', + style: { + 'font-family': '\'Comic Sans MS\', sans-serif' + } + } + }, + { + title: 'Lucida Console', + model: 'Lucida Console', + view: { + name: 'span', + style: { + 'font-family': '\'Lucida Console\', \'Courier New\', Courier, monospace' + } + } + } + ] ); + } ); + } ); + } ); +} ); diff --git a/tests/fontsize.js b/tests/fontsize.js new file mode 100644 index 0000000..f7f42d1 --- /dev/null +++ b/tests/fontsize.js @@ -0,0 +1,18 @@ +/** + * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +import FontSize from './../src/fontsize'; +import FontSizeEditing from './../src/fontsize/fontsizeediting'; +import FontSizeUI from './../src/fontsize/fontsizeui'; + +describe( 'FontSize', () => { + it( 'requires FontSizeEditing & FontSizeUI', () => { + expect( FontSize.requires ).to.deep.equal( [ FontSizeEditing, FontSizeUI ] ); + } ); + + it( 'defines plugin name', () => { + expect( FontSize.pluginName ).to.equal( 'FontSize' ); + } ); +} ); diff --git a/tests/fontsize/fontsizecommand.js b/tests/fontsize/fontsizecommand.js new file mode 100644 index 0000000..6fa67a4 --- /dev/null +++ b/tests/fontsize/fontsizecommand.js @@ -0,0 +1,35 @@ +/** + * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +import FontSizeCommand from '../../src/fontsize/fontsizecommand'; +import FontCommand from '../../src/fontcommand'; + +import ModelTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/modeltesteditor'; + +describe( 'FontSizeCommand', () => { + let editor, command; + + beforeEach( () => { + return ModelTestEditor.create() + .then( newEditor => { + editor = newEditor; + + command = new FontSizeCommand( editor ); + } ); + } ); + + afterEach( () => { + editor.destroy(); + } ); + + it( 'is a FontCommand', () => { + expect( FontSizeCommand.prototype ).to.be.instanceOf( FontCommand ); + expect( command ).to.be.instanceOf( FontCommand ); + } ); + + it( 'operates on fontSize attribute', () => { + expect( command ).to.have.property( 'attributeKey', 'fontSize' ); + } ); +} ); diff --git a/tests/fontsize/fontsizeediting.js b/tests/fontsize/fontsizeediting.js new file mode 100644 index 0000000..8107966 --- /dev/null +++ b/tests/fontsize/fontsizeediting.js @@ -0,0 +1,220 @@ +/** + * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +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; + } ); + + 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', + style: { 'font-size': '30px' }, + class: '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', + style: { 'font-size': '30px' }, + class: 'my-style' + } + }, + { + title: 'Big multiple classes', + model: 'big-multiple', + view: { + name: 'span', + class: [ 'foo', 'foo-big' ] + } + }, + { + title: 'Hybrid', + model: 'complex', + view: { + name: 'span', + class: [ 'text-complex' ] + }, + upcastAlso: [ + { name: 'span', style: { 'font-size': '77em' } }, + { name: 'span', attribute: { '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
' + ); + } ); + } ); +} ); diff --git a/tests/fontsize/fontsizeui.js b/tests/fontsize/fontsizeui.js new file mode 100644 index 0000000..5787c04 --- /dev/null +++ b/tests/fontsize/fontsizeui.js @@ -0,0 +1,257 @@ +/** + * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +/* global document */ + +import FontSizeEditing from '../../src/fontsize/fontsizeediting'; +import FontSizeUI from '../../src/fontsize/fontsizeui'; + +import fontSizeIcon from '../../theme/icons/font-size.svg'; + +import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor'; +import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils'; +import { _clear as clearTranslations, add as addTranslations } from '@ckeditor/ckeditor5-utils/src/translation-service'; +import { normalizeOptions } from '../../src/fontsize/utils'; + +testUtils.createSinonSandbox(); + +describe( 'FontSizeUI', () => { + let editor, command, element; + + before( () => { + addTranslations( 'en', { + 'Font Size': 'Font Size', + 'Default': 'Default', + 'Tiny': 'Tiny', + 'Small': 'Small', + 'Big': 'Big', + 'Huge': 'Huge' + } ); + + addTranslations( 'pl', { + 'Font Size': 'Rozmiar czcionki', + 'Default': 'Domyślny', + 'Tiny': 'Tyci', + 'Small': 'Mały', + 'Big': 'Duży', + 'Huge': 'Ogromny' + } ); + } ); + + after( () => { + clearTranslations(); + } ); + + beforeEach( () => { + element = document.createElement( 'div' ); + document.body.appendChild( element ); + + return ClassicTestEditor + .create( element, { + plugins: [ FontSizeEditing, FontSizeUI ] + } ) + .then( newEditor => { + editor = newEditor; + } ); + } ); + + afterEach( () => { + element.remove(); + + return editor.destroy(); + } ); + + describe( 'fontSize Dropdown', () => { + let dropdown; + + beforeEach( () => { + command = editor.commands.get( 'fontSize' ); + dropdown = editor.ui.componentFactory.create( 'fontSize' ); + } ); + + it( 'button has the base properties', () => { + const button = dropdown.buttonView; + + expect( button ).to.have.property( 'label', 'Font Size' ); + expect( button ).to.have.property( 'tooltip', true ); + expect( button ).to.have.property( 'icon', fontSizeIcon ); + } ); + + it( 'should add custom CSS class to dropdown', () => { + dropdown.render(); + + expect( dropdown.element.classList.contains( 'ck-font-size-dropdown' ) ).to.be.true; + } ); + + it( 'should focus view after command execution', () => { + const focusSpy = testUtils.sinon.spy( editor.editing.view, 'focus' ); + + dropdown.commandName = 'fontSize'; + dropdown.fire( 'execute' ); + + sinon.assert.calledOnce( focusSpy ); + } ); + + it( 'should activate current option in dropdown', () => { + const listView = dropdown.listView; + + command.value = undefined; + + // The third item is 'default' font size. + expect( listView.items.map( item => item.isActive ) ).to.deep.equal( [ false, false, true, false, false ] ); + + command.value = 'tiny'; + + // The first item is 'tiny' font size. + expect( listView.items.map( item => item.isActive ) ).to.deep.equal( [ true, false, false, false, false ] ); + } ); + + describe( 'model to command binding', () => { + it( 'isEnabled', () => { + command.isEnabled = false; + + expect( dropdown.buttonView.isEnabled ).to.be.false; + + command.isEnabled = true; + expect( dropdown.buttonView.isEnabled ).to.be.true; + } ); + } ); + + describe( 'config', () => { + describe( 'using presets', () => { + beforeEach( () => { + element = document.createElement( 'div' ); + document.body.appendChild( element ); + + return ClassicTestEditor + .create( element, { + plugins: [ FontSizeEditing, FontSizeUI ], + fontSize: { + options: [ 'tiny', 'small', 'default', 'big', 'huge' ] + } + } ) + .then( newEditor => { + editor = newEditor; + dropdown = editor.ui.componentFactory.create( 'fontSize' ); + } ); + } ); + + it( 'adds css class to listView#items in the panel', () => { + const listView = dropdown.listView; + + expect( listView.items.map( item => item.class ) ).to.deep.equal( [ + 'ck-fontsize-option text-tiny', + 'ck-fontsize-option text-small', + 'ck-fontsize-option', + 'ck-fontsize-option text-big', + 'ck-fontsize-option text-huge' + ] ); + } ); + } ); + + describe( 'using numerical values', () => { + beforeEach( () => { + element = document.createElement( 'div' ); + document.body.appendChild( element ); + + return ClassicTestEditor + .create( element, { + plugins: [ FontSizeEditing, FontSizeUI ], + fontSize: { + options: [ 10, 12, 'default', 16, 18 ] + } + } ) + .then( newEditor => { + editor = newEditor; + dropdown = editor.ui.componentFactory.create( 'fontSize' ); + } ); + } ); + + it( 'adds css class to listView#items in the panel', () => { + const listView = dropdown.listView; + + expect( listView.items.map( item => item.class ) ).to.deep.equal( [ + 'ck-fontsize-option', + 'ck-fontsize-option', + 'ck-fontsize-option', + 'ck-fontsize-option', + 'ck-fontsize-option' + ] ); + } ); + + it( 'adds font-size style to listView#items in the panel', () => { + const listView = dropdown.listView; + + expect( listView.items.map( item => item.style ) ).to.deep.equal( [ + 'font-size:10px', + 'font-size:12px', + undefined, + 'font-size:16px', + 'font-size:18px' + ] ); + } ); + } ); + } ); + + describe( 'localization', () => { + beforeEach( () => { + return localizedEditor( [ 'tiny', 'small', 'default', 'big', 'huge' ] ); + } ); + + it( 'does not alter normalizeOptions() internals', () => { + const options = normalizeOptions( [ 'tiny', 'small', 'default', 'big', 'huge' ] ); + expect( options ).to.deep.equal( [ + { title: 'Tiny', model: 'tiny', view: { name: 'span', class: 'text-tiny' } }, + { title: 'Small', model: 'small', view: { name: 'span', class: 'text-small' } }, + { title: 'Default', model: undefined }, + { title: 'Big', model: 'big', view: { name: 'span', class: 'text-big' } }, + { title: 'Huge', model: 'huge', view: { name: 'span', class: 'text-huge' } } + ] ); + } ); + + it( 'works for the #buttonView', () => { + const buttonView = dropdown.buttonView; + + expect( buttonView.label ).to.equal( 'Rozmiar czcionki' ); + } ); + + it( 'works for the listView#items in the panel', () => { + const listView = dropdown.listView; + + expect( listView.items.map( item => item.label ) ).to.deep.equal( [ + 'Tyci', + 'Mały', + 'Domyślny', + 'Duży', + 'Ogromny' + ] ); + } ); + + function localizedEditor( options ) { + const editorElement = document.createElement( 'div' ); + document.body.appendChild( editorElement ); + + return ClassicTestEditor + .create( editorElement, { + plugins: [ FontSizeEditing, FontSizeUI ], + toolbar: [ 'fontSize' ], + language: 'pl', + fontSize: { + options + } + } ) + .then( newEditor => { + editor = newEditor; + dropdown = editor.ui.componentFactory.create( 'fontSize' ); + command = editor.commands.get( 'fontSize' ); + + editorElement.remove(); + + return editor.destroy(); + } ); + } + } ); + } ); +} ); diff --git a/tests/fontsize/utils.js b/tests/fontsize/utils.js new file mode 100644 index 0000000..94069a5 --- /dev/null +++ b/tests/fontsize/utils.js @@ -0,0 +1,52 @@ +/** + * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +import { normalizeOptions } from '../../src/fontsize/utils'; + +describe( 'FontSizeEditing Utils', () => { + describe( 'normalizeOptions()', () => { + it( 'should discard unsupported values', () => { + expect( normalizeOptions( [ () => {}, 'default', 'unknown' ] ) ).to.deep.equal( [ { title: 'Default', model: undefined } ] ); + } ); + + it( 'should pass through object definition', () => { + expect( normalizeOptions( [ { + title: 'My Size', + model: 'my-size', + view: { name: 'span', style: 'font-size: 12em;' } + } ] ) ).to.deep.equal( [ + { + title: 'My Size', + model: 'my-size', + view: { name: 'span', style: 'font-size: 12em;' } + } + ] ); + } ); + + describe( 'named presets', () => { + it( 'should return defined presets', () => { + expect( normalizeOptions( [ 'tiny', 'small', 'default', 'big', 'huge' ] ) ).to.deep.equal( [ + { title: 'Tiny', model: 'tiny', view: { name: 'span', class: 'text-tiny' } }, + { title: 'Small', model: 'small', view: { name: 'span', class: 'text-small' } }, + { title: 'Default', model: undefined }, + { title: 'Big', model: 'big', view: { name: 'span', class: 'text-big' } }, + { title: 'Huge', model: 'huge', view: { name: 'span', class: 'text-huge' } } + ] ); + } ); + } ); + + describe( 'numerical presets', () => { + it( 'should return generated presets', () => { + expect( normalizeOptions( [ '10', 12, 'default', '14.1', 18.3 ] ) ).to.deep.equal( [ + { title: '10', model: 10, view: { name: 'span', style: { 'font-size': '10px' } } }, + { title: '12', model: 12, view: { name: 'span', style: { 'font-size': '12px' } } }, + { title: 'Default', model: undefined }, + { title: '14.1', model: 14.1, view: { name: 'span', style: { 'font-size': '14.1px' } } }, + { title: '18.3', model: 18.3, view: { name: 'span', style: { 'font-size': '18.3px' } } } + ] ); + } ); + } ); + } ); +} ); diff --git a/tests/manual/font-family.html b/tests/manual/font-family.html new file mode 100644 index 0000000..e35a8fd --- /dev/null +++ b/tests/manual/font-family.html @@ -0,0 +1,45 @@ +
+
+ 
+
+ Sample image with changed font caption.
+
+
+
diff --git a/tests/manual/font-family.js b/tests/manual/font-family.js
new file mode 100644
index 0000000..396dd02
--- /dev/null
+++ b/tests/manual/font-family.js
@@ -0,0 +1,24 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals console, window, document */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+import FontFamily from '../../src/fontfamily';
+
+ClassicEditor
+ .create( document.querySelector( '#editor' ), {
+ plugins: [ ArticlePluginSet, FontFamily ],
+ toolbar: [
+ 'headings', '|', 'fontFamily', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'
+ ]
+ } )
+ .then( editor => {
+ window.editor = editor;
+ } )
+ .catch( err => {
+ console.error( err.stack );
+ } );
diff --git a/tests/manual/font-family.md b/tests/manual/font-family.md
new file mode 100644
index 0000000..bdd7ecb
--- /dev/null
+++ b/tests/manual/font-family.md
@@ -0,0 +1,12 @@
+### Loading
+
+The data should be loaded with paragraphs, each with different font.
+Also the image caption should have "changed font" string with different font.
+
+### Testing
+
+Try to:
+- Change font size by selecting many paragraphs.
+- Change font size by selecting some text.
+- Change to default font size by selecting many paragraphs.
+- Change to default font size by selecting some text.
diff --git a/tests/manual/font-size-numeric.html b/tests/manual/font-size-numeric.html
new file mode 100644
index 0000000..6ef262a
--- /dev/null
+++ b/tests/manual/font-size-numeric.html
@@ -0,0 +1,11 @@
+Font Family feature sample.
+ +Arial, Helvetica, sans-serif:
++ Topping cheesecake cotton candy toffee cookie cookie lemon drops cotton candy. Carrot cake dessert jelly beans powder cake cupcake tiramisu pastry gummi bears. +
+ +Courier New, Courier, monospace:
++ Jujubes sweet wafer. Pastry cotton candy sweet muffin dessert cookie. Chocolate cake candy canes dragée wafer donut bear claw. +
+ +Georgia, serif:
++ Chocolate bar candy fruitcake fruitcake. Lollipop gingerbread pudding sweet roll biscuit halvah marzipan croissant soufflé. +
+ +Lucida Sans Unicode, Lucida Grande, sans-serif:
++ Chocolate muffin apple pie toffee caramels chupa chups bear claw cotton candy. Lollipop dragée fruitcake fruitcake apple pie chocolate bar candy. +
+ +Tahoma, Geneva, sans-serif:
++ Brownie biscuit donut gummies pie cheesecake. Dessert ice cream lemon drops candy soufflé cookie lemon drops. Chupa chups powder muffin sugar plum gummi bears fruitcake. +
+ +Trebuchet MS, Helvetica, sans-serif:
++ Jujubes candy lollipop. Tootsie roll cookie chocolate gummies cupcake sweet fruitcake oat cake danish. +
+ +Verdana, Geneva, sans-serif:
++ Danish brownie powder pie danish. Topping dragée oat cake caramels. Chocolate bar bonbon pastry apple pie icing chocolate danish carrot cake gummies. +
+ +
+
+
diff --git a/tests/manual/font-size-numeric.js b/tests/manual/font-size-numeric.js
new file mode 100644
index 0000000..b6a4c72
--- /dev/null
+++ b/tests/manual/font-size-numeric.js
@@ -0,0 +1,25 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals console, window, document */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+import FontSize from '../../src/fontsize';
+
+ClassicEditor
+ .create( document.querySelector( '#editor' ), {
+ plugins: [ ArticlePluginSet, FontSize ],
+ toolbar: [
+ 'headings', '|', 'fontSize', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'
+ ],
+ fontSize: { options: [ 10, 12, 14, 'default', 18, 20, 22 ] }
+ } )
+ .then( editor => {
+ window.editor = editor;
+ } )
+ .catch( err => {
+ console.error( err.stack );
+ } );
diff --git a/tests/manual/font-size-numeric.md b/tests/manual/font-size-numeric.md
new file mode 100644
index 0000000..bf60baf
--- /dev/null
+++ b/tests/manual/font-size-numeric.md
@@ -0,0 +1,12 @@
+### Loading
+
+The data should be loaded with:
+- 7 paragraphs with font sizes (10, 12, 14, default, 18, 20, 22),
+
+### Testing
+
+Try to:
+- Change font by selecting many paragraphs.
+- Change font by selecting some text.
+- Change to default font by selecting many paragraphs.
+- Change to default font by selecting some text.
diff --git a/tests/manual/font-size-presets.html b/tests/manual/font-size-presets.html
new file mode 100644
index 0000000..a757a47
--- /dev/null
+++ b/tests/manual/font-size-presets.html
@@ -0,0 +1,43 @@
+
+
+Font Size feature sample.
+ +Some text with font-size set to: 10px.
+Some text with font-size set to: 12px.
+Some text with font-size set to: 14px.
+Some text with the default size
+Some text with font-size set to: 18px.
+Some text with font-size set to: 20px.
+Some text with font-size set to: 22px.
+
+
+
+
+ Sample image with crazy caption.
+
+
+
diff --git a/tests/manual/font-size-presets.js b/tests/manual/font-size-presets.js
new file mode 100644
index 0000000..8af7685
--- /dev/null
+++ b/tests/manual/font-size-presets.js
@@ -0,0 +1,24 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals console, window, document */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+import FontSize from '../../src/fontsize';
+
+ClassicEditor
+ .create( document.querySelector( '#editor' ), {
+ plugins: [ ArticlePluginSet, FontSize ],
+ toolbar: [
+ 'headings', '|', 'fontSize', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'
+ ]
+ } )
+ .then( editor => {
+ window.editor = editor;
+ } )
+ .catch( err => {
+ console.error( err.stack );
+ } );
diff --git a/tests/manual/font-size-presets.md b/tests/manual/font-size-presets.md
new file mode 100644
index 0000000..34c2488
--- /dev/null
+++ b/tests/manual/font-size-presets.md
@@ -0,0 +1,15 @@
+### Loading
+
+The data should be loaded with:
+- heading with big fragment,
+- paragraph with fragments with all font sizes (tiny, small, big, huge),
+- list with 4 items - each with different font size fragment,
+- image with caption with styled word.
+
+### Testing
+
+Try to:
+- Change font by selecting many paragraphs.
+- Change font by selecting some text.
+- Change to default font by selecting many paragraphs.
+- Change to default font by selecting some text.
diff --git a/tests/manual/sample.jpg b/tests/manual/sample.jpg
new file mode 100644
index 0000000..b77d07e
Binary files /dev/null and b/tests/manual/sample.jpg differ
diff --git a/theme/icons/font-family.svg b/theme/icons/font-family.svg
new file mode 100644
index 0000000..330647f
--- /dev/null
+++ b/theme/icons/font-family.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/theme/icons/font-size.svg b/theme/icons/font-size.svg
new file mode 100644
index 0000000..bbae46a
--- /dev/null
+++ b/theme/icons/font-size.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
Font Size feature sample.
+ ++ This is a mixed text with different sizes of text: + tiny, + small, + big and + huge. +
+ +-
+
- It's a list item with tiny text +
- It's a list item with small text +
- It's a list item with big text +
- It's a list item with huge text +
+