| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406 |
- /**
- * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
- /* global document */
- import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
- import { _clear as clearTranslations, add as addTranslations } from '@ckeditor/ckeditor5-utils/src/translation-service';
- import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
- import TableEditing from '../src/tableediting';
- import TableUI from '../src/tableui';
- import SwitchButtonView from '@ckeditor/ckeditor5-ui/src/button/switchbuttonview';
- import DropdownView from '@ckeditor/ckeditor5-ui/src/dropdown/dropdownview';
- import ListSeparatorView from '@ckeditor/ckeditor5-ui/src/list/listseparatorview';
- describe( 'TableUI', () => {
- let editor, element;
- testUtils.createSinonSandbox();
- before( () => {
- addTranslations( 'en', {} );
- addTranslations( 'pl', {} );
- } );
- after( () => {
- clearTranslations();
- } );
- beforeEach( () => {
- element = document.createElement( 'div' );
- document.body.appendChild( element );
- return ClassicTestEditor
- .create( element, {
- plugins: [ TableEditing, TableUI ]
- } )
- .then( newEditor => {
- editor = newEditor;
- } );
- } );
- afterEach( () => {
- element.remove();
- return editor.destroy();
- } );
- describe( 'insertTable dropdown', () => {
- let insertTable;
- beforeEach( () => {
- insertTable = editor.ui.componentFactory.create( 'insertTable' );
- } );
- 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.buttonView.isOn ).to.be.false;
- expect( insertTable.buttonView.isEnabled ).to.be.true;
- command.isEnabled = 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.first;
- tableSizeView.rows = 2;
- tableSizeView.columns = 7;
- insertTable.fire( 'execute' );
- sinon.assert.calledOnce( executeSpy );
- sinon.assert.calledWithExactly( executeSpy, 'insertTable', { rows: 2, columns: 7 } );
- } );
- it( 'should reset rows & columns on dropdown open', () => {
- const tableSizeView = insertTable.panelView.children.first;
- 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( 'tableRow dropdown', () => {
- let dropdown;
- beforeEach( () => {
- dropdown = editor.ui.componentFactory.create( 'tableRow' );
- } );
- 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 have proper items in panel', () => {
- const listView = dropdown.listView;
- const labels = listView.items.map( item => item instanceof ListSeparatorView ? '|' : item.children.first.label );
- expect( labels ).to.deep.equal( [ 'Header row', '|', 'Insert row below', 'Insert row above', 'Delete row' ] );
- } );
- it( 'should bind items in panel to proper commands', () => {
- const items = dropdown.listView.items;
- const setRowHeaderCommand = editor.commands.get( 'setTableRowHeader' );
- const insertRowBelowCommand = editor.commands.get( 'insertTableRowBelow' );
- const insertRowAboveCommand = editor.commands.get( 'insertTableRowAbove' );
- const removeRowCommand = editor.commands.get( 'removeTableRow' );
- setRowHeaderCommand.isEnabled = true;
- insertRowBelowCommand.isEnabled = true;
- insertRowAboveCommand.isEnabled = true;
- removeRowCommand.isEnabled = true;
- expect( items.first.children.first.isEnabled ).to.be.true;
- expect( items.get( 2 ).children.first.isEnabled ).to.be.true;
- expect( items.get( 3 ).children.first.isEnabled ).to.be.true;
- expect( items.get( 4 ).children.first.isEnabled ).to.be.true;
- expect( dropdown.buttonView.isEnabled ).to.be.true;
- setRowHeaderCommand.isEnabled = false;
- expect( items.first.children.first.isEnabled ).to.be.false;
- expect( dropdown.buttonView.isEnabled ).to.be.true;
- insertRowBelowCommand.isEnabled = false;
- expect( items.get( 2 ).children.first.isEnabled ).to.be.false;
- expect( dropdown.buttonView.isEnabled ).to.be.true;
- insertRowAboveCommand.isEnabled = false;
- expect( items.get( 3 ).children.first.isEnabled ).to.be.false;
- expect( dropdown.buttonView.isEnabled ).to.be.true;
- removeRowCommand.isEnabled = false;
- expect( items.get( 4 ).children.first.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.first.children.first.fire( 'execute' );
- sinon.assert.calledOnce( focusSpy );
- } );
- it( 'executes command when it\'s executed', () => {
- const spy = sinon.stub( editor, 'execute' );
- dropdown.listView.items.first.children.first.fire( 'execute' );
- expect( spy.calledOnce ).to.be.true;
- expect( spy.args[ 0 ][ 0 ] ).to.equal( 'setTableRowHeader' );
- } );
- it( 'should use a toggle switch for the setTableRowHeader item', () => {
- const items = dropdown.listView.items;
- expect( items.first.children.first ).to.be.instanceOf( SwitchButtonView );
- } );
- it( 'should bind set header row command value to dropdown item', () => {
- const items = dropdown.listView.items;
- const setRowHeaderCommand = editor.commands.get( 'setTableRowHeader' );
- setRowHeaderCommand.value = false;
- expect( items.first.children.first.isOn ).to.be.false;
- setRowHeaderCommand.value = true;
- expect( items.first.children.first.isOn ).to.be.true;
- } );
- } );
- describe( 'tableColumn dropdown', () => {
- let dropdown;
- beforeEach( () => {
- dropdown = editor.ui.componentFactory.create( 'tableColumn' );
- } );
- 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 have proper items in panel', () => {
- const listView = dropdown.listView;
- const labels = listView.items.map( item => item instanceof ListSeparatorView ? '|' : item.children.first.label );
- expect( labels ).to.deep.equal( [ 'Header column', '|', 'Insert column left', 'Insert column right', 'Delete column' ] );
- } );
- it( 'should bind items in panel to proper commands', () => {
- const items = dropdown.listView.items;
- const setColumnHeaderCommand = editor.commands.get( 'setTableColumnHeader' );
- const insertColumnLeftCommand = editor.commands.get( 'insertTableColumnLeft' );
- const insertColumnRightCommand = editor.commands.get( 'insertTableColumnRight' );
- const removeColumnCommand = editor.commands.get( 'removeTableColumn' );
- setColumnHeaderCommand.isEnabled = true;
- insertColumnLeftCommand.isEnabled = true;
- insertColumnRightCommand.isEnabled = true;
- removeColumnCommand.isEnabled = true;
- expect( items.first.children.first.isEnabled ).to.be.true;
- expect( items.get( 2 ).children.first.isEnabled ).to.be.true;
- expect( items.get( 3 ).children.first.isEnabled ).to.be.true;
- expect( items.get( 4 ).children.first.isEnabled ).to.be.true;
- expect( dropdown.buttonView.isEnabled ).to.be.true;
- setColumnHeaderCommand.isEnabled = false;
- expect( items.first.children.first.isEnabled ).to.be.false;
- expect( dropdown.buttonView.isEnabled ).to.be.true;
- insertColumnLeftCommand.isEnabled = false;
- expect( items.get( 2 ).children.first.isEnabled ).to.be.false;
- expect( dropdown.buttonView.isEnabled ).to.be.true;
- insertColumnRightCommand.isEnabled = false;
- expect( items.get( 3 ).children.first.isEnabled ).to.be.false;
- removeColumnCommand.isEnabled = false;
- expect( items.get( 4 ).children.first.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.first.children.first.fire( 'execute' );
- sinon.assert.calledOnce( focusSpy );
- } );
- it( 'executes command when it\'s executed', () => {
- const spy = sinon.stub( editor, 'execute' );
- dropdown.listView.items.first.children.first.fire( 'execute' );
- expect( spy.calledOnce ).to.be.true;
- expect( spy.args[ 0 ][ 0 ] ).to.equal( 'setTableColumnHeader' );
- } );
- it( 'should use a toggle switch for the setTableColumnHeader item', () => {
- const items = dropdown.listView.items;
- expect( items.first.children.first ).to.be.instanceOf( SwitchButtonView );
- } );
- it( 'should bind set header column command value to dropdown item', () => {
- const items = dropdown.listView.items;
- const setColumnHeaderCommand = editor.commands.get( 'setTableColumnHeader' );
- setColumnHeaderCommand.value = false;
- expect( items.first.children.first.isOn ).to.be.false;
- setColumnHeaderCommand.value = true;
- expect( items.first.children.first.isOn ).to.be.true;
- } );
- } );
- describe( 'mergeTableCell dropdown', () => {
- let dropdown;
- beforeEach( () => {
- dropdown = editor.ui.componentFactory.create( 'mergeTableCells' );
- } );
- 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 cells' );
- expect( button.icon ).to.match( /<svg / );
- } );
- it( 'should have proper items in panel', () => {
- const listView = dropdown.listView;
- const labels = listView.items.map( item => item instanceof ListSeparatorView ? '|' : item.children.first.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( 'mergeTableCellUp' );
- const mergeCellRightCommand = editor.commands.get( 'mergeTableCellRight' );
- const mergeCellDownCommand = editor.commands.get( 'mergeTableCellDown' );
- const mergeCellLeftCommand = editor.commands.get( 'mergeTableCellLeft' );
- const splitCellVerticallyCommand = editor.commands.get( 'splitTableCellVertically' );
- const splitCellHorizontallyCommand = editor.commands.get( 'splitTableCellHorizontally' );
- mergeCellUpCommand.isEnabled = true;
- mergeCellRightCommand.isEnabled = true;
- mergeCellDownCommand.isEnabled = true;
- mergeCellLeftCommand.isEnabled = true;
- splitCellVerticallyCommand.isEnabled = true;
- splitCellHorizontallyCommand.isEnabled = true;
- expect( items.first.children.first.isEnabled ).to.be.true;
- expect( items.get( 1 ).children.first.isEnabled ).to.be.true;
- expect( items.get( 2 ).children.first.isEnabled ).to.be.true;
- expect( items.get( 3 ).children.first.isEnabled ).to.be.true;
- expect( items.get( 5 ).children.first.isEnabled ).to.be.true;
- expect( items.get( 6 ).children.first.isEnabled ).to.be.true;
- expect( dropdown.buttonView.isEnabled ).to.be.true;
- mergeCellUpCommand.isEnabled = false;
- expect( items.first.children.first.isEnabled ).to.be.false;
- expect( dropdown.buttonView.isEnabled ).to.be.true;
- mergeCellRightCommand.isEnabled = false;
- expect( items.get( 1 ).children.first.isEnabled ).to.be.false;
- expect( dropdown.buttonView.isEnabled ).to.be.true;
- mergeCellDownCommand.isEnabled = false;
- expect( items.get( 2 ).children.first.isEnabled ).to.be.false;
- mergeCellLeftCommand.isEnabled = false;
- expect( items.get( 3 ).children.first.isEnabled ).to.be.false;
- splitCellVerticallyCommand.isEnabled = false;
- expect( items.get( 5 ).children.first.isEnabled ).to.be.false;
- splitCellHorizontallyCommand.isEnabled = false;
- expect( items.get( 6 ).children.first.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.first.children.first.fire( 'execute' );
- sinon.assert.calledOnce( focusSpy );
- } );
- it( 'executes command when it\'s executed', () => {
- const spy = sinon.stub( editor, 'execute' );
- dropdown.listView.items.first.children.first.fire( 'execute' );
- expect( spy.calledOnce ).to.be.true;
- expect( spy.args[ 0 ][ 0 ] ).to.equal( 'mergeTableCellUp' );
- } );
- } );
- } );
|