template.js 52 KB

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