template.js 67 KB

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