bodycollection.js 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. /**
  2. * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /* global document */
  6. import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
  7. import Locale from '@ckeditor/ckeditor5-utils/src/locale';
  8. import BodyCollection from '../../src/editorui/bodycollection';
  9. import View from '../../src/view';
  10. describe( 'BodyCollection', () => {
  11. let locale;
  12. testUtils.createSinonSandbox();
  13. beforeEach( () => {
  14. locale = new Locale();
  15. } );
  16. afterEach( () => {
  17. const wrappers = Array.from( document.querySelectorAll( '.ck-body-wrapper' ) );
  18. for ( const wrapper of wrappers ) {
  19. wrapper.remove();
  20. }
  21. } );
  22. describe( 'constructor', () => {
  23. it( 'assigns locale', () => {
  24. const instance = new BodyCollection( locale );
  25. expect( instance.locale ).to.equal( locale );
  26. } );
  27. it( 'stores pre-initialized collection', () => {
  28. const collectionItems = [ new View(), new View() ];
  29. const instance = new BodyCollection( locale, collectionItems );
  30. expect( instance ).to.have.lengthOf( 2 );
  31. expect( instance.get( 0 ) ).to.equal( collectionItems[ 0 ] );
  32. expect( instance.get( 1 ) ).to.equal( collectionItems[ 1 ] );
  33. } );
  34. } );
  35. describe( 'attachToDom', () => {
  36. it( 'should create wrapper and put the collection in that wrapper', () => {
  37. const body = new BodyCollection( locale );
  38. body.attachToDom();
  39. const wrappers = Array.from( document.querySelectorAll( '.ck-body-wrapper' ) );
  40. expect( wrappers.length ).to.equal( 1 );
  41. expect( wrappers[ 0 ].parentNode ).to.equal( document.body );
  42. const el = body._bodyCollectionContainer;
  43. expect( el.parentNode ).to.equal( wrappers[ 0 ] );
  44. expect( el.classList.contains( 'ck' ) ).to.be.true;
  45. expect( el.classList.contains( 'ck-body' ) ).to.be.true;
  46. expect( el.classList.contains( 'ck-rounded-corners' ) ).to.be.true;
  47. expect( el.classList.contains( 'ck-reset_all' ) ).to.be.true;
  48. } );
  49. it( 'sets the right dir attribute to the body region (LTR)', () => {
  50. const body = new BodyCollection( locale );
  51. body.attachToDom();
  52. const el = body._bodyCollectionContainer;
  53. expect( el.getAttribute( 'dir' ) ).to.equal( 'ltr' );
  54. } );
  55. it( 'sets the right dir attribute to the body region (RTL)', () => {
  56. const locale = new Locale( { uiLanguage: 'ar' } );
  57. const body = new BodyCollection( locale );
  58. body.attachToDom();
  59. const el = body._bodyCollectionContainer;
  60. expect( el.getAttribute( 'dir' ) ).to.equal( 'rtl' );
  61. } );
  62. it( 'should put all body elements to the same wrapper', () => {
  63. const body1 = new BodyCollection( locale );
  64. body1.attachToDom();
  65. expect( document.querySelectorAll( '.ck-body-wrapper' ).length ).to.equal( 1 );
  66. expect( document.querySelectorAll( '.ck-body' ).length ).to.equal( 1 );
  67. const body2 = new BodyCollection( locale );
  68. body2.attachToDom();
  69. const bodyElements = document.querySelectorAll( '.ck-body' );
  70. expect( document.querySelectorAll( '.ck-body-wrapper' ).length ).to.equal( 1 );
  71. expect( bodyElements.length ).to.equal( 2 );
  72. expect( bodyElements[ 0 ].parentNode ).to.equal( bodyElements[ 1 ].parentNode );
  73. } );
  74. it( 'should render views in proper body collections', () => {
  75. const body1 = new BodyCollection( locale );
  76. const view1 = new View();
  77. view1.setTemplate( {
  78. tag: 'div',
  79. attributes: {
  80. class: [ 'foo' ]
  81. }
  82. } );
  83. // Should work if body is attached before the view is added...
  84. body1.attachToDom();
  85. body1.add( view1 );
  86. const body2 = new BodyCollection( locale );
  87. const view2 = new View();
  88. view2.setTemplate( {
  89. tag: 'div',
  90. attributes: {
  91. class: [ 'bar' ]
  92. }
  93. } );
  94. // ...and it should work if body is attached after the view is added.
  95. body2.add( view2 );
  96. body2.attachToDom();
  97. const wrappers = Array.from( document.querySelectorAll( '.ck-body-wrapper' ) );
  98. expect( wrappers.length ).to.equal( 1 );
  99. const wrapper = wrappers[ 0 ];
  100. const body1Element = body1._bodyCollectionContainer;
  101. const body2Element = body2._bodyCollectionContainer;
  102. expect( body1Element.parentNode ).to.equal( wrapper );
  103. expect( body1Element.childNodes.length ).to.equal( 1 );
  104. expect( body1Element.childNodes[ 0 ].classList.contains( 'foo' ) ).to.be.true;
  105. expect( body2Element.parentNode ).to.equal( wrapper );
  106. expect( body2Element.childNodes.length ).to.equal( 1 );
  107. expect( body2Element.childNodes[ 0 ].classList.contains( 'bar' ) ).to.be.true;
  108. } );
  109. } );
  110. describe( 'detachFromDom', () => {
  111. it( 'removes the body collection from DOM', () => {
  112. const body = new BodyCollection( locale );
  113. body.attachToDom();
  114. body.detachFromDom();
  115. expect( document.querySelectorAll( '.ck-body-wrapper' ).length ).to.equal( 0 );
  116. expect( document.querySelectorAll( '.ck-body' ).length ).to.equal( 0 );
  117. } );
  118. it( 'removes the multiple body collections from dom and remove the wrapper when the last is removed', () => {
  119. const body1 = new BodyCollection( locale );
  120. body1.attachToDom();
  121. const body2 = new BodyCollection( locale );
  122. body2.attachToDom();
  123. expect( document.querySelectorAll( '.ck-body-wrapper' ).length ).to.equal( 1 );
  124. expect( document.querySelectorAll( '.ck-body' ).length ).to.equal( 2 );
  125. body1.detachFromDom();
  126. expect( document.querySelectorAll( '.ck-body-wrapper' ).length ).to.equal( 1 );
  127. expect( document.querySelectorAll( '.ck-body' ).length ).to.equal( 1 );
  128. body2.detachFromDom();
  129. expect( document.querySelectorAll( '.ck-body-wrapper' ).length ).to.equal( 0 );
  130. expect( document.querySelectorAll( '.ck-body' ).length ).to.equal( 0 );
  131. } );
  132. it( 'should not throw when be called multiple times', () => {
  133. const body = new BodyCollection( locale );
  134. body.attachToDom();
  135. expect( () => {
  136. body.detachFromDom();
  137. body.detachFromDom();
  138. } ).to.not.throw();
  139. } );
  140. it( 'should not throw if attachToDom was not called before', () => {
  141. const body = new BodyCollection( locale );
  142. expect( () => {
  143. body.detachFromDom();
  144. } ).to.not.throw();
  145. } );
  146. } );
  147. } );