|
|
@@ -7,11 +7,11 @@
|
|
|
|
|
|
import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
|
|
|
import { _clear as clearTranslations, add as addTranslations } from '@ckeditor/ckeditor5-utils/src/translation-service';
|
|
|
-import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
|
|
|
import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
|
|
|
|
|
|
import TableEditing from '../src/tableediting';
|
|
|
import TableUI from '../src/tableui';
|
|
|
+import DropdownView from '@ckeditor/ckeditor5-ui/src/dropdown/dropdownview';
|
|
|
|
|
|
testUtils.createSinonSandbox();
|
|
|
|
|
|
@@ -46,108 +46,346 @@ describe( 'TableUI', () => {
|
|
|
return editor.destroy();
|
|
|
} );
|
|
|
|
|
|
- describe( 'insertTable button', () => {
|
|
|
+ describe( 'insertTable dropdown', () => {
|
|
|
let insertTable;
|
|
|
|
|
|
beforeEach( () => {
|
|
|
insertTable = editor.ui.componentFactory.create( 'insertTable' );
|
|
|
} );
|
|
|
|
|
|
- it( 'should register insertTable buton', () => {
|
|
|
- expect( insertTable ).to.be.instanceOf( ButtonView );
|
|
|
- expect( insertTable.isOn ).to.be.false;
|
|
|
- expect( insertTable.label ).to.equal( 'Insert table' );
|
|
|
- expect( insertTable.icon ).to.match( /<svg / );
|
|
|
+ it( 'should register insertTable button', () => {
|
|
|
+ expect( insertTable ).to.be.instanceOf( DropdownView );
|
|
|
+ expect( insertTable.buttonView.label ).to.equal( 'Insert table' );
|
|
|
+ expect( insertTable.buttonView.icon ).to.match( /<svg / );
|
|
|
} );
|
|
|
|
|
|
it( 'should bind to insertTable command', () => {
|
|
|
const command = editor.commands.get( 'insertTable' );
|
|
|
|
|
|
command.isEnabled = true;
|
|
|
- expect( insertTable.isOn ).to.be.false;
|
|
|
- expect( insertTable.isEnabled ).to.be.true;
|
|
|
+ expect( insertTable.buttonView.isOn ).to.be.false;
|
|
|
+ expect( insertTable.buttonView.isEnabled ).to.be.true;
|
|
|
|
|
|
command.isEnabled = false;
|
|
|
- expect( insertTable.isEnabled ).to.be.false;
|
|
|
+ expect( insertTable.buttonView.isEnabled ).to.be.false;
|
|
|
} );
|
|
|
|
|
|
it( 'should execute insertTable command on button execute event', () => {
|
|
|
const executeSpy = testUtils.sinon.spy( editor, 'execute' );
|
|
|
|
|
|
+ const tableSizeView = insertTable.panelView.children.get( 0 );
|
|
|
+
|
|
|
+ tableSizeView.rows = 2;
|
|
|
+ tableSizeView.columns = 7;
|
|
|
+
|
|
|
insertTable.fire( 'execute' );
|
|
|
|
|
|
sinon.assert.calledOnce( executeSpy );
|
|
|
- sinon.assert.calledWithExactly( executeSpy, 'insertTable' );
|
|
|
+ sinon.assert.calledWithExactly( executeSpy, 'insertTable', { rows: 2, columns: 7 } );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'should reset rows & columns on dropdown open', () => {
|
|
|
+ const tableSizeView = insertTable.panelView.children.get( 0 );
|
|
|
+
|
|
|
+ expect( tableSizeView.rows ).to.equal( 0 );
|
|
|
+ expect( tableSizeView.columns ).to.equal( 0 );
|
|
|
+
|
|
|
+ tableSizeView.rows = 2;
|
|
|
+ tableSizeView.columns = 2;
|
|
|
+
|
|
|
+ insertTable.buttonView.fire( 'open' );
|
|
|
+
|
|
|
+ expect( tableSizeView.rows ).to.equal( 0 );
|
|
|
+ expect( tableSizeView.columns ).to.equal( 0 );
|
|
|
} );
|
|
|
} );
|
|
|
|
|
|
- describe( 'insertRowBelow button', () => {
|
|
|
- let insertRow;
|
|
|
+ describe( 'tableRow dropdown', () => {
|
|
|
+ let dropdown;
|
|
|
|
|
|
beforeEach( () => {
|
|
|
- insertRow = editor.ui.componentFactory.create( 'insertRowBelow' );
|
|
|
+ dropdown = editor.ui.componentFactory.create( 'tableRow' );
|
|
|
} );
|
|
|
|
|
|
- it( 'should register insertRowBelow button', () => {
|
|
|
- expect( insertRow ).to.be.instanceOf( ButtonView );
|
|
|
- expect( insertRow.isOn ).to.be.false;
|
|
|
- expect( insertRow.label ).to.equal( 'Insert row' );
|
|
|
- expect( insertRow.icon ).to.match( /<svg / );
|
|
|
+ it( 'have button with proper properties set', () => {
|
|
|
+ expect( dropdown ).to.be.instanceOf( DropdownView );
|
|
|
+
|
|
|
+ const button = dropdown.buttonView;
|
|
|
+
|
|
|
+ expect( button.isOn ).to.be.false;
|
|
|
+ expect( button.tooltip ).to.be.true;
|
|
|
+ expect( button.label ).to.equal( 'Row' );
|
|
|
+ expect( button.icon ).to.match( /<svg / );
|
|
|
} );
|
|
|
|
|
|
- it( 'should bind to insertRow command', () => {
|
|
|
- const command = editor.commands.get( 'insertRowBelow' );
|
|
|
+ it( 'should have proper items in panel', () => {
|
|
|
+ const listView = dropdown.listView;
|
|
|
|
|
|
- command.isEnabled = true;
|
|
|
- expect( insertRow.isOn ).to.be.false;
|
|
|
- expect( insertRow.isEnabled ).to.be.true;
|
|
|
+ const labels = listView.items.map( ( { label } ) => label );
|
|
|
|
|
|
- command.isEnabled = false;
|
|
|
- expect( insertRow.isEnabled ).to.be.false;
|
|
|
+ expect( labels ).to.deep.equal( [ 'Header row', 'Insert row below', 'Insert row above', 'Delete row' ] );
|
|
|
} );
|
|
|
|
|
|
- it( 'should execute insertRow command on button execute event', () => {
|
|
|
- const executeSpy = testUtils.sinon.spy( editor, 'execute' );
|
|
|
+ it( 'should bind items in panel to proper commands', () => {
|
|
|
+ const items = dropdown.listView.items;
|
|
|
|
|
|
- insertRow.fire( 'execute' );
|
|
|
+ const setRowHeaderCommand = editor.commands.get( 'setRowHeader' );
|
|
|
+ const insertRowBelowCommand = editor.commands.get( 'insertRowBelow' );
|
|
|
+ const insertRowAboveCommand = editor.commands.get( 'insertRowAbove' );
|
|
|
+ const removeRowCommand = editor.commands.get( 'removeRow' );
|
|
|
|
|
|
- sinon.assert.calledOnce( executeSpy );
|
|
|
- sinon.assert.calledWithExactly( executeSpy, 'insertRowBelow' );
|
|
|
+ setRowHeaderCommand.isEnabled = true;
|
|
|
+ insertRowBelowCommand.isEnabled = true;
|
|
|
+ insertRowAboveCommand.isEnabled = true;
|
|
|
+ removeRowCommand.isEnabled = true;
|
|
|
+
|
|
|
+ expect( items.get( 0 ).isEnabled ).to.be.true;
|
|
|
+ expect( items.get( 1 ).isEnabled ).to.be.true;
|
|
|
+ expect( items.get( 2 ).isEnabled ).to.be.true;
|
|
|
+ expect( items.get( 3 ).isEnabled ).to.be.true;
|
|
|
+ expect( dropdown.buttonView.isEnabled ).to.be.true;
|
|
|
+
|
|
|
+ setRowHeaderCommand.isEnabled = false;
|
|
|
+
|
|
|
+ expect( items.get( 0 ).isEnabled ).to.be.false;
|
|
|
+ expect( dropdown.buttonView.isEnabled ).to.be.true;
|
|
|
+
|
|
|
+ insertRowBelowCommand.isEnabled = false;
|
|
|
+
|
|
|
+ expect( items.get( 1 ).isEnabled ).to.be.false;
|
|
|
+ expect( dropdown.buttonView.isEnabled ).to.be.true;
|
|
|
+
|
|
|
+ insertRowAboveCommand.isEnabled = false;
|
|
|
+ expect( items.get( 2 ).isEnabled ).to.be.false;
|
|
|
+ expect( dropdown.buttonView.isEnabled ).to.be.true;
|
|
|
+
|
|
|
+ removeRowCommand.isEnabled = false;
|
|
|
+
|
|
|
+ expect( items.get( 3 ).isEnabled ).to.be.false;
|
|
|
+ expect( dropdown.buttonView.isEnabled ).to.be.false;
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'should focus view after command execution', () => {
|
|
|
+ const focusSpy = testUtils.sinon.spy( editor.editing.view, 'focus' );
|
|
|
+
|
|
|
+ dropdown.listView.items.get( 0 ).fire( 'execute' );
|
|
|
+
|
|
|
+ sinon.assert.calledOnce( focusSpy );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'executes command when it\'s executed', () => {
|
|
|
+ const spy = sinon.stub( editor, 'execute' );
|
|
|
+
|
|
|
+ dropdown.listView.items.get( 0 ).fire( 'execute' );
|
|
|
+
|
|
|
+ expect( spy.calledOnce ).to.be.true;
|
|
|
+ expect( spy.args[ 0 ][ 0 ] ).to.equal( 'setRowHeader' );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'should bind set header row command value to dropdown item', () => {
|
|
|
+ const items = dropdown.listView.items;
|
|
|
+
|
|
|
+ const setRowHeaderCommand = editor.commands.get( 'setRowHeader' );
|
|
|
+
|
|
|
+ setRowHeaderCommand.value = false;
|
|
|
+ expect( items.get( 0 ).isActive ).to.be.false;
|
|
|
+
|
|
|
+ setRowHeaderCommand.value = true;
|
|
|
+ expect( items.get( 0 ).isActive ).to.be.true;
|
|
|
} );
|
|
|
} );
|
|
|
|
|
|
- describe( 'insertColumnAfter button', () => {
|
|
|
- let insertColumn;
|
|
|
+ describe( 'tableColumn dropdown', () => {
|
|
|
+ let dropdown;
|
|
|
|
|
|
beforeEach( () => {
|
|
|
- insertColumn = editor.ui.componentFactory.create( 'insertColumnAfter' );
|
|
|
+ dropdown = editor.ui.componentFactory.create( 'tableColumn' );
|
|
|
} );
|
|
|
|
|
|
- it( 'should register insertColumn buton', () => {
|
|
|
- expect( insertColumn ).to.be.instanceOf( ButtonView );
|
|
|
- expect( insertColumn.isOn ).to.be.false;
|
|
|
- expect( insertColumn.label ).to.equal( 'Insert column' );
|
|
|
- expect( insertColumn.icon ).to.match( /<svg / );
|
|
|
+ it( 'have button with proper properties set', () => {
|
|
|
+ expect( dropdown ).to.be.instanceOf( DropdownView );
|
|
|
+
|
|
|
+ const button = dropdown.buttonView;
|
|
|
+
|
|
|
+ expect( button.isOn ).to.be.false;
|
|
|
+ expect( button.tooltip ).to.be.true;
|
|
|
+ expect( button.label ).to.equal( 'Column' );
|
|
|
+ expect( button.icon ).to.match( /<svg / );
|
|
|
} );
|
|
|
|
|
|
- it( 'should bind to insertColumn command', () => {
|
|
|
- const command = editor.commands.get( 'insertColumnAfter' );
|
|
|
+ it( 'should have proper items in panel', () => {
|
|
|
+ const listView = dropdown.listView;
|
|
|
|
|
|
- command.isEnabled = true;
|
|
|
- expect( insertColumn.isOn ).to.be.false;
|
|
|
- expect( insertColumn.isEnabled ).to.be.true;
|
|
|
+ const labels = listView.items.map( ( { label } ) => label );
|
|
|
|
|
|
- command.isEnabled = false;
|
|
|
- expect( insertColumn.isEnabled ).to.be.false;
|
|
|
+ expect( labels ).to.deep.equal( [ 'Header column', 'Insert column before', 'Insert column after', 'Delete column' ] );
|
|
|
} );
|
|
|
|
|
|
- it( 'should execute insertColumn command on button execute event', () => {
|
|
|
- const executeSpy = testUtils.sinon.spy( editor, 'execute' );
|
|
|
+ it( 'should bind items in panel to proper commands', () => {
|
|
|
+ const items = dropdown.listView.items;
|
|
|
|
|
|
- insertColumn.fire( 'execute' );
|
|
|
+ const setColumnHeaderCommand = editor.commands.get( 'setColumnHeader' );
|
|
|
+ const insertColumnBeforeCommand = editor.commands.get( 'insertColumnBefore' );
|
|
|
+ const insertColumnAfterCommand = editor.commands.get( 'insertColumnAfter' );
|
|
|
+ const removeColumnCommand = editor.commands.get( 'removeColumn' );
|
|
|
|
|
|
- sinon.assert.calledOnce( executeSpy );
|
|
|
- sinon.assert.calledWithExactly( executeSpy, 'insertColumnAfter' );
|
|
|
+ setColumnHeaderCommand.isEnabled = true;
|
|
|
+ insertColumnBeforeCommand.isEnabled = true;
|
|
|
+ insertColumnAfterCommand.isEnabled = true;
|
|
|
+ removeColumnCommand.isEnabled = true;
|
|
|
+
|
|
|
+ expect( items.get( 0 ).isEnabled ).to.be.true;
|
|
|
+ expect( items.get( 1 ).isEnabled ).to.be.true;
|
|
|
+ expect( items.get( 2 ).isEnabled ).to.be.true;
|
|
|
+ expect( items.get( 3 ).isEnabled ).to.be.true;
|
|
|
+ expect( dropdown.buttonView.isEnabled ).to.be.true;
|
|
|
+
|
|
|
+ setColumnHeaderCommand.isEnabled = false;
|
|
|
+
|
|
|
+ expect( items.get( 0 ).isEnabled ).to.be.false;
|
|
|
+ expect( dropdown.buttonView.isEnabled ).to.be.true;
|
|
|
+
|
|
|
+ insertColumnBeforeCommand.isEnabled = false;
|
|
|
+
|
|
|
+ expect( items.get( 1 ).isEnabled ).to.be.false;
|
|
|
+ expect( dropdown.buttonView.isEnabled ).to.be.true;
|
|
|
+
|
|
|
+ insertColumnAfterCommand.isEnabled = false;
|
|
|
+ expect( items.get( 2 ).isEnabled ).to.be.false;
|
|
|
+
|
|
|
+ removeColumnCommand.isEnabled = false;
|
|
|
+ expect( items.get( 3 ).isEnabled ).to.be.false;
|
|
|
+ expect( dropdown.buttonView.isEnabled ).to.be.false;
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'should focus view after command execution', () => {
|
|
|
+ const focusSpy = testUtils.sinon.spy( editor.editing.view, 'focus' );
|
|
|
+
|
|
|
+ dropdown.listView.items.get( 0 ).fire( 'execute' );
|
|
|
+
|
|
|
+ sinon.assert.calledOnce( focusSpy );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'executes command when it\'s executed', () => {
|
|
|
+ const spy = sinon.stub( editor, 'execute' );
|
|
|
+
|
|
|
+ dropdown.listView.items.get( 0 ).fire( 'execute' );
|
|
|
+
|
|
|
+ expect( spy.calledOnce ).to.be.true;
|
|
|
+ expect( spy.args[ 0 ][ 0 ] ).to.equal( 'setColumnHeader' );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'should bind set header column command value to dropdown item', () => {
|
|
|
+ const items = dropdown.listView.items;
|
|
|
+
|
|
|
+ const setColumnHeaderCommand = editor.commands.get( 'setColumnHeader' );
|
|
|
+
|
|
|
+ setColumnHeaderCommand.value = false;
|
|
|
+ expect( items.get( 0 ).isActive ).to.be.false;
|
|
|
+
|
|
|
+ setColumnHeaderCommand.value = true;
|
|
|
+ expect( items.get( 0 ).isActive ).to.be.true;
|
|
|
+ } );
|
|
|
+ } );
|
|
|
+
|
|
|
+ describe( 'mergeCell dropdown', () => {
|
|
|
+ let dropdown;
|
|
|
+
|
|
|
+ beforeEach( () => {
|
|
|
+ dropdown = editor.ui.componentFactory.create( 'mergeCell' );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'have button with proper properties set', () => {
|
|
|
+ expect( dropdown ).to.be.instanceOf( DropdownView );
|
|
|
+
|
|
|
+ const button = dropdown.buttonView;
|
|
|
+
|
|
|
+ expect( button.isOn ).to.be.false;
|
|
|
+ expect( button.tooltip ).to.be.true;
|
|
|
+ expect( button.label ).to.equal( 'Merge cell' );
|
|
|
+ expect( button.icon ).to.match( /<svg / );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'should have proper items in panel', () => {
|
|
|
+ const listView = dropdown.listView;
|
|
|
+
|
|
|
+ const labels = listView.items.map( ( { label } ) => label );
|
|
|
+
|
|
|
+ expect( labels ).to.deep.equal( [
|
|
|
+ 'Merge cell up',
|
|
|
+ 'Merge cell right',
|
|
|
+ 'Merge cell down',
|
|
|
+ 'Merge cell left',
|
|
|
+ 'Split cell vertically',
|
|
|
+ 'Split cell horizontally'
|
|
|
+ ] );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'should bind items in panel to proper commands', () => {
|
|
|
+ const items = dropdown.listView.items;
|
|
|
+
|
|
|
+ const mergeCellUpCommand = editor.commands.get( 'mergeCellUp' );
|
|
|
+ const mergeCellRightCommand = editor.commands.get( 'mergeCellRight' );
|
|
|
+ const mergeCellDownCommand = editor.commands.get( 'mergeCellDown' );
|
|
|
+ const mergeCellLeftCommand = editor.commands.get( 'mergeCellLeft' );
|
|
|
+ const splitCellVerticallyCommand = editor.commands.get( 'splitCellVertically' );
|
|
|
+ const splitCellHorizontallyCommand = editor.commands.get( 'splitCellHorizontally' );
|
|
|
+
|
|
|
+ mergeCellUpCommand.isEnabled = true;
|
|
|
+ mergeCellRightCommand.isEnabled = true;
|
|
|
+ mergeCellDownCommand.isEnabled = true;
|
|
|
+ mergeCellLeftCommand.isEnabled = true;
|
|
|
+ splitCellVerticallyCommand.isEnabled = true;
|
|
|
+ splitCellHorizontallyCommand.isEnabled = true;
|
|
|
+
|
|
|
+ expect( items.get( 0 ).isEnabled ).to.be.true;
|
|
|
+ expect( items.get( 1 ).isEnabled ).to.be.true;
|
|
|
+ expect( items.get( 2 ).isEnabled ).to.be.true;
|
|
|
+ expect( items.get( 3 ).isEnabled ).to.be.true;
|
|
|
+ expect( items.get( 4 ).isEnabled ).to.be.true;
|
|
|
+ expect( items.get( 5 ).isEnabled ).to.be.true;
|
|
|
+ expect( dropdown.buttonView.isEnabled ).to.be.true;
|
|
|
+
|
|
|
+ mergeCellUpCommand.isEnabled = false;
|
|
|
+
|
|
|
+ expect( items.get( 0 ).isEnabled ).to.be.false;
|
|
|
+ expect( dropdown.buttonView.isEnabled ).to.be.true;
|
|
|
+
|
|
|
+ mergeCellRightCommand.isEnabled = false;
|
|
|
+
|
|
|
+ expect( items.get( 1 ).isEnabled ).to.be.false;
|
|
|
+ expect( dropdown.buttonView.isEnabled ).to.be.true;
|
|
|
+
|
|
|
+ mergeCellDownCommand.isEnabled = false;
|
|
|
+ expect( items.get( 2 ).isEnabled ).to.be.false;
|
|
|
+
|
|
|
+ mergeCellLeftCommand.isEnabled = false;
|
|
|
+ expect( items.get( 3 ).isEnabled ).to.be.false;
|
|
|
+
|
|
|
+ splitCellVerticallyCommand.isEnabled = false;
|
|
|
+ expect( items.get( 4 ).isEnabled ).to.be.false;
|
|
|
+
|
|
|
+ splitCellHorizontallyCommand.isEnabled = false;
|
|
|
+ expect( items.get( 5 ).isEnabled ).to.be.false;
|
|
|
+
|
|
|
+ expect( dropdown.buttonView.isEnabled ).to.be.false;
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'should focus view after command execution', () => {
|
|
|
+ const focusSpy = testUtils.sinon.spy( editor.editing.view, 'focus' );
|
|
|
+
|
|
|
+ dropdown.listView.items.get( 0 ).fire( 'execute' );
|
|
|
+
|
|
|
+ sinon.assert.calledOnce( focusSpy );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'executes command when it\'s executed', () => {
|
|
|
+ const spy = sinon.stub( editor, 'execute' );
|
|
|
+
|
|
|
+ dropdown.listView.items.get( 0 ).fire( 'execute' );
|
|
|
+
|
|
|
+ expect( spy.calledOnce ).to.be.true;
|
|
|
+ expect( spy.args[ 0 ][ 0 ] ).to.equal( 'mergeCellUp' );
|
|
|
} );
|
|
|
} );
|
|
|
} );
|