Преглед на файлове

Tests: Partial TableCellPropertiesUI tests.

Aleksander Nowodzinski преди 6 години
родител
ревизия
efee08d0d5
променени са 2 файла, в които са добавени 117 реда и са изтрити 17 реда
  1. 16 17
      packages/ckeditor5-table/src/tablecellpropertiesui.js
  2. 101 0
      packages/ckeditor5-table/tests/tablecellpropertiesui.js

+ 16 - 17
packages/ckeditor5-table/src/tablecellpropertiesui.js

@@ -63,6 +63,13 @@ export default class TableCellPropertiesUI extends Plugin {
 		 */
 		this._balloon = editor.plugins.get( ContextualBalloon );
 
+		/**
+		 * The properties form view displayed inside the balloon.
+		 *
+		 * @member {module:table/ui/tablecellpropertiesview~TableCellPropertiesView}
+		 */
+		this.view = this._createPropertiesView();
+
 		/**
 		 * The batch used to undo all changes made by the form (which are live, as the user types)
 		 * when "Cancel" was pressed. Each time the view is shown, a new batch is created.
@@ -72,9 +79,6 @@ export default class TableCellPropertiesUI extends Plugin {
 		 */
 		this._batch = null;
 
-		// Create the view that displays the properties form.
-		this._createPropertiesView();
-
 		// Make the form dynamic, i.e. create bindings between view fields and the model.
 		this._startRespondingToChangesInView();
 
@@ -113,30 +117,23 @@ export default class TableCellPropertiesUI extends Plugin {
 	 */
 	_createPropertiesView() {
 		const editor = this.editor;
-		const view = editor.editing.view;
-		const viewDocument = view.document;
-
-		/**
-		 * The properties form view displayed inside the balloon.
-		 *
-		 * @member {module:table/ui/tablecellpropertiesview~TableCellPropertiesView}
-		 */
-		this.view = new TableCellPropertiesView( editor.locale );
+		const viewDocument = editor.editing.view.document;
+		const view = new TableCellPropertiesView( editor.locale );
 
 		// Render the view so its #element is available for the clickOutsideHandler.
-		this.view.render();
+		view.render();
 
-		this.listenTo( this.view, 'submit', () => {
+		this.listenTo( view, 'submit', () => {
 			this._hideView();
 		} );
 
-		this.listenTo( this.view, 'cancel', () => {
+		this.listenTo( view, 'cancel', () => {
 			editor.execute( 'undo', this._batch );
 			this._hideView();
 		} );
 
 		// Close the balloon on Esc key press when the **form has focus**.
-		this.view.keystrokes.set( 'Esc', ( data, cancel ) => {
+		view.keystrokes.set( 'Esc', ( data, cancel ) => {
 			this._hideView();
 			cancel();
 		} );
@@ -152,11 +149,13 @@ export default class TableCellPropertiesUI extends Plugin {
 
 		// Close on click outside of balloon panel element.
 		clickOutsideHandler( {
-			emitter: this.view,
+			emitter: view,
 			activator: () => this._isViewInBalloon,
 			contextElements: [ this._balloon.view.element ],
 			callback: () => this._hideView()
 		} );
+
+		return view;
 	}
 
 	/**

+ 101 - 0
packages/ckeditor5-table/tests/tablecellpropertiesui.js

@@ -0,0 +1,101 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals document */
+
+import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
+import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
+// import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
+// import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
+// import { getData as getViewData } from '@ckeditor/ckeditor5-engine/src/dev-utils/view';
+
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import ContextualBalloon from '@ckeditor/ckeditor5-ui/src/panel/balloon/contextualballoon';
+
+import Table from '@ckeditor/ckeditor5-table/src/table';
+import TableCellPropertiesUI from '@ckeditor/ckeditor5-table/src/tablecellpropertiesui';
+import TableCellPropertiesUIView from '@ckeditor/ckeditor5-table/src/ui/tablecellpropertiesview';
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+// import View from '@ckeditor/ckeditor5-ui/src/view';
+
+describe.only( 'TableCellPropertiesUI', () => {
+	let editor, editorElement, contextualBalloon,
+		tableCellPropertiesUI, tableCellPropertiesButton;
+
+	testUtils.createSinonSandbox();
+
+	beforeEach( () => {
+		editorElement = document.createElement( 'div' );
+		document.body.appendChild( editorElement );
+
+		return ClassicTestEditor
+			.create( editorElement, {
+				plugins: [ Table, TableCellPropertiesUI, Paragraph ]
+			} )
+			.then( newEditor => {
+				editor = newEditor;
+
+				tableCellPropertiesUI = editor.plugins.get( TableCellPropertiesUI );
+				tableCellPropertiesButton = editor.ui.componentFactory.create( 'tableCellProperties' );
+				contextualBalloon = editor.plugins.get( ContextualBalloon );
+				// tableCellPropertiesView = tableCellPropertiesUI.view;
+
+				// There is no point to execute BalloonPanelView attachTo and pin methods so lets override it.
+				testUtils.sinon.stub( contextualBalloon.view, 'attachTo' ).returns( {} );
+				testUtils.sinon.stub( contextualBalloon.view, 'pin' ).returns( {} );
+			} );
+	} );
+
+	afterEach( () => {
+		editorElement.remove();
+
+		return editor.destroy();
+	} );
+
+	it( 'should be named', () => {
+		expect( TableCellPropertiesUI.pluginName ).to.equal( 'TableCellPropertiesUI' );
+	} );
+
+	it( 'should load ContextualBalloon', () => {
+		expect( editor.plugins.get( ContextualBalloon ) ).to.be.instanceOf( ContextualBalloon );
+	} );
+
+	describe( 'init()', () => {
+		it( 'should set a batch', () => {
+			expect( tableCellPropertiesUI._batch ).to.be.null;
+		} );
+
+		describe( '#view', () => {
+			it( 'should be created', () => {
+				expect( tableCellPropertiesUI.view ).to.be.instanceOf( TableCellPropertiesUIView );
+			} );
+
+			it( 'should be rendered', () => {
+				expect( tableCellPropertiesUI.view.isRendered ).to.be.true;
+			} );
+		} );
+
+		describe( 'toolbar button', () => {
+			it( 'should be registered', () => {
+				expect( tableCellPropertiesButton ).to.be.instanceOf( ButtonView );
+			} );
+
+			it( 'should have a label', () => {
+				expect( tableCellPropertiesButton.label ).to.equal( 'Cell properties' );
+			} );
+
+			it( 'should have a tooltip', () => {
+				expect( tableCellPropertiesButton.tooltip ).to.be.true;
+			} );
+
+			it( 'should call #_showView upon #execute', () => {
+				const spy = testUtils.sinon.stub( tableCellPropertiesUI, '_showView' ).returns( {} );
+
+				tableCellPropertiesButton.fire( 'execute' );
+				sinon.assert.calledOnce( spy );
+			} );
+		} );
+	} );
+} );