瀏覽代碼

Other: Execute `t()` function directly on strings.

Maciej Gołaszewski 8 年之前
父節點
當前提交
6c053817e8

+ 26 - 4
packages/ckeditor5-alignment/src/alignmentui.js

@@ -17,8 +17,6 @@ import alignCenterIcon from '../theme/icons/align-center.svg';
 import alignJustifyIcon from '../theme/icons/align-justify.svg';
 import AlignmentEditing, { isSupported } from './alignmentediting';
 
-import upperFirst from '@ckeditor/ckeditor5-utils/src/lib/lodash/upperFirst';
-
 const icons = new Map( [
 	[ 'left', alignLeftIcon ],
 	[ 'right', alignRightIcon ],
@@ -35,6 +33,31 @@ const icons = new Map( [
  */
 export default class AlignmentUI extends Plugin {
 	/**
+	 * Returns the localized style titles provided by the plugin.
+	 *
+	 * The following localized titles corresponding with
+	 * {@link module:alignment/alignmentediting~AlignmentEditingConfig#styles} are available:
+	 *
+	 * * `'Left'`,
+	 * * `'Right'`,
+	 * * `'Center'`,
+	 * * `'Justify'`
+	 *
+	 * @readonly
+	 * @type {Object.<String,String>}
+	 */
+	get localizedStylesTitles() {
+		const t = this.editor.t;
+
+		return {
+			'left': t( 'Align left' ),
+			'right': t( 'Align right' ),
+			'center': t( 'Align center' ),
+			'justify': t( 'Justify' )
+		};
+	}
+
+	/**
 	 * @inheritDoc
 	 */
 	static get requires() {
@@ -67,7 +90,6 @@ export default class AlignmentUI extends Plugin {
 	 */
 	_addButton( style ) {
 		const editor = this.editor;
-		const t = editor.t;
 
 		const commandName = AlignmentEditing.commandName( style );
 		const command = editor.commands.get( commandName );
@@ -76,7 +98,7 @@ export default class AlignmentUI extends Plugin {
 			const buttonView = new ButtonView( locale );
 
 			buttonView.set( {
-				label: t( upperFirst( style ) ),
+				label: this.localizedStylesTitles[ style ],
 				icon: icons.get( style ),
 				tooltip: true
 			} );

+ 0 - 67
packages/ckeditor5-alignment/tests/alignment.js

@@ -3,79 +3,12 @@
  * For licensing, see LICENSE.md.
  */
 
-/* global document */
-
 import Alignment from '../src/alignment';
 import AlignmentEditing from '../src/alignmentediting';
 import AlignmentUI from '../src/alignmentui';
 
-import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
-
 describe( 'Alignment', () => {
-	let editor, command, element;
-
-	beforeEach( () => {
-		element = document.createElement( 'div' );
-		document.body.appendChild( element );
-
-		return ClassicTestEditor
-			.create( element, {
-				plugins: [ Alignment ]
-			} )
-			.then( newEditor => {
-				editor = newEditor;
-				command = editor.commands.get( 'alignLeft' );
-			} );
-	} );
-
-	afterEach( () => {
-		element.remove();
-
-		return editor.destroy();
-	} );
-
 	it( 'requires AlignmentEditing and AlignmentUI', () => {
 		expect( Alignment.requires ).to.deep.equal( [ AlignmentEditing, AlignmentUI ] );
 	} );
-
-	describe( 'alignLeft button', () => {
-		it( 'has the base properties', () => {
-			const button = editor.ui.componentFactory.create( 'alignLeft' );
-
-			expect( button ).to.have.property( 'label', 'Left' );
-			expect( button ).to.have.property( 'icon' );
-			expect( button ).to.have.property( 'tooltip', true );
-		} );
-
-		it( 'has isOn bound to command\'s value', () => {
-			const button = editor.ui.componentFactory.create( 'alignLeft' );
-
-			command.value = false;
-			expect( button ).to.have.property( 'isOn', false );
-
-			command.value = true;
-			expect( button ).to.have.property( 'isOn', true );
-		} );
-
-		it( 'has isEnabled bound to command\'s isEnabled', () => {
-			const button = editor.ui.componentFactory.create( 'alignLeft' );
-
-			command.isEnabled = true;
-			expect( button ).to.have.property( 'isEnabled', true );
-
-			command.isEnabled = false;
-			expect( button ).to.have.property( 'isEnabled', false );
-		} );
-
-		it( 'executes command when it\'s executed', () => {
-			const button = editor.ui.componentFactory.create( 'alignLeft' );
-
-			const spy = sinon.stub( editor, 'execute' );
-
-			button.fire( 'execute' );
-
-			expect( spy.calledOnce ).to.be.true;
-			expect( spy.args[ 0 ][ 0 ] ).to.equal( 'alignLeft' );
-		} );
-	} );
 } );

+ 205 - 0
packages/ckeditor5-alignment/tests/alignmentui.js

@@ -0,0 +1,205 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* global document */
+
+import AlignmentEditing from '../src/alignmentediting';
+import AlignmentUI from '../src/alignmentui';
+
+import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
+
+describe( 'Alignment', () => {
+	let editor, command, element, button;
+
+	beforeEach( () => {
+		element = document.createElement( 'div' );
+		document.body.appendChild( element );
+
+		return ClassicTestEditor
+			.create( element, {
+				plugins: [ AlignmentEditing, AlignmentUI ]
+			} )
+			.then( newEditor => {
+				editor = newEditor;
+			} );
+	} );
+
+	afterEach( () => {
+		element.remove();
+
+		return editor.destroy();
+	} );
+
+	it( 'requires AlignmentEditing', () => {
+		expect( AlignmentUI.requires ).to.deep.equal( [ AlignmentEditing ] );
+	} );
+
+	describe( 'localizedStylesTitles()', () => {
+		it( 'should return localized titles of styles', () => {
+			const editorMock = { t: str => str };
+
+			const plugin = new AlignmentUI( editorMock );
+
+			expect( plugin.localizedStylesTitles ).to.deep.equal( {
+				'left': 'Align left',
+				'right': 'Align right',
+				'center': 'Align center',
+				'justify': 'Justify'
+			} );
+		} );
+	} );
+
+	describe( 'alignLeft button', () => {
+		beforeEach( () => {
+			command = editor.commands.get( 'alignLeft' );
+			button = editor.ui.componentFactory.create( 'alignLeft' );
+		} );
+
+		it( 'has the base properties', () => {
+			expect( button ).to.have.property( 'label', 'Align left' );
+			expect( button ).to.have.property( 'icon' );
+			expect( button ).to.have.property( 'tooltip', true );
+		} );
+
+		it( 'has isOn bound to command\'s value', () => {
+			command.value = false;
+			expect( button ).to.have.property( 'isOn', false );
+
+			command.value = true;
+			expect( button ).to.have.property( 'isOn', true );
+		} );
+
+		it( 'has isEnabled bound to command\'s isEnabled', () => {
+			command.isEnabled = true;
+			expect( button ).to.have.property( 'isEnabled', true );
+
+			command.isEnabled = false;
+			expect( button ).to.have.property( 'isEnabled', false );
+		} );
+
+		it( 'executes command when it\'s executed', () => {
+			const spy = sinon.stub( editor, 'execute' );
+
+			button.fire( 'execute' );
+
+			expect( spy.calledOnce ).to.be.true;
+			expect( spy.args[ 0 ][ 0 ] ).to.equal( 'alignLeft' );
+		} );
+	} );
+
+	describe( 'alignRight button', () => {
+		beforeEach( () => {
+			command = editor.commands.get( 'alignRight' );
+			button = editor.ui.componentFactory.create( 'alignRight' );
+		} );
+
+		it( 'has the base properties', () => {
+			expect( button ).to.have.property( 'label', 'Align right' );
+			expect( button ).to.have.property( 'icon' );
+			expect( button ).to.have.property( 'tooltip', true );
+		} );
+
+		it( 'has isOn bound to command\'s value', () => {
+			command.value = false;
+			expect( button ).to.have.property( 'isOn', false );
+
+			command.value = true;
+			expect( button ).to.have.property( 'isOn', true );
+		} );
+
+		it( 'has isEnabled bound to command\'s isEnabled', () => {
+			command.isEnabled = true;
+			expect( button ).to.have.property( 'isEnabled', true );
+
+			command.isEnabled = false;
+			expect( button ).to.have.property( 'isEnabled', false );
+		} );
+
+		it( 'executes command when it\'s executed', () => {
+			const spy = sinon.stub( editor, 'execute' );
+
+			button.fire( 'execute' );
+
+			expect( spy.calledOnce ).to.be.true;
+			expect( spy.args[ 0 ][ 0 ] ).to.equal( 'alignRight' );
+		} );
+	} );
+
+	describe( 'alignCenter button', () => {
+		beforeEach( () => {
+			command = editor.commands.get( 'alignCenter' );
+			button = editor.ui.componentFactory.create( 'alignCenter' );
+		} );
+
+		it( 'has the base properties', () => {
+			expect( button ).to.have.property( 'label', 'Align center' );
+			expect( button ).to.have.property( 'icon' );
+			expect( button ).to.have.property( 'tooltip', true );
+		} );
+
+		it( 'has isOn bound to command\'s value', () => {
+			command.value = false;
+			expect( button ).to.have.property( 'isOn', false );
+
+			command.value = true;
+			expect( button ).to.have.property( 'isOn', true );
+		} );
+
+		it( 'has isEnabled bound to command\'s isEnabled', () => {
+			command.isEnabled = true;
+			expect( button ).to.have.property( 'isEnabled', true );
+
+			command.isEnabled = false;
+			expect( button ).to.have.property( 'isEnabled', false );
+		} );
+
+		it( 'executes command when it\'s executed', () => {
+			const spy = sinon.stub( editor, 'execute' );
+
+			button.fire( 'execute' );
+
+			expect( spy.calledOnce ).to.be.true;
+			expect( spy.args[ 0 ][ 0 ] ).to.equal( 'alignCenter' );
+		} );
+	} );
+
+	describe( 'alignJustify button', () => {
+		beforeEach( () => {
+			command = editor.commands.get( 'alignJustify' );
+			button = editor.ui.componentFactory.create( 'alignJustify' );
+		} );
+
+		it( 'has the base properties', () => {
+			expect( button ).to.have.property( 'label', 'Justify' );
+			expect( button ).to.have.property( 'icon' );
+			expect( button ).to.have.property( 'tooltip', true );
+		} );
+
+		it( 'has isOn bound to command\'s value', () => {
+			command.value = false;
+			expect( button ).to.have.property( 'isOn', false );
+
+			command.value = true;
+			expect( button ).to.have.property( 'isOn', true );
+		} );
+
+		it( 'has isEnabled bound to command\'s isEnabled', () => {
+			command.isEnabled = true;
+			expect( button ).to.have.property( 'isEnabled', true );
+
+			command.isEnabled = false;
+			expect( button ).to.have.property( 'isEnabled', false );
+		} );
+
+		it( 'executes command when it\'s executed', () => {
+			const spy = sinon.stub( editor, 'execute' );
+
+			button.fire( 'execute' );
+
+			expect( spy.calledOnce ).to.be.true;
+			expect( spy.args[ 0 ][ 0 ] ).to.equal( 'alignJustify' );
+		} );
+	} );
+} );