Răsfoiți Sursa

Tests: Add FontSizeUI tests.

Maciej Gołaszewski 8 ani în urmă
părinte
comite
376fadc75b

+ 1 - 3
packages/ckeditor5-font/src/fontsize/fontsizeui.js

@@ -32,8 +32,6 @@ export default class FontSizeUI extends Plugin {
 
 		const command = editor.commands.get( 'fontSize' );
 
-		const dropdownTooltip = t( 'Font Size' );
-
 		for ( const option of options ) {
 			const itemModel = new Model( {
 				commandName: 'fontSize',
@@ -51,7 +49,7 @@ export default class FontSizeUI extends Plugin {
 			icon: fontSizeIcon,
 			withText: false,
 			items: dropdownItems,
-			tooltip: dropdownTooltip
+			tooltip: t( 'Font Size' )
 		} );
 
 		dropdownModel.bind( 'isEnabled' ).to( command, 'isEnabled' );

+ 85 - 0
packages/ckeditor5-font/tests/fontsize/fontsizeui.js

@@ -0,0 +1,85 @@
+/**
+ * @license Copyright (c) 2003-2017, 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 '@ckeditor/ckeditor5-core/theme/icons/low-vision.svg';
+
+import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
+import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
+
+testUtils.createSinonSandbox();
+
+describe( 'FontSizeUI', () => {
+	let editor, command, element;
+
+	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( 'tooltip', 'Font Size' );
+			expect( button ).to.have.property( 'icon', fontSizeIcon );
+			expect( button ).to.have.property( 'withText', false );
+		} );
+
+		it( 'should add custom CSS class to dropdown', () => {
+			const dropdown = editor.ui.componentFactory.create( 'fontSize' );
+
+			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' );
+			const dropdown = editor.ui.componentFactory.create( 'fontSize' );
+
+			dropdown.commandName = 'fontSize';
+			dropdown.fire( 'execute' );
+
+			sinon.assert.calledOnce( focusSpy );
+		} );
+
+		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;
+			} );
+		} );
+	} );
+} );