Skip to content

Commit

Permalink
Added new editor for test with Split Button instances defined in conf…
Browse files Browse the repository at this point in the history 
…ig.toolbar
  • Loading branch information
@engineering-this
engineering-this committed Jun 15, 2018
1 parent c55f5f6 commit db3399b
Showing 1 changed file with 153 additions and 84 deletions.
237 changes: 153 additions & 84 deletions tests/plugins/splitbutton/splitbutton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,46 +3,108 @@
( function() {
'use strict';

bender.editor = {
config: {
on: {
pluginsLoaded: function( evt ) {
var editor = evt.editor,
counter = {
faceClick: 0,
itemClick: 0
},
items = [ {
command: 'bold',
icon: 'bold',
'default': true
}, {
command: 'italic',
icon: 'italic'
}, {
command: 'underline',
icon: 'underline'
}, {
command: 'strike',
icon: 'strike'
}, {
command: 'subscript',
icon: 'subscript'
} ];

editor.ui.add( 'teststylesplit', CKEDITOR.UI_SPLITBUTTON, {
bender.editors = {
splitButtonAsPlugin: {
config: {
on: {
pluginsLoaded: function( evt ) {
var editor = evt.editor,
counter = {
faceClick: 0,
itemClick: 0
},
items = [ {
command: 'bold',
icon: 'bold',
'default': true
}, {
command: 'italic',
icon: 'italic'
}, {
command: 'underline',
icon: 'underline'
}, {
command: 'strike',
icon: 'strike'
}, {
command: 'subscript',
icon: 'subscript'
} ];

editor.ui.add( 'teststylesplit', CKEDITOR.UI_SPLITBUTTON, {
items: items
} );

editor.ui.add( 'staticface', CKEDITOR.UI_SPLITBUTTON, {
face: {
command: 'bold',
icon: 'bold'
},
items: items
} );

editor.ui.add( 'customclick', CKEDITOR.UI_SPLITBUTTON, {
face: {
icon: 'underline',
click: function() {
counter.faceClick++;
return counter;
}
},
onMenu: function() {
var activeItems = {};
for ( var key in this.items ) {
activeItems[ key ] = ( counter.itemClick % 2 ) ? CKEDITOR.TRISTATE_OFF : CKEDITOR.TRISTATE_ON;
}
return activeItems;
},
items: [ {
icon: 'superscript',
onClick: function() {
counter.itemClick++;
}
} ]
} );

addCustomCommand( editor );

editor.ui.add( 'commanddata', CKEDITOR.UI_SPLITBUTTON, {
items: [ {
icon: 'superscript',
command: 'customcommand',
commandData: { foo: 'foo' }
} ]
} );
}
}
}
},
splitButtonFromToolbar: {
config: ( function() {
var counter = {
faceClick: 0,
itemClick: 0
},
items = [ 'Bold' , 'Italic', 'Underline', 'Strike', 'Subscript' ];

return {
on: {
pluginsLoaded: function( evt ) {
addCustomCommand( evt.editor );
}
},
toolbar: [ [ {
type: 'splitbutton',
name: 'teststylesplit',
items: items
} );

editor.ui.add( 'staticface', CKEDITOR.UI_SPLITBUTTON, {
face: {
command: 'bold',
icon: 'bold'
},
}, {
type: 'splitbutton',
name: 'staticface',
face: 'Bold',
items: items
} );

editor.ui.add( 'customclick', CKEDITOR.UI_SPLITBUTTON, {
}, {
type: 'splitbutton',
name: 'customclick',
face: {
icon: 'underline',
click: function() {
Expand All @@ -63,38 +125,29 @@
counter.itemClick++;
}
} ]
} );

editor.addCommand( 'customcommand', {
exec: function( editor, data ) {
var text;
if ( data && data.foo ) {
text = data.foo;
} else {
text = 'bar';
}
editor.editable().setHtml( '<p>' + text + '</p>' );
}
} );

editor.ui.add( 'commanddata', CKEDITOR.UI_SPLITBUTTON, {
}, {
type: 'splitbutton',
name: 'commanddata',
items: [ {
icon: 'superscript',
command: 'customcommand',
commandData: { foo: 'foo' }
} ]
} );
}
}
} ] ]
};
} )()
}
};

bender.test( {
var tests = {
tearDown: function() {
this.editor.editable().setHtml( '<p></p>' );
// When using bender.tools.createTestsForEditors tearDown doesn't have refference to editor.
for ( var key in this.editors ) {
this.editors[ key ].editable().setHtml( '<p></p>' );
}
},
'test split button rendered in toolbar': function() {
var splitButton = this.editor.ui.get( 'teststylesplit' ),
'test split button rendered in toolbar': function( editor ) {
var splitButton = editor.ui.get( 'teststylesplit' ),
arrow = CKEDITOR.document.getById( splitButton._.id ),
children = arrow.getParent().getChildren(),
cls,
Expand All @@ -119,19 +172,19 @@
assert.isTrue( key in items );
}
},
'test state of split button buttons': function() {
var splitButton = this.editor.ui.get( 'teststylesplit' ),
'test state of split button buttons': function( editor ) {
var splitButton = editor.ui.get( 'teststylesplit' ),
arrow = CKEDITOR.document.getById( splitButton._.id ),
splitButtonElement = arrow.getParent(),
buttons = splitButtonElement.getChildren(),
button,
key,
command;

selectBeginningOfEditable( this.editor );
selectBeginningOfEditable( editor );

for ( key in splitButton.items ) {
command = this.editor.getCommand( splitButton.items[ key ].command );
command = editor.getCommand( splitButton.items[ key ].command );
button = splitButtonElement.findOne( '.cke_button__' + command.name );
// Test initial state of buttons and commands.
assert.isTrue( button.hasClass( 'cke_button_off' ), 'Button should be in `off` state' );
Expand All @@ -144,31 +197,31 @@
assert.isFalse( CKEDITOR.tools.objectCompare( button, getAndAssertVisibleButtons( buttons )[ 0 ] ), 'Button should be hidden' );
}

splitButton.click( this.editor );
splitButton.click( editor );
splitButton._.menu.show( CKEDITOR.document.getById( splitButton._.id ), 4 );

// Test menu button state before executing command.
assertMenuButtonsState( this.editor );
assertMenuButtonsState( editor );

this.editor.execCommand( command.name );
editor.execCommand( command.name );

// Test button and menu button state and visibility after executing command.
assert.isTrue( CKEDITOR.tools.objectCompare( button, getAndAssertVisibleButtons( buttons )[ 0 ] ), 'Button should be visible' );
assert.isTrue( button.hasClass( 'cke_button_on' ), 'Button should be in `on` state' );

assertMenuButtonsState( this.editor );
assertMenuButtonsState( editor );
}
},
'test static face': function() {
'test static face': function( editor ) {
// Face should be allways visible
var splitButton = this.editor.ui.get( 'staticface' ),
var splitButton = editor.ui.get( 'staticface' ),
arrow = CKEDITOR.document.getById( splitButton._.id ),
face = CKEDITOR.document.getById( splitButton.face._.id ),
splitButtonElement = arrow.getParent(),
buttons = splitButtonElement.getChildren().toArray(),
key;

selectBeginningOfEditable( this.editor );
selectBeginningOfEditable( editor );

// Split button with static face should have only two buttons, face and arrow.
assert.areEqual( buttons.length, 2 );
Expand All @@ -177,22 +230,22 @@

// Test state of face.
assert.isTrue( face.hasClass( 'cke_button_off' ), 'Button should be in `off` state' );
this.editor.execCommand( splitButton.face.command );
editor.execCommand( splitButton.face.command );
assert.isFalse( face.hasClass( 'cke_button_off' ), 'Button should be in `on` state' );

this.editor.execCommand( splitButton.face.command );
editor.execCommand( splitButton.face.command );

for ( key in splitButton.buttons ) {
var item = splitButton.buttons[ key ];

if ( item.command != 'bold' ) {
this.editor.execCommand( item.command );
editor.execCommand( item.command );
assert.isTrue( face.hasClass( 'cke_button_off' ), 'Button should be in `off` state' );
}
}
},
'test custom click, commandless items and onMenu': function() {
var splitButton = this.editor.ui.get( 'customclick' ),
'test custom click, commandless items and onMenu': function( editor ) {
var splitButton = editor.ui.get( 'customclick' ),
// arrow = CKEDITOR.document.getById( splitButton._.id ),
face = CKEDITOR.document.getById( splitButton.face._.id ),
counter = splitButton.face.click(),
Expand All @@ -211,7 +264,7 @@
}

for ( i = 0; i < 5; i++ ) {
this.editor.once( 'menuShow', function() {
editor.once( 'menuShow', function() {
var menu = this.ui.instances.customclick._.menu,
menuButton = menu._.element.findOne( '.' + menu.items[ 0 ].className ),
expectedClass = ( i % 2 ) ? 'cke_menubutton_off' : 'cke_menubutton_on';
Expand All @@ -223,27 +276,29 @@
menuButton.$.click();
}
} );
splitButton.click( this.editor );
splitButton.click( editor );
splitButton._.menu.show( CKEDITOR.document.getById( splitButton._.id ), 4 );
}
},
'test custom command data': function() {
var splitButton = this.editor.ui.get( 'commanddata' ),
'test custom command data': function( editor ) {
var splitButton = editor.ui.get( 'commanddata' ),
arrow = CKEDITOR.document.getById( splitButton._.id ),
splitButtonElement = arrow.getParent(),
button = splitButtonElement.getFirst();

this.editor.execCommand( 'customcommand' );
assert.areSame( this.editor.editable().getHtml().toLowerCase(), '<p>bar</p>' );
editor.execCommand( 'customcommand' );
assert.areSame( editor.editable().getHtml().toLowerCase(), '<p>bar</p>' );

if ( CKEDITOR.env.ie ) {
button.$.onmouseup();
} else {
button.$.click();
}
assert.areSame( this.editor.editable().getHtml().toLowerCase(), '<p>foo</p>' );
assert.areSame( editor.editable().getHtml().toLowerCase(), '<p>foo</p>' );
}
} );
};

bender.test( bender.tools.createTestsForEditors( CKEDITOR.tools.objectKeys( bender.editors ), tests ) );

function getAndAssertVisibleButtons( buttons ) {
var visibleButtons = CKEDITOR.tools.array.filter( buttons.toArray(), function( item, index ) {
Expand Down Expand Up @@ -291,4 +346,18 @@
range.setStart( editable.getFirst(), 0 );
editor.getSelection().selectRanges( [ range ] );
}

function addCustomCommand( editor ) {
editor.addCommand( 'customcommand', {
exec: function( editor, data ) {
var text;
if ( data && data.foo ) {
text = data.foo;
} else {
text = 'bar';
}
editor.editable().setHtml( '<p>' + text + '</p>' );
}
} );
}
} )();

0 comments on commit db3399b

Please sign in to comment.