8
0
Просмотр исходного кода

Tests: Add initial HighlightUI tests.

Maciej Gołaszewski 8 лет назад
Родитель
Сommit
0b455e63b6

+ 4 - 0
packages/ckeditor5-highlight/src/highlightcommand.js

@@ -33,6 +33,10 @@ export default class HighlightCommand extends Command {
 		 */
 		this.value = doc.selection.getAttribute( 'highlight' );
 		this.isEnabled = model.schema.checkAttributeInSelection( doc.selection, 'highlight' );
+		// Alternate:
+		// const selection = doc.selection;
+		// this.isEnabled = ( !selection.isCollapsed || selection.hasAttribute( 'highlight' ) )
+		// 		&& model.schema.checkAttributeInSelection( doc.selection, 'highlight' );
 	}
 
 	/**

+ 9 - 7
packages/ckeditor5-highlight/src/highlightui.js

@@ -85,6 +85,7 @@ export default class HighlightUI extends Plugin {
 
 		function decorateHighlightButton( button ) {
 			button.bind( 'isEnabled' ).to( command, 'isEnabled' );
+			button.bind( 'isOn' ).to( command, 'value', value => value === option.model );
 
 			button.extendTemplate( {
 				attributes: {
@@ -134,7 +135,7 @@ export default class HighlightUI extends Plugin {
 	}
 
 	/**
-	 * Creates split button drop down UI from provided highlight options.
+	 * Creates split button dropdown UI from provided highlight options.
 	 *
 	 * @param {Array.<module:highlight/highlightediting~HighlightOption>} options
 	 * @private
@@ -156,7 +157,7 @@ export default class HighlightUI extends Plugin {
 			const command = editor.commands.get( 'highlight' );
 
 			const model = new Model( {
-				label: t( 'Highlight' ),
+				tooltip: t( 'Highlight' ),
 				withText: false,
 				isVertical: false,
 				// Holds last executed highlighter.
@@ -194,9 +195,6 @@ export default class HighlightUI extends Plugin {
 			// Add eraser button to dropdown.
 			const eraserButton = componentFactory.create( 'removeHighlight' );
 
-			buttons.push( new ToolbarSeparatorView() );
-			buttons.push( eraserButton );
-
 			// Make toolbar button enabled when any button in dropdown is enabled.
 			model.bind( 'isEnabled' ).to(
 				// Bind to #isEnabled of each command...
@@ -205,9 +203,12 @@ export default class HighlightUI extends Plugin {
 				( ...areEnabled ) => areEnabled.some( isEnabled => isEnabled )
 			);
 
+			// Add those buttons after binding isEnabled to toolbar button.
+			buttons.push( new ToolbarSeparatorView() );
+			buttons.push( eraserButton );
+
 			model.set( 'buttons', buttons );
 
-			// TODO: Temporary group as UI not fully defined yet. Also duplicates button dropdown
 			// Group buttons for dropdown.
 			const toolbarView = dropdownView.toolbarView = new ToolbarView();
 
@@ -215,9 +216,10 @@ export default class HighlightUI extends Plugin {
 
 			model.buttons.map( view => toolbarView.items.add( view ) );
 
+			// TODO: fix classes in dropdown
 			dropdownView.extendTemplate( {
 				attributes: {
-					class: [ 'ck-highlight_button', 'ck-buttondropdown' ]
+					class: [ 'ck-highlight_button', 'ck-buttondropdown', 'ck-highlight-dropdown' ]
 				}
 			} );
 			dropdownView.panelView.children.add( toolbarView );

+ 183 - 0
packages/ckeditor5-highlight/tests/highlightui.js

@@ -0,0 +1,183 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* global document */
+
+import HighlightEditing from '../src/highlightediting';
+import HighlightUI from '../src/highlightui';
+
+import markerIcon from '../theme/icons/marker.svg';
+import penIcon from '../theme/icons/pen.svg';
+import eraserIcon from '../theme/icons/eraser.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';
+
+testUtils.createSinonSandbox();
+
+describe( 'HighlightUI', () => {
+	let editor, command, element;
+
+	before( () => {
+		addTranslations( 'en', {
+			'Font Size': 'Font Size',
+			'Normal': 'Normal',
+			'Tiny': 'Tiny',
+			'Small': 'Small',
+			'Big': 'Big',
+			'Huge': 'Huge'
+		} );
+
+		addTranslations( 'pl', {
+			'Font Size': 'Rozmiar czcionki',
+			'Normal': 'Normalny',
+			'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: [ HighlightEditing, HighlightUI ]
+			} )
+			.then( newEditor => {
+				editor = newEditor;
+			} );
+	} );
+
+	afterEach( () => {
+		element.remove();
+
+		return editor.destroy();
+	} );
+
+	describe( 'highlight Dropdown', () => {
+		let dropdown;
+
+		beforeEach( () => {
+			command = editor.commands.get( 'highlight' );
+			dropdown = editor.ui.componentFactory.create( 'highlightDropdown' );
+		} );
+
+		it( 'button has the base properties', () => {
+			const button = dropdown.buttonView;
+
+			expect( button ).to.have.property( 'tooltip', 'Highlight' );
+			expect( button ).to.have.property( 'icon', markerIcon );
+			expect( button ).to.have.property( 'withText', false );
+		} );
+
+		it( 'should add custom CSS class to dropdown', () => {
+			dropdown.render();
+
+			expect( dropdown.element.classList.contains( 'ck-highlight-dropdown' ) ).to.be.true;
+		} );
+
+		it.skip( 'should focus view after command execution', () => {
+			const focusSpy = testUtils.sinon.spy( editor.editing.view, 'focus' );
+
+			dropdown.commandName = 'highlight';
+			dropdown.fire( 'execute' );
+
+			sinon.assert.calledOnce( focusSpy );
+		} );
+
+		it( 'should have proper icons in dropdown', () => {
+			const toolbar = dropdown.toolbarView;
+
+			// Not in a selection with highlight.
+			command.value = undefined;
+
+			expect( toolbar.items.map( item => item.icon ) )
+				.to.deep.equal( [ markerIcon, markerIcon, markerIcon, penIcon, penIcon, undefined, eraserIcon ] );
+		} );
+
+		it( 'should activate current option in dropdown', () => {
+			const toolbar = dropdown.toolbarView;
+
+			// Not in a selection with highlight.
+			command.value = undefined;
+
+			expect( toolbar.items.map( item => item.isOn ) )
+				.to.deep.equal( [ false, false, false, false, false, undefined, false ] );
+
+			// Inside a selection with highlight.
+			command.value = 'greenMarker';
+
+			// The second item is 'greenMarker' highlighter.
+			expect( toolbar.items.map( item => item.isOn ) ).to.deep.equal( [ false, true, false, false, false, undefined, 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.skip( 'localization', () => {
+			beforeEach( () => {
+				return localizedEditor( [ 'tiny', 'small', 'normal', 'big', 'huge' ] );
+			} );
+
+			it( 'works for the #buttonView', () => {
+				const buttonView = dropdown.buttonView;
+
+				expect( buttonView.tooltip ).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',
+					'Normalny',
+					'Duży',
+					'Ogromny'
+				] );
+			} );
+
+			function localizedEditor( options ) {
+				const editorElement = document.createElement( 'div' );
+				document.body.appendChild( editorElement );
+
+				return ClassicTestEditor
+					.create( editorElement, {
+						plugins: [ HighlightEditing, HighlightUI ],
+						toolbar: [ 'highlight' ],
+						language: 'pl',
+						highlight: {
+							options
+						}
+					} )
+					.then( newEditor => {
+						editor = newEditor;
+						dropdown = editor.ui.componentFactory.create( 'highlightDropdown' );
+						command = editor.commands.get( 'highlight' );
+
+						editorElement.remove();
+
+						return editor.destroy();
+					} );
+			}
+		} );
+	} );
+} );