template.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. /**
  2. * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* bender-tags: core, ui */
  6. /* global HTMLElement */
  7. 'use strict';
  8. var modules = bender.amd.require( 'ckeditor', 'ui/view', 'ui/template' );
  9. var Template;
  10. bender.tools.createSinonSandbox();
  11. beforeEach( createClassReferences );
  12. describe( 'constructor', function() {
  13. it( 'accepts the definition', function() {
  14. var def = {
  15. tag: 'p'
  16. };
  17. expect( new Template( def ).def ).to.equal( def );
  18. } );
  19. } );
  20. describe( 'render', function() {
  21. it( 'creates an element', function() {
  22. var el = new Template( {
  23. tag: 'p',
  24. attributes: {
  25. 'class': [ 'a', 'b' ],
  26. x: 'bar'
  27. },
  28. text: 'foo'
  29. } ).render();
  30. expect( el ).to.be.instanceof( HTMLElement );
  31. expect( el.parentNode ).to.be.null();
  32. expect( el.outerHTML ).to.be.equal( '<p class="a b" x="bar">foo</p>' );
  33. } );
  34. it( 'creates element\'s children', function() {
  35. var el = new Template( {
  36. tag: 'p',
  37. attributes: {
  38. a: 'A'
  39. },
  40. children: [
  41. {
  42. tag: 'b',
  43. text: 'B'
  44. },
  45. {
  46. tag: 'i',
  47. text: 'C',
  48. children: [
  49. {
  50. tag: 'b',
  51. text: 'D'
  52. }
  53. ]
  54. }
  55. ]
  56. } ).render();
  57. expect( el.outerHTML ).to.be.equal( '<p a="A"><b>B</b><i>C<b>D</b></i></p>' );
  58. } );
  59. } );
  60. describe( 'callback value', function() {
  61. it( 'works for attributes', function() {
  62. var spy1 = bender.sinon.spy();
  63. var spy2 = bender.sinon.spy();
  64. var el = new Template( {
  65. tag: 'p',
  66. attributes: {
  67. 'class': spy1
  68. },
  69. children: [
  70. {
  71. tag: 'span',
  72. attributes: {
  73. id: spy2
  74. }
  75. }
  76. ]
  77. } ).render();
  78. sinon.assert.calledWithExactly( spy1, el, sinon.match.func );
  79. sinon.assert.calledWithExactly( spy2, el.firstChild, sinon.match.func );
  80. spy1.firstCall.args[ 1 ]( el, 'foo' );
  81. spy2.firstCall.args[ 1 ]( el.firstChild, 'bar' );
  82. expect( el.outerHTML ).to.be.equal( '<p class="foo"><span id="bar"></span></p>' );
  83. } );
  84. it( 'works for "text" property', function() {
  85. var spy1 = bender.sinon.spy();
  86. var spy2 = bender.sinon.spy();
  87. var el = new Template( {
  88. tag: 'p',
  89. text: spy1,
  90. children: [
  91. {
  92. tag: 'span',
  93. text: spy2
  94. }
  95. ]
  96. } ).render();
  97. sinon.assert.calledWithExactly( spy1, el, sinon.match.func );
  98. sinon.assert.calledWithExactly( spy2, el.firstChild, sinon.match.func );
  99. spy2.firstCall.args[ 1 ]( el.firstChild, 'bar' );
  100. expect( el.outerHTML ).to.be.equal( '<p><span>bar</span></p>' );
  101. spy1.firstCall.args[ 1 ]( el, 'foo' );
  102. expect( el.outerHTML ).to.be.equal( '<p>foo</p>' );
  103. } );
  104. } );
  105. function createClassReferences() {
  106. Template = modules[ 'ui/template' ];
  107. }