template.js 43 KB

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