8
0
Pārlūkot izejas kodu

Tests: Update dropdown manual tests.

Maciej Gołaszewski 7 gadi atpakaļ
vecāks
revīzija
72c2e40328

+ 6 - 6
packages/ckeditor5-ui/tests/dropdown/manual/dropdown.html

@@ -2,18 +2,18 @@
 
 <div id="dropdown" class="ck-reset_all"></div>
 
-<h2>ListDropdown</h2>
+<h2>Dropdown with ListView</h2>
 
 <div id="list-dropdown" class="ck-reset_all"></div>
 
-<h2>Shared Model</h2>
-
-<div id="dropdown-shared" class="ck-reset_all"></div>
-
 <h2>Long label (truncated)</h2>
 
 <div id="dropdown-label" class="ck-reset_all"></div>
 
-<h2>ButtonDropdown</h2>
+<h2>Dropdown with ToolbarView</h2>
 
 <div id="dropdown-toolbar" class="ck-reset_all"></div>
+
+<h2>SplitButton Dropdown</h2>
+
+<div id="dropdown-splitbutton" class="ck-reset_all"></div>

+ 46 - 25
packages/ckeditor5-ui/tests/dropdown/manual/dropdown.js

@@ -14,15 +14,16 @@ 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 SplitButtonView from '../../../src/dropdown/button/splitbuttonview';
 
 import { createDropdown, addToolbarToDropdown, addListToDropdown } from '../../../src/dropdown/utils';
 
 const ui = testUtils.createTestUIView( {
 	dropdown: '#dropdown',
 	listDropdown: '#list-dropdown',
-	dropdownShared: '#dropdown-shared',
 	dropdownLabel: '#dropdown-label',
-	toolbarDropdown: '#dropdown-toolbar'
+	toolbarDropdown: '#dropdown-toolbar',
+	splitButton: '#dropdown-splitbutton'
 } );
 
 function testEmpty() {
@@ -72,26 +73,6 @@ function testList() {
 	window.Model = Model;
 }
 
-function testSharedModel() {
-	const dropdownSettings = {
-		label: 'Shared Model',
-		isEnabled: true,
-		isOn: false,
-		withText: true
-	};
-
-	const dropdownView1 = createDropdown( {} );
-	const dropdownView2 = createDropdown( {} );
-
-	dropdownView1.set( dropdownSettings );
-	dropdownView2.set( dropdownSettings );
-
-	ui.dropdownShared.add( dropdownView1 );
-	ui.dropdownShared.add( dropdownView2 );
-
-	dropdownView1.panelView.element.innerHTML = dropdownView2.panelView.element.innerHTML = 'Empty panel.';
-}
-
 function testLongLabel() {
 	const dropdownView = createDropdown( {} );
 
@@ -107,7 +88,7 @@ function testLongLabel() {
 	dropdownView.panelView.element.innerHTML = 'Empty panel. There is no child view in this DropdownPanelView.';
 }
 
-function testButton() {
+function testToolbar() {
 	const locale = {};
 
 	const icons = { left: alignLeftIcon, right: alignRightIcon, center: alignCenterIcon };
@@ -131,13 +112,53 @@ function testButton() {
 
 	addToolbarToDropdown( toolbarDropdown, buttonViews );
 
+	// This will change icon to button with `isOn = true`.
+	toolbarDropdown.buttonView.bind( 'icon' ).toMany( buttons, 'isOn', ( ...areActive ) => {
+		// Get the index of an active button.
+		const index = areActive.findIndex( value => value );
+
+		// If none of the commands is active, display either defaultIcon or the first button's icon.
+		if ( index < 0 ) {
+			return buttons[ 0 ].icon;
+		}
+
+		// Return active button's icon.
+		return buttons[ index ].icon;
+	} );
+
+	// This will disable dropdown button when all buttons have `isEnabled = false`.
+	toolbarDropdown.bind( 'isEnabled' ).toMany( buttons, 'isEnabled', ( ...areEnabled ) => areEnabled.some( isEnabled => isEnabled ) );
+
 	ui.toolbarDropdown.add( toolbarDropdown );
 
 	window.buttons = buttons;
 }
 
+function testSplitButton() {
+	const dropdownView = createDropdown( {}, SplitButtonView );
+
+	dropdownView.buttonView.set( {
+		label: 'Dropdown',
+		icon: alignCenterIcon
+	} );
+
+	ui.splitButton.add( dropdownView );
+
+	dropdownView.panelView.element.innerHTML = 'Empty panel. There is no child view in this DropdownPanelView.';
+
+	dropdownView.buttonView.on( 'execute', () => {
+		/* global console */
+		console.log( 'SplitButton#execute' );
+	} );
+
+	dropdownView.buttonView.on( 'open', () => {
+		/* global console */
+		console.log( 'SplitButton#open' );
+	} );
+}
+
 testEmpty();
 testList();
-testSharedModel();
 testLongLabel();
-testButton();
+testToolbar();
+testSplitButton();

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

@@ -33,3 +33,9 @@ listDropdownCollection.add(
 1. Play with `buttons[ n ].isOn` to control buttonDropdown active icon.
 2. Play with `buttons[ n ].isEnabled` to control buttonDropdown disabled state (all buttons must be set to `false`).
 3. Play with `toolbarDropdown.toolbarView.isVertical` to control buttonDropdown vertical/horizontal alignment.
+
+## SplitButton Dropdown
+
+* It should have two distinct fields: action button and arrow.
+* Click on action button should be logged in console.
+* Click on arrow button should open panel and should be logged in console.