8
0

alignmentui.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  1. /**
  2. * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* global document */
  6. import AlignmentEditing from '../src/alignmentediting';
  7. import AlignmentUI from '../src/alignmentui';
  8. import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
  9. describe( 'Alignment', () => {
  10. let editor, command, element, button;
  11. beforeEach( () => {
  12. element = document.createElement( 'div' );
  13. document.body.appendChild( element );
  14. return ClassicTestEditor
  15. .create( element, {
  16. plugins: [ AlignmentEditing, AlignmentUI ]
  17. } )
  18. .then( newEditor => {
  19. editor = newEditor;
  20. } );
  21. } );
  22. afterEach( () => {
  23. element.remove();
  24. return editor.destroy();
  25. } );
  26. it( 'requires AlignmentEditing', () => {
  27. expect( AlignmentUI.requires ).to.deep.equal( [ AlignmentEditing ] );
  28. } );
  29. describe( 'localizedStylesTitles()', () => {
  30. it( 'should return localized titles of styles', () => {
  31. const editorMock = { t: str => str };
  32. const plugin = new AlignmentUI( editorMock );
  33. expect( plugin.localizedStylesTitles ).to.deep.equal( {
  34. 'left': 'Align left',
  35. 'right': 'Align right',
  36. 'center': 'Align center',
  37. 'justify': 'Justify'
  38. } );
  39. } );
  40. } );
  41. describe( 'alignLeft button', () => {
  42. beforeEach( () => {
  43. command = editor.commands.get( 'alignLeft' );
  44. button = editor.ui.componentFactory.create( 'alignLeft' );
  45. } );
  46. it( 'has the base properties', () => {
  47. expect( button ).to.have.property( 'label', 'Align left' );
  48. expect( button ).to.have.property( 'icon' );
  49. expect( button ).to.have.property( 'tooltip', true );
  50. } );
  51. it( 'has isOn bound to command\'s value', () => {
  52. command.value = false;
  53. expect( button ).to.have.property( 'isOn', false );
  54. command.value = true;
  55. expect( button ).to.have.property( 'isOn', true );
  56. } );
  57. it( 'has isEnabled bound to command\'s isEnabled', () => {
  58. command.isEnabled = true;
  59. expect( button ).to.have.property( 'isEnabled', true );
  60. command.isEnabled = false;
  61. expect( button ).to.have.property( 'isEnabled', false );
  62. } );
  63. it( 'executes command when it\'s executed', () => {
  64. const spy = sinon.stub( editor, 'execute' );
  65. button.fire( 'execute' );
  66. expect( spy.calledOnce ).to.be.true;
  67. expect( spy.args[ 0 ][ 0 ] ).to.equal( 'alignLeft' );
  68. } );
  69. } );
  70. describe( 'alignRight button', () => {
  71. beforeEach( () => {
  72. command = editor.commands.get( 'alignRight' );
  73. button = editor.ui.componentFactory.create( 'alignRight' );
  74. } );
  75. it( 'has the base properties', () => {
  76. expect( button ).to.have.property( 'label', 'Align right' );
  77. expect( button ).to.have.property( 'icon' );
  78. expect( button ).to.have.property( 'tooltip', true );
  79. } );
  80. it( 'has isOn bound to command\'s value', () => {
  81. command.value = false;
  82. expect( button ).to.have.property( 'isOn', false );
  83. command.value = true;
  84. expect( button ).to.have.property( 'isOn', true );
  85. } );
  86. it( 'has isEnabled bound to command\'s isEnabled', () => {
  87. command.isEnabled = true;
  88. expect( button ).to.have.property( 'isEnabled', true );
  89. command.isEnabled = false;
  90. expect( button ).to.have.property( 'isEnabled', false );
  91. } );
  92. it( 'executes command when it\'s executed', () => {
  93. const spy = sinon.stub( editor, 'execute' );
  94. button.fire( 'execute' );
  95. expect( spy.calledOnce ).to.be.true;
  96. expect( spy.args[ 0 ][ 0 ] ).to.equal( 'alignRight' );
  97. } );
  98. } );
  99. describe( 'alignCenter button', () => {
  100. beforeEach( () => {
  101. command = editor.commands.get( 'alignCenter' );
  102. button = editor.ui.componentFactory.create( 'alignCenter' );
  103. } );
  104. it( 'has the base properties', () => {
  105. expect( button ).to.have.property( 'label', 'Align center' );
  106. expect( button ).to.have.property( 'icon' );
  107. expect( button ).to.have.property( 'tooltip', true );
  108. } );
  109. it( 'has isOn bound to command\'s value', () => {
  110. command.value = false;
  111. expect( button ).to.have.property( 'isOn', false );
  112. command.value = true;
  113. expect( button ).to.have.property( 'isOn', true );
  114. } );
  115. it( 'has isEnabled bound to command\'s isEnabled', () => {
  116. command.isEnabled = true;
  117. expect( button ).to.have.property( 'isEnabled', true );
  118. command.isEnabled = false;
  119. expect( button ).to.have.property( 'isEnabled', false );
  120. } );
  121. it( 'executes command when it\'s executed', () => {
  122. const spy = sinon.stub( editor, 'execute' );
  123. button.fire( 'execute' );
  124. expect( spy.calledOnce ).to.be.true;
  125. expect( spy.args[ 0 ][ 0 ] ).to.equal( 'alignCenter' );
  126. } );
  127. } );
  128. describe( 'alignJustify button', () => {
  129. beforeEach( () => {
  130. command = editor.commands.get( 'alignJustify' );
  131. button = editor.ui.componentFactory.create( 'alignJustify' );
  132. } );
  133. it( 'has the base properties', () => {
  134. expect( button ).to.have.property( 'label', 'Justify' );
  135. expect( button ).to.have.property( 'icon' );
  136. expect( button ).to.have.property( 'tooltip', true );
  137. } );
  138. it( 'has isOn bound to command\'s value', () => {
  139. command.value = false;
  140. expect( button ).to.have.property( 'isOn', false );
  141. command.value = true;
  142. expect( button ).to.have.property( 'isOn', true );
  143. } );
  144. it( 'has isEnabled bound to command\'s isEnabled', () => {
  145. command.isEnabled = true;
  146. expect( button ).to.have.property( 'isEnabled', true );
  147. command.isEnabled = false;
  148. expect( button ).to.have.property( 'isEnabled', false );
  149. } );
  150. it( 'executes command when it\'s executed', () => {
  151. const spy = sinon.stub( editor, 'execute' );
  152. button.fire( 'execute' );
  153. expect( spy.calledOnce ).to.be.true;
  154. expect( spy.args[ 0 ][ 0 ] ).to.equal( 'alignJustify' );
  155. } );
  156. } );
  157. } );