8
0

uielement.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  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, HTMLElement */
  6. import UIElement from '../../src/view/uielement';
  7. import Element from '../../src/view/element';
  8. import Document from '../../src/view/document';
  9. import { expectToThrowCKEditorError } from '@ckeditor/ckeditor5-utils/tests/_utils/utils';
  10. import { StylesProcessor } from '../../src/view/stylesmap';
  11. describe( 'UIElement', () => {
  12. let uiElement, doc, stylesProcessor;
  13. before( () => {
  14. stylesProcessor = new StylesProcessor();
  15. } );
  16. beforeEach( () => {
  17. doc = new Document( stylesProcessor );
  18. uiElement = new UIElement( doc, 'span', {
  19. foo: 'bar',
  20. style: 'margin-top: 2em;color: white;',
  21. class: 'foo bar'
  22. } );
  23. } );
  24. describe( 'constructor()', () => {
  25. it( 'should create instance', () => {
  26. expect( uiElement.name ).to.equal( 'span' );
  27. expect( uiElement.getAttribute( 'foo' ) ).to.equal( 'bar' );
  28. expect( uiElement.getStyle( 'margin-top' ) ).to.equal( '2em' );
  29. expect( uiElement.getStyle( 'color' ) ).to.equal( 'white' );
  30. expect( uiElement.hasClass( 'foo' ) ).to.true;
  31. expect( uiElement.hasClass( 'bar' ) ).to.true;
  32. } );
  33. it( 'should throw if child elements are passed to constructor', () => {
  34. expectToThrowCKEditorError( () => {
  35. new UIElement( doc, 'img', null, [ new Element( doc, 'i' ) ] ); // eslint-disable-line no-new
  36. }, 'view-uielement-cannot-add: Cannot add child nodes to UIElement instance.' );
  37. } );
  38. } );
  39. describe( 'is()', () => {
  40. let el;
  41. before( () => {
  42. el = new UIElement( doc, 'span' );
  43. } );
  44. it( 'should return true for uiElement/element, also with correct name and element name', () => {
  45. expect( el.is( 'uiElement' ) ).to.be.true;
  46. expect( el.is( 'view:uiElement' ) ).to.be.true;
  47. expect( el.is( 'uiElement', 'span' ) ).to.be.true;
  48. expect( el.is( 'view:uiElement', 'span' ) ).to.be.true;
  49. expect( el.is( 'element' ) ).to.be.true;
  50. expect( el.is( 'view:element' ) ).to.be.true;
  51. expect( el.is( 'node' ) ).to.be.true;
  52. expect( el.is( 'view:node' ) ).to.be.true;
  53. expect( el.is( 'element', 'span' ) ).to.be.true;
  54. expect( el.is( 'view:element', 'span' ) ).to.be.true;
  55. expect( el.is( 'span' ) ).to.be.true;
  56. expect( el.is( 'view:span' ) ).to.be.true;
  57. } );
  58. it( 'should return false for other accept values', () => {
  59. expect( el.is( 'uiElement', 'p' ) ).to.be.false;
  60. expect( el.is( 'view:uiElement', 'p' ) ).to.be.false;
  61. expect( el.is( 'element', 'p' ) ).to.be.false;
  62. expect( el.is( 'view:element', 'p' ) ).to.be.false;
  63. expect( el.is( 'p' ) ).to.be.false;
  64. expect( el.is( 'view:p' ) ).to.be.false;
  65. expect( el.is( 'text' ) ).to.be.false;
  66. expect( el.is( 'textProxy' ) ).to.be.false;
  67. expect( el.is( 'containerElement' ) ).to.be.false;
  68. expect( el.is( 'attributeElement' ) ).to.be.false;
  69. expect( el.is( 'emptyElement' ) ).to.be.false;
  70. expect( el.is( 'rootElement' ) ).to.be.false;
  71. expect( el.is( 'documentFragment' ) ).to.be.false;
  72. expect( el.is( 'model:element' ) ).to.be.false;
  73. expect( el.is( 'model:span' ) ).to.be.false;
  74. expect( el.is( 'model:node' ) ).to.be.false;
  75. } );
  76. } );
  77. describe( '_appendChild()', () => {
  78. it( 'should throw when try to append new child element', () => {
  79. expectToThrowCKEditorError( () => {
  80. uiElement._appendChild( new Element( doc, 'i' ) );
  81. }, 'view-uielement-cannot-add: Cannot add child nodes to UIElement instance.' );
  82. } );
  83. } );
  84. describe( '_insertChild()', () => {
  85. it( 'should throw when try to insert new child element', () => {
  86. expectToThrowCKEditorError( () => {
  87. uiElement._insertChild( 0, new Element( doc, 'i' ) );
  88. }, 'view-uielement-cannot-add: Cannot add child nodes to UIElement instance.' );
  89. } );
  90. } );
  91. describe( '_clone()', () => {
  92. it( 'should be properly cloned', () => {
  93. const newUIElement = uiElement._clone();
  94. expect( newUIElement.name ).to.equal( 'span' );
  95. expect( newUIElement.getAttribute( 'foo' ) ).to.equal( 'bar' );
  96. expect( newUIElement.getStyle( 'margin-top' ) ).to.equal( '2em' );
  97. expect( newUIElement.getStyle( 'color' ) ).to.equal( 'white' );
  98. expect( newUIElement.hasClass( 'foo' ) ).to.true;
  99. expect( newUIElement.hasClass( 'bar' ) ).to.true;
  100. expect( newUIElement.isSimilar( uiElement ) ).to.true;
  101. } );
  102. } );
  103. describe( 'getFillerOffset()', () => {
  104. it( 'should return null', () => {
  105. expect( uiElement.getFillerOffset() ).to.null;
  106. } );
  107. } );
  108. describe( 'render()', () => {
  109. let domElement;
  110. beforeEach( () => {
  111. domElement = uiElement.render( document );
  112. } );
  113. it( 'should return DOM element', () => {
  114. expect( domElement ).to.be.instanceOf( HTMLElement );
  115. } );
  116. it( 'should use element name', () => {
  117. expect( domElement.tagName.toLowerCase() ).to.equal( uiElement.name );
  118. } );
  119. it( 'should render attributes', () => {
  120. for ( const key of uiElement.getAttributeKeys() ) {
  121. expect( domElement.getAttribute( key ) ).to.equal( uiElement.getAttribute( key ) );
  122. }
  123. } );
  124. it( 'should allow to change render() method', () => {
  125. uiElement.render = function( domDocument ) {
  126. return domDocument.createElement( 'b' );
  127. };
  128. expect( uiElement.render( document ).tagName.toLowerCase() ).to.equal( 'b' );
  129. } );
  130. it( 'should allow to add new elements inside', () => {
  131. uiElement.render = function( domDocument ) {
  132. const element = this.toDomElement( domDocument );
  133. const text = domDocument.createTextNode( 'foo bar' );
  134. element.appendChild( text );
  135. return element;
  136. };
  137. const rendered = uiElement.render( document );
  138. expect( rendered.tagName.toLowerCase() ).to.equal( 'span' );
  139. expect( rendered.textContent ).to.equal( 'foo bar' );
  140. } );
  141. } );
  142. } );