8
0

template.js 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098
  1. /**
  2. * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* bender-tags: ui */
  6. /* global HTMLElement */
  7. 'use strict';
  8. import testUtils from '/tests/ckeditor5/_utils/utils.js';
  9. import Template from '/ckeditor5/ui/template.js';
  10. import Model from '/ckeditor5/ui/model.js';
  11. import CKEditorError from '/ckeditor5/utils/ckeditorerror.js';
  12. import EmitterMixin from '/ckeditor5/utils/emittermixin.js';
  13. import DOMEmitterMixin from '/ckeditor5/ui/domemittermixin.js';
  14. import extend from '/ckeditor5/utils/lib/lodash/extend.js';
  15. testUtils.createSinonSandbox();
  16. let el, text;
  17. describe( 'Template', () => {
  18. describe( 'constructor', () => {
  19. it( 'accepts the definition', () => {
  20. const def = {
  21. tag: 'p'
  22. };
  23. expect( new Template( def ).definition ).to.equal( def );
  24. } );
  25. } );
  26. describe( 'render', () => {
  27. it( 'throws when wrong template definition', () => {
  28. expect( () => {
  29. new Template( {} ).render();
  30. } ).to.throw( CKEditorError, /ui-template-wrong-syntax/ );
  31. expect( () => {
  32. new Template( {
  33. tag: 'p',
  34. text: 'foo'
  35. } ).render();
  36. } ).to.throw( CKEditorError, /ui-template-wrong-syntax/ );
  37. } );
  38. it( 'normalizes template definition', () => {
  39. const bind = Template.bind( new Model( {} ), extend( {}, DOMEmitterMixin ) );
  40. const tpl = new Template( {
  41. tag: 'p',
  42. attributes: {
  43. a: 'foo',
  44. b: [ 'bar', 'baz' ],
  45. c: {
  46. ns: 'abc',
  47. value: bind.to( 'qux' )
  48. }
  49. },
  50. children: [
  51. {
  52. text: 'content'
  53. },
  54. {
  55. text: bind.to( 'x' )
  56. },
  57. 'abc',
  58. {
  59. text: [ 'a', 'b' ]
  60. }
  61. ],
  62. on: {
  63. 'a@span': bind( 'b' ),
  64. 'b@span': bind( () => {} ),
  65. 'c@span': [
  66. bind( 'c' ),
  67. bind( () => {} )
  68. ]
  69. }
  70. } );
  71. tpl.render();
  72. const def = tpl.definition;
  73. expect( def.attributes.a[ 0 ] ).to.equal( 'foo' );
  74. expect( def.attributes.b[ 0 ] ).to.equal( 'bar' );
  75. expect( def.attributes.b[ 1 ] ).to.equal( 'baz' );
  76. expect( def.attributes.c[ 0 ].value[ 0 ].type ).to.be.a( 'symbol' );
  77. expect( def.children[ 0 ].text[ 0 ] ).to.equal( 'content' );
  78. expect( def.children[ 1 ].text[ 0 ].type ).to.be.a( 'symbol' );
  79. expect( def.children[ 2 ].text[ 0 ] ).to.equal( 'abc' );
  80. expect( def.children[ 3 ].text[ 0 ] ).to.equal( 'a' );
  81. expect( def.children[ 3 ].text[ 1 ] ).to.equal( 'b' );
  82. expect( def.on[ 'a@span' ][ 0 ].type ).to.be.a( 'symbol' );
  83. expect( def.on[ 'b@span' ][ 0 ].type ).to.be.a( 'symbol' );
  84. expect( def.on[ 'c@span' ][ 0 ].type ).to.be.a( 'symbol' );
  85. expect( def.on[ 'c@span' ][ 1 ].type ).to.be.a( 'symbol' );
  86. } );
  87. it( 'creates a HTMLElement', () => {
  88. const el = new Template( {
  89. tag: 'p',
  90. } ).render();
  91. expect( el ).to.be.instanceof( HTMLElement );
  92. expect( el.parentNode ).to.be.null;
  93. expect( el.outerHTML ).to.be.equal( '<p></p>' );
  94. expect( el.namespaceURI ).to.be.equal( 'http://www.w3.org/1999/xhtml' );
  95. } );
  96. it( 'creates an element in a custom namespace', () => {
  97. const el = new Template( {
  98. tag: 'p',
  99. ns: 'foo'
  100. } ).render();
  101. expect( el.namespaceURI ).to.be.equal( 'foo' );
  102. } );
  103. it( 'renders HTMLElement attributes', () => {
  104. const el = new Template( {
  105. tag: 'p',
  106. attributes: {
  107. 'class': [ 'a', 'b' ],
  108. x: 'bar'
  109. },
  110. children: [ 'foo' ]
  111. } ).render();
  112. expect( el ).to.be.instanceof( HTMLElement );
  113. expect( el.parentNode ).to.be.null;
  114. expect( el.outerHTML ).to.be.equal( '<p class="a b" x="bar">foo</p>' );
  115. expect( el.attributes.getNamedItem( 'class' ).namespaceURI ).to.be.null;
  116. } );
  117. it( 'renders HTMLElement attributes – empty', () => {
  118. const el = new Template( {
  119. tag: 'p',
  120. attributes: {
  121. class: '',
  122. x: [ '', '' ]
  123. },
  124. children: [ 'foo' ]
  125. } ).render();
  126. expect( el.outerHTML ).to.be.equal( '<p class="" x="">foo</p>' );
  127. } );
  128. it( 'renders HTMLElement attributes – falsy values', () => {
  129. const el = new Template( {
  130. tag: 'p',
  131. attributes: {
  132. class: false,
  133. x: [ '', null ]
  134. },
  135. children: [ 'foo' ]
  136. } ).render();
  137. expect( el.outerHTML ).to.be.equal( '<p class="false" x="null">foo</p>' );
  138. } );
  139. it( 'renders HTMLElement attributes in a custom namespace', () => {
  140. const el = new Template( {
  141. tag: 'p',
  142. attributes: {
  143. class: {
  144. ns: 'foo',
  145. value: [ 'a', 'b' ]
  146. },
  147. x: {
  148. ns: 'abc',
  149. value: 'bar'
  150. }
  151. },
  152. children: [ 'foo' ]
  153. } ).render();
  154. expect( el.outerHTML ).to.be.equal( '<p class="a b" x="bar">foo</p>' );
  155. expect( el.attributes.getNamedItem( 'class' ).namespaceURI ).to.equal( 'foo' );
  156. expect( el.attributes.getNamedItem( 'x' ).namespaceURI ).to.equal( 'abc' );
  157. } );
  158. it( 'creates HTMLElement children', () => {
  159. const el = new Template( {
  160. tag: 'p',
  161. attributes: {
  162. a: 'A'
  163. },
  164. children: [
  165. {
  166. tag: 'b',
  167. children: [ 'B' ]
  168. },
  169. {
  170. tag: 'i',
  171. children: [
  172. 'C',
  173. {
  174. tag: 'b',
  175. children: [ 'D' ]
  176. }
  177. ]
  178. }
  179. ]
  180. } ).render();
  181. expect( el.outerHTML ).to.be.equal( '<p a="A"><b>B</b><i>C<b>D</b></i></p>' );
  182. } );
  183. it( 'creates a Text node', () => {
  184. const node = new Template( { text: 'foo' } ).render();
  185. expect( node.nodeType ).to.be.equal( 3 );
  186. expect( node.textContent ).to.be.equal( 'foo' );
  187. } );
  188. it( 'creates a child Text Node (different syntaxes)', () => {
  189. const el = new Template( {
  190. tag: 'p',
  191. children: [
  192. 'foo',
  193. { text: 'bar' }
  194. ]
  195. } ).render();
  196. expect( el.outerHTML ).to.be.equal( '<p>foobar</p>' );
  197. } );
  198. it( 'creates multiple child Text Nodes', () => {
  199. const el = new Template( {
  200. tag: 'p',
  201. children: [ 'a', 'b', { text: 'c' }, 'd' ]
  202. } ).render();
  203. expect( el.childNodes ).to.have.length( 4 );
  204. expect( el.outerHTML ).to.be.equal( '<p>abcd</p>' );
  205. } );
  206. it( 'activates model bindings – root', () => {
  207. const observable = new Model( {
  208. foo: 'bar'
  209. } );
  210. const emitter = extend( {}, EmitterMixin );
  211. const bind = Template.bind( observable, emitter );
  212. const el = new Template( {
  213. tag: 'div',
  214. attributes: {
  215. class: bind.to( 'foo' )
  216. }
  217. } ).render();
  218. expect( el.getAttribute( 'class' ) ).to.equal( 'bar' );
  219. observable.foo = 'baz';
  220. expect( el.getAttribute( 'class' ) ).to.equal( 'baz' );
  221. } );
  222. it( 'activates model bindings – children', () => {
  223. const observable = new Model( {
  224. foo: 'bar'
  225. } );
  226. const emitter = extend( {}, EmitterMixin );
  227. const bind = Template.bind( observable, emitter );
  228. const el = new Template( {
  229. tag: 'div',
  230. children: [
  231. {
  232. tag: 'span',
  233. children: [
  234. {
  235. text: bind.to( 'foo' )
  236. }
  237. ]
  238. }
  239. ]
  240. } ).render();
  241. expect( el.firstChild.textContent ).to.equal( 'bar' );
  242. observable.foo = 'baz';
  243. expect( el.firstChild.textContent ).to.equal( 'baz' );
  244. } );
  245. } );
  246. describe( 'apply', () => {
  247. beforeEach( () => {
  248. el = document.createElement( 'div' );
  249. text = document.createTextNode( '' );
  250. } );
  251. it( 'throws when wrong template definition', () => {
  252. expect( () => {
  253. new Template( {
  254. tag: 'p',
  255. text: 'foo'
  256. } ).apply( el );
  257. } ).to.throw( CKEditorError, /ui-template-wrong-syntax/ );
  258. } );
  259. it( 'throws when no HTMLElement passed', () => {
  260. expect( () => {
  261. new Template( {
  262. tag: 'p'
  263. } ).apply();
  264. } ).to.throw( CKEditorError, /ui-template-wrong-node/ );
  265. } );
  266. it( 'accepts empty template definition', () => {
  267. new Template( {} ).apply( el );
  268. new Template( {} ).apply( text );
  269. expect( el.outerHTML ).to.be.equal( '<div></div>' );
  270. expect( text.textContent ).to.be.equal( '' );
  271. } );
  272. it( 'applies textContent to a Text Node', () => {
  273. new Template( {
  274. text: 'abc'
  275. } ).apply( text );
  276. expect( text.textContent ).to.be.equal( 'abc' );
  277. } );
  278. it( 'applies attributes to an HTMLElement', () => {
  279. new Template( {
  280. tag: 'div',
  281. attributes: {
  282. 'class': [ 'a', 'b' ],
  283. x: 'bar'
  284. }
  285. } ).apply( el );
  286. expect( el.outerHTML ).to.be.equal( '<div class="a b" x="bar"></div>' );
  287. } );
  288. it( 'applies doesn\'t apply new child to an HTMLElement – Text Node', () => {
  289. new Template( {
  290. tag: 'div',
  291. children: [ 'foo' ]
  292. } ).apply( el );
  293. expect( el.outerHTML ).to.be.equal( '<div></div>' );
  294. } );
  295. it( 'applies doesn\'t apply new child to an HTMLElement – HTMLElement', () => {
  296. new Template( {
  297. tag: 'div',
  298. children: [
  299. {
  300. tag: 'span'
  301. }
  302. ]
  303. } ).apply( el );
  304. expect( el.outerHTML ).to.be.equal( '<div></div>' );
  305. } );
  306. it( 'applies new textContent to an existing Text Node of an HTMLElement', () => {
  307. el.textContent = 'bar';
  308. new Template( {
  309. tag: 'div',
  310. children: [ 'foo' ]
  311. } ).apply( el );
  312. expect( el.outerHTML ).to.be.equal( '<div>foo</div>' );
  313. } );
  314. it( 'applies attributes and TextContent to a DOM tree', () => {
  315. el.textContent = 'abc';
  316. el.appendChild( document.createElement( 'span' ) );
  317. new Template( {
  318. tag: 'div',
  319. attributes: {
  320. 'class': 'parent'
  321. },
  322. children: [
  323. 'Children: ',
  324. {
  325. tag: 'span',
  326. attributes: {
  327. class: 'child'
  328. }
  329. }
  330. ]
  331. } ).apply( el );
  332. expect( el.outerHTML ).to.be.equal( '<div class="parent">Children: <span class="child"></span></div>' );
  333. } );
  334. } );
  335. describe( 'bind', () => {
  336. it( 'returns function', () => {
  337. expect( Template.bind() ).to.be.a( 'function' );
  338. } );
  339. it( 'provides "to" and "if" interface', () => {
  340. const bind = Template.bind();
  341. expect( bind ).to.have.keys( 'to', 'if' );
  342. expect( bind.to ).to.be.a( 'function' );
  343. expect( bind.if ).to.be.a( 'function' );
  344. } );
  345. describe( 'event', () => {
  346. let observable, domEmitter, bind;
  347. beforeEach( () => {
  348. observable = new Model( {
  349. foo: 'bar',
  350. baz: 'qux'
  351. } );
  352. domEmitter = extend( {}, DOMEmitterMixin );
  353. bind = Template.bind( observable, domEmitter );
  354. } );
  355. it( 'accepts plain binding', () => {
  356. const spy = testUtils.sinon.spy();
  357. setElement( {
  358. tag: 'p',
  359. on: {
  360. x: bind( 'a' ),
  361. }
  362. } );
  363. observable.on( 'a', spy );
  364. dispatchEvent( el, 'x' );
  365. sinon.assert.calledWithExactly( spy,
  366. sinon.match.has( 'name', 'a' ),
  367. sinon.match.has( 'target', el )
  368. );
  369. } );
  370. it( 'accepts an array of event bindings', () => {
  371. const spy1 = testUtils.sinon.spy();
  372. const spy2 = testUtils.sinon.spy();
  373. setElement( {
  374. tag: 'p',
  375. on: {
  376. x: [
  377. bind( 'a' ),
  378. bind( 'b' )
  379. ]
  380. }
  381. } );
  382. observable.on( 'a', spy1 );
  383. observable.on( 'b', spy2 );
  384. dispatchEvent( el, 'x' );
  385. sinon.assert.calledWithExactly( spy1,
  386. sinon.match.has( 'name', 'a' ),
  387. sinon.match.has( 'target', el )
  388. );
  389. sinon.assert.calledWithExactly( spy2,
  390. sinon.match.has( 'name', 'b' ),
  391. sinon.match.has( 'target', el )
  392. );
  393. } );
  394. it( 'accepts DOM selectors', () => {
  395. const spy1 = testUtils.sinon.spy();
  396. const spy2 = testUtils.sinon.spy();
  397. const spy3 = testUtils.sinon.spy();
  398. setElement( {
  399. tag: 'p',
  400. children: [
  401. {
  402. tag: 'span',
  403. attributes: {
  404. 'class': 'y',
  405. },
  406. on: {
  407. 'test@p': bind( 'c' )
  408. }
  409. },
  410. {
  411. tag: 'div',
  412. children: [
  413. {
  414. tag: 'span',
  415. attributes: {
  416. 'class': 'y',
  417. }
  418. }
  419. ],
  420. }
  421. ],
  422. on: {
  423. 'test@.y': bind( 'a' ),
  424. 'test@div': bind( 'b' )
  425. }
  426. } );
  427. observable.on( 'a', spy1 );
  428. observable.on( 'b', spy2 );
  429. observable.on( 'c', spy3 );
  430. // Test "test@p".
  431. dispatchEvent( el, 'test' );
  432. sinon.assert.callCount( spy1, 0 );
  433. sinon.assert.callCount( spy2, 0 );
  434. sinon.assert.callCount( spy3, 0 );
  435. // Test "test@.y".
  436. dispatchEvent( el.firstChild, 'test' );
  437. expect( spy1.firstCall.calledWithExactly(
  438. sinon.match.has( 'name', 'a' ),
  439. sinon.match.has( 'target', el.firstChild )
  440. ) ).to.be.true;
  441. sinon.assert.callCount( spy2, 0 );
  442. sinon.assert.callCount( spy3, 0 );
  443. // Test "test@div".
  444. dispatchEvent( el.lastChild, 'test' );
  445. sinon.assert.callCount( spy1, 1 );
  446. expect( spy2.firstCall.calledWithExactly(
  447. sinon.match.has( 'name', 'b' ),
  448. sinon.match.has( 'target', el.lastChild )
  449. ) ).to.be.true;
  450. sinon.assert.callCount( spy3, 0 );
  451. // Test "test@.y".
  452. dispatchEvent( el.lastChild.firstChild, 'test' );
  453. expect( spy1.secondCall.calledWithExactly(
  454. sinon.match.has( 'name', 'a' ),
  455. sinon.match.has( 'target', el.lastChild.firstChild )
  456. ) ).to.be.true;
  457. sinon.assert.callCount( spy2, 1 );
  458. sinon.assert.callCount( spy3, 0 );
  459. } );
  460. it( 'accepts function callbacks', () => {
  461. const spy1 = testUtils.sinon.spy();
  462. const spy2 = testUtils.sinon.spy();
  463. setElement( {
  464. tag: 'p',
  465. children: [
  466. {
  467. tag: 'span'
  468. }
  469. ],
  470. on: {
  471. x: bind( spy1 ),
  472. 'y@span': [
  473. bind( spy2 ),
  474. bind( 'c' )
  475. ]
  476. }
  477. } );
  478. dispatchEvent( el, 'x' );
  479. dispatchEvent( el.firstChild, 'y' );
  480. sinon.assert.calledWithExactly( spy1,
  481. sinon.match.has( 'target', el )
  482. );
  483. sinon.assert.calledWithExactly( spy2,
  484. sinon.match.has( 'target', el.firstChild )
  485. );
  486. } );
  487. it( 'supports event delegation', () => {
  488. const spy = testUtils.sinon.spy();
  489. setElement( {
  490. tag: 'p',
  491. children: [
  492. {
  493. tag: 'span'
  494. }
  495. ],
  496. on: {
  497. x: bind( 'a' ),
  498. }
  499. } );
  500. observable.on( 'a', spy );
  501. dispatchEvent( el.firstChild, 'x' );
  502. sinon.assert.calledWithExactly( spy,
  503. sinon.match.has( 'name', 'a' ),
  504. sinon.match.has( 'target', el.firstChild )
  505. );
  506. } );
  507. it( 'works for future elements', () => {
  508. const spy = testUtils.sinon.spy();
  509. setElement( {
  510. tag: 'p',
  511. on: {
  512. 'test@div': bind( 'a' )
  513. }
  514. } );
  515. observable.on( 'a', spy );
  516. const div = document.createElement( 'div' );
  517. el.appendChild( div );
  518. dispatchEvent( div, 'test' );
  519. sinon.assert.calledWithExactly( spy, sinon.match.has( 'name', 'a' ), sinon.match.has( 'target', div ) );
  520. } );
  521. } );
  522. describe( 'model', () => {
  523. let observable, emitter, bind;
  524. beforeEach( () => {
  525. observable = new Model( {
  526. foo: 'bar',
  527. baz: 'qux'
  528. } );
  529. emitter = extend( {}, EmitterMixin );
  530. bind = Template.bind( observable, emitter );
  531. } );
  532. describe( 'to', () => {
  533. it( 'returns an object which describes the binding', () => {
  534. const spy = testUtils.sinon.spy();
  535. const binding = bind.to( 'foo', spy );
  536. expect( spy.called ).to.be.false;
  537. expect( binding ).to.have.keys( [ 'type', 'observable', 'emitter', 'attribute', 'callback' ] );
  538. expect( binding.observable ).to.equal( observable );
  539. expect( binding.callback ).to.equal( spy );
  540. expect( binding.attribute ).to.equal( 'foo' );
  541. } );
  542. it( 'allows binding attribute to the observable – simple (HTMLElement attribute)', () => {
  543. setElement( {
  544. tag: 'p',
  545. attributes: {
  546. 'class': bind.to( 'foo' )
  547. },
  548. children: [ 'abc' ]
  549. } );
  550. expect( el.outerHTML ).to.equal( '<p class="bar">abc</p>' );
  551. observable.foo = 'baz';
  552. expect( el.outerHTML ).to.equal( '<p class="baz">abc</p>' );
  553. expect( el.attributes.getNamedItem( 'class' ).namespaceURI ).to.be.null;
  554. } );
  555. it( 'allows binding attribute to the observable – simple (Text Node)', () => {
  556. setElement( {
  557. tag: 'p',
  558. children: [
  559. {
  560. text: bind.to( 'foo' )
  561. }
  562. ]
  563. } );
  564. expect( el.outerHTML ).to.equal( '<p>bar</p>' );
  565. observable.foo = 'baz';
  566. expect( el.outerHTML ).to.equal( '<p>baz</p>' );
  567. } );
  568. it( 'allows binding attribute to the observable – value processing', () => {
  569. const callback = value => value > 0 ? 'positive' : 'negative';
  570. setElement( {
  571. tag: 'p',
  572. attributes: {
  573. 'class': bind.to( 'foo', callback )
  574. },
  575. children: [
  576. {
  577. text: bind.to( 'foo', callback )
  578. }
  579. ]
  580. } );
  581. observable.foo = 3;
  582. expect( el.outerHTML ).to.equal( '<p class="positive">positive</p>' );
  583. observable.foo = -7;
  584. expect( el.outerHTML ).to.equal( '<p class="negative">negative</p>' );
  585. } );
  586. it( 'allows binding attribute to the observable – value processing (use Node)', () => {
  587. const callback = ( value, node ) => {
  588. return ( !!node.tagName && value > 0 ) ? 'HTMLElement positive' : '';
  589. };
  590. setElement( {
  591. tag: 'p',
  592. attributes: {
  593. 'class': bind.to( 'foo', callback )
  594. },
  595. children: [
  596. {
  597. text: bind.to( 'foo', callback )
  598. }
  599. ]
  600. } );
  601. observable.foo = 3;
  602. expect( el.outerHTML ).to.equal( '<p class="HTMLElement positive"></p>' );
  603. observable.foo = -7;
  604. expect( el.outerHTML ).to.equal( '<p></p>' );
  605. } );
  606. it( 'allows binding attribute to the observable – custom callback', () => {
  607. setElement( {
  608. tag: 'p',
  609. attributes: {
  610. 'class': bind.to( 'foo', ( value, el ) => {
  611. el.innerHTML = value;
  612. if ( value == 'changed' ) {
  613. return value;
  614. }
  615. } )
  616. }
  617. } );
  618. observable.foo = 'moo';
  619. expect( el.outerHTML ).to.equal( '<p class="undefined">moo</p>' );
  620. observable.foo = 'changed';
  621. expect( el.outerHTML ).to.equal( '<p class="changed">changed</p>' );
  622. } );
  623. it( 'allows binding attribute to the observable – array of bindings (HTMLElement attribute)', () => {
  624. setElement( {
  625. tag: 'p',
  626. attributes: {
  627. 'class': [
  628. 'ck-class',
  629. bind.to( 'foo' ),
  630. bind.to( 'baz' ),
  631. bind.to( 'foo', value => `foo-is-${value}` ),
  632. 'ck-end'
  633. ]
  634. },
  635. children: [ 'abc' ]
  636. } );
  637. observable.foo = 'a';
  638. observable.baz = 'b';
  639. expect( el.outerHTML ).to.equal( '<p class="ck-class a b foo-is-a ck-end">abc</p>' );
  640. observable.foo = 'c';
  641. observable.baz = 'd';
  642. expect( el.outerHTML ).to.equal( '<p class="ck-class c d foo-is-c ck-end">abc</p>' );
  643. } );
  644. it( 'allows binding attribute to the observable – array of bindings (Text Node)', () => {
  645. setElement( {
  646. tag: 'p',
  647. attributes: {
  648. },
  649. children: [
  650. {
  651. text: [
  652. 'ck-class',
  653. bind.to( 'foo' ),
  654. bind.to( 'baz' ),
  655. bind.to( 'foo', value => `foo-is-${value}` ),
  656. 'ck-end'
  657. ]
  658. }
  659. ]
  660. } );
  661. observable.foo = 'a';
  662. observable.baz = 'b';
  663. expect( el.outerHTML ).to.equal( '<p>ck-class a b foo-is-a ck-end</p>' );
  664. observable.foo = 'c';
  665. observable.baz = 'd';
  666. expect( el.outerHTML ).to.equal( '<p>ck-class c d foo-is-c ck-end</p>' );
  667. } );
  668. it( 'allows binding attribute to the observable – falsy values', () => {
  669. setElement( {
  670. tag: 'p',
  671. attributes: {
  672. 'class': bind.to( 'foo' )
  673. },
  674. children: [ 'abc' ]
  675. } );
  676. observable.foo = 'bar';
  677. expect( el.outerHTML ).to.equal( '<p class="bar">abc</p>' );
  678. observable.foo = false;
  679. expect( el.outerHTML ).to.equal( '<p class="false">abc</p>' );
  680. observable.foo = null;
  681. expect( el.outerHTML ).to.equal( '<p class="null">abc</p>' );
  682. observable.foo = undefined;
  683. expect( el.outerHTML ).to.equal( '<p class="undefined">abc</p>' );
  684. observable.foo = 0;
  685. expect( el.outerHTML ).to.equal( '<p class="0">abc</p>' );
  686. observable.foo = '';
  687. expect( el.outerHTML ).to.equal( '<p>abc</p>' );
  688. } );
  689. it( 'allows binding attribute to the observable – a custom namespace', () => {
  690. setElement( {
  691. tag: 'p',
  692. attributes: {
  693. class: {
  694. ns: 'foo',
  695. value: bind.to( 'foo' )
  696. },
  697. custom: {
  698. ns: 'foo',
  699. value: [
  700. bind.to( 'foo' ),
  701. bind.to( 'baz' )
  702. ]
  703. }
  704. },
  705. children: [ 'abc' ]
  706. } );
  707. observable.foo = 'bar';
  708. expect( el.outerHTML ).to.equal( '<p class="bar" custom="bar qux">abc</p>' );
  709. expect( el.attributes.getNamedItem( 'class' ).namespaceURI ).to.equal( 'foo' );
  710. observable.foo = 'baz';
  711. expect( el.outerHTML ).to.equal( '<p class="baz" custom="baz qux">abc</p>' );
  712. expect( el.attributes.getNamedItem( 'class' ).namespaceURI ).to.equal( 'foo' );
  713. } );
  714. } );
  715. describe( 'if', () => {
  716. it( 'returns an object which describes the binding', () => {
  717. const spy = testUtils.sinon.spy();
  718. const binding = bind.if( 'foo', 'whenTrue', spy );
  719. expect( spy.called ).to.be.false;
  720. expect( binding ).to.have.keys( [ 'type', 'observable', 'emitter', 'attribute', 'callback', 'valueIfTrue' ] );
  721. expect( binding.observable ).to.equal( observable );
  722. expect( binding.callback ).to.equal( spy );
  723. expect( binding.attribute ).to.equal( 'foo' );
  724. expect( binding.valueIfTrue ).to.equal( 'whenTrue' );
  725. } );
  726. it( 'allows binding attribute to the observable – presence of an attribute (HTMLElement attribute)', () => {
  727. setElement( {
  728. tag: 'p',
  729. attributes: {
  730. 'class': bind.if( 'foo' )
  731. },
  732. children: [ 'abc' ]
  733. } );
  734. observable.foo = true;
  735. expect( el.outerHTML ).to.equal( '<p class="">abc</p>' );
  736. observable.foo = false;
  737. expect( el.outerHTML ).to.equal( '<p>abc</p>' );
  738. observable.foo = 'bar';
  739. expect( el.outerHTML ).to.equal( '<p class="">abc</p>' );
  740. } );
  741. // TODO: Is this alright? It makes sense but it's pretty useless. Text Node cannot be
  742. // removed just like an attribute of some HTMLElement.
  743. it( 'allows binding attribute to the observable – presence of an attribute (Text Node)', () => {
  744. setElement( {
  745. tag: 'p',
  746. children: [
  747. {
  748. text: bind.if( 'foo' )
  749. }
  750. ]
  751. } );
  752. observable.foo = true;
  753. expect( el.outerHTML ).to.equal( '<p></p>' );
  754. observable.foo = false;
  755. expect( el.outerHTML ).to.equal( '<p></p>' );
  756. observable.foo = 'bar';
  757. expect( el.outerHTML ).to.equal( '<p></p>' );
  758. } );
  759. it( 'allows binding attribute to the observable – value of an attribute (HTMLElement attribute)', () => {
  760. setElement( {
  761. tag: 'p',
  762. attributes: {
  763. 'class': bind.if( 'foo', 'bar' )
  764. },
  765. children: [ 'abc' ]
  766. } );
  767. observable.foo = 'bar';
  768. expect( el.outerHTML ).to.equal( '<p class="bar">abc</p>' );
  769. observable.foo = false;
  770. expect( el.outerHTML ).to.equal( '<p>abc</p>' );
  771. observable.foo = 64;
  772. expect( el.outerHTML ).to.equal( '<p class="bar">abc</p>' );
  773. } );
  774. it( 'allows binding attribute to the observable – value of an attribute (Text Node)', () => {
  775. setElement( {
  776. tag: 'p',
  777. children: [
  778. {
  779. text: bind.if( 'foo', 'bar' )
  780. }
  781. ]
  782. } );
  783. observable.foo = 'bar';
  784. expect( el.outerHTML ).to.equal( '<p>bar</p>' );
  785. observable.foo = false;
  786. expect( el.outerHTML ).to.equal( '<p></p>' );
  787. observable.foo = 64;
  788. expect( el.outerHTML ).to.equal( '<p>bar</p>' );
  789. } );
  790. it( 'allows binding attribute to the observable – array of bindings (HTMLElement attribute)', () => {
  791. setElement( {
  792. tag: 'p',
  793. attributes: {
  794. 'class': [
  795. 'ck-class',
  796. bind.if( 'foo', 'foo-set' ),
  797. bind.if( 'bar', 'bar-not-set', ( value ) => !value ),
  798. 'ck-end'
  799. ]
  800. },
  801. children: [ 'abc' ]
  802. } );
  803. observable.foo = observable.bar = true;
  804. expect( el.outerHTML ).to.equal( '<p class="ck-class foo-set ck-end">abc</p>' );
  805. observable.foo = observable.bar = false;
  806. expect( el.outerHTML ).to.equal( '<p class="ck-class bar-not-set ck-end">abc</p>' );
  807. } );
  808. it( 'allows binding attribute to the observable – value of an attribute processed by a callback', () => {
  809. setElement( {
  810. tag: 'p',
  811. attributes: {
  812. 'class': bind.if( 'foo', 'there–is–no–foo', value => !value )
  813. },
  814. children: [ 'abc' ]
  815. } );
  816. observable.foo = 'bar';
  817. expect( el.outerHTML ).to.equal( '<p>abc</p>' );
  818. observable.foo = false;
  819. expect( el.outerHTML ).to.equal( '<p class="there–is–no–foo">abc</p>' );
  820. observable.foo = 64;
  821. expect( el.outerHTML ).to.equal( '<p>abc</p>' );
  822. } );
  823. it( 'allows binding attribute to the observable – value of an attribute processed by a callback (use Node)', () => {
  824. setElement( {
  825. tag: 'p',
  826. attributes: {
  827. 'class': bind.if( 'foo', 'eqls-tag-name', ( value, el ) => el.tagName === value )
  828. },
  829. children: [ 'abc' ]
  830. } );
  831. observable.foo = 'bar';
  832. expect( el.outerHTML ).to.equal( '<p>abc</p>' );
  833. observable.foo = 'P';
  834. expect( el.outerHTML ).to.equal( '<p class="eqls-tag-name">abc</p>' );
  835. observable.foo = 64;
  836. expect( el.outerHTML ).to.equal( '<p>abc</p>' );
  837. } );
  838. it( 'allows binding attribute to the observable – falsy values', () => {
  839. setElement( {
  840. tag: 'p',
  841. attributes: {
  842. 'class': bind.if( 'foo', 'foo-is-set' )
  843. },
  844. children: [ 'abc' ]
  845. } );
  846. observable.foo = 'bar';
  847. expect( el.outerHTML ).to.equal( '<p class="foo-is-set">abc</p>' );
  848. observable.foo = false;
  849. expect( el.outerHTML ).to.equal( '<p>abc</p>' );
  850. observable.foo = null;
  851. expect( el.outerHTML ).to.equal( '<p>abc</p>' );
  852. observable.foo = undefined;
  853. expect( el.outerHTML ).to.equal( '<p>abc</p>' );
  854. observable.foo = '';
  855. expect( el.outerHTML ).to.equal( '<p>abc</p>' );
  856. observable.foo = 0;
  857. expect( el.outerHTML ).to.equal( '<p>abc</p>' );
  858. } );
  859. } );
  860. it( 'works with Template#apply() – root element', () => {
  861. new Template( {
  862. tag: 'div',
  863. attributes: {
  864. class: bind.to( 'foo' )
  865. }
  866. } ).apply( el );
  867. expect( el.getAttribute( 'class' ) ).to.equal( 'bar' );
  868. observable.foo = 'baz';
  869. expect( el.getAttribute( 'class' ) ).to.equal( 'baz' );
  870. } );
  871. it( 'works with Template#apply() – children', () => {
  872. const el = document.createElement( 'div' );
  873. const child = document.createElement( 'span' );
  874. child.textContent = 'foo';
  875. el.appendChild( child );
  876. new Template( {
  877. tag: 'div',
  878. children: [
  879. {
  880. tag: 'span',
  881. children: [
  882. {
  883. text: bind.to( 'foo' )
  884. }
  885. ]
  886. }
  887. ]
  888. } ).apply( el );
  889. expect( child.textContent ).to.equal( 'bar' );
  890. observable.foo = 'baz';
  891. expect( child.textContent ).to.equal( 'baz' );
  892. } );
  893. } );
  894. } );
  895. } );
  896. function setElement( template ) {
  897. el = new Template( template ).render();
  898. document.body.appendChild( el );
  899. }
  900. function dispatchEvent( el, domEvtName ) {
  901. if ( !el.parentNode ) {
  902. throw new Error( 'To dispatch an event, element must be in DOM. Otherwise #target is null.' );
  903. }
  904. el.dispatchEvent( new Event( domEvtName, {
  905. bubbles: true
  906. } ) );
  907. }