inlineeditoruiview.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. /**
  2. * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. import InlineEditorUIView from '../src/inlineeditoruiview';
  6. import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
  7. import BalloonPanelView from '@ckeditor/ckeditor5-ui/src/panel/balloon/balloonpanelview';
  8. import InlineEditableUIView from '@ckeditor/ckeditor5-ui/src/editableui/inline/inlineeditableuiview';
  9. import Locale from '@ckeditor/ckeditor5-utils/src/locale';
  10. describe( 'InlineEditorUIView', () => {
  11. let locale, view;
  12. beforeEach( () => {
  13. locale = new Locale( 'en' );
  14. view = new InlineEditorUIView( locale );
  15. } );
  16. describe( 'constructor()', () => {
  17. describe( '#toolbar', () => {
  18. it( 'is created', () => {
  19. expect( view.toolbar ).to.be.instanceof( ToolbarView );
  20. } );
  21. it( 'is given a locale object', () => {
  22. expect( view.toolbar.locale ).to.equal( locale );
  23. } );
  24. } );
  25. describe( '#panel', () => {
  26. it( 'is created', () => {
  27. expect( view.panel ).to.be.instanceof( BalloonPanelView );
  28. } );
  29. it( 'is given a locale object', () => {
  30. expect( view.panel.locale ).to.equal( locale );
  31. } );
  32. it( 'is given the right CSS class', () => {
  33. expect( view.panel.element.classList.contains( 'ck-toolbar__container' ) ).to.be.true;
  34. } );
  35. it( 'is put into the #body collection', () => {
  36. expect( view.body.get( 0 ) ).to.equal( view.panel );
  37. } );
  38. it( 'gets view.panel#withArrow set', () => {
  39. expect( view.panel.withArrow ).to.be.false;
  40. } );
  41. } );
  42. describe( '#editable', () => {
  43. it( 'is created', () => {
  44. expect( view.editable ).to.be.instanceof( InlineEditableUIView );
  45. } );
  46. it( 'is given a locate object', () => {
  47. expect( view.editable.locale ).to.equal( locale );
  48. } );
  49. it( 'is registered as a child', () => {
  50. const spy = sinon.spy( view.editable, 'destroy' );
  51. return view.init()
  52. .then( () => view.destroy() )
  53. .then( () => {
  54. sinon.assert.calledOnce( spy );
  55. } );
  56. } );
  57. } );
  58. } );
  59. describe( 'init()', () => {
  60. it( 'appends #toolbar to panel#content', () => {
  61. expect( view.panel.content ).to.have.length( 0 );
  62. return view.init()
  63. .then( () => {
  64. expect( view.panel.content.get( 0 ) ).to.equal( view.toolbar );
  65. } )
  66. .then( () => view.destroy() );
  67. } );
  68. } );
  69. describe( 'editableElement', () => {
  70. it( 'returns editable\'s view element', () => {
  71. return view.init()
  72. .then( () => {
  73. expect( view.editableElement.getAttribute( 'contentEditable' ) ).to.equal( 'true' );
  74. } )
  75. .then( () => view.destroy() );
  76. } );
  77. } );
  78. describe( 'panelPositions', () => {
  79. it( 'returns the positions in the right order', () => {
  80. const positions = view.panelPositions;
  81. const editableRect = {
  82. top: 100,
  83. bottom: 200,
  84. left: 100,
  85. right: 100,
  86. width: 100,
  87. height: 100
  88. };
  89. const panelRect = {
  90. width: 50,
  91. height: 50
  92. };
  93. expect( positions ).to.have.length( 2 );
  94. expect( positions[ 0 ]( editableRect, panelRect ).name ).to.equal( 'toolbar_west' );
  95. expect( positions[ 1 ]( editableRect, panelRect ).name ).to.equal( 'toolbar_east' );
  96. } );
  97. describe( 'west', () => {
  98. testTopPositions( 0, 100 );
  99. } );
  100. describe( 'east', () => {
  101. testTopPositions( 1, 150 );
  102. } );
  103. function testTopPositions( positionIndex, expectedLeft ) {
  104. it( 'positions the panel above editable when there\'s enough space', () => {
  105. const position = view.panelPositions[ positionIndex ];
  106. const editableRect = {
  107. top: 100, // !
  108. bottom: 200,
  109. left: 100,
  110. right: 100,
  111. width: 100,
  112. height: 100
  113. };
  114. const panelRect = {
  115. width: 50,
  116. height: 99 // !
  117. };
  118. const { top, left } = position( editableRect, panelRect );
  119. expect( top ).to.equal( 1 );
  120. expect( left ).to.equal( expectedLeft );
  121. } );
  122. it( 'positions the panel over the editable when there\'s not enough space above', () => {
  123. const position = view.panelPositions[ positionIndex ];
  124. const editableRect = {
  125. top: 99, // !
  126. bottom: 199,
  127. left: 100,
  128. right: 100,
  129. width: 100,
  130. height: 100
  131. };
  132. const panelRect = {
  133. width: 50,
  134. height: 100 // !
  135. };
  136. const { top, left } = position( editableRect, panelRect );
  137. expect( top ).to.equal( 0 );
  138. expect( left ).to.equal( expectedLeft );
  139. } );
  140. it( 'positions the panel below the editable when there\'s not enough space above/over', () => {
  141. const position = view.panelPositions[ positionIndex ];
  142. const editableRect = {
  143. top: 0,
  144. bottom: 99, // !
  145. left: 100,
  146. right: 100,
  147. width: 100,
  148. height: 99
  149. };
  150. const panelRect = {
  151. width: 50,
  152. height: 100 // !
  153. };
  154. const { top, left } = position( editableRect, panelRect );
  155. expect( top ).to.equal( 99 );
  156. expect( left ).to.equal( expectedLeft );
  157. } );
  158. }
  159. } );
  160. } );