Procházet zdrojové kódy

Added missing docs and test for LinkBalloonPanel component.

Oskar Wrobel před 9 roky
rodič
revize
a527f65b81

+ 53 - 10
packages/ckeditor5-link/src/ui/linkballoonpanel.js

@@ -17,12 +17,22 @@ import BoxView from '../../ui/box/boxview.js';
 /**
  * The link balloon panel controller class.
  *
+ * 		const model = new Model( {
+ *			maxWidth: 300,
+ *			url: 'http://ckeditor.com'
+ *		} );
+ *
+ *		// An instance of LinkBalloonPanel.
+ *		new LinkBalloonPanel( model, new LinkBalloonPanelView() );
+ *
+ * See {@link link.ui.LinkBalloonPanelView}.
+ *
  * @memberOf link.ui
- * @extends ui.Controller
+ * @extends ui.balloonPanel.BalloonPanel
  */
 export default class LinkBalloonPanel extends BalloonPanel {
 	/**
-	 * Creates an instance of {@link ui.dropdown.Dropdown} class.
+	 * Creates an instance of {@link link.ui.LinkBalloonPanel} class.
 	 *
 	 * @param {ui.balloonPanel.BalloonPanelModel} model Model of this balloon panel.
 	 * @param {ui.View} view View of this balloon panel.
@@ -33,23 +43,37 @@ export default class LinkBalloonPanel extends BalloonPanel {
 		this.add( 'content', this._createForm() );
 	}
 
+	/**
+	 * Initialize {@link ui.form.Form Form} component with input and buttons.
+	 *
+	 * @private
+	 * @returns {ui.form.Form} Form component.
+	 */
 	_createForm() {
 		const formModel = new Model();
 
 		formModel.delegate( 'execute' ).to( this.model );
 
 		/**
-		 * TODO
+		 * Instance of {@link ui.form.Form Form} component.
 		 *
-		 * @member {} todo
+		 * @member {ui.form.Form} link.ui.LinkBalloonPanel#form
 		 */
 		this.form = new Form( formModel, new FormView( this.locale ) );
+
+		// Add Input and buttons as a form content.
 		this.form.add( 'content', this._createLabeledInput() );
 		this.form.add( 'content', this._createButtons() );
 
 		return this.form;
 	}
 
+	/**
+	 * Initialize {@link ui.input.LabeledInput LabeledInput} for providing `href` value.
+	 *
+	 * @private
+	 * @returns {ui.input.LabeledInput} Labeled input component.
+	 */
 	_createLabeledInput() {
 		const t = this.view.t;
 		const model = new Model( {
@@ -59,40 +83,53 @@ export default class LinkBalloonPanel extends BalloonPanel {
 		model.bind( 'value' ).to( this.model, 'url' );
 
 		/**
-		 * TODO
+		 * Input component for providing `href` value.
 		 *
-		 * @member {} todo
+		 * @member {ui.input.LabeledInput} link.ui.LinkBalloonPanel#urlInput
 		 */
 		this.urlInput = new LabeledInput( model, new LabeledInputView( this.locale ) );
 
 		return this.urlInput;
 	}
 
+	/**
+	 * Create {@link ui.box.Box Box} instance with `Cancel` and `Save` buttons.
+	 *
+	 * @private
+	 * @returns {ui.box.Box} Box component.
+	 */
 	_createButtons() {
 		const box = new Box( new Model( {
 			alignRight: true
 		} ), new BoxView( this.locale ) );
 
 		/**
-		 * TODO
+		 * Button component for submitting form.
 		 *
-		 * @member {} todo
+		 * @member {ui.button.Button} link.ui.LinkBalloonPanel#saveButton
 		 */
 		this.saveButton = this._createSaveButton();
 
 		/**
-		 * TODO
+		 * Button component for canceling form.
 		 *
-		 * @member {} todo
+		 * @member {ui.button.Button} link.ui.LinkBalloonPanel#cancelButton
 		 */
 		this.cancelButton = this._createCancelButton();
 
+		// Add `Cancel` and `Save` buttons as a box content.
 		box.add( 'content', this.cancelButton );
 		box.add( 'content', this.saveButton );
 
 		return box;
 	}
 
+	/**
+	 * Initialize {@link ui.button.Button Button} for submitting form.
+	 *
+	 * @private
+	 * @returns {ui.button.Button} Save button component.
+	 */
 	_createSaveButton() {
 		const t = this.view.t;
 		const saveModel = new Model( {
@@ -110,6 +147,12 @@ export default class LinkBalloonPanel extends BalloonPanel {
 		return button;
 	}
 
+	/**
+	 * Initialize {@link ui.button.Button Button} for canceling form.
+	 *
+	 * @private
+	 * @returns {ui.button.Button} Cancel button component.
+	 */
 	_createCancelButton() {
 		const t = this.view.t;
 		const cancelModel = new Model( {

+ 2 - 2
packages/ckeditor5-link/src/ui/linkballoonpanelview.js

@@ -9,10 +9,10 @@ import BalloonPanelView from '../../ui/balloonpanel/balloonpanelview.js';
 /**
  * The link balloon panel view class.
  *
- * See {@link ui.balloonPanel.BalloonPanelView}.
+ * See {@link link.ui.LinkBalloonPanel}.
  *
  * @memberOf link.ui
- * @extends ui.View
+ * @extends ui.balloonPanel.BalloonPanelView
  */
 export default class LinkBalloonPanelView extends BalloonPanelView {
 	/**

+ 114 - 0
packages/ckeditor5-link/tests/ui/linkballoonpanel.js

@@ -0,0 +1,114 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* bender-tags: ui, link */
+
+import LinkBalloonPanel from '/ckeditor5/link/ui/linkballoonpanel.js';
+import LinkBalloonPanelView from '/ckeditor5/link/ui/linkballoonpanelview.js';
+import BalloonPanel from '/ckeditor5/ui/balloonpanel/balloonpanel.js';
+import Model from '/ckeditor5/ui/model.js';
+
+import Form from '/ckeditor5/ui/form/form.js';
+import LabeledInput from '/ckeditor5/ui/labeledinput/labeledinput.js';
+import Button from '/ckeditor5/ui/button/button.js';
+
+import LocaleMock from '/tests/utils/_utils/locale-mock.js';
+
+describe( 'LinkBalloonPanel', () => {
+	let model, linkBalloonPanel, view;
+
+	beforeEach( () => {
+		model = new Model( {
+			maxWidth: 200,
+			url: 'http://ckeditor.com'
+		} );
+
+		view = new LinkBalloonPanelView( new LocaleMock() );
+		linkBalloonPanel = new LinkBalloonPanel( model, view );
+	} );
+
+	describe( 'constructor', () => {
+		it( 'should extends BalloonPanel class', () => {
+			expect( linkBalloonPanel ).to.be.instanceOf( BalloonPanel );
+		} );
+
+		describe( 'child components', () => {
+			describe( 'form', () => {
+				it( 'should creates Form instance', () => {
+					expect( linkBalloonPanel.form ).to.instanceof( Form );
+				} );
+
+				it( 'should appends to "content" collection', () => {
+					expect( linkBalloonPanel.collections.get( 'content' ).get( 0 ) ).to.deep.equal( linkBalloonPanel.form );
+				} );
+
+				it( 'should delegates form.model#execute to the model', () => {
+					const executeSpy = sinon.spy();
+
+					model.on( 'execute', executeSpy );
+
+					linkBalloonPanel.form.model.fire( 'execute' );
+
+					expect( executeSpy.calledOnce ).to.true;
+				} );
+			} );
+
+			describe( 'urlInput', () => {
+				it( 'should creates LabeledInput instance', () => {
+					expect( linkBalloonPanel.urlInput ).to.instanceof( LabeledInput );
+				} );
+
+				it( 'should appends to Form "content" collection', () => {
+					expect( linkBalloonPanel.form.collections.get( 'content' ).get( 0 ) ).to.deep.equal( linkBalloonPanel.urlInput );
+				} );
+
+				it( 'should binds model#url to urlInput.model#value', () => {
+					expect( linkBalloonPanel.urlInput.model.value ).to.equal( model.url ).to.equal( 'http://ckeditor.com' );
+
+					model.url = 'http://cksource.com';
+
+					expect( linkBalloonPanel.urlInput.model.value ).to.equal( 'http://cksource.com' );
+				} );
+			} );
+
+			describe( 'saveButton', () => {
+				it( 'should creates Button instance', () => {
+					expect( linkBalloonPanel.saveButton ).to.instanceof( Button );
+				} );
+
+				it( 'should trigger model#execute event after clicking', ( done ) => {
+					const executeSpy = sinon.spy();
+
+					model.on( 'execute', executeSpy );
+
+					linkBalloonPanel.init().then( () => {
+						linkBalloonPanel.saveButton.view.element.click();
+
+						expect( executeSpy.calledOnce ).to.true;
+						done();
+					} );
+				} );
+
+				it( 'should be a submit', () => {
+					expect( linkBalloonPanel.saveButton.model.type ).to.equal( 'submit' );
+				} );
+			} );
+
+			describe( 'cancelButton', () => {
+				it( 'should creates Button instance', () => {
+					expect( linkBalloonPanel.cancelButton ).to.instanceof( Button );
+				} );
+
+				it( 'should hide LinkBalloonPanel on cancelButton.model#execute event', () => {
+					const hideSpy = sinon.spy( linkBalloonPanel.view, 'hide' );
+
+					linkBalloonPanel.cancelButton.model.fire( 'execute' );
+
+					expect( hideSpy.calledOnce ).to.true;
+				} );
+			} );
+		} );
+	} );
+} );

+ 27 - 0
packages/ckeditor5-link/tests/ui/linkballoonpanelview.js

@@ -0,0 +1,27 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* bender-tags: ui, link */
+
+import LinkBalloonPanelView from '/ckeditor5/link/ui/linkballoonpanelview.js';
+import BalloonPanelView from '/ckeditor5/ui/balloonpanel/balloonpanelview.js';
+
+describe( 'LinkBalloonPanelView', () => {
+	let view;
+
+	beforeEach( () => {
+		view = new LinkBalloonPanelView();
+	} );
+
+	describe( 'constructor', () => {
+		it( 'should extends BalloonPanelView class', () => {
+			expect( view ).to.be.instanceof( BalloonPanelView );
+		} );
+
+		it( 'should extend BalloonPanel element by additional class', () => {
+			expect( view.element.classList.contains( 'ck-link-balloon-panel' ) ).to.be.true;
+		} );
+	} );
+} );