|
|
@@ -8,6 +8,8 @@
|
|
|
import AlignmentEditing from '../src/alignmentediting';
|
|
|
import AlignmentUI from '../src/alignmentui';
|
|
|
|
|
|
+import alignLeftIcon from '../theme/icons/align-left.svg';
|
|
|
+
|
|
|
import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
|
|
|
|
|
|
describe( 'Alignment', () => {
|
|
|
@@ -202,4 +204,77 @@ describe( 'Alignment', () => {
|
|
|
expect( spy.args[ 0 ][ 0 ] ).to.equal( 'alignJustify' );
|
|
|
} );
|
|
|
} );
|
|
|
+
|
|
|
+ describe( 'alignmentDropdown', () => {
|
|
|
+ let dropdown;
|
|
|
+
|
|
|
+ beforeEach( () => {
|
|
|
+ command = editor.commands.get( 'alignLeft' );
|
|
|
+ dropdown = editor.ui.componentFactory.create( 'alignmentDropdown' );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'button has the base properties', () => {
|
|
|
+ const button = dropdown.buttonView;
|
|
|
+
|
|
|
+ expect( button ).to.have.property( 'label', 'Text alignment' );
|
|
|
+ expect( button ).to.have.property( 'icon' );
|
|
|
+ expect( button ).to.have.property( 'withText', false );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'buttonGroup has the base properties', () => {
|
|
|
+ const buttonGroup = dropdown.buttonGroupView;
|
|
|
+
|
|
|
+ expect( buttonGroup ).to.have.property( 'isVertical', true );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'should hold defined buttons', () => {
|
|
|
+ const items = [ ...dropdown.buttonGroupView.items ].map( item => item.label );
|
|
|
+
|
|
|
+ expect( items ).to.have.length( 4 );
|
|
|
+
|
|
|
+ expect( items.includes( 'Align left' ) ).to.be.true;
|
|
|
+ expect( items.includes( 'Align right' ) ).to.be.true;
|
|
|
+ expect( items.includes( 'Align center' ) ).to.be.true;
|
|
|
+ expect( items.includes( 'Justify' ) ).to.be.true;
|
|
|
+ } );
|
|
|
+
|
|
|
+ describe( 'config', () => {
|
|
|
+ beforeEach( () => {
|
|
|
+ element = document.createElement( 'div' );
|
|
|
+ document.body.appendChild( element );
|
|
|
+
|
|
|
+ return ClassicTestEditor
|
|
|
+ .create( element, {
|
|
|
+ plugins: [ AlignmentEditing, AlignmentUI ],
|
|
|
+ alignment: { styles: [ 'center', 'justify' ] }
|
|
|
+ } )
|
|
|
+ .then( newEditor => {
|
|
|
+ editor = newEditor;
|
|
|
+
|
|
|
+ dropdown = editor.ui.componentFactory.create( 'alignmentDropdown' );
|
|
|
+ command = editor.commands.get( 'alignCenter' );
|
|
|
+ button = editor.ui.componentFactory.create( 'alignCenter' );
|
|
|
+ } );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'should hold only defined buttons', () => {
|
|
|
+ const items = [ ...dropdown.buttonGroupView.items ].map( item => item.label );
|
|
|
+
|
|
|
+ expect( items ).to.have.length( 2 );
|
|
|
+
|
|
|
+ expect( items.includes( 'Align center' ) ).to.be.true;
|
|
|
+ expect( items.includes( 'Justify' ) ).to.be.true;
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'should have default icon set', () => {
|
|
|
+ expect( dropdown.buttonView.icon ).to.equal( alignLeftIcon );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'should change icon to active alignment', () => {
|
|
|
+ command.value = true;
|
|
|
+
|
|
|
+ expect( dropdown.buttonView.icon ).to.equal( button.icon );
|
|
|
+ } );
|
|
|
+ } );
|
|
|
+ } );
|
|
|
} );
|