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

Tests: Add ButtonDropdown to dropdown manual test.

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

+ 2 - 0
packages/ckeditor5-ui/src/dropdown/button/createbuttondropdown.js

@@ -72,6 +72,8 @@ export default function createButtonDropdown( model, buttonViews, locale ) {
 
 	const buttonGroupView = dropdownView.buttonGroupView = new ButtonGroupView( { isVertical: model.isVertical } );
 
+	buttonGroupView.bind( 'isVertical' ).to( model, 'isVertical' );
+
 	buttonViews.map( view => buttonGroupView.items.add( view ) );
 
 	dropdownView.buttonView.extendTemplate( {

+ 4 - 0
packages/ckeditor5-ui/tests/dropdown/manual/dropdown.html

@@ -13,3 +13,7 @@
 <h2>Long label (truncated)</h2>
 
 <div id="dropdown-label" class="ck-reset_all"></div>
+
+<h2>ButtonDropdown</h2>
+
+<div id="button-dropown" class="ck-reset_all"></div>

+ 38 - 1
packages/ckeditor5-ui/tests/dropdown/manual/dropdown.js

@@ -14,11 +14,19 @@ import createListDropdown from '../../../src/dropdown/list/createlistdropdown';
 import '@ckeditor/ckeditor5-theme-lark/theme/theme.scss';
 import testUtils from '../../_utils/utils';
 
+import alignLeftIcon from '@ckeditor/ckeditor5-core/theme/icons/object-left.svg';
+import alignRightIcon from '@ckeditor/ckeditor5-core/theme/icons/object-right.svg';
+import alignCenterIcon from '@ckeditor/ckeditor5-core/theme/icons/object-center.svg';
+import ButtonView from '../../../src/button/buttonview';
+
+import createButtonDropdown from '../../../src/dropdown/button/createbuttondropdown';
+
 const ui = testUtils.createTestUIView( {
 	dropdown: '#dropdown',
 	listDropdown: '#list-dropdown',
 	dropdownShared: '#dropdown-shared',
-	dropdownLabel: '#dropdown-label'
+	dropdownLabel: '#dropdown-label',
+	buttonDropdown: '#button-dropown'
 } );
 
 function testEmpty() {
@@ -96,7 +104,36 @@ function testLongLabel() {
 	dropdownView.panelView.element.innerHTML = 'Empty panel. There is no child view in this DropdownPanelView.';
 }
 
+function testButton() {
+	const locale = {};
+
+	const icons = { left: alignLeftIcon, right: alignRightIcon, center: alignCenterIcon };
+
+	// Buttons to be obtained from factory later on.
+	const buttons = Object.keys( icons ).map( icon => new Model( { label: icon, isEnabled: true, isOn: false, icon: icons[ icon ] } ) );
+
+	const buttonViews = buttons
+		.map( buttonModel => {
+			const buttonView = new ButtonView( locale );
+
+			buttonView.bind( 'isEnabled', 'isOn', 'icon', 'label' ).to( buttonModel );
+
+			buttonView.on( 'execute', () => console.log( `Execute: ${ buttonModel.label }` ) );
+
+			return buttonView;
+		} );
+
+	const buttonDropdownModel = new Model( { isVertical: true } );
+	const buttonDropdown = createButtonDropdown( buttonDropdownModel, buttonViews, {} );
+
+	ui.buttonDropdown.add( buttonDropdown );
+
+	window.buttons = buttons;
+	window.buttonDropdownModel = buttonDropdownModel;
+}
+
 testEmpty();
 testList();
 testSharedModel();
 testLongLabel();
+testButton();

+ 3 - 0
packages/ckeditor5-ui/tests/dropdown/manual/dropdown.md

@@ -28,3 +28,6 @@ listDropdownCollection.add(
 	} )
 );
 ```
+* Play with `buttons[ n ].isOn` to control buttonDropdown active icon.
+* Play with `buttons[ n ].isEnabled` to control buttonDropdown disabled state (all buttons must be set to `false`).
+* Play with `buttonDropdownModel.isVertical` to control buttonDropdown vertical/horizontal alignment.