/** * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* globals document */ import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor'; import HeadingEditing from '../src/headingediting'; import HeadingButtonsUI from '../src/headingbuttonsui'; import { setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model'; import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview'; import { getLocalizedOptions } from '../src/utils'; import iconHeading2 from '../theme/icons/heading2.svg'; describe( 'HeadingButtonUI', () => { let editorElement, editor; describe( 'default config', () => { beforeEach( () => { editorElement = document.createElement( 'div' ); document.body.appendChild( editorElement ); return ClassicTestEditor .create( editorElement, { plugins: [ HeadingButtonsUI, HeadingEditing ], toolbar: [ 'heading1', 'heading2', 'heading3', 'heading4', 'heading5', 'heading6' ], heading: { options: [ { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' }, { model: 'heading1', view: 'h2', title: 'Heading 1', class: 'ck-heading_heading1' }, { model: 'heading2', view: 'h3', title: 'Heading 2', class: 'ck-heading_heading2' }, { model: 'heading3', view: 'h4', title: 'Heading 3', class: 'ck-heading_heading3' }, { model: 'heading4', view: 'h5', title: 'Heading 4', class: 'ck-heading_heading4' }, { model: 'heading5', view: 'h6', title: 'Heading 5', class: 'ck-heading_heading5' }, { model: 'heading6', view: 'p', title: 'Heading 6', class: 'ck-heading_heading6' } ] } } ) .then( newEditor => { editor = newEditor; // Set data so the commands will be enabled. setData( editor.model, 'f{}oo' ); } ); } ); afterEach( () => { editorElement.remove(); return editor.destroy(); } ); it( 'should define default buttons', () => { const factory = editor.ui.componentFactory; expect( factory.create( 'heading1' ) ).to.be.instanceOf( ButtonView ); expect( factory.create( 'heading2' ) ).to.be.instanceOf( ButtonView ); expect( factory.create( 'heading3' ) ).to.be.instanceOf( ButtonView ); expect( factory.create( 'heading4' ) ).to.be.instanceOf( ButtonView ); expect( factory.create( 'heading5' ) ).to.be.instanceOf( ButtonView ); expect( factory.create( 'heading6' ) ).to.be.instanceOf( ButtonView ); } ); it( 'should initialize buttons with correct localized data', () => { const localizedOptions = getLocalizedOptions( editor ).filter( option => option.model == 'heading2' )[ 0 ]; const heading2Button = editor.ui.componentFactory.create( 'heading2' ); expect( heading2Button.label ).to.equal( localizedOptions.title ); expect( heading2Button.icon ).to.equal( iconHeading2 ); expect( heading2Button.tooltip ).to.equal( true ); } ); it( 'should bind buttons to correct commands', () => { const headingButton = editor.ui.componentFactory.create( 'heading1' ); const headingCommand = editor.commands.get( 'heading' ); expect( headingCommand.isEnabled ).to.be.true; expect( headingButton.isEnabled ).to.be.true; headingCommand.isEnabled = false; expect( headingButton.isEnabled ).to.be.false; expect( headingCommand.value ).to.equal( 'heading1' ); expect( headingButton.isOn ).to.be.true; setData( editor.model, 'f{}oo' ); expect( headingCommand.value ).to.equal( 'heading2' ); expect( headingButton.isOn ).to.be.false; } ); it( 'should bind button execute to command execute', () => { const headingButton = editor.ui.componentFactory.create( 'heading1' ); const executeCommandSpy = sinon.spy( editor, 'execute' ); headingButton.fire( 'execute' ); sinon.assert.calledOnce( executeCommandSpy ); sinon.assert.calledWithExactly( executeCommandSpy, 'heading', { value: 'heading1' } ); } ); it( 'should be initialized as toggleable button', () => { const factory = editor.ui.componentFactory; expect( factory.create( 'heading1' ).isToggleable ).to.be.true; expect( factory.create( 'heading2' ).isToggleable ).to.be.true; expect( factory.create( 'heading3' ).isToggleable ).to.be.true; expect( factory.create( 'heading4' ).isToggleable ).to.be.true; expect( factory.create( 'heading5' ).isToggleable ).to.be.true; expect( factory.create( 'heading6' ).isToggleable ).to.be.true; } ); } ); describe( 'custom config', () => { const customIcon = ''; beforeEach( () => { editorElement = document.createElement( 'div' ); document.body.appendChild( editorElement ); return ClassicTestEditor .create( editorElement, { heading: { options: [ { model: 'paragraph' }, { model: 'heading1', view: 'h2', icon: customIcon } ] }, plugins: [ HeadingButtonsUI, HeadingEditing ], toolbar: [ 'heading1', 'heading2', 'heading3' ] } ) .then( newEditor => { editor = newEditor; // Set data so the commands will be enabled. setData( editor.model, 'f{}oo' ); } ); } ); afterEach( () => { editorElement.remove(); return editor.destroy(); } ); it( 'should allow to pass custom image to the configuration', () => { const headingButton = editor.ui.componentFactory.create( 'heading1' ); expect( headingButton.icon ).to.equal( customIcon ); } ); } ); } );