template.js 38 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788
  1. /**
  2. * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* bender-tags: ui */
  6. /* global HTMLElement */
  7. 'use strict';
  8. import testUtils from '/tests/ckeditor5/_utils/utils.js';
  9. import Template from '/ckeditor5/ui/template.js';
  10. import Model from '/ckeditor5/ui/model.js';
  11. import CKEditorError from '/ckeditor5/utils/ckeditorerror.js';
  12. import EmitterMixin from '/ckeditor5/utils/emittermixin.js';
  13. import DOMEmitterMixin from '/ckeditor5/ui/domemittermixin.js';
  14. testUtils.createSinonSandbox();
  15. let el, text;
  16. describe( 'Template', () => {
  17. describe( 'constructor', () => {
  18. it( 'accepts template definition', () => {
  19. const def = {
  20. tag: 'p'
  21. };
  22. expect( new Template( def ).definition ).to.equal( def );
  23. } );
  24. it( 'normalizes template definition', () => {
  25. const bind = Template.bind( new Model( {} ), Object.create( DOMEmitterMixin ) );
  26. const tpl = new Template( {
  27. tag: 'p',
  28. attributes: {
  29. a: 'foo',
  30. b: [ 'bar', 'baz' ],
  31. c: {
  32. ns: 'abc',
  33. value: bind.to( 'qux' )
  34. }
  35. },
  36. children: [
  37. {
  38. text: 'content'
  39. },
  40. {
  41. text: bind.to( 'x' )
  42. },
  43. 'abc',
  44. {
  45. text: [ 'a', 'b' ]
  46. }
  47. ],
  48. on: {
  49. 'a@span': bind.to( 'b' ),
  50. 'b@span': bind.to( () => {} ),
  51. 'c@span': [
  52. bind.to( 'c' ),
  53. bind.to( () => {} )
  54. ]
  55. }
  56. } );
  57. const def = tpl.definition;
  58. expect( def.attributes.a[ 0 ] ).to.equal( 'foo' );
  59. expect( def.attributes.b[ 0 ] ).to.equal( 'bar' );
  60. expect( def.attributes.b[ 1 ] ).to.equal( 'baz' );
  61. expect( def.attributes.c[ 0 ].value[ 0 ].type ).to.be.a( 'symbol' );
  62. expect( def.children[ 0 ].text[ 0 ] ).to.equal( 'content' );
  63. expect( def.children[ 1 ].text[ 0 ].type ).to.be.a( 'symbol' );
  64. expect( def.children[ 2 ].text[ 0 ] ).to.equal( 'abc' );
  65. expect( def.children[ 3 ].text[ 0 ] ).to.equal( 'a' );
  66. expect( def.children[ 3 ].text[ 1 ] ).to.equal( 'b' );
  67. expect( def.on[ 'a@span' ][ 0 ].type ).to.be.a( 'symbol' );
  68. expect( def.on[ 'b@span' ][ 0 ].type ).to.be.a( 'symbol' );
  69. expect( def.on[ 'c@span' ][ 0 ].type ).to.be.a( 'symbol' );
  70. expect( def.on[ 'c@span' ][ 1 ].type ).to.be.a( 'symbol' );
  71. } );
  72. } );
  73. describe( 'render', () => {
  74. it( 'throws when wrong template definition', () => {
  75. expect( () => {
  76. new Template( {} ).render();
  77. } ).to.throw( CKEditorError, /ui-template-wrong-syntax/ );
  78. expect( () => {
  79. new Template( {
  80. tag: 'p',
  81. text: 'foo'
  82. } ).render();
  83. } ).to.throw( CKEditorError, /ui-template-wrong-syntax/ );
  84. } );
  85. it( 'creates HTMLElement', () => {
  86. const el = new Template( {
  87. tag: 'p',
  88. } ).render();
  89. expect( el ).to.be.instanceof( HTMLElement );
  90. expect( el.parentNode ).to.be.null;
  91. expect( el.outerHTML ).to.be.equal( '<p></p>' );
  92. expect( el.namespaceURI ).to.be.equal( 'http://www.w3.org/1999/xhtml' );
  93. } );
  94. it( 'creates an element in a custom namespace', () => {
  95. const el = new Template( {
  96. tag: 'p',
  97. ns: 'foo'
  98. } ).render();
  99. expect( el.namespaceURI ).to.be.equal( 'foo' );
  100. } );
  101. it( 'renders HTMLElement attributes', () => {
  102. const el = new Template( {
  103. tag: 'p',
  104. attributes: {
  105. 'class': [ 'a', 'b' ],
  106. x: 'bar'
  107. },
  108. children: [ 'foo' ]
  109. } ).render();
  110. expect( el ).to.be.instanceof( HTMLElement );
  111. expect( el.parentNode ).to.be.null;
  112. expect( el.outerHTML ).to.be.equal( '<p class="a b" x="bar">foo</p>' );
  113. expect( el.attributes.getNamedItem( 'class' ).namespaceURI ).to.be.null;
  114. } );
  115. it( 'renders HTMLElement attributes – empty', () => {
  116. const el = new Template( {
  117. tag: 'p',
  118. attributes: {
  119. class: '',
  120. x: [ '', '' ]
  121. },
  122. children: [ 'foo' ]
  123. } ).render();
  124. expect( el.outerHTML ).to.be.equal( '<p class="" x="">foo</p>' );
  125. } );
  126. it( 'renders HTMLElement attributes – falsy values', () => {
  127. const el = new Template( {
  128. tag: 'p',
  129. attributes: {
  130. class: false,
  131. x: [ '', null ]
  132. },
  133. children: [ 'foo' ]
  134. } ).render();
  135. expect( el.outerHTML ).to.be.equal( '<p class="false" x="null">foo</p>' );
  136. } );
  137. it( 'renders HTMLElement attributes in a custom namespace', () => {
  138. const el = new Template( {
  139. tag: 'p',
  140. attributes: {
  141. class: {
  142. ns: 'foo',
  143. value: [ 'a', 'b' ]
  144. },
  145. x: {
  146. ns: 'abc',
  147. value: 'bar'
  148. }
  149. },
  150. children: [ 'foo' ]
  151. } ).render();
  152. expect( el.outerHTML ).to.be.equal( '<p class="a b" x="bar">foo</p>' );
  153. expect( el.attributes.getNamedItem( 'class' ).namespaceURI ).to.equal( 'foo' );
  154. expect( el.attributes.getNamedItem( 'x' ).namespaceURI ).to.equal( 'abc' );
  155. } );
  156. it( 'creates HTMLElement children', () => {
  157. const el = new Template( {
  158. tag: 'p',
  159. attributes: {
  160. a: 'A'
  161. },
  162. children: [
  163. {
  164. tag: 'b',
  165. children: [ 'B' ]
  166. },
  167. {
  168. tag: 'i',
  169. children: [
  170. 'C',
  171. {
  172. tag: 'b',
  173. children: [ 'D' ]
  174. }
  175. ]
  176. }
  177. ]
  178. } ).render();
  179. expect( el.outerHTML ).to.be.equal( '<p a="A"><b>B</b><i>C<b>D</b></i></p>' );
  180. } );
  181. it( 'creates a Text node', () => {
  182. const node = new Template( { text: 'foo' } ).render();
  183. expect( node.nodeType ).to.be.equal( 3 );
  184. expect( node.textContent ).to.be.equal( 'foo' );
  185. } );
  186. it( 'creates a child Text Node (different syntaxes)', () => {
  187. const el = new Template( {
  188. tag: 'p',
  189. children: [
  190. 'foo',
  191. { text: 'bar' }
  192. ]
  193. } ).render();
  194. expect( el.outerHTML ).to.be.equal( '<p>foobar</p>' );
  195. } );
  196. it( 'creates multiple child Text Nodes', () => {
  197. const el = new Template( {
  198. tag: 'p',
  199. children: [
  200. 'a',
  201. 'b',
  202. { text: 'c' },
  203. 'd',
  204. { text: [ 'e', 'f' ] }
  205. ]
  206. } ).render();
  207. expect( el.childNodes ).to.have.length( 5 );
  208. expect( el.outerHTML ).to.be.equal( '<p>abcdef</p>' );
  209. } );
  210. it( 'activates model bindings – root', () => {
  211. const observable = new Model( {
  212. foo: 'bar'
  213. } );
  214. const emitter = Object.create( EmitterMixin );
  215. const bind = Template.bind( observable, emitter );
  216. const el = new Template( {
  217. tag: 'div',
  218. attributes: {
  219. class: bind.to( 'foo' )
  220. }
  221. } ).render();
  222. expect( el.getAttribute( 'class' ) ).to.equal( 'bar' );
  223. observable.foo = 'baz';
  224. expect( el.getAttribute( 'class' ) ).to.equal( 'baz' );
  225. } );
  226. it( 'activates model bindings – children', () => {
  227. const observable = new Model( {
  228. foo: 'bar'
  229. } );
  230. const emitter = Object.create( EmitterMixin );
  231. const bind = Template.bind( observable, emitter );
  232. const el = new Template( {
  233. tag: 'div',
  234. children: [
  235. {
  236. tag: 'span',
  237. children: [
  238. {
  239. text: [
  240. bind.to( 'foo' ),
  241. 'static'
  242. ]
  243. }
  244. ]
  245. }
  246. ]
  247. } ).render();
  248. expect( el.firstChild.textContent ).to.equal( 'bar static' );
  249. observable.foo = 'baz';
  250. expect( el.firstChild.textContent ).to.equal( 'baz static' );
  251. } );
  252. } );
  253. describe( 'apply', () => {
  254. beforeEach( () => {
  255. el = document.createElement( 'div' );
  256. text = document.createTextNode( '' );
  257. } );
  258. it( 'throws when wrong template definition', () => {
  259. expect( () => {
  260. new Template( {
  261. tag: 'p',
  262. text: 'foo'
  263. } ).apply( el );
  264. } ).to.throw( CKEditorError, /ui-template-wrong-syntax/ );
  265. } );
  266. it( 'throws when no HTMLElement passed', () => {
  267. expect( () => {
  268. new Template( {
  269. tag: 'p'
  270. } ).apply();
  271. } ).to.throw( CKEditorError, /ui-template-wrong-node/ );
  272. } );
  273. it( 'accepts empty template definition', () => {
  274. new Template( {} ).apply( el );
  275. new Template( {} ).apply( text );
  276. expect( el.outerHTML ).to.be.equal( '<div></div>' );
  277. expect( text.textContent ).to.be.equal( '' );
  278. } );
  279. it( 'applies textContent to a Text Node', () => {
  280. new Template( {
  281. text: 'abc'
  282. } ).apply( text );
  283. expect( text.textContent ).to.be.equal( 'abc' );
  284. } );
  285. it( 'applies attributes to an HTMLElement', () => {
  286. new Template( {
  287. tag: 'div',
  288. attributes: {
  289. 'class': [ 'a', 'b' ],
  290. x: 'bar'
  291. }
  292. } ).apply( el );
  293. expect( el.outerHTML ).to.be.equal( '<div class="a b" x="bar"></div>' );
  294. } );
  295. it( 'doesn\'t apply new child to an HTMLElement – Text Node', () => {
  296. new Template( {
  297. tag: 'div',
  298. children: [ 'foo' ]
  299. } ).apply( el );
  300. expect( el.outerHTML ).to.be.equal( '<div></div>' );
  301. } );
  302. it( 'doesn\'t apply new child to an HTMLElement – HTMLElement', () => {
  303. new Template( {
  304. tag: 'div',
  305. children: [
  306. {
  307. tag: 'span'
  308. }
  309. ]
  310. } ).apply( el );
  311. expect( el.outerHTML ).to.be.equal( '<div></div>' );
  312. } );
  313. it( 'applies new textContent to an existing Text Node of an HTMLElement', () => {
  314. el.textContent = 'bar';
  315. new Template( {
  316. tag: 'div',
  317. children: [ 'foo' ]
  318. } ).apply( el );
  319. expect( el.outerHTML ).to.be.equal( '<div>foo</div>' );
  320. } );
  321. it( 'applies attributes and TextContent to a DOM tree', () => {
  322. el.textContent = 'abc';
  323. el.appendChild( document.createElement( 'span' ) );
  324. new Template( {
  325. tag: 'div',
  326. attributes: {
  327. 'class': 'parent'
  328. },
  329. children: [
  330. 'Children: ',
  331. {
  332. tag: 'span',
  333. attributes: {
  334. class: 'child'
  335. }
  336. }
  337. ]
  338. } ).apply( el );
  339. expect( el.outerHTML ).to.be.equal( '<div class="parent">Children: <span class="child"></span></div>' );
  340. } );
  341. } );
  342. describe( 'bind', () => {
  343. it( 'returns object', () => {
  344. expect( Template.bind() ).to.be.an( 'object' );
  345. } );
  346. it( 'provides "to" and "if" interface', () => {
  347. const bind = Template.bind();
  348. expect( bind ).to.have.keys( 'to', 'if' );
  349. expect( bind.to ).to.be.a( 'function' );
  350. expect( bind.if ).to.be.a( 'function' );
  351. } );
  352. describe( 'event', () => {
  353. let observable, domEmitter, bind;
  354. beforeEach( () => {
  355. observable = new Model( {
  356. foo: 'bar',
  357. baz: 'qux'
  358. } );
  359. domEmitter = Object.create( DOMEmitterMixin );
  360. bind = Template.bind( observable, domEmitter );
  361. } );
  362. it( 'accepts plain binding', () => {
  363. const spy = testUtils.sinon.spy();
  364. setElement( {
  365. tag: 'p',
  366. on: {
  367. x: bind.to( 'a' ),
  368. }
  369. } );
  370. observable.on( 'a', spy );
  371. dispatchEvent( el, 'x' );
  372. sinon.assert.calledWithExactly( spy,
  373. sinon.match.has( 'name', 'a' ),
  374. sinon.match.has( 'target', el )
  375. );
  376. } );
  377. it( 'accepts an array of event bindings', () => {
  378. const spy1 = testUtils.sinon.spy();
  379. const spy2 = testUtils.sinon.spy();
  380. setElement( {
  381. tag: 'p',
  382. on: {
  383. x: [
  384. bind.to( 'a' ),
  385. bind.to( 'b' )
  386. ]
  387. }
  388. } );
  389. observable.on( 'a', spy1 );
  390. observable.on( 'b', spy2 );
  391. dispatchEvent( el, 'x' );
  392. sinon.assert.calledWithExactly( spy1,
  393. sinon.match.has( 'name', 'a' ),
  394. sinon.match.has( 'target', el )
  395. );
  396. sinon.assert.calledWithExactly( spy2,
  397. sinon.match.has( 'name', 'b' ),
  398. sinon.match.has( 'target', el )
  399. );
  400. } );
  401. it( 'accepts DOM selectors', () => {
  402. const spy1 = testUtils.sinon.spy();
  403. const spy2 = testUtils.sinon.spy();
  404. const spy3 = testUtils.sinon.spy();
  405. setElement( {
  406. tag: 'p',
  407. children: [
  408. {
  409. tag: 'span',
  410. attributes: {
  411. 'class': 'y',
  412. },
  413. on: {
  414. 'test@p': bind.to( 'c' )
  415. }
  416. },
  417. {
  418. tag: 'div',
  419. children: [
  420. {
  421. tag: 'span',
  422. attributes: {
  423. 'class': 'y',
  424. }
  425. }
  426. ],
  427. }
  428. ],
  429. on: {
  430. 'test@.y': bind.to( 'a' ),
  431. 'test@div': bind.to( 'b' )
  432. }
  433. } );
  434. observable.on( 'a', spy1 );
  435. observable.on( 'b', spy2 );
  436. observable.on( 'c', spy3 );
  437. // Test "test@p".
  438. dispatchEvent( el, 'test' );
  439. sinon.assert.callCount( spy1, 0 );
  440. sinon.assert.callCount( spy2, 0 );
  441. sinon.assert.callCount( spy3, 0 );
  442. // Test "test@.y".
  443. dispatchEvent( el.firstChild, 'test' );
  444. expect( spy1.firstCall.calledWithExactly(
  445. sinon.match.has( 'name', 'a' ),
  446. sinon.match.has( 'target', el.firstChild )
  447. ) ).to.be.true;
  448. sinon.assert.callCount( spy2, 0 );
  449. sinon.assert.callCount( spy3, 0 );
  450. // Test "test@div".
  451. dispatchEvent( el.lastChild, 'test' );
  452. sinon.assert.callCount( spy1, 1 );
  453. expect( spy2.firstCall.calledWithExactly(
  454. sinon.match.has( 'name', 'b' ),
  455. sinon.match.has( 'target', el.lastChild )
  456. ) ).to.be.true;
  457. sinon.assert.callCount( spy3, 0 );
  458. // Test "test@.y".
  459. dispatchEvent( el.lastChild.firstChild, 'test' );
  460. expect( spy1.secondCall.calledWithExactly(
  461. sinon.match.has( 'name', 'a' ),
  462. sinon.match.has( 'target', el.lastChild.firstChild )
  463. ) ).to.be.true;
  464. sinon.assert.callCount( spy2, 1 );
  465. sinon.assert.callCount( spy3, 0 );
  466. } );
  467. it( 'accepts function callbacks', () => {
  468. const spy1 = testUtils.sinon.spy();
  469. const spy2 = testUtils.sinon.spy();
  470. setElement( {
  471. tag: 'p',
  472. children: [
  473. {
  474. tag: 'span'
  475. }
  476. ],
  477. on: {
  478. x: bind.to( spy1 ),
  479. 'y@span': [
  480. bind.to( spy2 ),
  481. bind.to( 'c' )
  482. ]
  483. }
  484. } );
  485. dispatchEvent( el, 'x' );
  486. dispatchEvent( el.firstChild, 'y' );
  487. sinon.assert.calledWithExactly( spy1,
  488. sinon.match.has( 'target', el )
  489. );
  490. sinon.assert.calledWithExactly( spy2,
  491. sinon.match.has( 'target', el.firstChild )
  492. );
  493. } );
  494. it( 'supports event delegation', () => {
  495. const spy = testUtils.sinon.spy();
  496. setElement( {
  497. tag: 'p',
  498. children: [
  499. {
  500. tag: 'span'
  501. }
  502. ],
  503. on: {
  504. x: bind.to( 'a' ),
  505. }
  506. } );
  507. observable.on( 'a', spy );
  508. dispatchEvent( el.firstChild, 'x' );
  509. sinon.assert.calledWithExactly( spy,
  510. sinon.match.has( 'name', 'a' ),
  511. sinon.match.has( 'target', el.firstChild )
  512. );
  513. } );
  514. it( 'works for future elements', () => {
  515. const spy = testUtils.sinon.spy();
  516. setElement( {
  517. tag: 'p',
  518. on: {
  519. 'test@div': bind.to( 'a' )
  520. }
  521. } );
  522. observable.on( 'a', spy );
  523. const div = document.createElement( 'div' );
  524. el.appendChild( div );
  525. dispatchEvent( div, 'test' );
  526. sinon.assert.calledWithExactly( spy, sinon.match.has( 'name', 'a' ), sinon.match.has( 'target', div ) );
  527. } );
  528. } );
  529. describe( 'model', () => {
  530. let observable, emitter, bind;
  531. beforeEach( () => {
  532. observable = new Model( {
  533. foo: 'bar',
  534. baz: 'qux'
  535. } );
  536. emitter = Object.create( EmitterMixin );
  537. bind = Template.bind( observable, emitter );
  538. } );
  539. describe( 'to', () => {
  540. it( 'returns an object which describes the binding', () => {
  541. const spy = testUtils.sinon.spy();
  542. const binding = bind.to( 'foo', spy );
  543. expect( spy.called ).to.be.false;
  544. expect( binding ).to.have.keys( [ 'type', 'observable', 'eventNameOrFuncion', 'emitter', 'attribute', 'callback' ] );
  545. expect( binding.observable ).to.equal( observable );
  546. expect( binding.callback ).to.equal( spy );
  547. expect( binding.attribute ).to.equal( 'foo' );
  548. } );
  549. it( 'allows binding attribute to the observable – simple (HTMLElement attribute)', () => {
  550. setElement( {
  551. tag: 'p',
  552. attributes: {
  553. 'class': bind.to( 'foo' )
  554. },
  555. children: [ 'abc' ]
  556. } );
  557. expect( el.outerHTML ).to.equal( '<p class="bar">abc</p>' );
  558. observable.foo = 'baz';
  559. expect( el.outerHTML ).to.equal( '<p class="baz">abc</p>' );
  560. expect( el.attributes.getNamedItem( 'class' ).namespaceURI ).to.be.null;
  561. } );
  562. it( 'allows binding attribute to the observable – simple (Text Node)', () => {
  563. setElement( {
  564. tag: 'p',
  565. children: [
  566. {
  567. text: bind.to( 'foo' )
  568. }
  569. ]
  570. } );
  571. expect( el.outerHTML ).to.equal( '<p>bar</p>' );
  572. observable.foo = 'baz';
  573. expect( el.outerHTML ).to.equal( '<p>baz</p>' );
  574. } );
  575. it( 'allows binding attribute to the observable – value processing', () => {
  576. const callback = value => value > 0 ? 'positive' : 'negative';
  577. setElement( {
  578. tag: 'p',
  579. attributes: {
  580. 'class': bind.to( 'foo', callback )
  581. },
  582. children: [
  583. {
  584. text: bind.to( 'foo', callback )
  585. }
  586. ]
  587. } );
  588. observable.foo = 3;
  589. expect( el.outerHTML ).to.equal( '<p class="positive">positive</p>' );
  590. observable.foo = -7;
  591. expect( el.outerHTML ).to.equal( '<p class="negative">negative</p>' );
  592. } );
  593. it( 'allows binding attribute to the observable – value processing (use Node)', () => {
  594. const callback = ( value, node ) => {
  595. return ( !!node.tagName && value > 0 ) ? 'HTMLElement positive' : '';
  596. };
  597. setElement( {
  598. tag: 'p',
  599. attributes: {
  600. 'class': bind.to( 'foo', callback )
  601. },
  602. children: [
  603. {
  604. text: bind.to( 'foo', callback )
  605. }
  606. ]
  607. } );
  608. observable.foo = 3;
  609. expect( el.outerHTML ).to.equal( '<p class="HTMLElement positive"></p>' );
  610. observable.foo = -7;
  611. expect( el.outerHTML ).to.equal( '<p></p>' );
  612. } );
  613. it( 'allows binding attribute to the observable – custom callback', () => {
  614. setElement( {
  615. tag: 'p',
  616. attributes: {
  617. 'class': bind.to( 'foo', ( value, el ) => {
  618. el.innerHTML = value;
  619. if ( value == 'changed' ) {
  620. return value;
  621. }
  622. } )
  623. }
  624. } );
  625. observable.foo = 'moo';
  626. expect( el.outerHTML ).to.equal( '<p class="undefined">moo</p>' );
  627. observable.foo = 'changed';
  628. expect( el.outerHTML ).to.equal( '<p class="changed">changed</p>' );
  629. } );
  630. it( 'allows binding attribute to the observable – array of bindings (HTMLElement attribute)', () => {
  631. setElement( {
  632. tag: 'p',
  633. attributes: {
  634. 'class': [
  635. 'ck-class',
  636. bind.to( 'foo' ),
  637. bind.to( 'baz' ),
  638. bind.to( 'foo', value => `foo-is-${value}` ),
  639. 'ck-end'
  640. ]
  641. },
  642. children: [ 'abc' ]
  643. } );
  644. observable.foo = 'a';
  645. observable.baz = 'b';
  646. expect( el.outerHTML ).to.equal( '<p class="ck-class a b foo-is-a ck-end">abc</p>' );
  647. observable.foo = 'c';
  648. observable.baz = 'd';
  649. expect( el.outerHTML ).to.equal( '<p class="ck-class c d foo-is-c ck-end">abc</p>' );
  650. } );
  651. it( 'allows binding attribute to the observable – array of bindings (Text Node)', () => {
  652. setElement( {
  653. tag: 'p',
  654. attributes: {
  655. },
  656. children: [
  657. {
  658. text: [
  659. 'ck-class',
  660. bind.to( 'foo' ),
  661. bind.to( 'baz' ),
  662. bind.to( 'foo', value => `foo-is-${value}` ),
  663. 'ck-end'
  664. ]
  665. }
  666. ]
  667. } );
  668. observable.foo = 'a';
  669. observable.baz = 'b';
  670. expect( el.outerHTML ).to.equal( '<p>ck-class a b foo-is-a ck-end</p>' );
  671. observable.foo = 'c';
  672. observable.baz = 'd';
  673. expect( el.outerHTML ).to.equal( '<p>ck-class c d foo-is-c ck-end</p>' );
  674. } );
  675. it( 'allows binding attribute to the observable – falsy values', () => {
  676. setElement( {
  677. tag: 'p',
  678. attributes: {
  679. 'class': bind.to( 'foo' )
  680. },
  681. children: [ 'abc' ]
  682. } );
  683. observable.foo = 'bar';
  684. expect( el.outerHTML ).to.equal( '<p class="bar">abc</p>' );
  685. observable.foo = false;
  686. expect( el.outerHTML ).to.equal( '<p class="false">abc</p>' );
  687. observable.foo = null;
  688. expect( el.outerHTML ).to.equal( '<p class="null">abc</p>' );
  689. observable.foo = undefined;
  690. expect( el.outerHTML ).to.equal( '<p class="undefined">abc</p>' );
  691. observable.foo = 0;
  692. expect( el.outerHTML ).to.equal( '<p class="0">abc</p>' );
  693. observable.foo = '';
  694. expect( el.outerHTML ).to.equal( '<p>abc</p>' );
  695. } );
  696. it( 'allows binding attribute to the observable – a custom namespace', () => {
  697. setElement( {
  698. tag: 'p',
  699. attributes: {
  700. class: {
  701. ns: 'foo',
  702. value: bind.to( 'foo' )
  703. },
  704. custom: {
  705. ns: 'foo',
  706. value: [
  707. bind.to( 'foo' ),
  708. bind.to( 'baz' )
  709. ]
  710. }
  711. },
  712. children: [ 'abc' ]
  713. } );
  714. observable.foo = 'bar';
  715. expect( el.outerHTML ).to.equal( '<p class="bar" custom="bar qux">abc</p>' );
  716. expect( el.attributes.getNamedItem( 'class' ).namespaceURI ).to.equal( 'foo' );
  717. observable.foo = 'baz';
  718. expect( el.outerHTML ).to.equal( '<p class="baz" custom="baz qux">abc</p>' );
  719. expect( el.attributes.getNamedItem( 'class' ).namespaceURI ).to.equal( 'foo' );
  720. } );
  721. } );
  722. describe( 'if', () => {
  723. it( 'returns an object which describes the binding', () => {
  724. const spy = testUtils.sinon.spy();
  725. const binding = bind.if( 'foo', 'whenTrue', spy );
  726. expect( spy.called ).to.be.false;
  727. expect( binding ).to.have.keys( [ 'type', 'observable', 'emitter', 'attribute', 'callback', 'valueIfTrue' ] );
  728. expect( binding.observable ).to.equal( observable );
  729. expect( binding.callback ).to.equal( spy );
  730. expect( binding.attribute ).to.equal( 'foo' );
  731. expect( binding.valueIfTrue ).to.equal( 'whenTrue' );
  732. } );
  733. it( 'allows binding attribute to the observable – presence of an attribute (HTMLElement attribute)', () => {
  734. setElement( {
  735. tag: 'p',
  736. attributes: {
  737. 'class': bind.if( 'foo' )
  738. },
  739. children: [ 'abc' ]
  740. } );
  741. observable.foo = true;
  742. expect( el.outerHTML ).to.equal( '<p class="">abc</p>' );
  743. observable.foo = false;
  744. expect( el.outerHTML ).to.equal( '<p>abc</p>' );
  745. observable.foo = 'bar';
  746. expect( el.outerHTML ).to.equal( '<p class="">abc</p>' );
  747. } );
  748. // TODO: Is this alright? It makes sense but it's pretty useless. Text Node cannot be
  749. // removed just like an attribute of some HTMLElement.
  750. it( 'allows binding attribute to the observable – presence of an attribute (Text Node)', () => {
  751. setElement( {
  752. tag: 'p',
  753. children: [
  754. {
  755. text: bind.if( 'foo' )
  756. }
  757. ]
  758. } );
  759. observable.foo = true;
  760. expect( el.outerHTML ).to.equal( '<p></p>' );
  761. observable.foo = false;
  762. expect( el.outerHTML ).to.equal( '<p></p>' );
  763. observable.foo = 'bar';
  764. expect( el.outerHTML ).to.equal( '<p></p>' );
  765. } );
  766. it( 'allows binding attribute to the observable – value of an attribute (HTMLElement attribute)', () => {
  767. setElement( {
  768. tag: 'p',
  769. attributes: {
  770. 'class': bind.if( 'foo', 'bar' )
  771. },
  772. children: [ 'abc' ]
  773. } );
  774. observable.foo = 'bar';
  775. expect( el.outerHTML ).to.equal( '<p class="bar">abc</p>' );
  776. observable.foo = false;
  777. expect( el.outerHTML ).to.equal( '<p>abc</p>' );
  778. observable.foo = 64;
  779. expect( el.outerHTML ).to.equal( '<p class="bar">abc</p>' );
  780. } );
  781. it( 'allows binding attribute to the observable – value of an attribute (Text Node)', () => {
  782. setElement( {
  783. tag: 'p',
  784. children: [
  785. {
  786. text: bind.if( 'foo', 'bar' )
  787. }
  788. ]
  789. } );
  790. observable.foo = 'bar';
  791. expect( el.outerHTML ).to.equal( '<p>bar</p>' );
  792. observable.foo = false;
  793. expect( el.outerHTML ).to.equal( '<p></p>' );
  794. observable.foo = 64;
  795. expect( el.outerHTML ).to.equal( '<p>bar</p>' );
  796. } );
  797. it( 'allows binding attribute to the observable – array of bindings (HTMLElement attribute)', () => {
  798. setElement( {
  799. tag: 'p',
  800. attributes: {
  801. 'class': [
  802. 'ck-class',
  803. bind.if( 'foo', 'foo-set' ),
  804. bind.if( 'bar', 'bar-not-set', ( value ) => !value ),
  805. 'ck-end'
  806. ]
  807. },
  808. children: [ 'abc' ]
  809. } );
  810. observable.foo = observable.bar = true;
  811. expect( el.outerHTML ).to.equal( '<p class="ck-class foo-set ck-end">abc</p>' );
  812. observable.foo = observable.bar = false;
  813. expect( el.outerHTML ).to.equal( '<p class="ck-class bar-not-set ck-end">abc</p>' );
  814. } );
  815. it( 'allows binding attribute to the observable – value of an attribute processed by a callback', () => {
  816. setElement( {
  817. tag: 'p',
  818. attributes: {
  819. 'class': bind.if( 'foo', 'there–is–no–foo', value => !value )
  820. },
  821. children: [ 'abc' ]
  822. } );
  823. observable.foo = 'bar';
  824. expect( el.outerHTML ).to.equal( '<p>abc</p>' );
  825. observable.foo = false;
  826. expect( el.outerHTML ).to.equal( '<p class="there–is–no–foo">abc</p>' );
  827. observable.foo = 64;
  828. expect( el.outerHTML ).to.equal( '<p>abc</p>' );
  829. } );
  830. it( 'allows binding attribute to the observable – value of an attribute processed by a callback (use Node)', () => {
  831. setElement( {
  832. tag: 'p',
  833. attributes: {
  834. 'class': bind.if( 'foo', 'eqls-tag-name', ( value, el ) => el.tagName === value )
  835. },
  836. children: [ 'abc' ]
  837. } );
  838. observable.foo = 'bar';
  839. expect( el.outerHTML ).to.equal( '<p>abc</p>' );
  840. observable.foo = 'P';
  841. expect( el.outerHTML ).to.equal( '<p class="eqls-tag-name">abc</p>' );
  842. observable.foo = 64;
  843. expect( el.outerHTML ).to.equal( '<p>abc</p>' );
  844. } );
  845. it( 'allows binding attribute to the observable – falsy values', () => {
  846. setElement( {
  847. tag: 'p',
  848. attributes: {
  849. 'class': bind.if( 'foo', 'foo-is-set' )
  850. },
  851. children: [ 'abc' ]
  852. } );
  853. observable.foo = 'bar';
  854. expect( el.outerHTML ).to.equal( '<p class="foo-is-set">abc</p>' );
  855. observable.foo = false;
  856. expect( el.outerHTML ).to.equal( '<p>abc</p>' );
  857. observable.foo = null;
  858. expect( el.outerHTML ).to.equal( '<p>abc</p>' );
  859. observable.foo = undefined;
  860. expect( el.outerHTML ).to.equal( '<p>abc</p>' );
  861. observable.foo = '';
  862. expect( el.outerHTML ).to.equal( '<p>abc</p>' );
  863. observable.foo = 0;
  864. expect( el.outerHTML ).to.equal( '<p>abc</p>' );
  865. } );
  866. } );
  867. it( 'works with Template#apply() – root element', () => {
  868. new Template( {
  869. tag: 'div',
  870. attributes: {
  871. class: bind.to( 'foo' )
  872. }
  873. } ).apply( el );
  874. expect( el.getAttribute( 'class' ) ).to.equal( 'bar' );
  875. observable.foo = 'baz';
  876. expect( el.getAttribute( 'class' ) ).to.equal( 'baz' );
  877. } );
  878. it( 'works with Template#apply() – children', () => {
  879. const el = document.createElement( 'div' );
  880. const child = document.createElement( 'span' );
  881. child.textContent = 'foo';
  882. el.appendChild( child );
  883. new Template( {
  884. tag: 'div',
  885. children: [
  886. {
  887. tag: 'span',
  888. children: [
  889. {
  890. text: bind.to( 'foo' )
  891. }
  892. ]
  893. }
  894. ]
  895. } ).apply( el );
  896. expect( child.textContent ).to.equal( 'bar' );
  897. observable.foo = 'baz';
  898. expect( child.textContent ).to.equal( 'baz' );
  899. } );
  900. } );
  901. } );
  902. describe( 'extend', () => {
  903. let observable, emitter, bind;
  904. beforeEach( () => {
  905. observable = new Model( {
  906. foo: 'bar',
  907. baz: 'qux'
  908. } );
  909. emitter = Object.create( DOMEmitterMixin );
  910. bind = Template.bind( observable, emitter );
  911. } );
  912. describe( 'attributes', () => {
  913. it( 'extends existing - simple', () => {
  914. extensionTest(
  915. {
  916. tag: 'p',
  917. attributes: {
  918. a: 'b'
  919. }
  920. },
  921. {
  922. attributes: {
  923. a: 'c'
  924. }
  925. },
  926. '<p a="b c"></p>'
  927. );
  928. } );
  929. it( 'extends existing - complex #1', () => {
  930. extensionTest(
  931. {
  932. tag: 'p',
  933. attributes: {
  934. a: [ 'b', 'c' ]
  935. }
  936. },
  937. {
  938. attributes: {
  939. a: 'd'
  940. }
  941. },
  942. '<p a="b c d"></p>'
  943. );
  944. } );
  945. it( 'extends existing - complex #2', () => {
  946. extensionTest(
  947. {
  948. tag: 'p',
  949. attributes: {
  950. a: {
  951. value: 'b'
  952. }
  953. }
  954. },
  955. {
  956. attributes: {
  957. a: [ 'c', 'd' ]
  958. }
  959. },
  960. '<p a="b c d"></p>'
  961. );
  962. } );
  963. it( 'extends existing - complex #3', () => {
  964. extensionTest(
  965. {
  966. tag: 'p',
  967. attributes: {
  968. a: [ 'b' ]
  969. }
  970. },
  971. {
  972. attributes: {
  973. a: [ 'c', 'd' ]
  974. }
  975. },
  976. '<p a="b c d"></p>'
  977. );
  978. } );
  979. it( 'extends existing - bindings #1', () => {
  980. const el = extensionTest(
  981. {
  982. tag: 'p',
  983. attributes: {
  984. a: bind.to( 'foo' )
  985. }
  986. },
  987. {
  988. attributes: {
  989. a: [ 'c', 'd' ]
  990. }
  991. },
  992. '<p a="bar c d"></p>'
  993. );
  994. observable.foo = 'baz';
  995. expect( el.outerHTML ).to.equal( '<p a="baz c d"></p>' );
  996. } );
  997. it( 'extends existing - bindings #2', () => {
  998. const el = extensionTest(
  999. {
  1000. tag: 'p',
  1001. attributes: {
  1002. a: [ 'b', bind.to( 'foo' ) ]
  1003. }
  1004. },
  1005. {
  1006. attributes: {
  1007. a: [ 'c', bind.to( 'baz' ) ]
  1008. }
  1009. },
  1010. '<p a="b bar c qux"></p>'
  1011. );
  1012. observable.foo = 'abc';
  1013. observable.baz = 'def';
  1014. expect( el.outerHTML ).to.equal( '<p a="b abc c def"></p>' );
  1015. } );
  1016. it( 'creates new - no attributes', () => {
  1017. extensionTest(
  1018. {
  1019. tag: 'p',
  1020. },
  1021. {
  1022. attributes: {
  1023. c: 'd'
  1024. }
  1025. },
  1026. '<p c="d"></p>'
  1027. );
  1028. } );
  1029. it( 'creates new - simple', () => {
  1030. extensionTest(
  1031. {
  1032. tag: 'p',
  1033. attributes: {
  1034. a: 'b'
  1035. }
  1036. },
  1037. {
  1038. attributes: {
  1039. c: 'd'
  1040. }
  1041. },
  1042. '<p a="b" c="d"></p>'
  1043. );
  1044. } );
  1045. it( 'creates new - array', () => {
  1046. extensionTest(
  1047. {
  1048. tag: 'p',
  1049. attributes: {
  1050. a: 'b'
  1051. }
  1052. },
  1053. {
  1054. attributes: {
  1055. c: [ 'd', 'e' ]
  1056. }
  1057. },
  1058. '<p a="b" c="d e"></p>'
  1059. );
  1060. } );
  1061. it( 'creates new - bindings #1', () => {
  1062. const el = extensionTest(
  1063. {
  1064. tag: 'p',
  1065. attributes: {
  1066. a: 'b'
  1067. }
  1068. },
  1069. {
  1070. attributes: {
  1071. c: bind.to( 'foo' )
  1072. }
  1073. },
  1074. '<p a="b" c="bar"></p>'
  1075. );
  1076. observable.foo = 'abc';
  1077. expect( el.outerHTML ).to.equal( '<p a="b" c="abc"></p>' );
  1078. } );
  1079. it( 'creates new - bindings #2', () => {
  1080. const el = extensionTest(
  1081. {
  1082. tag: 'p',
  1083. attributes: {
  1084. a: 'b'
  1085. }
  1086. },
  1087. {
  1088. attributes: {
  1089. c: [ 'd', bind.to( 'foo' ) ]
  1090. }
  1091. },
  1092. '<p a="b" c="d bar"></p>'
  1093. );
  1094. observable.foo = 'abc';
  1095. expect( el.outerHTML ).to.equal( '<p a="b" c="d abc"></p>' );
  1096. } );
  1097. } );
  1098. describe( 'text', () => {
  1099. it( 'extends existing - simple', () => {
  1100. const el = extensionTest(
  1101. {
  1102. tag: 'p',
  1103. children: [
  1104. 'foo'
  1105. ]
  1106. },
  1107. {
  1108. children: [
  1109. 'bar'
  1110. ]
  1111. },
  1112. '<p>foobar</p>'
  1113. );
  1114. expect( el.childNodes ).to.have.length( 1 );
  1115. } );
  1116. it( 'extends existing - complex #1', () => {
  1117. const el = extensionTest(
  1118. {
  1119. tag: 'p',
  1120. children: [
  1121. { text: 'foo' }
  1122. ]
  1123. },
  1124. {
  1125. children: [
  1126. 'bar'
  1127. ]
  1128. },
  1129. '<p>foobar</p>'
  1130. );
  1131. expect( el.childNodes ).to.have.length( 1 );
  1132. } );
  1133. it( 'extends existing - complex #2', () => {
  1134. const el = extensionTest(
  1135. {
  1136. tag: 'p',
  1137. children: [
  1138. { text: 'foo' }
  1139. ]
  1140. },
  1141. {
  1142. children: [
  1143. { text: 'bar' }
  1144. ]
  1145. },
  1146. '<p>foobar</p>'
  1147. );
  1148. expect( el.childNodes ).to.have.length( 1 );
  1149. } );
  1150. it( 'extends existing - bindings #1', () => {
  1151. const el = extensionTest(
  1152. {
  1153. tag: 'p',
  1154. children: [
  1155. { text: bind.to( 'foo' ) }
  1156. ]
  1157. },
  1158. {
  1159. children: [
  1160. 'abc'
  1161. ]
  1162. },
  1163. '<p>bar abc</p>'
  1164. );
  1165. observable.foo = 'asd';
  1166. expect( el.outerHTML ).to.equal( '<p>asd abc</p>' );
  1167. expect( el.childNodes ).to.have.length( 1 );
  1168. } );
  1169. it( 'extends existing - bindings #2', () => {
  1170. const el = extensionTest(
  1171. {
  1172. tag: 'p',
  1173. children: [
  1174. 'abc'
  1175. ]
  1176. },
  1177. {
  1178. children: [
  1179. { text: bind.to( 'foo' ) }
  1180. ]
  1181. },
  1182. '<p>abc bar</p>'
  1183. );
  1184. observable.foo = 'asd';
  1185. expect( el.outerHTML ).to.equal( '<p>abc asd</p>' );
  1186. expect( el.childNodes ).to.have.length( 1 );
  1187. } );
  1188. it( 'extends existing - bindings #3', () => {
  1189. const el = extensionTest(
  1190. {
  1191. tag: 'p',
  1192. children: [
  1193. { text: bind.to( 'foo' ) },
  1194. 'X'
  1195. ]
  1196. },
  1197. {
  1198. children: [
  1199. { text: bind.to( 'baz' ) },
  1200. 'Y'
  1201. ]
  1202. },
  1203. '<p>bar quxXY</p>'
  1204. );
  1205. observable.foo = 'A';
  1206. observable.baz = 'B';
  1207. expect( el.outerHTML ).to.equal( '<p>A BXY</p>' );
  1208. expect( el.childNodes ).to.have.length( 2 );
  1209. } );
  1210. } );
  1211. describe( 'children', () => {
  1212. it( 'should throw when the number of children does not correspond', () => {
  1213. expect( () => {
  1214. extensionTest(
  1215. {
  1216. tag: 'p',
  1217. children: [
  1218. 'foo'
  1219. ]
  1220. },
  1221. {
  1222. children: [
  1223. 'foo',
  1224. 'bar'
  1225. ]
  1226. },
  1227. 'it should fail'
  1228. );
  1229. } ).to.throw( CKEditorError, /ui-template-extend-children-mismatch/ );
  1230. } );
  1231. it( 'should throw when no children in target but extending one', () => {
  1232. expect( () => {
  1233. extensionTest(
  1234. {
  1235. tag: 'p',
  1236. },
  1237. {
  1238. children: [
  1239. {
  1240. tag: 'b'
  1241. }
  1242. ]
  1243. },
  1244. 'it should fail'
  1245. );
  1246. } ).to.throw( CKEditorError, /ui-template-extend-children-mismatch/ );
  1247. } );
  1248. it( 'should throw when the number of children does not correspond on some deeper level', () => {
  1249. expect( () => {
  1250. extensionTest(
  1251. {
  1252. tag: 'p',
  1253. children: [
  1254. {
  1255. tag: 'span',
  1256. attributes: {
  1257. class: 'A'
  1258. },
  1259. children: [
  1260. 'A',
  1261. {
  1262. tag: 'span',
  1263. attributes: {
  1264. class: 'AA'
  1265. },
  1266. children: [
  1267. 'AA'
  1268. ]
  1269. }
  1270. ]
  1271. }
  1272. ]
  1273. },
  1274. {
  1275. children: [
  1276. {
  1277. attributes: {
  1278. class: 'B'
  1279. },
  1280. children: [
  1281. 'B'
  1282. ]
  1283. }
  1284. ]
  1285. },
  1286. 'it should fail'
  1287. );
  1288. } ).to.throw( CKEditorError, /ui-template-extend-children-mismatch/ );
  1289. } );
  1290. it( 'extends existing - simple', () => {
  1291. extensionTest(
  1292. {
  1293. tag: 'p',
  1294. children: [
  1295. {
  1296. tag: 'span',
  1297. attributes: {
  1298. class: 'foo'
  1299. }
  1300. }
  1301. ]
  1302. },
  1303. {
  1304. children: [
  1305. {
  1306. tag: 'span',
  1307. attributes: {
  1308. class: 'bar'
  1309. }
  1310. }
  1311. ]
  1312. },
  1313. '<p><span class="foo bar"></span></p>'
  1314. );
  1315. } );
  1316. it( 'extends existing - complex', () => {
  1317. extensionTest(
  1318. {
  1319. tag: 'p',
  1320. children: [
  1321. {
  1322. tag: 'span',
  1323. attributes: {
  1324. class: 'A'
  1325. },
  1326. children: [
  1327. 'A',
  1328. {
  1329. tag: 'span',
  1330. attributes: {
  1331. class: 'AA'
  1332. },
  1333. children: [
  1334. 'AA'
  1335. ]
  1336. }
  1337. ]
  1338. }
  1339. ]
  1340. },
  1341. {
  1342. children: [
  1343. {
  1344. tag: 'span',
  1345. attributes: {
  1346. class: 'B'
  1347. },
  1348. children: [
  1349. 'B',
  1350. {
  1351. tag: 'span',
  1352. attributes: {
  1353. class: 'BB'
  1354. },
  1355. children: [
  1356. 'BB'
  1357. ]
  1358. }
  1359. ]
  1360. }
  1361. ]
  1362. },
  1363. '<p><span class="A B">AB<span class="AA BB">AABB</span></span></p>'
  1364. );
  1365. } );
  1366. it( 'allows extending a particular child', () => {
  1367. const template = new Template( {
  1368. tag: 'p',
  1369. children: [
  1370. {
  1371. tag: 'span',
  1372. attributes: {
  1373. class: 'foo'
  1374. }
  1375. }
  1376. ]
  1377. } );
  1378. Template.extend( template.definition.children[ 0 ], {
  1379. attributes: {
  1380. class: 'bar'
  1381. }
  1382. } );
  1383. expect( template.render().outerHTML ).to.equal( '<p><span class="foo bar"></span></p>' );
  1384. } );
  1385. it( 'allows extending a particular child – recursively', () => {
  1386. const template = new Template( {
  1387. tag: 'p',
  1388. children: [
  1389. {
  1390. tag: 'span',
  1391. attributes: {
  1392. class: 'A'
  1393. },
  1394. children: [
  1395. 'A',
  1396. {
  1397. tag: 'span',
  1398. attributes: {
  1399. class: 'AA'
  1400. },
  1401. children: [
  1402. 'AA'
  1403. ]
  1404. }
  1405. ]
  1406. }
  1407. ]
  1408. } );
  1409. Template.extend( template.definition.children[ 0 ], {
  1410. attributes: {
  1411. class: 'B',
  1412. },
  1413. children: [
  1414. 'B',
  1415. {
  1416. attributes: {
  1417. class: 'BB'
  1418. }
  1419. }
  1420. ]
  1421. } );
  1422. expect( template.render().outerHTML ).to.equal( '<p><span class="A B">AB<span class="AA BB">AA</span></span></p>' );
  1423. } );
  1424. } );
  1425. describe( 'listeners', () => {
  1426. it( 'extends existing', () => {
  1427. const spy1 = testUtils.sinon.spy();
  1428. const spy2 = testUtils.sinon.spy();
  1429. const spy3 = testUtils.sinon.spy();
  1430. const spy4 = testUtils.sinon.spy();
  1431. const spy5 = testUtils.sinon.spy();
  1432. observable.on( 'A', spy1 );
  1433. observable.on( 'C', spy2 );
  1434. observable.on( 'B', spy3 );
  1435. observable.on( 'D', spy4 );
  1436. const el = extensionTest(
  1437. {
  1438. tag: 'p',
  1439. children: [
  1440. {
  1441. tag: 'span'
  1442. }
  1443. ],
  1444. on: {
  1445. click: bind.to( 'A' ),
  1446. 'click@span': [
  1447. bind.to( 'B' ),
  1448. bind.to( spy5 )
  1449. ]
  1450. }
  1451. },
  1452. {
  1453. on: {
  1454. click: bind.to( 'C' ),
  1455. 'click@span': bind.to( 'D' )
  1456. }
  1457. },
  1458. '<p><span></span></p>'
  1459. );
  1460. dispatchEvent( el, 'click' );
  1461. expect( spy1.calledOnce ).to.be.true;
  1462. expect( spy2.calledOnce ).to.be.true;
  1463. expect( spy3.called ).to.be.false;
  1464. expect( spy4.called ).to.be.false;
  1465. expect( spy5.called ).to.be.false;
  1466. dispatchEvent( el.firstChild, 'click' );
  1467. expect( spy1.calledTwice ).to.be.true;
  1468. expect( spy2.calledTwice ).to.be.true;
  1469. expect( spy3.calledOnce ).to.be.true;
  1470. expect( spy4.calledOnce ).to.be.true;
  1471. expect( spy5.calledOnce ).to.be.true;
  1472. } );
  1473. it( 'creates new', () => {
  1474. const spy1 = testUtils.sinon.spy();
  1475. const spy2 = testUtils.sinon.spy();
  1476. const spy3 = testUtils.sinon.spy();
  1477. observable.on( 'A', spy1 );
  1478. observable.on( 'B', spy2 );
  1479. const el = extensionTest(
  1480. {
  1481. tag: 'p',
  1482. children: [
  1483. {
  1484. tag: 'span'
  1485. }
  1486. ],
  1487. },
  1488. {
  1489. on: {
  1490. click: bind.to( 'A' ),
  1491. 'click@span': [
  1492. bind.to( 'B' ),
  1493. bind.to( spy3 )
  1494. ]
  1495. }
  1496. },
  1497. '<p><span></span></p>'
  1498. );
  1499. dispatchEvent( el, 'click' );
  1500. expect( spy1.calledOnce ).to.be.true;
  1501. expect( spy2.called ).to.be.false;
  1502. expect( spy3.called ).to.be.false;
  1503. dispatchEvent( el.firstChild, 'click' );
  1504. expect( spy1.calledTwice ).to.be.true;
  1505. expect( spy2.calledOnce ).to.be.true;
  1506. expect( spy3.calledOnce ).to.be.true;
  1507. } );
  1508. } );
  1509. } );
  1510. } );
  1511. function setElement( template ) {
  1512. el = new Template( template ).render();
  1513. document.body.appendChild( el );
  1514. }
  1515. function extensionTest( base, extension, expectedHtml ) {
  1516. const template = new Template( base );
  1517. Template.extend( template, extension );
  1518. const el = template.render();
  1519. document.body.appendChild( el );
  1520. expect( el.outerHTML ).to.equal( expectedHtml );
  1521. return el;
  1522. }
  1523. function dispatchEvent( el, domEvtName ) {
  1524. if ( !el.parentNode ) {
  1525. throw new Error( 'To dispatch an event, element must be in DOM. Otherwise #target is null.' );
  1526. }
  1527. el.dispatchEvent( new Event( domEvtName, {
  1528. bubbles: true
  1529. } ) );
  1530. }