template.js 65 KB

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