template.js 66 KB

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