template.js 66 KB

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