瀏覽代碼

Tests: Code refactoring.

Aleksander Nowodzinski 5 年之前
父節點
當前提交
e3b5c0fe63

+ 243 - 241
packages/ckeditor5-table/tests/tablecellproperties/tablecellpropertiesui.js

@@ -21,324 +21,326 @@ import TableCellPropertiesEditing from '../../src/tablecellproperties/tablecellp
 import TableCellPropertiesUI from '../../src/tablecellproperties/tablecellpropertiesui';
 import TableCellPropertiesUIView from '../../src/tablecellproperties/ui/tablecellpropertiesview';
 
-describe( 'TableCellPropertiesUI', () => {
-	let editor, editorElement, contextualBalloon,
-		tableCellPropertiesUI, tableCellPropertiesView, tableCellPropertiesButton;
-
-	testUtils.createSinonSandbox();
-
-	beforeEach( () => {
-		editorElement = document.createElement( 'div' );
-		document.body.appendChild( editorElement );
-
-		return ClassicTestEditor
-			.create( editorElement, {
-				plugins: [ Table, TableCellPropertiesEditing, TableCellPropertiesUI, Paragraph, Undo ],
-				initialData: '<table><tr><td>foo</td></tr></table><p>bar</p>'
-			} )
-			.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();
+describe( 'table cell properties', () => {
+	describe( 'TableCellPropertiesUI', () => {
+		let editor, editorElement, contextualBalloon,
+			tableCellPropertiesUI, tableCellPropertiesView, tableCellPropertiesButton;
 
-		return editor.destroy();
-	} );
+		testUtils.createSinonSandbox();
 
-	it( 'should be named', () => {
-		expect( TableCellPropertiesUI.pluginName ).to.equal( 'TableCellPropertiesUI' );
-	} );
+		beforeEach( () => {
+			editorElement = document.createElement( 'div' );
+			document.body.appendChild( editorElement );
+
+			return ClassicTestEditor
+				.create( editorElement, {
+					plugins: [ Table, TableCellPropertiesEditing, TableCellPropertiesUI, Paragraph, Undo ],
+					initialData: '<table><tr><td>foo</td></tr></table><p>bar</p>'
+				} )
+				.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( {} );
+				} );
+		} );
 
-	it( 'should load ContextualBalloon', () => {
-		expect( editor.plugins.get( ContextualBalloon ) ).to.be.instanceOf( ContextualBalloon );
-	} );
+		afterEach( () => {
+			editorElement.remove();
 
-	describe( 'init()', () => {
-		it( 'should set a batch', () => {
-			expect( tableCellPropertiesUI._undoStepBatch ).to.be.null;
+			return editor.destroy();
 		} );
 
-		describe( '#view', () => {
-			it( 'should be created', () => {
-				expect( tableCellPropertiesUI.view ).to.be.instanceOf( TableCellPropertiesUIView );
-			} );
+		it( 'should be named', () => {
+			expect( TableCellPropertiesUI.pluginName ).to.equal( 'TableCellPropertiesUI' );
+		} );
 
-			it( 'should be rendered', () => {
-				expect( tableCellPropertiesUI.view.isRendered ).to.be.true;
-			} );
+		it( 'should load ContextualBalloon', () => {
+			expect( editor.plugins.get( ContextualBalloon ) ).to.be.instanceOf( ContextualBalloon );
 		} );
 
-		describe( 'toolbar button', () => {
-			it( 'should be registered', () => {
-				expect( tableCellPropertiesButton ).to.be.instanceOf( ButtonView );
+		describe( 'init()', () => {
+			it( 'should set a batch', () => {
+				expect( tableCellPropertiesUI._undoStepBatch ).to.be.null;
 			} );
 
-			it( 'should have a label', () => {
-				expect( tableCellPropertiesButton.label ).to.equal( 'Cell properties' );
-			} );
+			describe( '#view', () => {
+				it( 'should be created', () => {
+					expect( tableCellPropertiesUI.view ).to.be.instanceOf( TableCellPropertiesUIView );
+				} );
 
-			it( 'should have a tooltip', () => {
-				expect( tableCellPropertiesButton.tooltip ).to.be.true;
+				it( 'should be rendered', () => {
+					expect( tableCellPropertiesUI.view.isRendered ).to.be.true;
+				} );
 			} );
 
-			it( 'should call #_showView upon #execute', () => {
-				const spy = testUtils.sinon.stub( tableCellPropertiesUI, '_showView' ).returns( {} );
+			describe( 'toolbar button', () => {
+				it( 'should be registered', () => {
+					expect( tableCellPropertiesButton ).to.be.instanceOf( ButtonView );
+				} );
 
-				tableCellPropertiesButton.fire( 'execute' );
-				sinon.assert.calledOnce( spy );
-			} );
-		} );
-	} );
+				it( 'should have a label', () => {
+					expect( tableCellPropertiesButton.label ).to.equal( 'Cell properties' );
+				} );
 
-	describe( 'destroy()', () => {
+				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( {} );
 
-	describe( 'Properties #view', () => {
-		beforeEach( () => {
-			editor.model.change( writer => {
-				writer.setSelection( editor.model.document.getRoot().getChild( 0 ).getChild( 0 ).getChild( 0 ), 0 );
+					tableCellPropertiesButton.fire( 'execute' );
+					sinon.assert.calledOnce( spy );
+				} );
 			} );
 		} );
 
-		it( 'should hide on #submit', () => {
-			tableCellPropertiesButton.fire( 'execute' );
-			expect( contextualBalloon.visibleView ).to.equal( tableCellPropertiesView );
+		describe( 'destroy()', () => {
 
-			tableCellPropertiesView.fire( 'submit' );
-			expect( contextualBalloon.visibleView ).to.be.null;
 		} );
 
-		it( 'should undo the entire batch of changes on #cancel', () => {
-			// Show the view. New batch will be created.
-			tableCellPropertiesButton.fire( 'execute' );
-
-			// Do the changes like a user.
-			tableCellPropertiesView.borderStyle = 'dotted';
-			tableCellPropertiesView.backgroundColor = 'red';
-
-			expect( getModelData( editor.model ) ).to.equal(
-				'<table>' +
-					'<tableRow>' +
-						'<tableCell backgroundColor="red" borderStyle="dotted">' +
-							'<paragraph>[]foo</paragraph>' +
-						'</tableCell>' +
-					'</tableRow>' +
-				'</table>' +
-				'<paragraph>bar</paragraph>'
-			);
-
-			tableCellPropertiesView.fire( 'cancel' );
-
-			expect( getModelData( editor.model ) ).to.equal(
-				'<table>' +
-					'<tableRow>' +
-						'<tableCell>' +
-							'<paragraph>[]foo</paragraph>' +
-						'</tableCell>' +
-					'</tableRow>' +
-				'</table>' +
-				'<paragraph>bar</paragraph>'
-			);
-		} );
-
-		it( 'should hide on #cancel', () => {
-			tableCellPropertiesButton.fire( 'execute' );
-			expect( contextualBalloon.visibleView ).to.equal( tableCellPropertiesView );
+		describe( 'Properties #view', () => {
+			beforeEach( () => {
+				editor.model.change( writer => {
+					writer.setSelection( editor.model.document.getRoot().getChild( 0 ).getChild( 0 ).getChild( 0 ), 0 );
+				} );
+			} );
 
-			tableCellPropertiesView.fire( 'cancel' );
-			expect( contextualBalloon.visibleView ).to.be.null;
-		} );
+			it( 'should hide on #submit', () => {
+				tableCellPropertiesButton.fire( 'execute' );
+				expect( contextualBalloon.visibleView ).to.equal( tableCellPropertiesView );
 
-		it( 'should hide on the Esc key press', () => {
-			const keyEvtData = {
-				keyCode: keyCodes.esc,
-				preventDefault: sinon.spy(),
-				stopPropagation: sinon.spy()
-			};
+				tableCellPropertiesView.fire( 'submit' );
+				expect( contextualBalloon.visibleView ).to.be.null;
+			} );
 
-			tableCellPropertiesButton.fire( 'execute' );
-			expect( contextualBalloon.visibleView ).to.equal( tableCellPropertiesView );
+			it( 'should undo the entire batch of changes on #cancel', () => {
+				// Show the view. New batch will be created.
+				tableCellPropertiesButton.fire( 'execute' );
 
-			tableCellPropertiesView.keystrokes.press( keyEvtData );
-			expect( contextualBalloon.visibleView ).to.be.null;
-		} );
+				// Do the changes like a user.
+				tableCellPropertiesView.borderStyle = 'dotted';
+				tableCellPropertiesView.backgroundColor = 'red';
+
+				expect( getModelData( editor.model ) ).to.equal(
+					'<table>' +
+						'<tableRow>' +
+							'<tableCell backgroundColor="red" borderStyle="dotted">' +
+								'<paragraph>[]foo</paragraph>' +
+							'</tableCell>' +
+						'</tableRow>' +
+					'</table>' +
+					'<paragraph>bar</paragraph>'
+				);
+
+				tableCellPropertiesView.fire( 'cancel' );
+
+				expect( getModelData( editor.model ) ).to.equal(
+					'<table>' +
+						'<tableRow>' +
+							'<tableCell>' +
+								'<paragraph>[]foo</paragraph>' +
+							'</tableCell>' +
+						'</tableRow>' +
+					'</table>' +
+					'<paragraph>bar</paragraph>'
+				);
+			} );
 
-		it( 'should hide if the table cell is no longer selected on EditorUI#update', () => {
-			tableCellPropertiesButton.fire( 'execute' );
-			expect( contextualBalloon.visibleView ).to.equal( tableCellPropertiesView );
+			it( 'should hide on #cancel', () => {
+				tableCellPropertiesButton.fire( 'execute' );
+				expect( contextualBalloon.visibleView ).to.equal( tableCellPropertiesView );
 
-			editor.model.change( writer => {
-				// Set selection in the paragraph.
-				writer.setSelection( editor.model.document.getRoot().getChild( 1 ), 0 );
+				tableCellPropertiesView.fire( 'cancel' );
+				expect( contextualBalloon.visibleView ).to.be.null;
 			} );
 
-			expect( contextualBalloon.visibleView ).to.be.null;
-		} );
+			it( 'should hide on the Esc key press', () => {
+				const keyEvtData = {
+					keyCode: keyCodes.esc,
+					preventDefault: sinon.spy(),
+					stopPropagation: sinon.spy()
+				};
 
-		it( 'should reposition if table cell is still selected on on EditorUI#update', () => {
-			tableCellPropertiesButton.fire( 'execute' );
-			expect( contextualBalloon.visibleView ).to.equal( tableCellPropertiesView );
+				tableCellPropertiesButton.fire( 'execute' );
+				expect( contextualBalloon.visibleView ).to.equal( tableCellPropertiesView );
 
-			editor.model.change( writer => {
-				writer.insertText( 'qux', editor.model.document.selection.getFirstPosition() );
+				tableCellPropertiesView.keystrokes.press( keyEvtData );
+				expect( contextualBalloon.visibleView ).to.be.null;
 			} );
 
-			expect( contextualBalloon.visibleView ).to.equal( tableCellPropertiesView );
-		} );
-
-		it( 'should hide if clicked outside the balloon', () => {
-			tableCellPropertiesButton.fire( 'execute' );
-			expect( contextualBalloon.visibleView ).to.equal( tableCellPropertiesView );
+			it( 'should hide if the table cell is no longer selected on EditorUI#update', () => {
+				tableCellPropertiesButton.fire( 'execute' );
+				expect( contextualBalloon.visibleView ).to.equal( tableCellPropertiesView );
 
-			document.body.dispatchEvent( new Event( 'mousedown', { bubbles: true } ) );
+				editor.model.change( writer => {
+					// Set selection in the paragraph.
+					writer.setSelection( editor.model.document.getRoot().getChild( 1 ), 0 );
+				} );
 
-			expect( contextualBalloon.visibleView ).to.be.null;
-		} );
+				expect( contextualBalloon.visibleView ).to.be.null;
+			} );
 
-		describe( 'property changes', () => {
-			it( 'should affect the editor state', () => {
-				const spy = testUtils.sinon.stub( editor, 'execute' );
+			it( 'should reposition if table cell is still selected on on EditorUI#update', () => {
+				tableCellPropertiesButton.fire( 'execute' );
+				expect( contextualBalloon.visibleView ).to.equal( tableCellPropertiesView );
 
-				tableCellPropertiesUI._undoStepBatch = 'foo';
-				tableCellPropertiesView.fire( 'change', 'borderStyle', 'dotted' );
+				editor.model.change( writer => {
+					writer.insertText( 'qux', editor.model.document.selection.getFirstPosition() );
+				} );
 
-				sinon.assert.calledOnce( spy );
-				sinon.assert.calledWithExactly( spy, 'tableCellBorderStyle', { value: 'dotted', batch: 'foo' } );
+				expect( contextualBalloon.visibleView ).to.equal( tableCellPropertiesView );
 			} );
 
-			it( 'should not affect the editor state if internal property has changed', () => {
-				const spy = testUtils.sinon.stub( editor, 'execute' );
+			it( 'should hide if clicked outside the balloon', () => {
+				tableCellPropertiesButton.fire( 'execute' );
+				expect( contextualBalloon.visibleView ).to.equal( tableCellPropertiesView );
 
-				tableCellPropertiesUI._undoStepBatch = 'foo';
-				tableCellPropertiesView.fire( 'change', 'internalProp', 'foo' );
+				document.body.dispatchEvent( new Event( 'mousedown', { bubbles: true } ) );
 
-				sinon.assert.notCalled( spy );
+				expect( contextualBalloon.visibleView ).to.be.null;
 			} );
-		} );
-	} );
 
-	describe( 'Showing the #view', () => {
-		beforeEach( () => {
-			editor.model.change( writer => {
-				writer.setSelection( editor.model.document.getRoot().getChild( 0 ).getChild( 0 ).getChild( 0 ), 0 );
-			} );
-		} );
+			describe( 'property changes', () => {
+				it( 'should affect the editor state', () => {
+					const spy = testUtils.sinon.stub( editor, 'execute' );
 
-		it( 'should create a new undoable batch for further #view cancel', () => {
-			tableCellPropertiesButton.fire( 'execute' );
-			expect( contextualBalloon.visibleView ).to.equal( tableCellPropertiesView );
+					tableCellPropertiesUI._undoStepBatch = 'foo';
+					tableCellPropertiesView.fire( 'change', 'borderStyle', 'dotted' );
 
-			const firstBatch = tableCellPropertiesUI._undoStepBatch;
-			expect( firstBatch ).to.be.instanceOf( Batch );
+					sinon.assert.calledOnce( spy );
+					sinon.assert.calledWithExactly( spy, 'tableCellBorderStyle', { value: 'dotted', batch: 'foo' } );
+				} );
 
-			tableCellPropertiesView.fire( 'submit' );
-			expect( contextualBalloon.visibleView ).to.be.null;
+				it( 'should not affect the editor state if internal property has changed', () => {
+					const spy = testUtils.sinon.stub( editor, 'execute' );
 
-			tableCellPropertiesButton.fire( 'execute' );
+					tableCellPropertiesUI._undoStepBatch = 'foo';
+					tableCellPropertiesView.fire( 'change', 'internalProp', 'foo' );
 
-			const secondBatch = tableCellPropertiesUI._undoStepBatch;
-			expect( secondBatch ).to.be.instanceOf( Batch );
-			expect( firstBatch ).to.not.equal( secondBatch );
+					sinon.assert.notCalled( spy );
+				} );
+			} );
 		} );
 
-		describe( 'initial data', () => {
-			it( 'should be set from the command values', () => {
-				editor.commands.get( 'tableCellBorderStyle' ).value = 'a';
-				editor.commands.get( 'tableCellBorderColor' ).value = 'b';
-				editor.commands.get( 'tableCellBorderWidth' ).value = 'c';
-				editor.commands.get( 'tableCellPadding' ).value = 'd';
-				editor.commands.get( 'tableCellBackgroundColor' ).value = 'e';
-				editor.commands.get( 'tableCellHorizontalAlignment' ).value = 'f';
-				editor.commands.get( 'tableCellVerticalAlignment' ).value = 'g';
+		describe( 'Showing the #view', () => {
+			beforeEach( () => {
+				editor.model.change( writer => {
+					writer.setSelection( editor.model.document.getRoot().getChild( 0 ).getChild( 0 ).getChild( 0 ), 0 );
+				} );
+			} );
 
+			it( 'should create a new undoable batch for further #view cancel', () => {
 				tableCellPropertiesButton.fire( 'execute' );
-
 				expect( contextualBalloon.visibleView ).to.equal( tableCellPropertiesView );
-				expect( tableCellPropertiesView ).to.include( {
-					borderStyle: 'a',
-					borderColor: 'b',
-					borderWidth: 'c',
-					padding: 'd',
-					backgroundColor: 'e',
-					horizontalAlignment: 'f',
-					verticalAlignment: 'g'
-				} );
-			} );
 
-			it( 'should use default values when command has no value', () => {
-				editor.commands.get( 'tableCellBorderStyle' ).value = null;
-				editor.commands.get( 'tableCellBorderColor' ).value = null;
-				editor.commands.get( 'tableCellBorderWidth' ).value = null;
-				editor.commands.get( 'tableCellPadding' ).value = null;
-				editor.commands.get( 'tableCellBackgroundColor' ).value = null;
-				editor.commands.get( 'tableCellHorizontalAlignment' ).value = null;
-				editor.commands.get( 'tableCellVerticalAlignment' ).value = null;
+				const firstBatch = tableCellPropertiesUI._undoStepBatch;
+				expect( firstBatch ).to.be.instanceOf( Batch );
+
+				tableCellPropertiesView.fire( 'submit' );
+				expect( contextualBalloon.visibleView ).to.be.null;
 
 				tableCellPropertiesButton.fire( 'execute' );
 
-				expect( contextualBalloon.visibleView ).to.equal( tableCellPropertiesView );
-				expect( tableCellPropertiesView ).to.include( {
-					borderStyle: 'none',
-					borderColor: '',
-					borderWidth: '',
-					padding: '',
-					backgroundColor: '',
-					horizontalAlignment: 'left',
-					verticalAlignment: 'middle'
+				const secondBatch = tableCellPropertiesUI._undoStepBatch;
+				expect( secondBatch ).to.be.instanceOf( Batch );
+				expect( firstBatch ).to.not.equal( secondBatch );
+			} );
+
+			describe( 'initial data', () => {
+				it( 'should be set from the command values', () => {
+					editor.commands.get( 'tableCellBorderStyle' ).value = 'a';
+					editor.commands.get( 'tableCellBorderColor' ).value = 'b';
+					editor.commands.get( 'tableCellBorderWidth' ).value = 'c';
+					editor.commands.get( 'tableCellPadding' ).value = 'd';
+					editor.commands.get( 'tableCellBackgroundColor' ).value = 'e';
+					editor.commands.get( 'tableCellHorizontalAlignment' ).value = 'f';
+					editor.commands.get( 'tableCellVerticalAlignment' ).value = 'g';
+
+					tableCellPropertiesButton.fire( 'execute' );
+
+					expect( contextualBalloon.visibleView ).to.equal( tableCellPropertiesView );
+					expect( tableCellPropertiesView ).to.include( {
+						borderStyle: 'a',
+						borderColor: 'b',
+						borderWidth: 'c',
+						padding: 'd',
+						backgroundColor: 'e',
+						horizontalAlignment: 'f',
+						verticalAlignment: 'g'
+					} );
+				} );
+
+				it( 'should use default values when command has no value', () => {
+					editor.commands.get( 'tableCellBorderStyle' ).value = null;
+					editor.commands.get( 'tableCellBorderColor' ).value = null;
+					editor.commands.get( 'tableCellBorderWidth' ).value = null;
+					editor.commands.get( 'tableCellPadding' ).value = null;
+					editor.commands.get( 'tableCellBackgroundColor' ).value = null;
+					editor.commands.get( 'tableCellHorizontalAlignment' ).value = null;
+					editor.commands.get( 'tableCellVerticalAlignment' ).value = null;
+
+					tableCellPropertiesButton.fire( 'execute' );
+
+					expect( contextualBalloon.visibleView ).to.equal( tableCellPropertiesView );
+					expect( tableCellPropertiesView ).to.include( {
+						borderStyle: 'none',
+						borderColor: '',
+						borderWidth: '',
+						padding: '',
+						backgroundColor: '',
+						horizontalAlignment: 'left',
+						verticalAlignment: 'middle'
+					} );
 				} );
 			} );
-		} );
 
-		it( 'should focus the form view', () => {
-			const spy = testUtils.sinon.spy( tableCellPropertiesView, 'focus' );
+			it( 'should focus the form view', () => {
+				const spy = testUtils.sinon.spy( tableCellPropertiesView, 'focus' );
 
-			tableCellPropertiesButton.fire( 'execute' );
+				tableCellPropertiesButton.fire( 'execute' );
 
-			sinon.assert.calledOnce( spy );
+				sinon.assert.calledOnce( spy );
+			} );
 		} );
-	} );
 
-	describe( 'Hiding the #view', () => {
-		beforeEach( () => {
-			editor.model.change( writer => {
-				writer.setSelection( editor.model.document.getRoot().getChild( 0 ).getChild( 0 ).getChild( 0 ), 0 );
+		describe( 'Hiding the #view', () => {
+			beforeEach( () => {
+				editor.model.change( writer => {
+					writer.setSelection( editor.model.document.getRoot().getChild( 0 ).getChild( 0 ).getChild( 0 ), 0 );
+				} );
 			} );
-		} );
 
-		it( 'should stop listening to EditorUI#update', () => {
-			const spy = testUtils.sinon.spy( tableCellPropertiesUI, 'stopListening' );
+			it( 'should stop listening to EditorUI#update', () => {
+				const spy = testUtils.sinon.spy( tableCellPropertiesUI, 'stopListening' );
 
-			tableCellPropertiesButton.fire( 'execute' );
-			expect( contextualBalloon.visibleView ).to.equal( tableCellPropertiesView );
+				tableCellPropertiesButton.fire( 'execute' );
+				expect( contextualBalloon.visibleView ).to.equal( tableCellPropertiesView );
 
-			tableCellPropertiesView.fire( 'submit' );
-			expect( contextualBalloon.visibleView ).to.be.null;
+				tableCellPropertiesView.fire( 'submit' );
+				expect( contextualBalloon.visibleView ).to.be.null;
 
-			sinon.assert.calledOnce( spy );
-			sinon.assert.calledWithExactly( spy, editor.ui, 'update' );
-		} );
+				sinon.assert.calledOnce( spy );
+				sinon.assert.calledWithExactly( spy, editor.ui, 'update' );
+			} );
 
-		it( 'should focus the editing view so the focus is not lost', () => {
-			const spy = testUtils.sinon.spy( editor.editing.view, 'focus' );
+			it( 'should focus the editing view so the focus is not lost', () => {
+				const spy = testUtils.sinon.spy( editor.editing.view, 'focus' );
 
-			tableCellPropertiesButton.fire( 'execute' );
-			expect( contextualBalloon.visibleView ).to.equal( tableCellPropertiesView );
+				tableCellPropertiesButton.fire( 'execute' );
+				expect( contextualBalloon.visibleView ).to.equal( tableCellPropertiesView );
 
-			tableCellPropertiesView.fire( 'submit' );
+				tableCellPropertiesView.fire( 'submit' );
 
-			sinon.assert.calledOnce( spy );
+				sinon.assert.calledOnce( spy );
+			} );
 		} );
 	} );
 } );

+ 412 - 408
packages/ckeditor5-table/tests/tablecellproperties/ui/tablecellpropertiesview.js

@@ -17,523 +17,527 @@ import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import InputTextView from '@ckeditor/ckeditor5-ui/src/inputtext/inputtextview';
 
-describe( 'TableCellPropertiesView', () => {
-	let view, locale;
+describe( 'table cell properties', () => {
+	describe( 'TableCellPropertiesView', () => {
+		let view, locale;
 
-	testUtils.createSinonSandbox();
+		testUtils.createSinonSandbox();
 
-	beforeEach( () => {
-		locale = { t: val => val };
-		view = new TableCellPropertiesView( locale );
-		view.render();
-	} );
-
-	afterEach( () => {
-		view.destroy();
-	} );
-
-	describe( 'constructor()', () => {
-		it( 'should set view#locale', () => {
-			expect( view.locale ).to.equal( locale );
+		beforeEach( () => {
+			locale = { t: val => val };
+			view = new TableCellPropertiesView( locale );
+			view.render();
 		} );
 
-		it( 'should create view#children collection', () => {
-			expect( view.children ).to.be.instanceOf( ViewCollection );
+		afterEach( () => {
+			view.destroy();
 		} );
 
-		it( 'should define the public data interface (observable properties)', () => {
-			expect( view ).to.include( {
-				borderStyle: 'none',
-				borderWidth: '',
-				borderColor: '',
-				padding: '',
-				backgroundColor: '',
-				horizontalAlignment: 'left',
-				verticalAlignment: 'middle'
+		describe( 'constructor()', () => {
+			it( 'should set view#locale', () => {
+				expect( view.locale ).to.equal( locale );
 			} );
-		} );
 
-		it( 'should create element from template', () => {
-			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
-			expect( view.element.classList.contains( 'ck-form' ) ).to.be.true;
-			expect( view.element.classList.contains( 'ck-table-cell-properties-form' ) ).to.be.true;
-			expect( view.element.getAttribute( 'tabindex' ) ).to.equal( '-1' );
-		} );
-
-		it( 'should create child views (and references)', () => {
-			expect( view.borderStyleDropdown ).to.be.instanceOf( LabeledView );
-			expect( view.borderWidthInput ).to.be.instanceOf( LabeledView );
-			expect( view.borderColorInput ).to.be.instanceOf( LabeledView );
-			expect( view.backgroundInput ).to.be.instanceOf( LabeledView );
-			expect( view.paddingInput ).to.be.instanceOf( LabeledView );
-			expect( view.horizontalAlignmentToolbar ).to.be.instanceOf( ToolbarView );
-			expect( view.verticalAlignmentToolbar ).to.be.instanceOf( ToolbarView );
-
-			expect( view.saveButtonView ).to.be.instanceOf( ButtonView );
-			expect( view.cancelButtonView ).to.be.instanceOf( ButtonView );
-		} );
-
-		it( 'should have a header', () => {
-			const header = view.element.firstChild;
-
-			expect( header.classList.contains( 'ck' ) ).to.be.true;
-			expect( header.classList.contains( 'ck-form__header' ) ).to.be.true;
-			expect( header.textContent ).to.equal( 'Cell properties' );
-		} );
+			it( 'should create view#children collection', () => {
+				expect( view.children ).to.be.instanceOf( ViewCollection );
+			} );
 
-		describe( 'form rows', () => {
-			describe( 'border row', () => {
-				it( 'should be defined', () => {
-					const row = view.element.childNodes[ 1 ];
-
-					expect( row.classList.contains( 'ck-form__row' ) ).to.be.true;
-					expect( row.classList.contains( 'ck-table-cell-properties-form__border-row' ) ).to.be.true;
-					expect( row.childNodes[ 0 ].textContent ).to.equal( 'Border' );
-					expect( row.childNodes[ 1 ] ).to.equal( view.borderStyleDropdown.element );
-					expect( row.childNodes[ 2 ] ).to.equal( view.borderColorInput.element );
-					expect( row.childNodes[ 3 ] ).to.equal( view.borderWidthInput.element );
+			it( 'should define the public data interface (observable properties)', () => {
+				expect( view ).to.include( {
+					borderStyle: 'none',
+					borderWidth: '',
+					borderColor: '',
+					padding: '',
+					backgroundColor: '',
+					horizontalAlignment: 'left',
+					verticalAlignment: 'middle'
 				} );
+			} );
 
-				describe( 'border style labeled dropdown', () => {
-					let labeledDropdown;
+			it( 'should create element from template', () => {
+				expect( view.element.classList.contains( 'ck' ) ).to.be.true;
+				expect( view.element.classList.contains( 'ck-form' ) ).to.be.true;
+				expect( view.element.classList.contains( 'ck-table-cell-properties-form' ) ).to.be.true;
+				expect( view.element.getAttribute( 'tabindex' ) ).to.equal( '-1' );
+			} );
 
-					beforeEach( () => {
-						labeledDropdown = view.borderStyleDropdown;
-					} );
+			it( 'should create child views (and references)', () => {
+				expect( view.borderStyleDropdown ).to.be.instanceOf( LabeledView );
+				expect( view.borderWidthInput ).to.be.instanceOf( LabeledView );
+				expect( view.borderColorInput ).to.be.instanceOf( LabeledView );
+				expect( view.backgroundInput ).to.be.instanceOf( LabeledView );
+				expect( view.paddingInput ).to.be.instanceOf( LabeledView );
+				expect( view.horizontalAlignmentToolbar ).to.be.instanceOf( ToolbarView );
+				expect( view.verticalAlignmentToolbar ).to.be.instanceOf( ToolbarView );
+
+				expect( view.saveButtonView ).to.be.instanceOf( ButtonView );
+				expect( view.cancelButtonView ).to.be.instanceOf( ButtonView );
+			} );
 
-					it( 'should have properties set', () => {
-						expect(	labeledDropdown.label ).to.equal( 'Style' );
-						expect(	labeledDropdown.class ).to.equal( 'ck-table-cell-properties-form__border-style' );
-					} );
+			it( 'should have a header', () => {
+				const header = view.element.firstChild;
 
-					it( 'should have a button with properties set', () => {
-						expect(	labeledDropdown.view.buttonView.isOn ).to.be.false;
-						expect(	labeledDropdown.view.buttonView.withText ).to.be.true;
-						expect(	labeledDropdown.view.buttonView.tooltip ).to.equal( 'Style' );
-					} );
+				expect( header.classList.contains( 'ck' ) ).to.be.true;
+				expect( header.classList.contains( 'ck-form__header' ) ).to.be.true;
+				expect( header.textContent ).to.equal( 'Cell properties' );
+			} );
 
-					it( 'should bind button\'s label to #borderStyle property', () => {
-						view.borderStyle = 'dotted';
-						expect( labeledDropdown.view.buttonView.label ).to.equal( 'Dotted' );
+			describe( 'form rows', () => {
+				describe( 'border row', () => {
+					it( 'should be defined', () => {
+						const row = view.element.childNodes[ 1 ];
 
-						view.borderStyle = 'dashed';
-						expect( labeledDropdown.view.buttonView.label ).to.equal( 'Dashed' );
+						expect( row.classList.contains( 'ck-form__row' ) ).to.be.true;
+						expect( row.classList.contains( 'ck-table-cell-properties-form__border-row' ) ).to.be.true;
+						expect( row.childNodes[ 0 ].textContent ).to.equal( 'Border' );
+						expect( row.childNodes[ 1 ] ).to.equal( view.borderStyleDropdown.element );
+						expect( row.childNodes[ 2 ] ).to.equal( view.borderColorInput.element );
+						expect( row.childNodes[ 3 ] ).to.equal( view.borderWidthInput.element );
 					} );
 
-					it( 'should change #borderStyle when executed', () => {
-						labeledDropdown.view.listView.items.first.children.first.fire( 'execute' );
-						expect( view.borderStyle ).to.equal( 'none' );
+					describe( 'border style labeled dropdown', () => {
+						let labeledDropdown;
 
-						labeledDropdown.view.listView.items.last.children.first.fire( 'execute' );
-						expect( view.borderStyle ).to.equal( 'outset' );
-					} );
+						beforeEach( () => {
+							labeledDropdown = view.borderStyleDropdown;
+						} );
 
-					it( 'should come with a set of pre–defined border styles', () => {
-						expect( labeledDropdown.view.listView.items.map( item => item.children.first.label ) ).to.have.ordered.members( [
-							'None', 'Solid', 'Dotted', 'Dashed', 'Double', 'Groove', 'Ridge', 'Inset', 'Outset',
-						] );
-					} );
-				} );
+						it( 'should have properties set', () => {
+							expect(	labeledDropdown.label ).to.equal( 'Style' );
+							expect(	labeledDropdown.class ).to.equal( 'ck-table-cell-properties-form__border-style' );
+						} );
 
-				describe( 'border width input', () => {
-					let labeledInput;
+						it( 'should have a button with properties set', () => {
+							expect(	labeledDropdown.view.buttonView.isOn ).to.be.false;
+							expect(	labeledDropdown.view.buttonView.withText ).to.be.true;
+							expect(	labeledDropdown.view.buttonView.tooltip ).to.equal( 'Style' );
+						} );
+
+						it( 'should bind button\'s label to #borderStyle property', () => {
+							view.borderStyle = 'dotted';
+							expect( labeledDropdown.view.buttonView.label ).to.equal( 'Dotted' );
 
-					beforeEach( () => {
-						labeledInput = view.borderWidthInput;
-					} );
+							view.borderStyle = 'dashed';
+							expect( labeledDropdown.view.buttonView.label ).to.equal( 'Dashed' );
+						} );
 
-					it( 'should be created', () => {
-						expect( labeledInput.view ).to.be.instanceOf( InputTextView );
-						expect( labeledInput.label ).to.equal( 'Width' );
-						expect( labeledInput.class ).to.equal( 'ck-table-cell-properties-form__border-width' );
-					} );
+						it( 'should change #borderStyle when executed', () => {
+							labeledDropdown.view.listView.items.first.children.first.fire( 'execute' );
+							expect( view.borderStyle ).to.equal( 'none' );
 
-					it( 'should reflect #borderWidth property', () => {
-						view.borderWidth = 'foo';
-						expect( labeledInput.view.value ).to.equal( 'foo' );
+							labeledDropdown.view.listView.items.last.children.first.fire( 'execute' );
+							expect( view.borderStyle ).to.equal( 'outset' );
+						} );
 
-						view.borderWidth = 'bar';
-						expect( labeledInput.view.value ).to.equal( 'bar' );
+						it( 'should come with a set of pre–defined border styles', () => {
+							expect( labeledDropdown.view.listView.items.map( item => {
+								return item.children.first.label;
+							} ) ).to.have.ordered.members( [
+								'None', 'Solid', 'Dotted', 'Dashed', 'Double', 'Groove', 'Ridge', 'Inset', 'Outset',
+							] );
+						} );
 					} );
 
-					it( 'should be enabled only when #borderStyle is different than "none"', () => {
-						view.borderStyle = 'none';
-						expect( labeledInput.isEnabled ).to.be.false;
+					describe( 'border width input', () => {
+						let labeledInput;
 
-						view.borderStyle = 'dotted';
-						expect( labeledInput.isEnabled ).to.be.true;
-					} );
+						beforeEach( () => {
+							labeledInput = view.borderWidthInput;
+						} );
 
-					it( 'should update #borderWidth on DOM "input" event', () => {
-						labeledInput.view.element.value = 'foo';
-						labeledInput.view.fire( 'input' );
-						expect( view.borderWidth ).to.equal( 'foo' );
+						it( 'should be created', () => {
+							expect( labeledInput.view ).to.be.instanceOf( InputTextView );
+							expect( labeledInput.label ).to.equal( 'Width' );
+							expect( labeledInput.class ).to.equal( 'ck-table-cell-properties-form__border-width' );
+						} );
 
-						labeledInput.view.element.value = 'bar';
-						labeledInput.view.fire( 'input' );
-						expect( view.borderWidth ).to.equal( 'bar' );
-					} );
-				} );
+						it( 'should reflect #borderWidth property', () => {
+							view.borderWidth = 'foo';
+							expect( labeledInput.view.value ).to.equal( 'foo' );
 
-				describe( 'border color input', () => {
-					let labeledInput;
+							view.borderWidth = 'bar';
+							expect( labeledInput.view.value ).to.equal( 'bar' );
+						} );
 
-					beforeEach( () => {
-						labeledInput = view.borderColorInput;
-					} );
+						it( 'should be enabled only when #borderStyle is different than "none"', () => {
+							view.borderStyle = 'none';
+							expect( labeledInput.isEnabled ).to.be.false;
 
-					it( 'should be created', () => {
-						expect( labeledInput.view ).to.be.instanceOf( InputTextView );
-						expect( labeledInput.label ).to.equal( 'Color' );
-					} );
+							view.borderStyle = 'dotted';
+							expect( labeledInput.isEnabled ).to.be.true;
+						} );
 
-					it( 'should reflect #borderColor property', () => {
-						view.borderColor = 'foo';
-						expect( labeledInput.view.value ).to.equal( 'foo' );
+						it( 'should update #borderWidth on DOM "input" event', () => {
+							labeledInput.view.element.value = 'foo';
+							labeledInput.view.fire( 'input' );
+							expect( view.borderWidth ).to.equal( 'foo' );
 
-						view.borderColor = 'bar';
-						expect( labeledInput.view.value ).to.equal( 'bar' );
+							labeledInput.view.element.value = 'bar';
+							labeledInput.view.fire( 'input' );
+							expect( view.borderWidth ).to.equal( 'bar' );
+						} );
 					} );
 
-					it( 'should be enabled only when #borderStyle is different than "none"', () => {
-						view.borderStyle = 'none';
-						expect( labeledInput.isEnabled ).to.be.false;
+					describe( 'border color input', () => {
+						let labeledInput;
 
-						view.borderStyle = 'dotted';
-						expect( labeledInput.isEnabled ).to.be.true;
-					} );
+						beforeEach( () => {
+							labeledInput = view.borderColorInput;
+						} );
 
-					it( 'should update #borderColor on DOM "input" event', () => {
-						labeledInput.view.element.value = 'foo';
-						labeledInput.view.fire( 'input' );
-						expect( view.borderColor ).to.equal( 'foo' );
+						it( 'should be created', () => {
+							expect( labeledInput.view ).to.be.instanceOf( InputTextView );
+							expect( labeledInput.label ).to.equal( 'Color' );
+						} );
 
-						labeledInput.view.element.value = 'bar';
-						labeledInput.view.fire( 'input' );
-						expect( view.borderColor ).to.equal( 'bar' );
-					} );
-				} );
-			} );
-
-			describe( 'background and padding row', () => {
-				it( 'should be defined', () => {
-					const row = view.element.childNodes[ 2 ];
+						it( 'should reflect #borderColor property', () => {
+							view.borderColor = 'foo';
+							expect( labeledInput.view.value ).to.equal( 'foo' );
 
-					expect( row.classList.contains( 'ck-form__row' ) ).to.be.true;
-					expect( row.childNodes[ 0 ] ).to.equal( view.backgroundInput.element );
-					expect( row.childNodes[ 1 ] ).to.equal( view.paddingInput.element );
-				} );
-
-				describe( 'background color input', () => {
-					let labeledInput;
+							view.borderColor = 'bar';
+							expect( labeledInput.view.value ).to.equal( 'bar' );
+						} );
 
-					beforeEach( () => {
-						labeledInput = view.backgroundInput;
-					} );
+						it( 'should be enabled only when #borderStyle is different than "none"', () => {
+							view.borderStyle = 'none';
+							expect( labeledInput.isEnabled ).to.be.false;
 
-					it( 'should be created', () => {
-						expect( labeledInput.view ).to.be.instanceOf( InputTextView );
-						expect( labeledInput.label ).to.equal( 'Background' );
-						expect( labeledInput.class ).to.equal( 'ck-table-cell-properties-form__background' );
-					} );
+							view.borderStyle = 'dotted';
+							expect( labeledInput.isEnabled ).to.be.true;
+						} );
 
-					it( 'should reflect #backgroundColor property', () => {
-						view.backgroundColor = 'foo';
-						expect( labeledInput.view.value ).to.equal( 'foo' );
+						it( 'should update #borderColor on DOM "input" event', () => {
+							labeledInput.view.element.value = 'foo';
+							labeledInput.view.fire( 'input' );
+							expect( view.borderColor ).to.equal( 'foo' );
 
-						view.backgroundColor = 'bar';
-						expect( labeledInput.view.value ).to.equal( 'bar' );
+							labeledInput.view.element.value = 'bar';
+							labeledInput.view.fire( 'input' );
+							expect( view.borderColor ).to.equal( 'bar' );
+						} );
 					} );
+				} );
 
-					it( 'should update #backgroundColor on DOM "input" event', () => {
-						labeledInput.view.element.value = 'foo';
-						labeledInput.view.fire( 'input' );
-						expect( view.backgroundColor ).to.equal( 'foo' );
+				describe( 'background and padding row', () => {
+					it( 'should be defined', () => {
+						const row = view.element.childNodes[ 2 ];
 
-						labeledInput.view.element.value = 'bar';
-						labeledInput.view.fire( 'input' );
-						expect( view.backgroundColor ).to.equal( 'bar' );
+						expect( row.classList.contains( 'ck-form__row' ) ).to.be.true;
+						expect( row.childNodes[ 0 ] ).to.equal( view.backgroundInput.element );
+						expect( row.childNodes[ 1 ] ).to.equal( view.paddingInput.element );
 					} );
-				} );
 
-				describe( 'padding input', () => {
-					let labeledInput;
+					describe( 'background color input', () => {
+						let labeledInput;
 
-					beforeEach( () => {
-						labeledInput = view.paddingInput;
-					} );
+						beforeEach( () => {
+							labeledInput = view.backgroundInput;
+						} );
 
-					it( 'should be created', () => {
-						expect( labeledInput.view ).to.be.instanceOf( InputTextView );
-						expect( labeledInput.label ).to.equal( 'Padding' );
-						expect( labeledInput.class ).to.equal( 'ck-table-cell-properties-form__padding' );
-					} );
+						it( 'should be created', () => {
+							expect( labeledInput.view ).to.be.instanceOf( InputTextView );
+							expect( labeledInput.label ).to.equal( 'Background' );
+							expect( labeledInput.class ).to.equal( 'ck-table-cell-properties-form__background' );
+						} );
 
-					it( 'should reflect #padding property', () => {
-						view.padding = 'foo';
-						expect( labeledInput.view.value ).to.equal( 'foo' );
+						it( 'should reflect #backgroundColor property', () => {
+							view.backgroundColor = 'foo';
+							expect( labeledInput.view.value ).to.equal( 'foo' );
 
-						view.padding = 'bar';
-						expect( labeledInput.view.value ).to.equal( 'bar' );
-					} );
+							view.backgroundColor = 'bar';
+							expect( labeledInput.view.value ).to.equal( 'bar' );
+						} );
 
-					it( 'should update #padding on DOM "input" event', () => {
-						labeledInput.view.element.value = 'foo';
-						labeledInput.view.fire( 'input' );
-						expect( view.padding ).to.equal( 'foo' );
+						it( 'should update #backgroundColor on DOM "input" event', () => {
+							labeledInput.view.element.value = 'foo';
+							labeledInput.view.fire( 'input' );
+							expect( view.backgroundColor ).to.equal( 'foo' );
 
-						labeledInput.view.element.value = 'bar';
-						labeledInput.view.fire( 'input' );
-						expect( view.padding ).to.equal( 'bar' );
+							labeledInput.view.element.value = 'bar';
+							labeledInput.view.fire( 'input' );
+							expect( view.backgroundColor ).to.equal( 'bar' );
+						} );
 					} );
-				} );
-			} );
 
-			describe( 'text alignment row', () => {
-				it( 'should be defined', () => {
-					const row = view.element.childNodes[ 3 ];
+					describe( 'padding input', () => {
+						let labeledInput;
 
-					expect( row.classList.contains( 'ck-form__row' ) ).to.be.true;
-					expect( row.classList.contains( 'ck-table-cell-properties-form__alignment-row' ) ).to.be.true;
-					expect( row.childNodes[ 0 ].textContent ).to.equal( 'Text alignment' );
-					expect( row.childNodes[ 1 ] ).to.equal( view.horizontalAlignmentToolbar.element );
-					expect( row.childNodes[ 2 ] ).to.equal( view.verticalAlignmentToolbar.element );
-				} );
+						beforeEach( () => {
+							labeledInput = view.paddingInput;
+						} );
 
-				describe( 'horizontal text alignment toolbar', () => {
-					let toolbar;
+						it( 'should be created', () => {
+							expect( labeledInput.view ).to.be.instanceOf( InputTextView );
+							expect( labeledInput.label ).to.equal( 'Padding' );
+							expect( labeledInput.class ).to.equal( 'ck-table-cell-properties-form__padding' );
+						} );
 
-					beforeEach( () => {
-						toolbar = view.horizontalAlignmentToolbar;
-					} );
+						it( 'should reflect #padding property', () => {
+							view.padding = 'foo';
+							expect( labeledInput.view.value ).to.equal( 'foo' );
 
-					it( 'should be defined', () => {
-						expect( toolbar ).to.be.instanceOf( ToolbarView );
-					} );
+							view.padding = 'bar';
+							expect( labeledInput.view.value ).to.equal( 'bar' );
+						} );
 
-					it( 'should have an ARIA label', () => {
-						expect( toolbar.ariaLabel ).to.equal( 'Horizontal text alignment toolbar' );
-					} );
+						it( 'should update #padding on DOM "input" event', () => {
+							labeledInput.view.element.value = 'foo';
+							labeledInput.view.fire( 'input' );
+							expect( view.padding ).to.equal( 'foo' );
 
-					it( 'should bring alignment buttons', () => {
-						expect( toolbar.items.map( ( { label } ) => label ) ).to.have.ordered.members( [
-							'Align cell text to the left',
-							'Align cell text to the center',
-							'Align cell text to the right',
-							'Justify cell text',
-						] );
-
-						expect( toolbar.items.map( ( { isOn } ) => isOn ) ).to.have.ordered.members( [
-							true, false, false, false
-						] );
+							labeledInput.view.element.value = 'bar';
+							labeledInput.view.fire( 'input' );
+							expect( view.padding ).to.equal( 'bar' );
+						} );
 					} );
+				} );
 
-					it( 'should change the #horizontalAlignment value', () => {
-						toolbar.items.last.fire( 'execute' );
-						expect( view.horizontalAlignment ).to.equal( 'justify' );
-						expect( toolbar.items.last.isOn ).to.be.true;
-
-						toolbar.items.first.fire( 'execute' );
-						expect( view.horizontalAlignment ).to.equal( 'left' );
-						expect( toolbar.items.last.isOn ).to.be.false;
-						expect( toolbar.items.first.isOn ).to.be.true;
+				describe( 'text alignment row', () => {
+					it( 'should be defined', () => {
+						const row = view.element.childNodes[ 3 ];
+
+						expect( row.classList.contains( 'ck-form__row' ) ).to.be.true;
+						expect( row.classList.contains( 'ck-table-cell-properties-form__alignment-row' ) ).to.be.true;
+						expect( row.childNodes[ 0 ].textContent ).to.equal( 'Text alignment' );
+						expect( row.childNodes[ 1 ] ).to.equal( view.horizontalAlignmentToolbar.element );
+						expect( row.childNodes[ 2 ] ).to.equal( view.verticalAlignmentToolbar.element );
+					} );
+
+					describe( 'horizontal text alignment toolbar', () => {
+						let toolbar;
+
+						beforeEach( () => {
+							toolbar = view.horizontalAlignmentToolbar;
+						} );
+
+						it( 'should be defined', () => {
+							expect( toolbar ).to.be.instanceOf( ToolbarView );
+						} );
+
+						it( 'should have an ARIA label', () => {
+							expect( toolbar.ariaLabel ).to.equal( 'Horizontal text alignment toolbar' );
+						} );
+
+						it( 'should bring alignment buttons', () => {
+							expect( toolbar.items.map( ( { label } ) => label ) ).to.have.ordered.members( [
+								'Align cell text to the left',
+								'Align cell text to the center',
+								'Align cell text to the right',
+								'Justify cell text',
+							] );
+
+							expect( toolbar.items.map( ( { isOn } ) => isOn ) ).to.have.ordered.members( [
+								true, false, false, false
+							] );
+						} );
+
+						it( 'should change the #horizontalAlignment value', () => {
+							toolbar.items.last.fire( 'execute' );
+							expect( view.horizontalAlignment ).to.equal( 'justify' );
+							expect( toolbar.items.last.isOn ).to.be.true;
+
+							toolbar.items.first.fire( 'execute' );
+							expect( view.horizontalAlignment ).to.equal( 'left' );
+							expect( toolbar.items.last.isOn ).to.be.false;
+							expect( toolbar.items.first.isOn ).to.be.true;
+						} );
+					} );
+
+					describe( 'vertical text alignment toolbar', () => {
+						let toolbar;
+
+						beforeEach( () => {
+							toolbar = view.verticalAlignmentToolbar;
+						} );
+
+						it( 'should be defined', () => {
+							expect( toolbar ).to.be.instanceOf( ToolbarView );
+						} );
+
+						it( 'should have an ARIA label', () => {
+							expect( toolbar.ariaLabel ).to.equal( 'Vertical text alignment toolbar' );
+						} );
+
+						it( 'should bring alignment buttons', () => {
+							expect( toolbar.items.map( ( { label } ) => label ) ).to.have.ordered.members( [
+								'Align cell text to the top',
+								'Align cell text to the middle',
+								'Align cell text to the bottom',
+							] );
+
+							expect( toolbar.items.map( ( { isOn } ) => isOn ) ).to.have.ordered.members( [
+								false, true, false
+							] );
+						} );
+
+						it( 'should change the #verticalAlignment value', () => {
+							toolbar.items.last.fire( 'execute' );
+							expect( view.verticalAlignment ).to.equal( 'bottom' );
+							expect( toolbar.items.last.isOn ).to.be.true;
+
+							toolbar.items.first.fire( 'execute' );
+							expect( view.verticalAlignment ).to.equal( 'top' );
+							expect( toolbar.items.last.isOn ).to.be.false;
+							expect( toolbar.items.first.isOn ).to.be.true;
+						} );
 					} );
 				} );
 
-				describe( 'vertical text alignment toolbar', () => {
-					let toolbar;
+				describe( 'action row', () => {
+					it( 'should be defined', () => {
+						const row = view.element.childNodes[ 4 ];
 
-					beforeEach( () => {
-						toolbar = view.verticalAlignmentToolbar;
+						expect( row.classList.contains( 'ck-form__row' ) ).to.be.true;
+						expect( row.classList.contains( 'ck-table-form__action-row' ) ).to.be.true;
+						expect( row.childNodes[ 0 ] ).to.equal( view.saveButtonView.element );
+						expect( row.childNodes[ 1 ] ).to.equal( view.cancelButtonView.element );
 					} );
 
-					it( 'should be defined', () => {
-						expect( toolbar ).to.be.instanceOf( ToolbarView );
-					} );
+					it( 'should have buttons with right properties', () => {
+						expect( view.saveButtonView.label ).to.equal( 'Save' );
+						expect( view.saveButtonView.type ).to.equal( 'submit' );
+						expect( view.saveButtonView.withText ).to.be.true;
+						expect( view.saveButtonView.class ).to.equal( 'ck-button-save' );
 
-					it( 'should have an ARIA label', () => {
-						expect( toolbar.ariaLabel ).to.equal( 'Vertical text alignment toolbar' );
+						expect( view.cancelButtonView.label ).to.equal( 'Cancel' );
+						expect( view.cancelButtonView.withText ).to.be.true;
+						expect( view.cancelButtonView.class ).to.equal( 'ck-button-cancel' );
 					} );
 
-					it( 'should bring alignment buttons', () => {
-						expect( toolbar.items.map( ( { label } ) => label ) ).to.have.ordered.members( [
-							'Align cell text to the top',
-							'Align cell text to the middle',
-							'Align cell text to the bottom',
-						] );
+					it( 'should make the cancel button fire the #cancel event when executed', () => {
+						const spy = sinon.spy();
 
-						expect( toolbar.items.map( ( { isOn } ) => isOn ) ).to.have.ordered.members( [
-							false, true, false
-						] );
-					} );
+						view.on( 'cancel', spy );
 
-					it( 'should change the #verticalAlignment value', () => {
-						toolbar.items.last.fire( 'execute' );
-						expect( view.verticalAlignment ).to.equal( 'bottom' );
-						expect( toolbar.items.last.isOn ).to.be.true;
+						view.cancelButtonView.fire( 'execute' );
 
-						toolbar.items.first.fire( 'execute' );
-						expect( view.verticalAlignment ).to.equal( 'top' );
-						expect( toolbar.items.last.isOn ).to.be.false;
-						expect( toolbar.items.first.isOn ).to.be.true;
+						expect( spy.calledOnce ).to.be.true;
 					} );
 				} );
 			} );
 
-			describe( 'action row', () => {
-				it( 'should be defined', () => {
-					const row = view.element.childNodes[ 4 ];
-
-					expect( row.classList.contains( 'ck-form__row' ) ).to.be.true;
-					expect( row.classList.contains( 'ck-table-form__action-row' ) ).to.be.true;
-					expect( row.childNodes[ 0 ] ).to.equal( view.saveButtonView.element );
-					expect( row.childNodes[ 1 ] ).to.equal( view.cancelButtonView.element );
-				} );
-
-				it( 'should have buttons with right properties', () => {
-					expect( view.saveButtonView.label ).to.equal( 'Save' );
-					expect( view.saveButtonView.type ).to.equal( 'submit' );
-					expect( view.saveButtonView.withText ).to.be.true;
-					expect( view.saveButtonView.class ).to.equal( 'ck-button-save' );
-
-					expect( view.cancelButtonView.label ).to.equal( 'Cancel' );
-					expect( view.cancelButtonView.withText ).to.be.true;
-					expect( view.cancelButtonView.class ).to.equal( 'ck-button-cancel' );
-				} );
-
-				it( 'should make the cancel button fire the #cancel event when executed', () => {
-					const spy = sinon.spy();
-
-					view.on( 'cancel', spy );
-
-					view.cancelButtonView.fire( 'execute' );
-
-					expect( spy.calledOnce ).to.be.true;
-				} );
+			it( 'should create #focusTracker instance', () => {
+				expect( view.focusTracker ).to.be.instanceOf( FocusTracker );
 			} );
-		} );
 
-		it( 'should create #focusTracker instance', () => {
-			expect( view.focusTracker ).to.be.instanceOf( FocusTracker );
-		} );
-
-		it( 'should create #keystrokes instance', () => {
-			expect( view.keystrokes ).to.be.instanceOf( KeystrokeHandler );
-		} );
-
-		it( 'should create #_focusCycler instance', () => {
-			expect( view._focusCycler ).to.be.instanceOf( FocusCycler );
-		} );
+			it( 'should create #keystrokes instance', () => {
+				expect( view.keystrokes ).to.be.instanceOf( KeystrokeHandler );
+			} );
 
-		it( 'should create #_focusables view collection', () => {
-			expect( view._focusables ).to.be.instanceOf( ViewCollection );
-		} );
-	} );
+			it( 'should create #_focusCycler instance', () => {
+				expect( view._focusCycler ).to.be.instanceOf( FocusCycler );
+			} );
 
-	describe( 'render()', () => {
-		it( 'should register child views in #_focusables', () => {
-			expect( view._focusables.map( f => f ) ).to.have.members( [
-				view.borderStyleDropdown,
-				view.borderColorInput,
-				view.borderWidthInput,
-				view.backgroundInput,
-				view.paddingInput,
-				view.horizontalAlignmentToolbar,
-				view.verticalAlignmentToolbar,
-				view.saveButtonView,
-				view.cancelButtonView
-			] );
+			it( 'should create #_focusables view collection', () => {
+				expect( view._focusables ).to.be.instanceOf( ViewCollection );
+			} );
 		} );
 
-		it( 'should register child views\' #element in #focusTracker', () => {
-			const spy = testUtils.sinon.spy( FocusTracker.prototype, 'add' );
-			const view = new TableCellPropertiesView( { t: val => val } );
-			view.render();
-
-			sinon.assert.calledWith( spy, view.borderStyleDropdown.element );
-			sinon.assert.calledWith( spy, view.borderColorInput.element );
-			sinon.assert.calledWith( spy, view.borderWidthInput.element );
-			sinon.assert.calledWith( spy, view.backgroundInput.element );
-			sinon.assert.calledWith( spy, view.paddingInput.element );
-			sinon.assert.calledWith( spy, view.horizontalAlignmentToolbar.element );
-			sinon.assert.calledWith( spy, view.verticalAlignmentToolbar.element );
-			sinon.assert.calledWith( spy, view.saveButtonView.element );
-			sinon.assert.calledWith( spy, view.cancelButtonView.element );
+		describe( 'render()', () => {
+			it( 'should register child views in #_focusables', () => {
+				expect( view._focusables.map( f => f ) ).to.have.members( [
+					view.borderStyleDropdown,
+					view.borderColorInput,
+					view.borderWidthInput,
+					view.backgroundInput,
+					view.paddingInput,
+					view.horizontalAlignmentToolbar,
+					view.verticalAlignmentToolbar,
+					view.saveButtonView,
+					view.cancelButtonView
+				] );
+			} );
 
-			view.destroy();
-		} );
+			it( 'should register child views\' #element in #focusTracker', () => {
+				const spy = testUtils.sinon.spy( FocusTracker.prototype, 'add' );
+				const view = new TableCellPropertiesView( { t: val => val } );
+				view.render();
+
+				sinon.assert.calledWith( spy, view.borderStyleDropdown.element );
+				sinon.assert.calledWith( spy, view.borderColorInput.element );
+				sinon.assert.calledWith( spy, view.borderWidthInput.element );
+				sinon.assert.calledWith( spy, view.backgroundInput.element );
+				sinon.assert.calledWith( spy, view.paddingInput.element );
+				sinon.assert.calledWith( spy, view.horizontalAlignmentToolbar.element );
+				sinon.assert.calledWith( spy, view.verticalAlignmentToolbar.element );
+				sinon.assert.calledWith( spy, view.saveButtonView.element );
+				sinon.assert.calledWith( spy, view.cancelButtonView.element );
+
+				view.destroy();
+			} );
 
-		it( 'starts listening for #keystrokes coming from #element', () => {
-			const view = new TableCellPropertiesView( { t: val => val } );
-			const spy = sinon.spy( view.keystrokes, 'listenTo' );
+			it( 'starts listening for #keystrokes coming from #element', () => {
+				const view = new TableCellPropertiesView( { t: val => val } );
+				const spy = sinon.spy( view.keystrokes, 'listenTo' );
 
-			view.render();
-			sinon.assert.calledOnce( spy );
-			sinon.assert.calledWithExactly( spy, view.element );
-		} );
+				view.render();
+				sinon.assert.calledOnce( spy );
+				sinon.assert.calledWithExactly( spy, view.element );
+			} );
 
-		describe( 'activates keyboard navigation for the form', () => {
-			it( 'so "tab" focuses the next focusable item', () => {
-				const keyEvtData = {
-					keyCode: keyCodes.tab,
-					preventDefault: sinon.spy(),
-					stopPropagation: sinon.spy()
-				};
+			describe( 'activates keyboard navigation for the form', () => {
+				it( 'so "tab" focuses the next focusable item', () => {
+					const keyEvtData = {
+						keyCode: keyCodes.tab,
+						preventDefault: sinon.spy(),
+						stopPropagation: sinon.spy()
+					};
 
-				// Mock the border style dropdown button is focused.
-				view.focusTracker.isFocused = true;
-				view.focusTracker.focusedElement = view.borderStyleDropdown.element;
+					// Mock the border style dropdown button is focused.
+					view.focusTracker.isFocused = true;
+					view.focusTracker.focusedElement = view.borderStyleDropdown.element;
 
-				const spy = sinon.spy( view.borderColorInput, 'focus' );
+					const spy = sinon.spy( view.borderColorInput, 'focus' );
 
-				view.keystrokes.press( keyEvtData );
-				sinon.assert.calledOnce( keyEvtData.preventDefault );
-				sinon.assert.calledOnce( keyEvtData.stopPropagation );
-				sinon.assert.calledOnce( spy );
-			} );
+					view.keystrokes.press( keyEvtData );
+					sinon.assert.calledOnce( keyEvtData.preventDefault );
+					sinon.assert.calledOnce( keyEvtData.stopPropagation );
+					sinon.assert.calledOnce( spy );
+				} );
 
-			it( 'so "shift + tab" focuses the previous focusable item', () => {
-				const keyEvtData = {
-					keyCode: keyCodes.tab,
-					shiftKey: true,
-					preventDefault: sinon.spy(),
-					stopPropagation: sinon.spy()
-				};
+				it( 'so "shift + tab" focuses the previous focusable item', () => {
+					const keyEvtData = {
+						keyCode: keyCodes.tab,
+						shiftKey: true,
+						preventDefault: sinon.spy(),
+						stopPropagation: sinon.spy()
+					};
 
-				// Mock the border style dropdown button is focused.
-				view.focusTracker.isFocused = true;
-				view.focusTracker.focusedElement = view.borderStyleDropdown.element;
+					// Mock the border style dropdown button is focused.
+					view.focusTracker.isFocused = true;
+					view.focusTracker.focusedElement = view.borderStyleDropdown.element;
 
-				const spy = sinon.spy( view.cancelButtonView, 'focus' );
+					const spy = sinon.spy( view.cancelButtonView, 'focus' );
 
-				view.keystrokes.press( keyEvtData );
-				sinon.assert.calledOnce( keyEvtData.preventDefault );
-				sinon.assert.calledOnce( keyEvtData.stopPropagation );
-				sinon.assert.calledOnce( spy );
+					view.keystrokes.press( keyEvtData );
+					sinon.assert.calledOnce( keyEvtData.preventDefault );
+					sinon.assert.calledOnce( keyEvtData.stopPropagation );
+					sinon.assert.calledOnce( spy );
+				} );
 			} );
 		} );
-	} );
 
-	describe( 'DOM bindings', () => {
-		describe( 'submit event', () => {
-			it( 'should trigger submit event', () => {
-				const spy = sinon.spy();
+		describe( 'DOM bindings', () => {
+			describe( 'submit event', () => {
+				it( 'should trigger submit event', () => {
+					const spy = sinon.spy();
 
-				view.on( 'submit', spy );
-				view.element.dispatchEvent( new Event( 'submit' ) );
+					view.on( 'submit', spy );
+					view.element.dispatchEvent( new Event( 'submit' ) );
 
-				expect( spy.calledOnce ).to.be.true;
+					expect( spy.calledOnce ).to.be.true;
+				} );
 			} );
 		} );
-	} );
 
-	describe( 'focus()', () => {
-		it( 'focuses the #borderStyleDropdown', () => {
-			const spy = sinon.spy( view.borderStyleDropdown, 'focus' );
+		describe( 'focus()', () => {
+			it( 'focuses the #borderStyleDropdown', () => {
+				const spy = sinon.spy( view.borderStyleDropdown, 'focus' );
 
-			view.focus();
+				view.focus();
 
-			sinon.assert.calledOnce( spy );
+				sinon.assert.calledOnce( spy );
+			} );
 		} );
 	} );
 } );