Browse Source

Tests: Add SplitButtonView tests.

Maciej Gołaszewski 8 years ago
parent
commit
17b4dae694

+ 28 - 0
packages/ckeditor5-ui/src/button/splitbuttonview.js

@@ -28,6 +28,34 @@ export default class SplitButtonView extends View {
 	constructor( locale ) {
 		super( locale );
 
+		/**
+		 * Controls whether the button view is enabled, i.e. it can be clicked and execute an action.
+		 *
+		 * To change the "on" state of the button, use {@link #isOn} instead.
+		 *
+		 * @observable
+		 * @member {Boolean} #isEnabled
+		 */
+		this.set( 'isEnabled', true );
+
+		/**
+		 * The label of the button view visible to the user when {@link #withText} is `true`.
+		 * It can also be used to create a {@link #tooltip}.
+		 *
+		 * @observable
+		 * @member {String} #label
+		 */
+		this.set( 'label' );
+
+		/**
+		 * (Optional) An XML {@link module:ui/icon/iconview~IconView#content content} of the icon.
+		 * When defined, an {@link #iconView} will be added to the button.
+		 *
+		 * @observable
+		 * @member {String} #icon
+		 */
+		this.set( 'icon' );
+
 		this.children = this.createCollection();
 
 		this.actionView = this._createActionView();

+ 181 - 0
packages/ckeditor5-ui/tests/button/splitbuttonview.js

@@ -0,0 +1,181 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
+import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
+import ButtonView from '../../src/button/buttonview';
+import SplitButtonView from '../../src/button/splitbuttonview';
+
+testUtils.createSinonSandbox();
+
+describe( 'SplitButtonView', () => {
+	let locale, view;
+
+	beforeEach( () => {
+		locale = { t() {} };
+
+		view = new SplitButtonView( locale );
+		view.render();
+	} );
+
+	describe( 'constructor()', () => {
+		it( 'sets view#locale', () => {
+			expect( view.locale ).to.equal( locale );
+		} );
+
+		it( 'creates view#actionView', () => {
+			expect( view.actionView ).to.be.instanceOf( ButtonView );
+		} );
+
+		it( 'creates view#selectView', () => {
+			expect( view.selectView ).to.be.instanceOf( ButtonView );
+			expect( view.selectView.element.classList.contains( 'ck-splitbutton-arrow' ) ).to.be.true;
+			expect( view.selectView.icon ).to.be.not.undefined;
+		} );
+
+		it( 'creates element from template', () => {
+			expect( view.element.tagName ).to.equal( 'DIV' );
+			expect( view.element.classList.contains( 'ck-splitbutton' ) ).to.be.true;
+		} );
+
+		describe( 'activates keyboard navigation for the toolbar', () => {
+			it( 'so "arrowright" on view#selectView does nothing', () => {
+				const keyEvtData = {
+					keyCode: keyCodes.arrowright,
+					preventDefault: sinon.spy(),
+					stopPropagation: sinon.spy()
+				};
+
+				view.focusTracker.isFocused = true;
+				view.focusTracker.focusedElement = view.selectView.element;
+
+				const spy = sinon.spy( view.actionView, 'focus' );
+
+				view.keystrokes.press( keyEvtData );
+				sinon.assert.notCalled( spy );
+				sinon.assert.notCalled( keyEvtData.preventDefault );
+				sinon.assert.notCalled( keyEvtData.stopPropagation );
+			} );
+
+			it( 'so "arrowleft" on view#selectView focuses view#actionView', () => {
+				const keyEvtData = {
+					keyCode: keyCodes.arrowleft,
+					preventDefault: sinon.spy(),
+					stopPropagation: sinon.spy()
+				};
+
+				view.focusTracker.isFocused = true;
+				view.focusTracker.focusedElement = view.selectView.element;
+
+				const spy = sinon.spy( view.actionView, 'focus' );
+
+				view.keystrokes.press( keyEvtData );
+				sinon.assert.calledOnce( spy );
+				sinon.assert.calledOnce( keyEvtData.preventDefault );
+				sinon.assert.calledOnce( keyEvtData.stopPropagation );
+			} );
+
+			it( 'so "arrowright" on view#actionView focuses view#selectView', () => {
+				const keyEvtData = {
+					keyCode: keyCodes.arrowright,
+					preventDefault: sinon.spy(),
+					stopPropagation: sinon.spy()
+				};
+
+				view.focusTracker.isFocused = true;
+				view.focusTracker.focusedElement = view.actionView.element;
+
+				const spy = sinon.spy( view.selectView, 'focus' );
+
+				view.keystrokes.press( keyEvtData );
+				sinon.assert.calledOnce( spy );
+				sinon.assert.calledOnce( keyEvtData.preventDefault );
+				sinon.assert.calledOnce( keyEvtData.stopPropagation );
+			} );
+
+			it( 'so "arrowleft" on view#actionsView does nothing', () => {
+				const keyEvtData = {
+					keyCode: keyCodes.arrowleft,
+					preventDefault: sinon.spy(),
+					stopPropagation: sinon.spy()
+				};
+
+				view.focusTracker.isFocused = true;
+				view.focusTracker.focusedElement = view.actionView.element;
+
+				const spy = sinon.spy( view.selectView, 'focus' );
+
+				view.keystrokes.press( keyEvtData );
+				sinon.assert.notCalled( spy );
+				sinon.assert.notCalled( keyEvtData.preventDefault );
+				sinon.assert.notCalled( keyEvtData.stopPropagation );
+			} );
+		} );
+	} );
+
+	describe( 'bindings', () => {
+		it( 'delegates actionView#execute to view#execute', () => {
+			const spy = sinon.spy();
+
+			view.on( 'execute', spy );
+
+			view.actionView.fire( 'execute' );
+
+			sinon.assert.calledOnce( spy );
+		} );
+
+		it( 'binds actionView#icon to view', () => {
+			expect( view.actionView.icon ).to.be.undefined;
+
+			view.icon = 'foo';
+
+			expect( view.actionView.icon ).to.equal( 'foo' );
+		} );
+
+		it( 'binds actionView#isEnabled to view', () => {
+			expect( view.actionView.isEnabled ).to.be.true;
+
+			view.isEnabled = false;
+
+			expect( view.actionView.isEnabled ).to.be.false;
+		} );
+
+		it( 'binds actionView#label to view', () => {
+			expect( view.actionView.label ).to.be.undefined;
+
+			view.label = 'foo';
+
+			expect( view.actionView.label ).to.equal( 'foo' );
+		} );
+
+		it( 'delegates selectView#execute to view#select', () => {
+			const spy = sinon.spy();
+
+			view.on( 'select', spy );
+
+			view.selectView.fire( 'execute' );
+
+			sinon.assert.calledOnce( spy );
+		} );
+
+		it( 'binds selectView#isEnabled to view', () => {
+			expect( view.selectView.isEnabled ).to.be.true;
+
+			view.isEnabled = false;
+
+			expect( view.selectView.isEnabled ).to.be.false;
+		} );
+	} );
+
+	describe( 'focus()', () => {
+		it( 'focuses the actionButton', () => {
+			const spy = sinon.spy( view.actionView, 'focus' );
+
+			view.focus();
+
+			sinon.assert.calledOnce( spy );
+		} );
+	} );
+} );