8
0

template.js 65 KB

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