template.js 68 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062
  1. /**
  2. * @license Copyright (c) 2003-2018, 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. 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. expect( () => {
  126. new Template( {} ).render();
  127. } ).to.throw( CKEditorError, /ui-template-wrong-syntax/ );
  128. expect( () => {
  129. new Template( {
  130. tag: 'p',
  131. text: 'foo'
  132. } ).render();
  133. } ).to.throw( CKEditorError, /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. expect( () => {
  608. new Template( {
  609. tag: 'p',
  610. text: 'foo'
  611. } ).apply( el );
  612. } ).to.throw( CKEditorError, /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. expect( () => {
  932. tpl.revert( el );
  933. } ).to.throw( CKEditorError, /ui-template-revert-not-applied/ );
  934. tpl.render();
  935. expect( () => {
  936. tpl.revert( el );
  937. } ).to.throw( CKEditorError, /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. expect( () => {
  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. } ).to.throw( CKEditorError, /ui-template-extend-children-mismatch/ );
  2282. } );
  2283. it( 'should throw when no children in target but extending one', () => {
  2284. expect( () => {
  2285. extensionTest(
  2286. {
  2287. tag: 'p',
  2288. },
  2289. {
  2290. children: [
  2291. {
  2292. tag: 'b'
  2293. }
  2294. ]
  2295. },
  2296. 'it should fail'
  2297. );
  2298. } ).to.throw( CKEditorError, /ui-template-extend-children-mismatch/ );
  2299. } );
  2300. it( 'should throw when the number of children does not correspond on some deeper level', () => {
  2301. expect( () => {
  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. } ).to.throw( CKEditorError, /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. }