浏览代码

Tests: Add tests for alignmentDropdown for UI.

Maciej Gołaszewski 8 年之前
父节点
当前提交
23aac842e3
共有 1 个文件被更改,包括 75 次插入0 次删除
  1. 75 0
      packages/ckeditor5-alignment/tests/alignmentui.js

+ 75 - 0
packages/ckeditor5-alignment/tests/alignmentui.js

@@ -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 );
+			} );
+		} );
+	} );
 } );