Merge pull request #510 from ckeditor/t/508

Internal: Update rotator view counter message. Closes #508.

src/panel/balloon/contextualballoon.js

@@ -382,7 +382,7 @@ export default class ContextualBalloon extends Plugin {
 
 			const current = Array.from( this._idToStack.values() ).indexOf( this._visibleStack ) + 1;
 
-			return `${ current } ${ t( 'of' ) } ${ numberOfStacks }`;
+			return t( '%0 of %1', [ current, numberOfStacks ] );
 		} );
 
 		view.buttonNextView.on( 'execute', () => {

tests/panel/balloon/contextualballoon.js

@@ -11,11 +11,32 @@ import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
+import { add as addTranslations, _clear as clearTranslations } from '@ckeditor/ckeditor5-utils/src/translation-service';
+import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 
 /* global document, Event */
 
 describe( 'ContextualBalloon', () => {
 	let editor, editorElement, balloon, viewA, viewB, viewC;
+	testUtils.createSinonSandbox();
+
+	before( () => {
+		addTranslations( 'en', {
+			'Choose heading': '%0 of %1',
+			'Previous': 'Previous',
+			'Next': 'Next'
+		} );
+
+		addTranslations( 'pl', {
+			'%0 of %1': '%0 z %1',
+			'Previous': 'Poprzedni',
+			'Next': 'Następny'
+		} );
+	} );
+
+	after( () => {
+		clearTranslations();
+	} );
 
 	beforeEach( () => {
 		editorElement = document.createElement( 'div' );
@@ -967,5 +988,48 @@ describe( 'ContextualBalloon', () => {
 			expect( fakePanelsView.element.style.width ).to.equal( '30px' );
 			expect( fakePanelsView.element.style.height ).to.equal( '40px' );
 		} );
+
+		it( 'should translate the views', () => {
+			// Cleanup the editor created by contextual balloon suite beforeEach.
+			return editor.destroy()
+				.then( () => {
+					editorElement.remove();
+
+					// Setup localized editor for language tests.
+					editorElement = document.createElement( 'div' );
+					document.body.appendChild( editorElement );
+
+					return ClassicTestEditor
+						.create( editorElement, {
+							plugins: [ Paragraph, ContextualBalloon ],
+							language: 'pl'
+						} );
+				} )
+				.then( newEditor => {
+					editor = newEditor;
+
+					balloon = editor.plugins.get( ContextualBalloon );
+					// We don't need to execute BalloonPanel pin and attachTo methods
+					// it's enough to check if was called with the proper data.
+					sinon.stub( balloon.view, 'attachTo' ).returns( {} );
+					sinon.stub( balloon.view, 'pin' ).returns( {} );
+
+					balloon.add( {
+						view: new View()
+					} );
+
+					balloon.add( {
+						view: new View(),
+						stackId: 'second'
+					} );
+
+					const rotatorView = balloon.view.content.get( 0 );
+					const counterElement = rotatorView.element.querySelector( '.ck-balloon-rotator__counter' );
+
+					expect( counterElement.textContent ).to.equal( '1 z 2' );
+					expect( rotatorView.buttonPrevView.labelView.element.textContent ).to.equal( 'Poprzedni' );
+					expect( rotatorView.buttonNextView.labelView.element.textContent ).to.equal( 'Następny' );
+				} );
+		} );
 	} );
 } );