template.js 67 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019
  1. /**
  2. * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* globals HTMLElement, Event, document */
  6. import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
  7. import { default as Template, TemplateToBinding, TemplateIfBinding } from '../src/template';
  8. import View from '../src/view';
  9. import ViewCollection from '../src/viewcollection';
  10. import Model from '../src/model';
  11. import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
  12. import EmitterMixin from '@ckeditor/ckeditor5-utils/src/emittermixin';
  13. import DomEmitterMixin from '@ckeditor/ckeditor5-utils/src/dom/emittermixin';
  14. import normalizeHtml from '@ckeditor/ckeditor5-utils/tests/_utils/normalizehtml';
  15. import log from '@ckeditor/ckeditor5-utils/src/log';
  16. testUtils.createSinonSandbox();
  17. let el, text;
  18. describe( 'Template', () => {
  19. describe( 'constructor()', () => {
  20. it( 'sets #_isRendered property', () => {
  21. expect( new Template( { tag: 'p' } )._isRendered ).to.be.false;
  22. } );
  23. it( 'accepts and normalizes the definition', () => {
  24. const bind = Template.bind( new Model( {} ), Object.create( DomEmitterMixin ) );
  25. const childNode = document.createElement( 'div' );
  26. const childTemplate = new Template( {
  27. tag: 'b'
  28. } );
  29. const tpl = new Template( {
  30. tag: 'p',
  31. attributes: {
  32. a: 'foo',
  33. b: [ 'bar', 'baz' ],
  34. c: {
  35. ns: 'abc',
  36. value: bind.to( 'qux' )
  37. }
  38. },
  39. children: [
  40. {
  41. text: 'content'
  42. },
  43. {
  44. text: bind.to( 'x' )
  45. },
  46. 'abc',
  47. {
  48. text: [ 'a', 'b' ]
  49. },
  50. childNode,
  51. childTemplate
  52. ],
  53. on: {
  54. 'a@span': bind.to( 'b' ),
  55. 'b@span': bind.to( () => {} ),
  56. 'c@span': [
  57. bind.to( 'c' ),
  58. bind.to( () => {} )
  59. ]
  60. }
  61. } );
  62. expect( tpl.attributes.a[ 0 ] ).to.equal( 'foo' );
  63. expect( tpl.attributes.b[ 0 ] ).to.equal( 'bar' );
  64. expect( tpl.attributes.b[ 1 ] ).to.equal( 'baz' );
  65. expect( tpl.attributes.c[ 0 ].value[ 0 ] ).to.be.instanceof( TemplateToBinding );
  66. expect( tpl.children ).to.have.length( 6 );
  67. expect( tpl.children[ 0 ].text[ 0 ] ).to.equal( 'content' );
  68. expect( tpl.children[ 1 ].text[ 0 ] ).to.be.instanceof( TemplateToBinding );
  69. expect( tpl.children[ 2 ].text[ 0 ] ).to.equal( 'abc' );
  70. expect( tpl.children[ 3 ].text[ 0 ] ).to.equal( 'a' );
  71. expect( tpl.children[ 3 ].text[ 1 ] ).to.equal( 'b' );
  72. expect( tpl.children[ 4 ] ).to.equal( childNode );
  73. expect( tpl.children[ 5 ] ).to.equal( childTemplate );
  74. expect( tpl.eventListeners[ 'a@span' ][ 0 ] ).to.be.instanceof( TemplateToBinding );
  75. expect( tpl.eventListeners[ 'b@span' ][ 0 ] ).to.be.instanceof( TemplateToBinding );
  76. expect( tpl.eventListeners[ 'c@span' ][ 0 ] ).to.be.instanceof( TemplateToBinding );
  77. expect( tpl.eventListeners[ 'c@span' ][ 1 ] ).to.be.instanceof( TemplateToBinding );
  78. // Note that Template mixes EmitterMixin.
  79. expect( tpl.on ).to.be.a( 'function' );
  80. expect( tpl.on[ 'a@span' ] ).to.be.undefined;
  81. } );
  82. it( 'defines #children collection', () => {
  83. const elementTpl = new Template( {
  84. tag: 'p',
  85. } );
  86. const textTpl = new Template( {
  87. text: 'foo'
  88. } );
  89. expect( elementTpl.children ).to.be.an( 'array' );
  90. expect( elementTpl.children ).to.have.length( 0 );
  91. // Text will never have children.
  92. expect( textTpl.children ).to.be.undefined;
  93. } );
  94. it( 'does not modify passed definition', () => {
  95. const def = {
  96. tag: 'p',
  97. attributes: {
  98. a: 'foo',
  99. },
  100. children: [
  101. {
  102. tag: 'span'
  103. }
  104. ]
  105. };
  106. const tpl = new Template( def );
  107. expect( def.attributes ).to.not.equal( tpl.attributes );
  108. expect( def.children ).to.not.equal( tpl.children );
  109. expect( def.children[ 0 ] ).to.not.equal( tpl.children[ 0 ] );
  110. expect( def.attributes.a ).to.equal( 'foo' );
  111. expect( def.children[ 0 ].tag ).to.equal( 'span' );
  112. expect( tpl.attributes.a[ 0 ] ).to.equal( 'foo' );
  113. expect( tpl.children[ 0 ].tag ).to.equal( 'span' );
  114. } );
  115. } );
  116. describe( 'render()', () => {
  117. it( 'throws when the template definition is wrong', () => {
  118. expect( () => {
  119. new Template( {} ).render();
  120. } ).to.throw( CKEditorError, /ui-template-wrong-syntax/ );
  121. expect( () => {
  122. new Template( {
  123. tag: 'p',
  124. text: 'foo'
  125. } ).render();
  126. } ).to.throw( CKEditorError, /ui-template-wrong-syntax/ );
  127. } );
  128. it( 'sets #_isRendered true', () => {
  129. const tpl = new Template( { tag: 'p' } );
  130. expect( tpl._isRendered ).to.be.false;
  131. tpl.render();
  132. expect( tpl._isRendered ).to.be.true;
  133. } );
  134. describe( 'DOM Node', () => {
  135. it( 'creates HTMLElement', () => {
  136. const el = new Template( {
  137. tag: 'p',
  138. } ).render();
  139. expect( el ).to.be.instanceof( HTMLElement );
  140. expect( el.parentNode ).to.be.null;
  141. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p></p>' );
  142. expect( el.namespaceURI ).to.equal( 'http://www.w3.org/1999/xhtml' );
  143. } );
  144. it( 'creates an element in a custom namespace', () => {
  145. const el = new Template( {
  146. tag: 'p',
  147. ns: 'foo'
  148. } ).render();
  149. expect( el.namespaceURI ).to.equal( 'foo' );
  150. } );
  151. it( 'creates a Text node', () => {
  152. const node = new Template( { text: 'foo' } ).render();
  153. expect( node.nodeType ).to.equal( 3 );
  154. expect( node.textContent ).to.equal( 'foo' );
  155. } );
  156. } );
  157. describe( 'attributes', () => {
  158. it( 'renders HTMLElement attributes', () => {
  159. const el = new Template( {
  160. tag: 'p',
  161. attributes: {
  162. 'class': [ 'a', 'b' ],
  163. x: 'bar'
  164. },
  165. children: [ 'foo' ]
  166. } ).render();
  167. expect( el ).to.be.instanceof( HTMLElement );
  168. expect( el.parentNode ).to.be.null;
  169. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="a b" x="bar">foo</p>' );
  170. expect( el.attributes.getNamedItem( 'class' ).namespaceURI ).to.be.null;
  171. } );
  172. it( 'renders HTMLElement attributes – empty', () => {
  173. const el = new Template( {
  174. tag: 'p',
  175. attributes: {
  176. class: '',
  177. x: [ '', '' ]
  178. },
  179. children: [ 'foo' ]
  180. } ).render();
  181. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>foo</p>' );
  182. } );
  183. it( 'renders HTMLElement attributes – falsy values', () => {
  184. const el = new Template( {
  185. tag: 'p',
  186. attributes: {
  187. class: false,
  188. x: [ '', null, undefined, false ],
  189. y: [ 'foo', null, undefined, false ]
  190. },
  191. children: [ 'foo' ]
  192. } ).render();
  193. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p y="foo">foo</p>' );
  194. } );
  195. it( 'renders HTMLElement attributes in a custom namespace', () => {
  196. const el = new Template( {
  197. tag: 'p',
  198. attributes: {
  199. class: {
  200. ns: 'foo',
  201. value: [ 'a', 'b' ]
  202. },
  203. x: {
  204. ns: 'abc',
  205. value: 'bar'
  206. }
  207. },
  208. children: [ 'foo' ]
  209. } ).render();
  210. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="a b" x="bar">foo</p>' );
  211. expect( el.attributes.getNamedItem( 'class' ).namespaceURI ).to.equal( 'foo' );
  212. expect( el.attributes.getNamedItem( 'x' ).namespaceURI ).to.equal( 'abc' );
  213. } );
  214. describe( 'style', () => {
  215. let observable, emitter, bind;
  216. beforeEach( () => {
  217. observable = new Model( {
  218. width: '10px',
  219. backgroundColor: 'yellow'
  220. } );
  221. emitter = Object.create( EmitterMixin );
  222. bind = Template.bind( observable, emitter );
  223. } );
  224. it( 'renders as a static value', () => {
  225. setElement( {
  226. tag: 'p',
  227. attributes: {
  228. style: 'color: red'
  229. }
  230. } );
  231. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p style="color:red;"></p>' );
  232. } );
  233. it( 'renders as a static value (Array of values)', () => {
  234. setElement( {
  235. tag: 'p',
  236. attributes: {
  237. style: [ 'color: red;', 'display: block;' ]
  238. }
  239. } );
  240. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p style="color:red;display:block;"></p>' );
  241. } );
  242. it( 'renders as a value bound to the model', () => {
  243. setElement( {
  244. tag: 'p',
  245. attributes: {
  246. style: bind.to( 'width', w => `width: ${ w }` )
  247. }
  248. } );
  249. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p style="width:10px;"></p>' );
  250. observable.width = '1em';
  251. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p style="width:1em;"></p>' );
  252. } );
  253. it( 'renders as a value bound to the model (Array of bindings)', () => {
  254. setElement( {
  255. tag: 'p',
  256. attributes: {
  257. style: [
  258. bind.to( 'width', w => `width: ${ w };` ),
  259. bind.to( 'backgroundColor', c => `background-color: ${ c };` )
  260. ]
  261. }
  262. } );
  263. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p style="width:10px;background-color:yellow;"></p>' );
  264. observable.width = '1em';
  265. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p style="width:1em;background-color:yellow;"></p>' );
  266. } );
  267. describe( 'object', () => {
  268. it( 'renders with static and bound attributes', () => {
  269. setElement( {
  270. tag: 'p',
  271. attributes: {
  272. style: {
  273. width: bind.to( 'width' ),
  274. height: '10px',
  275. backgroundColor: bind.to( 'backgroundColor' )
  276. }
  277. }
  278. } );
  279. expect( normalizeHtml( el.outerHTML ) )
  280. .to.equal( '<p style="width:10px;height:10px;background-color:yellow;"></p>' );
  281. observable.width = '20px';
  282. observable.backgroundColor = 'green';
  283. expect( normalizeHtml( el.outerHTML ) )
  284. .to.equal( '<p style="width:20px;height:10px;background-color:green;"></p>' );
  285. } );
  286. it( 'renders with empty string attributes', () => {
  287. setElement( {
  288. tag: 'p',
  289. attributes: {
  290. style: {
  291. width: '',
  292. backgroundColor: bind.to( 'backgroundColor' )
  293. }
  294. }
  295. } );
  296. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p style="background-color:yellow;"></p>' );
  297. observable.backgroundColor = '';
  298. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p></p>' );
  299. } );
  300. it( 'renders with falsy values', () => {
  301. setElement( {
  302. tag: 'p',
  303. attributes: {
  304. style: {
  305. width: null,
  306. height: false,
  307. color: undefined
  308. }
  309. }
  310. } );
  311. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p></p>' );
  312. } );
  313. } );
  314. } );
  315. } );
  316. describe( 'children', () => {
  317. it( 'creates HTMLElement children', () => {
  318. const el = new Template( {
  319. tag: 'p',
  320. attributes: {
  321. a: 'A'
  322. },
  323. children: [
  324. {
  325. tag: 'b',
  326. children: [ 'B' ]
  327. },
  328. {
  329. tag: 'i',
  330. children: [
  331. 'C',
  332. {
  333. tag: 'b',
  334. children: [ 'D' ]
  335. }
  336. ]
  337. }
  338. ]
  339. } ).render();
  340. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p a="A"><b>B</b><i>C<b>D</b></i></p>' );
  341. } );
  342. it( 'creates a child Text Node (different syntaxes)', () => {
  343. const el = new Template( {
  344. tag: 'p',
  345. children: [
  346. 'foo',
  347. { text: 'bar' }
  348. ]
  349. } ).render();
  350. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>foobar</p>' );
  351. } );
  352. it( 'creates multiple child Text Nodes', () => {
  353. const el = new Template( {
  354. tag: 'p',
  355. children: [
  356. 'a',
  357. 'b',
  358. { text: 'c' },
  359. 'd',
  360. { text: [ 'e', 'f' ] }
  361. ]
  362. } ).render();
  363. expect( el.childNodes ).to.have.length( 5 );
  364. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>abcdef</p>' );
  365. } );
  366. it( 'renders view children', () => {
  367. const v1 = getView( {
  368. tag: 'b',
  369. attributes: {
  370. class: [
  371. 'v1'
  372. ]
  373. }
  374. } );
  375. const v2 = getView( {
  376. tag: 'b',
  377. attributes: {
  378. class: [
  379. 'v2'
  380. ]
  381. }
  382. } );
  383. const v3 = getView( {
  384. tag: 'b',
  385. attributes: {
  386. class: [
  387. 'v3'
  388. ]
  389. }
  390. } );
  391. v3.render();
  392. const tpl = new Template( {
  393. tag: 'p',
  394. children: [ v1, v2, v3 ]
  395. } );
  396. expect( tpl.children[ 0 ] ).to.equal( v1 );
  397. expect( tpl.children[ 1 ] ).to.equal( v2 );
  398. expect( tpl.children[ 2 ] ).to.equal( v3 );
  399. const rendered = tpl.render();
  400. expect( normalizeHtml( rendered.outerHTML ) )
  401. .to.equal( '<p><b class="v1"></b><b class="v2"></b><b class="v3"></b></p>' );
  402. // Make sure the child views will not re–render their elements but
  403. // use ones rendered by the template instance above.
  404. expect( v1.element ).to.equal( rendered.firstChild );
  405. expect( v2.element ).to.equal( rendered.children[ 1 ] );
  406. expect( v3.element ).to.equal( rendered.lastChild );
  407. } );
  408. it( 'renders view collection', () => {
  409. const collection = new ViewCollection();
  410. const v1 = getView( {
  411. tag: 'span',
  412. attributes: {
  413. class: [
  414. 'v1'
  415. ]
  416. }
  417. } );
  418. const v2 = getView( {
  419. tag: 'span',
  420. attributes: {
  421. class: [
  422. 'v2'
  423. ]
  424. }
  425. } );
  426. collection.add( v1 );
  427. collection.add( v2 );
  428. const rendered = new Template( {
  429. tag: 'p',
  430. children: collection
  431. } ).render();
  432. expect( normalizeHtml( rendered.outerHTML ) ).to.equal( '<p><span class="v1"></span><span class="v2"></span></p>' );
  433. // Make sure the child views will not re–render their elements but
  434. // use ones rendered by the template instance above.
  435. expect( v1.element ).to.equal( rendered.firstChild );
  436. expect( v2.element ).to.equal( rendered.lastChild );
  437. expect( collection._parentElement ).to.equal( rendered );
  438. } );
  439. it( 'renders DOM nodes', () => {
  440. const view = new View();
  441. view.set( {
  442. foo: 'bar',
  443. bar: 'baz'
  444. } );
  445. const bind = Template.bind( view, view );
  446. const childA = new Template( {
  447. tag: 'b',
  448. attributes: {
  449. class: bind.to( 'foo' )
  450. }
  451. } ).render();
  452. const childB = new Template( {
  453. text: bind.to( 'bar' )
  454. } ).render();
  455. const rendered = new Template( {
  456. tag: 'p',
  457. children: [
  458. childA,
  459. childB
  460. ]
  461. } ).render();
  462. expect( normalizeHtml( rendered.outerHTML ) ).to.equal( '<p><b class="bar"></b>baz</p>' );
  463. } );
  464. // #117
  465. it( 'renders template children', () => {
  466. const childTplA = new Template( {
  467. tag: 'a'
  468. } );
  469. const childTplB = new Template( {
  470. tag: 'b'
  471. } );
  472. const view = new View();
  473. view.set( {
  474. foo: 'bar',
  475. bar: 'foo'
  476. } );
  477. const bind = Template.bind( view, view );
  478. // Yes, this TC is crazy in some sort of way. It's all about template
  479. // normalization and deep cloning and the like.
  480. //
  481. // To **really** prove the code is safe there must be a View instance,
  482. // which has some child bound to its attribute and... there must be a
  483. // Template instance (below), which also has a child bound to the same attribute.
  484. //
  485. // I know, the view instance and its template aren't even rendered.
  486. //
  487. // The truth is that madness behind this test case is so deep there are no
  488. // words to explain it. But what actually matters is that it proves the Template
  489. // class is free of "Maximum call stack size exceeded" error in certain
  490. // situations.
  491. view.setTemplate( {
  492. tag: 'span',
  493. children: [
  494. {
  495. text: bind.to( 'bar' )
  496. }
  497. ]
  498. } );
  499. const childTplC = new Template( {
  500. tag: 'i',
  501. children: [
  502. {
  503. text: bind.to( 'bar' )
  504. }
  505. ]
  506. } );
  507. const tpl = new Template( {
  508. tag: 'p',
  509. children: [
  510. childTplA,
  511. childTplB,
  512. childTplC
  513. ]
  514. } );
  515. // Make sure child instances weren't cloned.
  516. expect( tpl.children[ 0 ] ).to.equal( childTplA );
  517. expect( tpl.children[ 1 ] ).to.equal( childTplB );
  518. expect( tpl.children[ 2 ] ).to.equal( childTplC );
  519. expect( normalizeHtml( tpl.render().outerHTML ) ).to.equal(
  520. '<p><a></a><b></b><i>foo</i></p>'
  521. );
  522. } );
  523. // https://github.com/ckeditor/ckeditor5-ui/issues/289
  524. it( 'does not throw when child does not have an "id" property', () => {
  525. const strongView = getView( {
  526. tag: 'strong'
  527. } );
  528. strongView.set( 'id' );
  529. expect( () => {
  530. getView( {
  531. tag: 'div',
  532. children: [
  533. strongView
  534. ]
  535. } );
  536. } ).to.not.throw();
  537. } );
  538. } );
  539. describe( 'bindings', () => {
  540. it( 'activates model bindings – root', () => {
  541. const observable = new Model( {
  542. foo: 'bar'
  543. } );
  544. const emitter = Object.create( EmitterMixin );
  545. const bind = Template.bind( observable, emitter );
  546. const el = new Template( {
  547. tag: 'div',
  548. attributes: {
  549. class: bind.to( 'foo' )
  550. }
  551. } ).render();
  552. expect( el.getAttribute( 'class' ) ).to.equal( 'bar' );
  553. observable.foo = 'baz';
  554. expect( el.getAttribute( 'class' ) ).to.equal( 'baz' );
  555. } );
  556. it( 'activates model bindings – children', () => {
  557. const observable = new Model( {
  558. foo: 'bar'
  559. } );
  560. const emitter = Object.create( EmitterMixin );
  561. const bind = Template.bind( observable, emitter );
  562. const el = new Template( {
  563. tag: 'div',
  564. children: [
  565. {
  566. tag: 'span',
  567. children: [
  568. {
  569. text: [
  570. bind.to( 'foo' ),
  571. 'static'
  572. ]
  573. }
  574. ]
  575. }
  576. ]
  577. } ).render();
  578. expect( el.firstChild.textContent ).to.equal( 'bar static' );
  579. observable.foo = 'baz';
  580. expect( el.firstChild.textContent ).to.equal( 'baz static' );
  581. } );
  582. } );
  583. } );
  584. describe( 'apply()', () => {
  585. let observable, domEmitter, bind;
  586. beforeEach( () => {
  587. el = getElement( { tag: 'div' } );
  588. text = document.createTextNode( '' );
  589. observable = new Model( {
  590. foo: 'bar',
  591. baz: 'qux'
  592. } );
  593. domEmitter = Object.create( DomEmitterMixin );
  594. bind = Template.bind( observable, domEmitter );
  595. } );
  596. it( 'throws when wrong template definition', () => {
  597. expect( () => {
  598. new Template( {
  599. tag: 'p',
  600. text: 'foo'
  601. } ).apply( el );
  602. } ).to.throw( CKEditorError, /ui-template-wrong-syntax/ );
  603. } );
  604. it( 'accepts empty template definition', () => {
  605. new Template( {} ).apply( el );
  606. new Template( {} ).apply( text );
  607. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<div></div>' );
  608. expect( text.textContent ).to.equal( '' );
  609. } );
  610. describe( 'text', () => {
  611. it( 'applies textContent to a Text Node', () => {
  612. new Template( {
  613. text: 'abc'
  614. } ).apply( text );
  615. expect( text.textContent ).to.equal( 'abc' );
  616. } );
  617. it( 'overrides existing textContent of a Text Node', () => {
  618. text.textContent = 'foo';
  619. new Template( {
  620. text: bind.to( 'foo' )
  621. } ).apply( text );
  622. expect( text.textContent ).to.equal( 'bar' );
  623. observable.foo = 'qux';
  624. expect( text.textContent ).to.equal( 'qux' );
  625. } );
  626. it( 'overrides textContent of an existing Text Node in a HTMLElement', () => {
  627. el.textContent = 'bar';
  628. new Template( {
  629. tag: 'div',
  630. children: [ 'foo' ]
  631. } ).apply( el );
  632. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<div>foo</div>' );
  633. } );
  634. } );
  635. describe( 'attributes', () => {
  636. it( 'applies attributes to an HTMLElement', () => {
  637. new Template( {
  638. tag: 'div',
  639. attributes: {
  640. 'class': [ 'a', 'b' ],
  641. x: 'bar'
  642. }
  643. } ).apply( el );
  644. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<div class="a b" x="bar"></div>' );
  645. } );
  646. it( 'manages existing attribute values ("class" vs. "non–class")', () => {
  647. el.setAttribute( 'class', 'default' );
  648. el.setAttribute( 'x', 'foo' );
  649. new Template( {
  650. tag: 'div',
  651. attributes: {
  652. 'class': [ 'a', 'b' ],
  653. x: 'bar'
  654. }
  655. } ).apply( el );
  656. expect( normalizeHtml( el.outerHTML ) ).to.equal(
  657. '<div class="default a b" x="bar"></div>'
  658. );
  659. } );
  660. it( 'applies attributes and TextContent to a DOM tree', () => {
  661. el.textContent = 'abc';
  662. el.appendChild( getElement( { tag: 'span' } ) );
  663. new Template( {
  664. tag: 'div',
  665. attributes: {
  666. 'class': 'parent'
  667. },
  668. children: [
  669. 'Children:',
  670. {
  671. tag: 'span',
  672. attributes: {
  673. class: 'child'
  674. }
  675. }
  676. ]
  677. } ).apply( el );
  678. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<div class="parent">Children:<span class="child"></span></div>' );
  679. } );
  680. describe( 'style', () => {
  681. beforeEach( () => {
  682. observable = new Model( {
  683. width: '10px',
  684. backgroundColor: 'yellow'
  685. } );
  686. bind = Template.bind( observable, domEmitter );
  687. } );
  688. it( 'applies as a static value', () => {
  689. setElement( {
  690. tag: 'p',
  691. attributes: {
  692. style: 'color: red;'
  693. }
  694. } );
  695. new Template( {
  696. attributes: {
  697. style: 'display: block'
  698. }
  699. } ).apply( el );
  700. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p style="color:red;display:block;"></p>' );
  701. } );
  702. it( 'applies as a static value (Array of values)', () => {
  703. setElement( {
  704. tag: 'p',
  705. attributes: {
  706. style: [ 'color: red;', 'display: block;' ]
  707. }
  708. } );
  709. new Template( {
  710. attributes: {
  711. style: [ 'float: left;', 'overflow: hidden;' ]
  712. }
  713. } ).apply( el );
  714. expect( normalizeHtml( el.outerHTML ) ).to.equal(
  715. '<p style="color:red;display:block;float:left;overflow:hidden;"></p>'
  716. );
  717. } );
  718. it( 'applies when in an object syntax', () => {
  719. setElement( {
  720. tag: 'p',
  721. attributes: {
  722. style: {
  723. width: '20px',
  724. }
  725. }
  726. } );
  727. new Template( {
  728. attributes: {
  729. style: {
  730. height: '10px',
  731. float: 'left',
  732. backgroundColor: 'green'
  733. }
  734. }
  735. } ).apply( el );
  736. expect( normalizeHtml( el.outerHTML ) )
  737. .to.equal( '<p style="width:20px;height:10px;float:left;background-color:green;"></p>' );
  738. } );
  739. it( 'applies when bound to observable', () => {
  740. setElement( {
  741. tag: 'p',
  742. attributes: {
  743. style: {
  744. left: '20px',
  745. }
  746. }
  747. } );
  748. new Template( {
  749. attributes: {
  750. style: {
  751. width: bind.to( 'width' ),
  752. float: 'left',
  753. backgroundColor: 'green'
  754. }
  755. }
  756. } ).apply( el );
  757. expect( normalizeHtml( el.outerHTML ) ).to.equal(
  758. '<p style="left:20px;width:10px;float:left;background-color:green;"></p>'
  759. );
  760. observable.width = '100px';
  761. expect( normalizeHtml( el.outerHTML ) ).to.equal(
  762. '<p style="left:20px;width:100px;float:left;background-color:green;"></p>'
  763. );
  764. } );
  765. } );
  766. } );
  767. describe( 'children', () => {
  768. it( 'doesn\'t apply new child to an HTMLElement – Text Node', () => {
  769. new Template( {
  770. tag: 'div',
  771. children: [ 'foo' ]
  772. } ).apply( el );
  773. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<div></div>' );
  774. } );
  775. it( 'doesn\'t apply new child to an HTMLElement – HTMLElement', () => {
  776. new Template( {
  777. tag: 'div',
  778. children: [
  779. {
  780. tag: 'span'
  781. }
  782. ]
  783. } ).apply( el );
  784. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<div></div>' );
  785. } );
  786. it( 'doesn\'t apply new child to an HTMLElement – view', () => {
  787. const view = getView( {
  788. tag: 'span',
  789. attributes: {
  790. class: [
  791. 'v1'
  792. ]
  793. }
  794. } );
  795. new Template( {
  796. tag: 'p',
  797. children: [ view ]
  798. } ).apply( el );
  799. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<div></div>' );
  800. } );
  801. it( 'doesn\'t apply new child to an HTMLElement – view collection', () => {
  802. const collection = new ViewCollection();
  803. collection.add( getView( {
  804. tag: 'span',
  805. attributes: {
  806. class: [
  807. 'v1'
  808. ]
  809. }
  810. } ) );
  811. new Template( {
  812. tag: 'p',
  813. children: collection
  814. } ).apply( el );
  815. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<div></div>' );
  816. expect( collection._parentElement ).to.be.null;
  817. } );
  818. it( 'should work for deep DOM structure with bindings and event listeners', () => {
  819. const childA = getElement( {
  820. tag: 'a',
  821. attributes: {
  822. class: 'a1 a2'
  823. },
  824. children: [
  825. 'a'
  826. ]
  827. } );
  828. const childB = getElement( {
  829. tag: 'b',
  830. attributes: {
  831. class: 'b1 b2'
  832. },
  833. children: [
  834. 'b'
  835. ]
  836. } );
  837. el.appendChild( childA );
  838. el.appendChild( childB );
  839. expect( normalizeHtml( el.outerHTML ) ).to.equal(
  840. '<div><a class="a1 a2">a</a><b class="b1 b2">b</b></div>'
  841. );
  842. const spy1 = testUtils.sinon.spy();
  843. const spy2 = testUtils.sinon.spy();
  844. const spy3 = testUtils.sinon.spy();
  845. observable.on( 'ku', spy1 );
  846. observable.on( 'kd', spy2 );
  847. observable.on( 'mo', spy3 );
  848. new Template( {
  849. tag: 'div',
  850. children: [
  851. {
  852. tag: 'a',
  853. on: {
  854. keyup: bind.to( 'ku' )
  855. },
  856. attributes: {
  857. class: bind.to( 'foo', val => 'applied-A-' + val ),
  858. id: 'applied-A'
  859. },
  860. children: [ 'applied-a' ]
  861. },
  862. {
  863. tag: 'b',
  864. on: {
  865. keydown: bind.to( 'kd' )
  866. },
  867. attributes: {
  868. class: bind.to( 'baz', val => 'applied-B-' + val ),
  869. id: 'applied-B'
  870. },
  871. children: [ 'applied-b' ]
  872. },
  873. 'Text which is not to be applied because it does NOT exist in original element.'
  874. ],
  875. on: {
  876. 'mouseover@a': bind.to( 'mo' )
  877. },
  878. attributes: {
  879. id: bind.to( 'foo', val => val.toUpperCase() ),
  880. class: bind.to( 'baz', val => 'applied-parent-' + val )
  881. }
  882. } ).apply( el );
  883. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<div class="applied-parent-qux" id="BAR">' +
  884. '<a class="a1 a2 applied-A-bar" id="applied-A">applied-a</a>' +
  885. '<b class="b1 b2 applied-B-qux" id="applied-B">applied-b</b>' +
  886. '</div>' );
  887. observable.foo = 'updated';
  888. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<div class="applied-parent-qux" id="UPDATED">' +
  889. '<a class="a1 a2 applied-A-updated" id="applied-A">applied-a</a>' +
  890. '<b class="b1 b2 applied-B-qux" id="applied-B">applied-b</b>' +
  891. '</div>' );
  892. document.body.appendChild( el );
  893. // Test "mouseover@a".
  894. dispatchEvent( el, 'mouseover' );
  895. dispatchEvent( childA, 'mouseover' );
  896. // Test "keyup".
  897. dispatchEvent( childA, 'keyup' );
  898. // Test "keydown".
  899. dispatchEvent( childB, 'keydown' );
  900. sinon.assert.calledOnce( spy1 );
  901. sinon.assert.calledOnce( spy2 );
  902. sinon.assert.calledOnce( spy3 );
  903. } );
  904. } );
  905. } );
  906. describe( 'revert()', () => {
  907. let observable, domEmitter, bind;
  908. beforeEach( () => {
  909. el = getElement( { tag: 'div' } );
  910. observable = new Model( {
  911. foo: 'bar',
  912. baz: 'qux'
  913. } );
  914. domEmitter = Object.create( DomEmitterMixin );
  915. bind = Template.bind( observable, domEmitter );
  916. } );
  917. it( 'should throw if template is not applied', () => {
  918. const tpl = new Template( {
  919. tag: 'div'
  920. } );
  921. expect( () => {
  922. tpl.revert( el );
  923. } ).to.throw( CKEditorError, /ui-template-revert-not-applied/ );
  924. tpl.render();
  925. expect( () => {
  926. tpl.revert( el );
  927. } ).to.throw( CKEditorError, /ui-template-revert-not-applied/ );
  928. } );
  929. describe( 'text', () => {
  930. it( 'should revert textContent to the initial value', () => {
  931. el = getElement( {
  932. tag: 'a',
  933. children: [
  934. 'a',
  935. {
  936. tag: 'b',
  937. children: [
  938. 'b'
  939. ]
  940. }
  941. ]
  942. } );
  943. const tpl = new Template( {
  944. children: [
  945. 'bar',
  946. {
  947. children: [
  948. 'qux'
  949. ]
  950. }
  951. ]
  952. } );
  953. tpl.apply( el );
  954. expect( normalizeHtml( el.outerHTML ) ).to.equal(
  955. '<a>bar<b>qux</b></a>'
  956. );
  957. tpl.revert( el );
  958. expect( normalizeHtml( el.outerHTML ) ).to.equal(
  959. '<a>a<b>b</b></a>'
  960. );
  961. } );
  962. it( 'should remove bindings', () => {
  963. el = getElement( {
  964. tag: 'a',
  965. children: [
  966. 'a',
  967. {
  968. tag: 'b',
  969. children: [
  970. 'b'
  971. ]
  972. }
  973. ]
  974. } );
  975. const tpl = new Template( {
  976. children: [
  977. 'foo',
  978. {
  979. children: [
  980. {
  981. text: bind.to( 'foo' )
  982. }
  983. ]
  984. }
  985. ]
  986. } );
  987. tpl.apply( el );
  988. expect( normalizeHtml( el.outerHTML ) ).to.equal(
  989. '<a>foo<b>bar</b></a>'
  990. );
  991. observable.foo = 'abc';
  992. expect( normalizeHtml( el.outerHTML ) ).to.equal(
  993. '<a>foo<b>abc</b></a>'
  994. );
  995. tpl.revert( el );
  996. expect( normalizeHtml( el.outerHTML ) ).to.equal(
  997. '<a>a<b>b</b></a>'
  998. );
  999. observable.foo = 'xyz';
  1000. expect( normalizeHtml( el.outerHTML ) ).to.equal(
  1001. '<a>a<b>b</b></a>'
  1002. );
  1003. } );
  1004. } );
  1005. describe( 'attributes', () => {
  1006. it( 'should revert attributes to the initial values', () => {
  1007. el = getElement( {
  1008. tag: 'a',
  1009. attributes: {
  1010. foo: 'af',
  1011. bar: 'ab',
  1012. },
  1013. children: [
  1014. {
  1015. tag: 'b',
  1016. attributes: {
  1017. foo: 'bf',
  1018. bar: 'bb',
  1019. }
  1020. }
  1021. ]
  1022. } );
  1023. const tpl = new Template( {
  1024. attributes: {
  1025. foo: 'af1',
  1026. bar: [ 'ab1', 'ab2' ],
  1027. baz: 'x'
  1028. },
  1029. children: [
  1030. {
  1031. attributes: {
  1032. foo: 'bf1'
  1033. }
  1034. }
  1035. ]
  1036. } );
  1037. tpl.apply( el );
  1038. expect( normalizeHtml( el.outerHTML ) ).to.equal(
  1039. '<a bar="ab1 ab2" baz="x" foo="af1">' +
  1040. '<b bar="bb" foo="bf1"></b>' +
  1041. '</a>'
  1042. );
  1043. tpl.revert( el );
  1044. expect( normalizeHtml( el.outerHTML ) ).to.equal(
  1045. '<a bar="ab" foo="af">' +
  1046. '<b bar="bb" foo="bf"></b>' +
  1047. '</a>'
  1048. );
  1049. } );
  1050. it( 'should remove bindings', () => {
  1051. el = getElement( {
  1052. tag: 'a',
  1053. attributes: {
  1054. foo: 'af',
  1055. bar: 'ab',
  1056. },
  1057. children: [
  1058. {
  1059. tag: 'b',
  1060. attributes: {
  1061. foo: 'bf',
  1062. bar: 'bb',
  1063. }
  1064. }
  1065. ]
  1066. } );
  1067. const tpl = new Template( {
  1068. attributes: {
  1069. foo: 'af1',
  1070. bar: [
  1071. 'ab1',
  1072. bind.to( 'baz' )
  1073. ]
  1074. },
  1075. children: [
  1076. {
  1077. attributes: {
  1078. foo: bind.to( 'foo' )
  1079. }
  1080. }
  1081. ]
  1082. } );
  1083. tpl.apply( el );
  1084. expect( normalizeHtml( el.outerHTML ) ).to.equal(
  1085. '<a bar="ab1 qux" foo="af1">' +
  1086. '<b bar="bb" foo="bar"></b>' +
  1087. '</a>'
  1088. );
  1089. observable.foo = 'x';
  1090. observable.baz = 'y';
  1091. expect( normalizeHtml( el.outerHTML ) ).to.equal(
  1092. '<a bar="ab1 y" foo="af1">' +
  1093. '<b bar="bb" foo="x"></b>' +
  1094. '</a>'
  1095. );
  1096. tpl.revert( el );
  1097. expect( normalizeHtml( el.outerHTML ) ).to.equal(
  1098. '<a bar="ab" foo="af">' +
  1099. '<b bar="bb" foo="bf"></b>' +
  1100. '</a>'
  1101. );
  1102. observable.foo = 'abc';
  1103. observable.baz = 'cba';
  1104. expect( normalizeHtml( el.outerHTML ) ).to.equal(
  1105. '<a bar="ab" foo="af">' +
  1106. '<b bar="bb" foo="bf"></b>' +
  1107. '</a>'
  1108. );
  1109. } );
  1110. describe( 'style', () => {
  1111. beforeEach( () => {
  1112. observable = new Model( {
  1113. overflow: 'visible'
  1114. } );
  1115. bind = Template.bind( observable, domEmitter );
  1116. } );
  1117. it( 'should remove bindings', () => {
  1118. el = getElement( {
  1119. tag: 'a',
  1120. attributes: {
  1121. style: {
  1122. fontWeight: 'bold'
  1123. }
  1124. },
  1125. children: [
  1126. {
  1127. tag: 'b',
  1128. attributes: {
  1129. style: {
  1130. color: 'red'
  1131. }
  1132. }
  1133. }
  1134. ]
  1135. } );
  1136. const tpl = new Template( {
  1137. attributes: {
  1138. style: {
  1139. overflow: bind.to( 'overflow' )
  1140. }
  1141. },
  1142. children: [
  1143. {
  1144. tag: 'b',
  1145. attributes: {
  1146. style: {
  1147. display: 'block'
  1148. }
  1149. }
  1150. }
  1151. ]
  1152. } );
  1153. tpl.apply( el );
  1154. expect( normalizeHtml( el.outerHTML ) ).to.equal(
  1155. '<a style="font-weight:bold;overflow:visible;">' +
  1156. '<b style="color:red;display:block;"></b>' +
  1157. '</a>'
  1158. );
  1159. tpl.revert( el );
  1160. expect( normalizeHtml( el.outerHTML ) ).to.equal(
  1161. '<a style="font-weight:bold;">' +
  1162. '<b style="color:red;"></b>' +
  1163. '</a>'
  1164. );
  1165. observable.overflow = 'hidden';
  1166. expect( normalizeHtml( el.outerHTML ) ).to.equal(
  1167. '<a style="font-weight:bold;">' +
  1168. '<b style="color:red;"></b>' +
  1169. '</a>'
  1170. );
  1171. } );
  1172. } );
  1173. } );
  1174. describe( 'children', () => {
  1175. it( 'should work for deep DOM structure with bindings and event listeners', () => {
  1176. el = getElement( {
  1177. tag: 'div',
  1178. children: [
  1179. {
  1180. tag: 'a',
  1181. attributes: {
  1182. class: [ 'a1', 'a2' ]
  1183. },
  1184. children: [
  1185. 'a'
  1186. ]
  1187. },
  1188. {
  1189. tag: 'b',
  1190. attributes: {
  1191. class: [ 'b1', 'b2' ]
  1192. },
  1193. children: [
  1194. 'b'
  1195. ]
  1196. }
  1197. ]
  1198. } );
  1199. const spy = sinon.spy();
  1200. observable.on( 'ku', spy );
  1201. expect( normalizeHtml( el.outerHTML ) ).to.equal(
  1202. '<div><a class="a1 a2">a</a><b class="b1 b2">b</b></div>'
  1203. );
  1204. const tpl = new Template( {
  1205. tag: 'div',
  1206. attributes: {
  1207. class: [ 'div1', 'div2' ],
  1208. style: {
  1209. fontWeight: 'bold'
  1210. }
  1211. },
  1212. children: [
  1213. {
  1214. tag: 'a',
  1215. attributes: {
  1216. class: [ 'x', 'y' ],
  1217. 'data-new-attr': 'foo'
  1218. },
  1219. children: [ 'applied-a' ]
  1220. },
  1221. {
  1222. tag: 'b',
  1223. attributes: {
  1224. class: [
  1225. 'a',
  1226. 'b',
  1227. bind.to( 'foo' )
  1228. ]
  1229. },
  1230. children: [ 'applied-b' ]
  1231. }
  1232. ],
  1233. on: {
  1234. keyup: bind.to( 'ku' )
  1235. }
  1236. } );
  1237. tpl.apply( el );
  1238. expect( normalizeHtml( el.outerHTML ) ).to.equal(
  1239. '<div class="div1 div2" style="font-weight:bold;">' +
  1240. '<a class="a1 a2 x y" data-new-attr="foo">applied-a</a>' +
  1241. '<b class="b1 b2 a b bar">applied-b</b>' +
  1242. '</div>'
  1243. );
  1244. observable.foo = 'baz';
  1245. expect( normalizeHtml( el.outerHTML ) ).to.equal(
  1246. '<div class="div1 div2" style="font-weight:bold;">' +
  1247. '<a class="a1 a2 x y" data-new-attr="foo">applied-a</a>' +
  1248. '<b class="b1 b2 a b baz">applied-b</b>' +
  1249. '</div>'
  1250. );
  1251. dispatchEvent( el.firstChild, 'keyup' );
  1252. sinon.assert.calledOnce( spy );
  1253. tpl.revert( el );
  1254. expect( normalizeHtml( el.outerHTML ) ).to.equal(
  1255. '<div><a class="a1 a2">a</a><b class="b1 b2">b</b></div>'
  1256. );
  1257. observable.foo = 'qux';
  1258. expect( normalizeHtml( el.outerHTML ) ).to.equal(
  1259. '<div><a class="a1 a2">a</a><b class="b1 b2">b</b></div>'
  1260. );
  1261. dispatchEvent( el.firstChild, 'keyup' );
  1262. sinon.assert.calledOnce( spy );
  1263. } );
  1264. } );
  1265. } );
  1266. describe( 'getViews()', () => {
  1267. it( 'returns iterator', () => {
  1268. const template = new Template( {} );
  1269. expect( template.getViews().next ).to.be.a( 'function' );
  1270. expect( Array.from( template.getViews() ) ).to.have.length( 0 );
  1271. } );
  1272. it( 'returns all child views', () => {
  1273. const viewA = new View();
  1274. const viewB = new View();
  1275. const viewC = new View();
  1276. const template = new Template( {
  1277. tag: 'div',
  1278. children: [
  1279. viewA,
  1280. {
  1281. tag: 'div',
  1282. children: [
  1283. viewB
  1284. ]
  1285. },
  1286. viewC
  1287. ]
  1288. } );
  1289. expect( Array.from( template.getViews() ) ).to.have.members( [ viewA, viewB, viewC ] );
  1290. } );
  1291. } );
  1292. describe( 'bind()', () => {
  1293. it( 'returns object', () => {
  1294. expect( Template.bind() ).to.be.an( 'object' );
  1295. } );
  1296. it( 'provides "to" and "if" interface', () => {
  1297. const bind = Template.bind();
  1298. expect( bind ).to.have.keys( 'to', 'if' );
  1299. expect( bind.to ).to.be.a( 'function' );
  1300. expect( bind.if ).to.be.a( 'function' );
  1301. } );
  1302. describe( 'event', () => {
  1303. let observable, domEmitter, bind;
  1304. beforeEach( () => {
  1305. observable = new Model( {
  1306. foo: 'bar',
  1307. baz: 'qux'
  1308. } );
  1309. domEmitter = Object.create( DomEmitterMixin );
  1310. bind = Template.bind( observable, domEmitter );
  1311. } );
  1312. it( 'accepts plain binding', () => {
  1313. const spy = testUtils.sinon.spy();
  1314. setElement( {
  1315. tag: 'p',
  1316. on: {
  1317. x: bind.to( 'a' ),
  1318. }
  1319. } );
  1320. observable.on( 'a', spy );
  1321. dispatchEvent( el, 'x' );
  1322. sinon.assert.calledWithExactly( spy,
  1323. sinon.match.has( 'name', 'a' ),
  1324. sinon.match.has( 'target', el )
  1325. );
  1326. } );
  1327. it( 'accepts an array of event bindings', () => {
  1328. const spy1 = testUtils.sinon.spy();
  1329. const spy2 = testUtils.sinon.spy();
  1330. setElement( {
  1331. tag: 'p',
  1332. on: {
  1333. x: [
  1334. bind.to( 'a' ),
  1335. bind.to( 'b' )
  1336. ]
  1337. }
  1338. } );
  1339. observable.on( 'a', spy1 );
  1340. observable.on( 'b', spy2 );
  1341. dispatchEvent( el, 'x' );
  1342. sinon.assert.calledWithExactly( spy1,
  1343. sinon.match.has( 'name', 'a' ),
  1344. sinon.match.has( 'target', el )
  1345. );
  1346. sinon.assert.calledWithExactly( spy2,
  1347. sinon.match.has( 'name', 'b' ),
  1348. sinon.match.has( 'target', el )
  1349. );
  1350. } );
  1351. it( 'accepts DOM selectors', () => {
  1352. const spy1 = testUtils.sinon.spy();
  1353. const spy2 = testUtils.sinon.spy();
  1354. const spy3 = testUtils.sinon.spy();
  1355. setElement( {
  1356. tag: 'p',
  1357. children: [
  1358. {
  1359. tag: 'span',
  1360. attributes: {
  1361. 'class': 'y',
  1362. },
  1363. on: {
  1364. 'test@p': bind.to( 'c' )
  1365. }
  1366. },
  1367. {
  1368. tag: 'div',
  1369. children: [
  1370. {
  1371. tag: 'span',
  1372. attributes: {
  1373. 'class': 'y',
  1374. }
  1375. }
  1376. ],
  1377. }
  1378. ],
  1379. on: {
  1380. 'test@.y': bind.to( 'a' ),
  1381. 'test@div': bind.to( 'b' )
  1382. }
  1383. } );
  1384. observable.on( 'a', spy1 );
  1385. observable.on( 'b', spy2 );
  1386. observable.on( 'c', spy3 );
  1387. // Test "test@p".
  1388. dispatchEvent( el, 'test' );
  1389. sinon.assert.callCount( spy1, 0 );
  1390. sinon.assert.callCount( spy2, 0 );
  1391. sinon.assert.callCount( spy3, 0 );
  1392. // Test "test@.y".
  1393. dispatchEvent( el.firstChild, 'test' );
  1394. expect( spy1.firstCall.calledWithExactly(
  1395. sinon.match.has( 'name', 'a' ),
  1396. sinon.match.has( 'target', el.firstChild )
  1397. ) ).to.be.true;
  1398. sinon.assert.callCount( spy2, 0 );
  1399. sinon.assert.callCount( spy3, 0 );
  1400. // Test "test@div".
  1401. dispatchEvent( el.lastChild, 'test' );
  1402. sinon.assert.callCount( spy1, 1 );
  1403. expect( spy2.firstCall.calledWithExactly(
  1404. sinon.match.has( 'name', 'b' ),
  1405. sinon.match.has( 'target', el.lastChild )
  1406. ) ).to.be.true;
  1407. sinon.assert.callCount( spy3, 0 );
  1408. // Test "test@.y".
  1409. dispatchEvent( el.lastChild.firstChild, 'test' );
  1410. expect( spy1.secondCall.calledWithExactly(
  1411. sinon.match.has( 'name', 'a' ),
  1412. sinon.match.has( 'target', el.lastChild.firstChild )
  1413. ) ).to.be.true;
  1414. sinon.assert.callCount( spy2, 1 );
  1415. sinon.assert.callCount( spy3, 0 );
  1416. } );
  1417. it( 'accepts function callbacks', () => {
  1418. const spy1 = testUtils.sinon.spy();
  1419. const spy2 = testUtils.sinon.spy();
  1420. setElement( {
  1421. tag: 'p',
  1422. children: [
  1423. {
  1424. tag: 'span'
  1425. }
  1426. ],
  1427. on: {
  1428. x: bind.to( spy1 ),
  1429. 'y@span': [
  1430. bind.to( spy2 ),
  1431. bind.to( 'c' )
  1432. ]
  1433. }
  1434. } );
  1435. dispatchEvent( el, 'x' );
  1436. dispatchEvent( el.firstChild, 'y' );
  1437. sinon.assert.calledWithExactly( spy1,
  1438. sinon.match.has( 'target', el )
  1439. );
  1440. sinon.assert.calledWithExactly( spy2,
  1441. sinon.match.has( 'target', el.firstChild )
  1442. );
  1443. } );
  1444. it( 'supports event delegation', () => {
  1445. const spy = testUtils.sinon.spy();
  1446. setElement( {
  1447. tag: 'p',
  1448. children: [
  1449. {
  1450. tag: 'span'
  1451. }
  1452. ],
  1453. on: {
  1454. x: bind.to( 'a' ),
  1455. }
  1456. } );
  1457. observable.on( 'a', spy );
  1458. dispatchEvent( el.firstChild, 'x' );
  1459. sinon.assert.calledWithExactly( spy,
  1460. sinon.match.has( 'name', 'a' ),
  1461. sinon.match.has( 'target', el.firstChild )
  1462. );
  1463. } );
  1464. it( 'works for future elements', () => {
  1465. const spy = testUtils.sinon.spy();
  1466. setElement( {
  1467. tag: 'p',
  1468. on: {
  1469. 'test@div': bind.to( 'a' )
  1470. }
  1471. } );
  1472. observable.on( 'a', spy );
  1473. const div = getElement( { tag: 'div' } );
  1474. el.appendChild( div );
  1475. dispatchEvent( div, 'test' );
  1476. sinon.assert.calledWithExactly( spy, sinon.match.has( 'name', 'a' ), sinon.match.has( 'target', div ) );
  1477. } );
  1478. } );
  1479. describe( 'model', () => {
  1480. let observable, emitter, bind;
  1481. beforeEach( () => {
  1482. observable = new Model( {
  1483. foo: 'bar',
  1484. baz: 'qux'
  1485. } );
  1486. emitter = Object.create( EmitterMixin );
  1487. bind = Template.bind( observable, emitter );
  1488. } );
  1489. describe( 'to', () => {
  1490. it( 'returns an instance of TemplateToBinding', () => {
  1491. const spy = testUtils.sinon.spy();
  1492. const binding = bind.to( 'foo', spy );
  1493. expect( binding ).to.be.instanceof( TemplateToBinding );
  1494. expect( spy.called ).to.be.false;
  1495. expect( binding ).to.have.keys( [ 'observable', 'eventNameOrFunction', 'emitter', 'attribute', 'callback' ] );
  1496. expect( binding.observable ).to.equal( observable );
  1497. expect( binding.callback ).to.equal( spy );
  1498. expect( binding.attribute ).to.equal( 'foo' );
  1499. } );
  1500. it( 'allows binding attribute to the observable – simple (HTMLElement attribute)', () => {
  1501. setElement( {
  1502. tag: 'p',
  1503. attributes: {
  1504. 'class': bind.to( 'foo' )
  1505. },
  1506. children: [ 'abc' ]
  1507. } );
  1508. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="bar">abc</p>' );
  1509. observable.foo = 'baz';
  1510. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="baz">abc</p>' );
  1511. expect( el.attributes.getNamedItem( 'class' ).namespaceURI ).to.be.null;
  1512. } );
  1513. it( 'allows binding attribute to the observable – simple (Text Node)', () => {
  1514. setElement( {
  1515. tag: 'p',
  1516. children: [
  1517. {
  1518. text: bind.to( 'foo' )
  1519. }
  1520. ]
  1521. } );
  1522. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>bar</p>' );
  1523. observable.foo = 'baz';
  1524. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>baz</p>' );
  1525. } );
  1526. it( 'allows binding attribute to the observable – value processing', () => {
  1527. const callback = value => value > 0 ? 'positive' : 'negative';
  1528. setElement( {
  1529. tag: 'p',
  1530. attributes: {
  1531. 'class': bind.to( 'foo', callback )
  1532. },
  1533. children: [
  1534. {
  1535. text: bind.to( 'foo', callback )
  1536. }
  1537. ]
  1538. } );
  1539. observable.foo = 3;
  1540. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="positive">positive</p>' );
  1541. observable.foo = -7;
  1542. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="negative">negative</p>' );
  1543. } );
  1544. it( 'allows binding attribute to the observable – value processing (use Node)', () => {
  1545. const callback = ( value, node ) => {
  1546. return ( !!node.tagName && value > 0 ) ? 'HTMLElement positive' : '';
  1547. };
  1548. setElement( {
  1549. tag: 'p',
  1550. attributes: {
  1551. 'class': bind.to( 'foo', callback )
  1552. },
  1553. children: [
  1554. {
  1555. text: bind.to( 'foo', callback )
  1556. }
  1557. ]
  1558. } );
  1559. observable.foo = 3;
  1560. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="HTMLElement positive"></p>' );
  1561. observable.foo = -7;
  1562. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p></p>' );
  1563. } );
  1564. it( 'allows binding attribute to the observable – custom callback', () => {
  1565. setElement( {
  1566. tag: 'p',
  1567. attributes: {
  1568. 'class': bind.to( 'foo', ( value, el ) => {
  1569. el.innerHTML = value;
  1570. if ( value == 'changed' ) {
  1571. return value;
  1572. }
  1573. } )
  1574. }
  1575. } );
  1576. observable.foo = 'moo';
  1577. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>moo</p>' );
  1578. observable.foo = 'changed';
  1579. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="changed">changed</p>' );
  1580. } );
  1581. it( 'allows binding attribute to the observable – array of bindings (HTMLElement attribute)', () => {
  1582. setElement( {
  1583. tag: 'p',
  1584. attributes: {
  1585. 'class': [
  1586. 'ck-class',
  1587. bind.to( 'foo' ),
  1588. bind.to( 'baz' ),
  1589. bind.to( 'foo', value => `foo-is-${ value }` ),
  1590. 'ck-end'
  1591. ]
  1592. },
  1593. children: [ 'abc' ]
  1594. } );
  1595. observable.foo = 'a';
  1596. observable.baz = 'b';
  1597. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="ck-class a b foo-is-a ck-end">abc</p>' );
  1598. observable.foo = 'c';
  1599. observable.baz = 'd';
  1600. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="ck-class c d foo-is-c ck-end">abc</p>' );
  1601. } );
  1602. it( 'allows binding attribute to the observable – array of bindings (Text Node)', () => {
  1603. setElement( {
  1604. tag: 'p',
  1605. attributes: {
  1606. },
  1607. children: [
  1608. {
  1609. text: [
  1610. 'ck-class',
  1611. bind.to( 'foo' ),
  1612. bind.to( 'baz' ),
  1613. bind.to( 'foo', value => `foo-is-${ value }` ),
  1614. 'ck-end'
  1615. ]
  1616. }
  1617. ]
  1618. } );
  1619. observable.foo = 'a';
  1620. observable.baz = 'b';
  1621. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>ck-class a b foo-is-a ck-end</p>' );
  1622. observable.foo = 'c';
  1623. observable.baz = 'd';
  1624. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>ck-class c d foo-is-c ck-end</p>' );
  1625. } );
  1626. it( 'allows binding attribute to the observable – falsy values', () => {
  1627. setElement( {
  1628. tag: 'p',
  1629. attributes: {
  1630. simple: bind.to( 'foo' ),
  1631. complex: [ null, bind.to( 'foo' ), undefined, false ],
  1632. zero: [ 0, bind.to( 'foo' ) ],
  1633. emptystring: [ '', bind.to( 'foo' ) ]
  1634. },
  1635. children: [ 'abc' ]
  1636. } );
  1637. observable.foo = 'bar';
  1638. expect( normalizeHtml( el.outerHTML ) )
  1639. .to.equal( '<p complex="bar" emptystring="bar" simple="bar" zero="0 bar">abc</p>' );
  1640. observable.foo = 0;
  1641. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p complex="0" emptystring="0" simple="0" zero="0 0">abc</p>' );
  1642. observable.foo = false;
  1643. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p zero="0">abc</p>' );
  1644. observable.foo = null;
  1645. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p zero="0">abc</p>' );
  1646. observable.foo = undefined;
  1647. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p zero="0">abc</p>' );
  1648. observable.foo = '';
  1649. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p zero="0">abc</p>' );
  1650. } );
  1651. it( 'allows binding attribute to the observable – a custom namespace', () => {
  1652. setElement( {
  1653. tag: 'p',
  1654. attributes: {
  1655. class: {
  1656. ns: 'foo',
  1657. value: bind.to( 'foo' )
  1658. },
  1659. custom: {
  1660. ns: 'foo',
  1661. value: [
  1662. bind.to( 'foo' ),
  1663. bind.to( 'baz' )
  1664. ]
  1665. }
  1666. },
  1667. children: [ 'abc' ]
  1668. } );
  1669. observable.foo = 'bar';
  1670. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="bar" custom="bar qux">abc</p>' );
  1671. expect( el.attributes.getNamedItem( 'class' ).namespaceURI ).to.equal( 'foo' );
  1672. observable.foo = 'baz';
  1673. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="baz" custom="baz qux">abc</p>' );
  1674. expect( el.attributes.getNamedItem( 'class' ).namespaceURI ).to.equal( 'foo' );
  1675. } );
  1676. } );
  1677. describe( 'if', () => {
  1678. it( 'returns an object which describes the binding', () => {
  1679. const spy = testUtils.sinon.spy();
  1680. const binding = bind.if( 'foo', 'whenTrue', spy );
  1681. expect( binding ).to.be.instanceof( TemplateIfBinding );
  1682. expect( spy.called ).to.be.false;
  1683. expect( binding ).to.have.keys( [ 'observable', 'emitter', 'attribute', 'callback', 'valueIfTrue' ] );
  1684. expect( binding.observable ).to.equal( observable );
  1685. expect( binding.callback ).to.equal( spy );
  1686. expect( binding.attribute ).to.equal( 'foo' );
  1687. expect( binding.valueIfTrue ).to.equal( 'whenTrue' );
  1688. } );
  1689. it( 'allows binding attribute to the observable – presence of an attribute (HTMLElement attribute)', () => {
  1690. setElement( {
  1691. tag: 'p',
  1692. attributes: {
  1693. 'class': bind.if( 'foo' )
  1694. },
  1695. children: [ 'abc' ]
  1696. } );
  1697. observable.foo = 'bar';
  1698. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="true">abc</p>' );
  1699. observable.foo = true;
  1700. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="true">abc</p>' );
  1701. observable.foo = 0;
  1702. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="true">abc</p>' );
  1703. observable.foo = false;
  1704. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>abc</p>' );
  1705. observable.foo = null;
  1706. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>abc</p>' );
  1707. observable.foo = undefined;
  1708. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>abc</p>' );
  1709. observable.foo = '';
  1710. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>abc</p>' );
  1711. } );
  1712. // TODO: Is this alright? It makes sense but it's pretty useless. Text Node cannot be
  1713. // removed just like an attribute of some HTMLElement.
  1714. it( 'allows binding attribute to the observable – presence of an attribute (Text Node)', () => {
  1715. setElement( {
  1716. tag: 'p',
  1717. children: [
  1718. {
  1719. text: bind.if( 'foo' )
  1720. }
  1721. ]
  1722. } );
  1723. observable.foo = 'abc';
  1724. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>true</p>' );
  1725. observable.foo = true;
  1726. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>true</p>' );
  1727. observable.foo = 0;
  1728. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>true</p>' );
  1729. observable.foo = false;
  1730. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p></p>' );
  1731. observable.foo = null;
  1732. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p></p>' );
  1733. observable.foo = undefined;
  1734. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p></p>' );
  1735. observable.foo = '';
  1736. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p></p>' );
  1737. } );
  1738. it( 'allows binding attribute to the observable – value of an attribute (HTMLElement attribute)', () => {
  1739. setElement( {
  1740. tag: 'p',
  1741. attributes: {
  1742. 'class': bind.if( 'foo', 'bar' )
  1743. },
  1744. children: [ 'abc' ]
  1745. } );
  1746. observable.foo = 'bar';
  1747. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="bar">abc</p>' );
  1748. observable.foo = true;
  1749. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="bar">abc</p>' );
  1750. observable.foo = 0;
  1751. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="bar">abc</p>' );
  1752. observable.foo = 64;
  1753. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="bar">abc</p>' );
  1754. observable.foo = false;
  1755. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>abc</p>' );
  1756. observable.foo = null;
  1757. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>abc</p>' );
  1758. observable.foo = undefined;
  1759. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>abc</p>' );
  1760. } );
  1761. it( 'allows binding attribute to the observable – value of an attribute (Text Node)', () => {
  1762. setElement( {
  1763. tag: 'p',
  1764. children: [
  1765. {
  1766. text: bind.if( 'foo', 'bar' )
  1767. }
  1768. ]
  1769. } );
  1770. observable.foo = 'bar';
  1771. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>bar</p>' );
  1772. observable.foo = false;
  1773. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p></p>' );
  1774. observable.foo = 64;
  1775. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>bar</p>' );
  1776. } );
  1777. it( 'allows binding attribute to the observable – array of bindings (HTMLElement attribute)', () => {
  1778. setElement( {
  1779. tag: 'p',
  1780. attributes: {
  1781. 'class': [
  1782. 'ck-class',
  1783. bind.if( 'foo', 'foo-set' ),
  1784. bind.if( 'bar', 'bar-not-set', value => !value ),
  1785. 'ck-end'
  1786. ]
  1787. },
  1788. children: [ 'abc' ]
  1789. } );
  1790. observable.foo = observable.bar = true;
  1791. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="ck-class foo-set ck-end">abc</p>' );
  1792. observable.foo = observable.bar = false;
  1793. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="ck-class bar-not-set ck-end">abc</p>' );
  1794. } );
  1795. it( 'allows binding attribute to the observable – value of an attribute processed by a callback', () => {
  1796. setElement( {
  1797. tag: 'p',
  1798. attributes: {
  1799. 'class': bind.if( 'foo', 'there–is–no–foo', value => !value )
  1800. },
  1801. children: [ 'abc' ]
  1802. } );
  1803. observable.foo = 'bar';
  1804. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>abc</p>' );
  1805. observable.foo = false;
  1806. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="there–is–no–foo">abc</p>' );
  1807. observable.foo = 64;
  1808. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>abc</p>' );
  1809. } );
  1810. it( 'allows binding attribute to the observable – value of an attribute processed by a callback (use Node)', () => {
  1811. setElement( {
  1812. tag: 'p',
  1813. attributes: {
  1814. 'class': bind.if( 'foo', 'eqls-tag-name', ( value, el ) => el.tagName === value )
  1815. },
  1816. children: [ 'abc' ]
  1817. } );
  1818. observable.foo = 'bar';
  1819. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>abc</p>' );
  1820. observable.foo = 'P';
  1821. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="eqls-tag-name">abc</p>' );
  1822. observable.foo = 64;
  1823. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>abc</p>' );
  1824. } );
  1825. it( 'allows binding attribute to the observable – falsy values', () => {
  1826. setElement( {
  1827. tag: 'p',
  1828. attributes: {
  1829. 'class': bind.if( 'foo', 'foo-is-set' )
  1830. },
  1831. children: [ 'abc' ]
  1832. } );
  1833. observable.foo = 'bar';
  1834. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="foo-is-set">abc</p>' );
  1835. observable.foo = true;
  1836. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="foo-is-set">abc</p>' );
  1837. observable.foo = 0;
  1838. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="foo-is-set">abc</p>' );
  1839. observable.foo = false;
  1840. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>abc</p>' );
  1841. observable.foo = null;
  1842. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>abc</p>' );
  1843. observable.foo = undefined;
  1844. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>abc</p>' );
  1845. observable.foo = '';
  1846. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>abc</p>' );
  1847. } );
  1848. } );
  1849. it( 'works with Template#apply() – root element', () => {
  1850. new Template( {
  1851. tag: 'div',
  1852. attributes: {
  1853. class: bind.to( 'foo' )
  1854. }
  1855. } ).apply( el );
  1856. expect( el.getAttribute( 'class' ) ).to.equal( 'bar' );
  1857. observable.foo = 'baz';
  1858. expect( el.getAttribute( 'class' ) ).to.equal( 'baz' );
  1859. } );
  1860. it( 'works with Template#apply() – children', () => {
  1861. const el = getElement( { tag: 'div' } );
  1862. const child = getElement( {
  1863. tag: 'span',
  1864. children: [ 'foo' ]
  1865. } );
  1866. el.appendChild( child );
  1867. new Template( {
  1868. tag: 'div',
  1869. children: [
  1870. {
  1871. tag: 'span',
  1872. children: [
  1873. {
  1874. text: bind.to( 'foo' )
  1875. }
  1876. ]
  1877. }
  1878. ]
  1879. } ).apply( el );
  1880. expect( child.textContent ).to.equal( 'bar' );
  1881. observable.foo = 'baz';
  1882. expect( child.textContent ).to.equal( 'baz' );
  1883. } );
  1884. } );
  1885. } );
  1886. describe( 'extend()', () => {
  1887. let observable, emitter, bind;
  1888. beforeEach( () => {
  1889. observable = new Model( {
  1890. foo: 'bar',
  1891. baz: 'qux'
  1892. } );
  1893. emitter = Object.create( DomEmitterMixin );
  1894. bind = Template.bind( observable, emitter );
  1895. } );
  1896. it( 'does not modify passed definition', () => {
  1897. const def = {
  1898. tag: 'p',
  1899. attributes: {
  1900. a: 'foo',
  1901. }
  1902. };
  1903. const ext = {
  1904. attributes: {
  1905. b: 'bar'
  1906. }
  1907. };
  1908. const tpl = new Template( def );
  1909. Template.extend( tpl, ext );
  1910. expect( ext.attributes.b ).to.equal( 'bar' );
  1911. expect( tpl.attributes.a[ 0 ] ).to.equal( 'foo' );
  1912. expect( tpl.attributes.b[ 0 ] ).to.equal( 'bar' );
  1913. } );
  1914. it( 'logs a warning if an element has already been rendered', () => {
  1915. const spy = testUtils.sinon.stub( log, 'warn' );
  1916. const tpl = new Template( {
  1917. tag: 'p'
  1918. } );
  1919. Template.extend( tpl, {
  1920. attributes: {
  1921. class: 'foo'
  1922. }
  1923. } );
  1924. tpl.render();
  1925. Template.extend( tpl, {
  1926. attributes: {
  1927. class: 'bar'
  1928. }
  1929. } );
  1930. sinon.assert.calledOnce( spy );
  1931. sinon.assert.calledWithExactly( spy, sinon.match( /^template-extend-render/ ) );
  1932. } );
  1933. describe( 'attributes', () => {
  1934. it( 'extends existing - simple', () => {
  1935. extensionTest(
  1936. {
  1937. tag: 'p',
  1938. attributes: {
  1939. a: 'b'
  1940. }
  1941. },
  1942. {
  1943. attributes: {
  1944. a: 'c'
  1945. }
  1946. },
  1947. '<p a="b c"></p>'
  1948. );
  1949. } );
  1950. it( 'extends existing - complex #1', () => {
  1951. extensionTest(
  1952. {
  1953. tag: 'p',
  1954. attributes: {
  1955. a: [ 'b', 'c' ]
  1956. }
  1957. },
  1958. {
  1959. attributes: {
  1960. a: 'd'
  1961. }
  1962. },
  1963. '<p a="b c d"></p>'
  1964. );
  1965. } );
  1966. it( 'extends existing - complex #2', () => {
  1967. extensionTest(
  1968. {
  1969. tag: 'p',
  1970. attributes: {
  1971. a: {
  1972. value: 'b'
  1973. }
  1974. }
  1975. },
  1976. {
  1977. attributes: {
  1978. a: [ 'c', 'd' ]
  1979. }
  1980. },
  1981. '<p a="b c d"></p>'
  1982. );
  1983. } );
  1984. it( 'extends existing - complex #3', () => {
  1985. extensionTest(
  1986. {
  1987. tag: 'p',
  1988. attributes: {
  1989. a: [ 'b' ]
  1990. }
  1991. },
  1992. {
  1993. attributes: {
  1994. a: [ 'c', 'd' ]
  1995. }
  1996. },
  1997. '<p a="b c d"></p>'
  1998. );
  1999. } );
  2000. it( 'extends existing - bindings #1', () => {
  2001. const el = extensionTest(
  2002. {
  2003. tag: 'p',
  2004. attributes: {
  2005. a: bind.to( 'foo' )
  2006. }
  2007. },
  2008. {
  2009. attributes: {
  2010. a: [ 'c', 'd' ]
  2011. }
  2012. },
  2013. '<p a="bar c d"></p>'
  2014. );
  2015. observable.foo = 'baz';
  2016. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p a="baz c d"></p>' );
  2017. } );
  2018. it( 'extends existing - bindings #2', () => {
  2019. const el = extensionTest(
  2020. {
  2021. tag: 'p',
  2022. attributes: {
  2023. a: [ 'b', bind.to( 'foo' ) ]
  2024. }
  2025. },
  2026. {
  2027. attributes: {
  2028. a: [ 'c', bind.to( 'baz' ) ]
  2029. }
  2030. },
  2031. '<p a="b bar c qux"></p>'
  2032. );
  2033. observable.foo = 'abc';
  2034. observable.baz = 'def';
  2035. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p a="b abc c def"></p>' );
  2036. } );
  2037. it( 'creates new - no attributes', () => {
  2038. extensionTest(
  2039. {
  2040. tag: 'p',
  2041. },
  2042. {
  2043. attributes: {
  2044. c: 'd'
  2045. }
  2046. },
  2047. '<p c="d"></p>'
  2048. );
  2049. } );
  2050. it( 'creates new - simple', () => {
  2051. extensionTest(
  2052. {
  2053. tag: 'p',
  2054. attributes: {
  2055. a: 'b'
  2056. }
  2057. },
  2058. {
  2059. attributes: {
  2060. c: 'd'
  2061. }
  2062. },
  2063. '<p a="b" c="d"></p>'
  2064. );
  2065. } );
  2066. it( 'creates new - array', () => {
  2067. extensionTest(
  2068. {
  2069. tag: 'p',
  2070. attributes: {
  2071. a: 'b'
  2072. }
  2073. },
  2074. {
  2075. attributes: {
  2076. c: [ 'd', 'e' ]
  2077. }
  2078. },
  2079. '<p a="b" c="d e"></p>'
  2080. );
  2081. } );
  2082. it( 'creates new - bindings #1', () => {
  2083. const el = extensionTest(
  2084. {
  2085. tag: 'p',
  2086. attributes: {
  2087. a: 'b'
  2088. }
  2089. },
  2090. {
  2091. attributes: {
  2092. c: bind.to( 'foo' )
  2093. }
  2094. },
  2095. '<p a="b" c="bar"></p>'
  2096. );
  2097. observable.foo = 'abc';
  2098. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p a="b" c="abc"></p>' );
  2099. } );
  2100. it( 'creates new - bindings #2', () => {
  2101. const el = extensionTest(
  2102. {
  2103. tag: 'p',
  2104. attributes: {
  2105. a: 'b'
  2106. }
  2107. },
  2108. {
  2109. attributes: {
  2110. c: [ 'd', bind.to( 'foo' ) ]
  2111. }
  2112. },
  2113. '<p a="b" c="d bar"></p>'
  2114. );
  2115. observable.foo = 'abc';
  2116. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p a="b" c="d abc"></p>' );
  2117. } );
  2118. } );
  2119. describe( 'text', () => {
  2120. it( 'extends existing - simple', () => {
  2121. const el = extensionTest(
  2122. {
  2123. tag: 'p',
  2124. children: [
  2125. 'foo'
  2126. ]
  2127. },
  2128. {
  2129. children: [
  2130. 'bar'
  2131. ]
  2132. },
  2133. '<p>foobar</p>'
  2134. );
  2135. expect( el.childNodes ).to.have.length( 1 );
  2136. } );
  2137. it( 'extends existing - complex #1', () => {
  2138. const el = extensionTest(
  2139. {
  2140. tag: 'p',
  2141. children: [
  2142. { text: 'foo' }
  2143. ]
  2144. },
  2145. {
  2146. children: [
  2147. 'bar'
  2148. ]
  2149. },
  2150. '<p>foobar</p>'
  2151. );
  2152. expect( el.childNodes ).to.have.length( 1 );
  2153. } );
  2154. it( 'extends existing - complex #2', () => {
  2155. const el = extensionTest(
  2156. {
  2157. tag: 'p',
  2158. children: [
  2159. { text: 'foo' }
  2160. ]
  2161. },
  2162. {
  2163. children: [
  2164. { text: 'bar' }
  2165. ]
  2166. },
  2167. '<p>foobar</p>'
  2168. );
  2169. expect( el.childNodes ).to.have.length( 1 );
  2170. } );
  2171. it( 'extends existing - bindings #1', () => {
  2172. const el = extensionTest(
  2173. {
  2174. tag: 'p',
  2175. children: [
  2176. { text: bind.to( 'foo' ) }
  2177. ]
  2178. },
  2179. {
  2180. children: [
  2181. 'abc'
  2182. ]
  2183. },
  2184. '<p>bar abc</p>'
  2185. );
  2186. observable.foo = 'asd';
  2187. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>asd abc</p>' );
  2188. expect( el.childNodes ).to.have.length( 1 );
  2189. } );
  2190. it( 'extends existing - bindings #2', () => {
  2191. const el = extensionTest(
  2192. {
  2193. tag: 'p',
  2194. children: [
  2195. 'abc'
  2196. ]
  2197. },
  2198. {
  2199. children: [
  2200. { text: bind.to( 'foo' ) }
  2201. ]
  2202. },
  2203. '<p>abc bar</p>'
  2204. );
  2205. observable.foo = 'asd';
  2206. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>abc asd</p>' );
  2207. expect( el.childNodes ).to.have.length( 1 );
  2208. } );
  2209. it( 'extends existing - bindings #3', () => {
  2210. const el = extensionTest(
  2211. {
  2212. tag: 'p',
  2213. children: [
  2214. { text: bind.to( 'foo' ) },
  2215. 'X'
  2216. ]
  2217. },
  2218. {
  2219. children: [
  2220. { text: bind.to( 'baz' ) },
  2221. 'Y'
  2222. ]
  2223. },
  2224. '<p>bar quxXY</p>'
  2225. );
  2226. observable.foo = 'A';
  2227. observable.baz = 'B';
  2228. expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>A BXY</p>' );
  2229. expect( el.childNodes ).to.have.length( 2 );
  2230. } );
  2231. } );
  2232. describe( 'children', () => {
  2233. it( 'should throw when the number of children does not correspond', () => {
  2234. expect( () => {
  2235. extensionTest(
  2236. {
  2237. tag: 'p',
  2238. children: [
  2239. 'foo'
  2240. ]
  2241. },
  2242. {
  2243. children: [
  2244. 'foo',
  2245. 'bar'
  2246. ]
  2247. },
  2248. 'it should fail'
  2249. );
  2250. } ).to.throw( CKEditorError, /ui-template-extend-children-mismatch/ );
  2251. } );
  2252. it( 'should throw when no children in target but extending one', () => {
  2253. expect( () => {
  2254. extensionTest(
  2255. {
  2256. tag: 'p',
  2257. },
  2258. {
  2259. children: [
  2260. {
  2261. tag: 'b'
  2262. }
  2263. ]
  2264. },
  2265. 'it should fail'
  2266. );
  2267. } ).to.throw( CKEditorError, /ui-template-extend-children-mismatch/ );
  2268. } );
  2269. it( 'should throw when the number of children does not correspond on some deeper level', () => {
  2270. expect( () => {
  2271. extensionTest(
  2272. {
  2273. tag: 'p',
  2274. children: [
  2275. {
  2276. tag: 'span',
  2277. attributes: {
  2278. class: 'A'
  2279. },
  2280. children: [
  2281. 'A',
  2282. {
  2283. tag: 'span',
  2284. attributes: {
  2285. class: 'AA'
  2286. },
  2287. children: [
  2288. 'AA'
  2289. ]
  2290. }
  2291. ]
  2292. }
  2293. ]
  2294. },
  2295. {
  2296. children: [
  2297. {
  2298. attributes: {
  2299. class: 'B'
  2300. },
  2301. children: [
  2302. 'B'
  2303. ]
  2304. }
  2305. ]
  2306. },
  2307. 'it should fail'
  2308. );
  2309. } ).to.throw( CKEditorError, /ui-template-extend-children-mismatch/ );
  2310. } );
  2311. it( 'extends existing - simple', () => {
  2312. extensionTest(
  2313. {
  2314. tag: 'p',
  2315. children: [
  2316. {
  2317. tag: 'span',
  2318. attributes: {
  2319. class: 'foo'
  2320. }
  2321. }
  2322. ]
  2323. },
  2324. {
  2325. children: [
  2326. {
  2327. tag: 'span',
  2328. attributes: {
  2329. class: 'bar'
  2330. }
  2331. }
  2332. ]
  2333. },
  2334. '<p><span class="foo bar"></span></p>'
  2335. );
  2336. } );
  2337. it( 'extends existing - complex', () => {
  2338. extensionTest(
  2339. {
  2340. tag: 'p',
  2341. children: [
  2342. {
  2343. tag: 'span',
  2344. attributes: {
  2345. class: 'A'
  2346. },
  2347. children: [
  2348. 'A',
  2349. {
  2350. tag: 'span',
  2351. attributes: {
  2352. class: 'AA'
  2353. },
  2354. children: [
  2355. 'AA'
  2356. ]
  2357. }
  2358. ]
  2359. }
  2360. ]
  2361. },
  2362. {
  2363. children: [
  2364. {
  2365. tag: 'span',
  2366. attributes: {
  2367. class: 'B'
  2368. },
  2369. children: [
  2370. 'B',
  2371. {
  2372. tag: 'span',
  2373. attributes: {
  2374. class: 'BB'
  2375. },
  2376. children: [
  2377. 'BB'
  2378. ]
  2379. }
  2380. ]
  2381. }
  2382. ]
  2383. },
  2384. '<p><span class="A B">AB<span class="AA BB">AABB</span></span></p>'
  2385. );
  2386. } );
  2387. it( 'allows extending a particular child', () => {
  2388. const template = new Template( {
  2389. tag: 'p',
  2390. children: [
  2391. {
  2392. tag: 'span',
  2393. attributes: {
  2394. class: 'foo'
  2395. }
  2396. }
  2397. ]
  2398. } );
  2399. Template.extend( template.children[ 0 ], {
  2400. attributes: {
  2401. class: 'bar'
  2402. }
  2403. } );
  2404. expect( template.render().outerHTML ).to.equal( '<p><span class="foo bar"></span></p>' );
  2405. } );
  2406. it( 'allows extending a particular child – recursively', () => {
  2407. const template = new Template( {
  2408. tag: 'p',
  2409. children: [
  2410. {
  2411. tag: 'span',
  2412. attributes: {
  2413. class: 'A'
  2414. },
  2415. children: [
  2416. 'A',
  2417. {
  2418. tag: 'span',
  2419. attributes: {
  2420. class: 'AA'
  2421. },
  2422. children: [
  2423. 'AA'
  2424. ]
  2425. }
  2426. ]
  2427. }
  2428. ]
  2429. } );
  2430. Template.extend( template.children[ 0 ], {
  2431. attributes: {
  2432. class: 'B',
  2433. },
  2434. children: [
  2435. 'B',
  2436. {
  2437. attributes: {
  2438. class: 'BB'
  2439. }
  2440. }
  2441. ]
  2442. } );
  2443. expect( template.render().outerHTML ).to.equal( '<p><span class="A B">AB<span class="AA BB">AA</span></span></p>' );
  2444. } );
  2445. } );
  2446. describe( 'listeners', () => {
  2447. it( 'extends existing', () => {
  2448. const spy1 = testUtils.sinon.spy();
  2449. const spy2 = testUtils.sinon.spy();
  2450. const spy3 = testUtils.sinon.spy();
  2451. const spy4 = testUtils.sinon.spy();
  2452. const spy5 = testUtils.sinon.spy();
  2453. observable.on( 'A', spy1 );
  2454. observable.on( 'C', spy2 );
  2455. observable.on( 'B', spy3 );
  2456. observable.on( 'D', spy4 );
  2457. const el = extensionTest(
  2458. {
  2459. tag: 'p',
  2460. children: [
  2461. {
  2462. tag: 'span'
  2463. }
  2464. ],
  2465. on: {
  2466. click: bind.to( 'A' ),
  2467. 'click@span': [
  2468. bind.to( 'B' ),
  2469. bind.to( spy5 )
  2470. ]
  2471. }
  2472. },
  2473. {
  2474. on: {
  2475. click: bind.to( 'C' ),
  2476. 'click@span': bind.to( 'D' )
  2477. }
  2478. },
  2479. '<p><span></span></p>'
  2480. );
  2481. dispatchEvent( el, 'click' );
  2482. expect( spy1.calledOnce ).to.be.true;
  2483. expect( spy2.calledOnce ).to.be.true;
  2484. expect( spy3.called ).to.be.false;
  2485. expect( spy4.called ).to.be.false;
  2486. expect( spy5.called ).to.be.false;
  2487. dispatchEvent( el.firstChild, 'click' );
  2488. expect( spy1.calledTwice ).to.be.true;
  2489. expect( spy2.calledTwice ).to.be.true;
  2490. expect( spy3.calledOnce ).to.be.true;
  2491. expect( spy4.calledOnce ).to.be.true;
  2492. expect( spy5.calledOnce ).to.be.true;
  2493. } );
  2494. it( 'creates new', () => {
  2495. const spy1 = testUtils.sinon.spy();
  2496. const spy2 = testUtils.sinon.spy();
  2497. const spy3 = testUtils.sinon.spy();
  2498. observable.on( 'A', spy1 );
  2499. observable.on( 'B', spy2 );
  2500. const el = extensionTest(
  2501. {
  2502. tag: 'p',
  2503. children: [
  2504. {
  2505. tag: 'span'
  2506. }
  2507. ],
  2508. },
  2509. {
  2510. on: {
  2511. click: bind.to( 'A' ),
  2512. 'click@span': [
  2513. bind.to( 'B' ),
  2514. bind.to( spy3 )
  2515. ]
  2516. }
  2517. },
  2518. '<p><span></span></p>'
  2519. );
  2520. dispatchEvent( el, 'click' );
  2521. expect( spy1.calledOnce ).to.be.true;
  2522. expect( spy2.called ).to.be.false;
  2523. expect( spy3.called ).to.be.false;
  2524. dispatchEvent( el.firstChild, 'click' );
  2525. expect( spy1.calledTwice ).to.be.true;
  2526. expect( spy2.calledOnce ).to.be.true;
  2527. expect( spy3.calledOnce ).to.be.true;
  2528. } );
  2529. } );
  2530. } );
  2531. } );
  2532. function getElement( template ) {
  2533. return new Template( template ).render();
  2534. }
  2535. function setElement( template ) {
  2536. el = new Template( template ).render();
  2537. document.body.appendChild( el );
  2538. }
  2539. function extensionTest( baseDefinition, extendedDefinition, expectedHtml ) {
  2540. const template = new Template( baseDefinition );
  2541. Template.extend( template, extendedDefinition );
  2542. const el = template.render();
  2543. document.body.appendChild( el );
  2544. expect( normalizeHtml( el.outerHTML ) ).to.equal( expectedHtml );
  2545. return el;
  2546. }
  2547. function dispatchEvent( el, domEvtName ) {
  2548. if ( !el.parentNode ) {
  2549. throw new Error( 'To dispatch an event, element must be in DOM. Otherwise #target is null.' );
  2550. }
  2551. el.dispatchEvent( new Event( domEvtName, {
  2552. bubbles: true
  2553. } ) );
  2554. }
  2555. function getView( def ) {
  2556. const view = new View();
  2557. view.setTemplate( def );
  2558. return view;
  2559. }