template.js 66 KB

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