8
0
Pārlūkot izejas kodu

Tests: Added tests for UI utils.

Aleksander Nowodzinski 5 gadi atpakaļ
vecāks
revīzija
33140350ca

+ 3 - 3
packages/ckeditor5-table/src/tablecellproperties/ui/tablecellpropertiesview.js

@@ -23,7 +23,7 @@ import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import {
 	getBorderStyleLabels,
-	fillAlignmentToolbar,
+	fillToolbar,
 	getBorderStyleDefinitions
 } from '../../ui/utils';
 
@@ -535,7 +535,7 @@ export default class TableCellPropertiesView extends View {
 			ariaLabel: t( 'Horizontal text alignment toolbar' )
 		} );
 
-		fillAlignmentToolbar( {
+		fillToolbar( {
 			view: this,
 			icons: ALIGNMENT_ICONS,
 			toolbar: horizontalAlignmentToolbar,
@@ -552,7 +552,7 @@ export default class TableCellPropertiesView extends View {
 			ariaLabel: t( 'Vertical text alignment toolbar' )
 		} );
 
-		fillAlignmentToolbar( {
+		fillToolbar( {
 			view: this,
 			icons: ALIGNMENT_ICONS,
 			toolbar: verticalAlignmentToolbar,

+ 2 - 2
packages/ckeditor5-table/src/tableproperties/ui/tablepropertiesview.js

@@ -23,7 +23,7 @@ import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import {
 	getBorderStyleLabels,
-	fillAlignmentToolbar,
+	fillToolbar,
 	getBorderStyleDefinitions
 } from '../../ui/utils';
 
@@ -572,7 +572,7 @@ export default class TablePropertiesView extends View {
 			ariaLabel: t( 'Table alignment toolbar' )
 		} );
 
-		fillAlignmentToolbar( {
+		fillToolbar( {
 			view: this,
 			icons: ALIGNMENT_ICONS,
 			toolbar: alignmentToolbar,

+ 21 - 15
packages/ckeditor5-table/src/ui/utils.js

@@ -88,9 +88,12 @@ export function getBalloonCellPositionData( editor ) {
 }
 
 /**
- * TODO
+ * Returns an object containing pairs of CSS border style values and their localized UI
+ * labels. Used by {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView}
+ * and {@link module:table/tableproperties/ui/tablepropertiesview~TablePropertiesView}.
  *
- * @param {module:utils/locale~Locale#t} t
+ * @param {module:utils/locale~Locale#t} t The "t" function provided by the editor
+ * that is used to localize strings.
  * @returns {Object.<String,String>}
  */
 export function getBorderStyleLabels( t ) {
@@ -108,9 +111,10 @@ export function getBorderStyleLabels( t ) {
 }
 
 /**
- * Generates border style item definitions for a list dropdown.
+ * Generates item definitions for a UI dropdown that allows changing the border style of a table or a table cell.
  *
- * @param {module:TODO}
+ * @param {module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView|
+ * module:table/tableproperties/ui/tablepropertiesview~TablePropertiesView}
  * @returns {Iterable.<module:ui/dropdown/utils~ListDropdownItemDefinition>}
  */
 export function getBorderStyleDefinitions( view ) {
@@ -138,33 +142,35 @@ export function getBorderStyleDefinitions( view ) {
 }
 
 /**
- * Fills an alignment toolbar with buttons that have certain labels and interact with a certain view
- * property upon execution.
+ * A helper that fills a toolbar toolbar with buttons that:
  *
- * TODO
+ * * have some labels,
+ * * have some icons,
+ * * set a certain UI view property value upon execution.
  *
  * @param {Object} options
- * @param {TODO} options.view
+ * @param {module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView|
+ * module:table/tableproperties/ui/tablepropertiesview~TablePropertiesView} options.view
  * @param {Array.<String>} options.icons
  * @param {module:ui/toolbar/toolbarview~ToolbarView} options.toolbar
- * @param {Array.<String>} labels
+ * @param {Object.<String,String>} labels
  * @param {String} propertyName
  */
-export function fillAlignmentToolbar( { view, icons, toolbar, labels, propertyName } ) {
-	for ( const alignment in labels ) {
+export function fillToolbar( { view, icons, toolbar, labels, propertyName } ) {
+	for ( const name in labels ) {
 		const button = new ButtonView( view.locale );
 
 		button.set( {
-			label: labels[ alignment ],
-			icon: icons[ alignment ],
+			label: labels[ name ],
+			icon: icons[ name ],
 		} );
 
 		button.bind( 'isOn' ).to( view, propertyName, value => {
-			return value === alignment;
+			return value === name;
 		} );
 
 		button.on( 'execute', () => {
-			view[ propertyName ] = alignment;
+			view[ propertyName ] = name;
 		} );
 
 		toolbar.items.add( button );

+ 170 - 4
packages/ckeditor5-table/tests/ui/utils.js

@@ -6,15 +6,24 @@
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
 import Table from '../../src/table';
 import TableCellProperties from '../../src/tablecellproperties';
+import { findAncestor } from '../../src/commands/utils';
 import global from '@ckeditor/ckeditor5-utils/src/dom/global';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import View from '@ckeditor/ckeditor5-ui/src/view';
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import BalloonPanelView from '@ckeditor/ckeditor5-ui/src/panel/balloon/balloonpanelview';
+import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
 import { setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
-import { repositionContextualBalloon, getBalloonCellPositionData } from '../../src/ui/utils';
-import { findAncestor } from '../../src/commands/utils';
+import {
+	repositionContextualBalloon,
+	getBalloonCellPositionData,
+	getBorderStyleDefinitions,
+	getBorderStyleLabels,
+	fillToolbar
+} from '../../src/ui/utils';
+import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 
-describe( 'Utils', () => {
+describe( 'UI Utils', () => {
 	let editor, editingView, balloon, editorElement;
 
 	beforeEach( () => {
@@ -87,7 +96,7 @@ describe( 'Utils', () => {
 			} );
 		} );
 
-		describe( 'with respect to the table', () => {
+		describe( 'with respect to the entire table', () => {
 			it( 'should re-position the ContextualBalloon when the table is selected', () => {
 				const spy = sinon.spy( balloon, 'updatePosition' );
 				const defaultPositions = BalloonPanelView.defaultPositions;
@@ -162,4 +171,161 @@ describe( 'Utils', () => {
 			} );
 		} );
 	} );
+
+	describe( 'getBorderStyleLabels()', () => {
+		it( 'should return labels for different border styles', () => {
+			const t = string => string;
+
+			expect( getBorderStyleLabels( t ) ).to.deep.equal( {
+				none: 'None',
+				solid: 'Solid',
+				dotted: 'Dotted',
+				dashed: 'Dashed',
+				double: 'Double',
+				groove: 'Groove',
+				ridge: 'Ridge',
+				inset: 'Inset',
+				outset: 'Outset',
+			} );
+		} );
+	} );
+
+	describe( 'getBorderStyleDefinitions()', () => {
+		let view, locale, definitions;
+
+		beforeEach( () => {
+			locale = { t: val => val };
+			view = new View( locale );
+			view.set( 'borderStyle', 'none' );
+
+			definitions = getBorderStyleDefinitions( view );
+		} );
+
+		it( 'should return a collection', () => {
+			expect( definitions ).to.be.instanceOf( Collection );
+		} );
+
+		it( 'should create a button definition for each style', () => {
+			expect( definitions.map( ( { type } ) => type ).every( item => item === 'button' ) ).to.be.true;
+		} );
+
+		it( 'should set label of a button for each style', () => {
+			expect( definitions.map( ( { model: { label } } ) => label ) ).to.have.ordered.members( [
+				'None',
+				'Solid',
+				'Dotted',
+				'Dashed',
+				'Double',
+				'Groove',
+				'Ridge',
+				'Inset',
+				'Outset',
+			] );
+		} );
+
+		it( 'should set type of a button for each style', () => {
+			expect( definitions.map( ( { model: { withText } } ) => withText ).every( item => item === true ) ).to.be.true;
+		} );
+
+		it( 'should bind button\'s #isOn to the view #borderStyle property', () => {
+			view.borderStyle = 'dotted';
+
+			expect( definitions.map( ( { model: { isOn } } ) => isOn ) ).to.have.ordered.members( [
+				false,
+				false,
+				true,
+				false,
+				false,
+				false,
+				false,
+				false,
+				false,
+			] );
+
+			view.borderStyle = 'inset';
+
+			expect( definitions.map( ( { model: { isOn } } ) => isOn ) ).to.have.ordered.members( [
+				false,
+				false,
+				false,
+				false,
+				false,
+				false,
+				false,
+				true,
+				false,
+			] );
+		} );
+	} );
+
+	describe( 'fillToolbar()', () => {
+		let view, locale, toolbar;
+
+		const labels = {
+			first: 'Do something',
+			second: 'Do something else'
+		};
+
+		const icons = {
+			first: '<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path /></svg>',
+			second: '<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path /></svg>'
+		};
+
+		beforeEach( () => {
+			locale = { t: val => val };
+			view = new View( locale );
+			view.set( 'someProperty', 'foo' );
+			toolbar = new ToolbarView( locale );
+
+			fillToolbar( {
+				view, toolbar, icons, labels,
+				propertyName: 'someProperty'
+			} );
+		} );
+
+		afterEach( () => {
+			view.destroy();
+		} );
+
+		it( 'should create buttons', () => {
+			expect( toolbar.items ).to.have.length( 2 );
+			expect( toolbar.items.first ).to.be.instanceOf( ButtonView );
+			expect( toolbar.items.last ).to.be.instanceOf( ButtonView );
+		} );
+
+		it( 'should set button labels', () => {
+			expect( toolbar.items.first.label ).to.equal( 'Do something' );
+			expect( toolbar.items.last.label ).to.equal( 'Do something else' );
+		} );
+
+		it( 'should set button icons', () => {
+			expect( toolbar.items.first.icon ).to.equal( icons.first );
+			expect( toolbar.items.last.icon ).to.equal( icons.second );
+		} );
+
+		it( 'should bind button #isOn to an observable property', () => {
+			expect( toolbar.items.first.isOn ).to.be.false;
+			expect( toolbar.items.last.isOn ).to.be.false;
+
+			view.someProperty = 'first';
+
+			expect( toolbar.items.first.isOn ).to.be.true;
+			expect( toolbar.items.last.isOn ).to.be.false;
+
+			view.someProperty = 'second';
+
+			expect( toolbar.items.first.isOn ).to.be.false;
+			expect( toolbar.items.last.isOn ).to.be.true;
+		} );
+
+		it( 'should make the buttons change the property value upon execution', () => {
+			toolbar.items.first.fire( 'execute' );
+
+			expect( view.someProperty ).to.equal( 'first' );
+
+			toolbar.items.last.fire( 'execute' );
+
+			expect( view.someProperty ).to.equal( 'second' );
+		} );
+	} );
 } );