template.js 68 KB

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