observablemixin.js 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811
  1. /**
  2. * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. import testUtils from 'tests/core/_utils/utils.js';
  6. import utilsTestUtils from 'tests/utils/_utils/utils.js';
  7. import ObservableMixin from 'ckeditor5/utils/observablemixin.js';
  8. import EmitterMixin from 'ckeditor5/utils/emittermixin.js';
  9. import EventInfo from 'ckeditor5/utils/eventinfo.js';
  10. import CKEditorError from 'ckeditor5/utils/ckeditorerror.js';
  11. import mix from 'ckeditor5/utils/mix.js';
  12. const assertBinding = utilsTestUtils.assertBinding;
  13. testUtils.createSinonSandbox();
  14. describe( 'ObservableMixin', () => {
  15. it( 'exists', () => {
  16. expect( ObservableMixin ).to.be.an( 'object' );
  17. } );
  18. it( 'mixes in EmitterMixin', () => {
  19. expect( ObservableMixin ).to.have.property( 'on', EmitterMixin.on );
  20. } );
  21. it( 'implements set, bind, and unbind methods', () => {
  22. expect( ObservableMixin ).to.contain.keys( 'set', 'bind', 'unbind' );
  23. } );
  24. } );
  25. describe( 'Observable', () => {
  26. class Observable {
  27. constructor( attrs ) {
  28. if ( attrs ) {
  29. this.set( attrs );
  30. }
  31. }
  32. }
  33. mix( Observable, ObservableMixin );
  34. let Car, car;
  35. beforeEach( () => {
  36. Car = class extends Observable {};
  37. car = new Car( {
  38. color: 'red',
  39. year: 2015
  40. } );
  41. } );
  42. it( 'should set attributes on creation', () => {
  43. expect( car ).to.have.property( 'color', 'red' );
  44. expect( car ).to.have.property( 'year', 2015 );
  45. } );
  46. it( 'should get correctly after set', () => {
  47. car.color = 'blue';
  48. expect( car.color ).to.equal( 'blue' );
  49. } );
  50. describe( 'set', () => {
  51. it( 'should work when passing an object', () => {
  52. car.set( {
  53. color: 'blue', // Override
  54. wheels: 4,
  55. seats: 5
  56. } );
  57. expect( car ).to.deep.equal( {
  58. color: 'blue',
  59. year: 2015,
  60. wheels: 4,
  61. seats: 5
  62. } );
  63. } );
  64. it( 'should work when passing a key/value pair', () => {
  65. car.set( 'color', 'blue' );
  66. car.set( 'wheels', 4 );
  67. expect( car ).to.deep.equal( {
  68. color: 'blue',
  69. year: 2015,
  70. wheels: 4
  71. } );
  72. } );
  73. it( 'should fire the "change" event', () => {
  74. let spy = sinon.spy();
  75. let spyColor = sinon.spy();
  76. let spyYear = sinon.spy();
  77. let spyWheels = sinon.spy();
  78. car.on( 'change', spy );
  79. car.on( 'change:color', spyColor );
  80. car.on( 'change:year', spyYear );
  81. car.on( 'change:wheels', spyWheels );
  82. // Set property in all possible ways.
  83. car.color = 'blue';
  84. car.set( { year: 2003 } );
  85. car.set( 'wheels', 4 );
  86. // Check number of calls.
  87. sinon.assert.calledThrice( spy );
  88. sinon.assert.calledOnce( spyColor );
  89. sinon.assert.calledOnce( spyYear );
  90. sinon.assert.calledOnce( spyWheels );
  91. // Check context.
  92. sinon.assert.alwaysCalledOn( spy, car );
  93. sinon.assert.calledOn( spyColor, car );
  94. sinon.assert.calledOn( spyYear, car );
  95. sinon.assert.calledOn( spyWheels, car );
  96. // Check params.
  97. sinon.assert.calledWithExactly( spy, sinon.match.instanceOf( EventInfo ), 'color', 'blue', 'red' );
  98. sinon.assert.calledWithExactly( spy, sinon.match.instanceOf( EventInfo ), 'year', 2003, 2015 );
  99. sinon.assert.calledWithExactly( spy, sinon.match.instanceOf( EventInfo ), 'wheels', 4, sinon.match.typeOf( 'undefined' ) );
  100. sinon.assert.calledWithExactly( spyColor, sinon.match.instanceOf( EventInfo ), 'color', 'blue', 'red' );
  101. sinon.assert.calledWithExactly( spyYear, sinon.match.instanceOf( EventInfo ), 'year', 2003, 2015 );
  102. sinon.assert.calledWithExactly( spyWheels, sinon.match.instanceOf( EventInfo ), 'wheels', 4, sinon.match.typeOf( 'undefined' ) );
  103. } );
  104. it( 'should not fire the "change" event for the same attribute value', () => {
  105. let spy = sinon.spy();
  106. let spyColor = sinon.spy();
  107. car.on( 'change', spy );
  108. car.on( 'change:color', spyColor );
  109. // Set the "color" property in all possible ways.
  110. car.color = 'red';
  111. car.set( 'color', 'red' );
  112. car.set( { color: 'red' } );
  113. sinon.assert.notCalled( spy );
  114. sinon.assert.notCalled( spyColor );
  115. } );
  116. it( 'should throw when overriding already existing property', () => {
  117. car.normalProperty = 1;
  118. expect( () => {
  119. car.set( 'normalProperty', 2 );
  120. } ).to.throw( CKEditorError, /^observable-set-cannot-override/ );
  121. expect( car ).to.have.property( 'normalProperty', 1 );
  122. } );
  123. it( 'should throw when overriding already existing property (in the prototype)', () => {
  124. class Car extends Observable {
  125. method() {}
  126. }
  127. car = new Car();
  128. expect( () => {
  129. car.set( 'method', 2 );
  130. } ).to.throw( CKEditorError, /^observable-set-cannot-override/ );
  131. expect( car.method ).to.be.a( 'function' );
  132. } );
  133. it( 'should allow setting attributes with undefined value', () => {
  134. let spy = sinon.spy();
  135. car.on( 'change', spy );
  136. car.set( 'seats', undefined );
  137. sinon.assert.calledOnce( spy );
  138. expect( car ).to.contain.keys( 'seats' );
  139. expect( car.seats ).to.be.undefined;
  140. car.set( 'seats', 5 );
  141. sinon.assert.calledTwice( spy );
  142. expect( car ).to.have.property( 'seats', 5 );
  143. } );
  144. } );
  145. describe( 'bind', () => {
  146. it( 'should chain for a single attribute', () => {
  147. expect( car.bind( 'color' ) ).to.contain.keys( 'to' );
  148. } );
  149. it( 'should chain for multiple attributes', () => {
  150. expect( car.bind( 'color', 'year' ) ).to.contain.keys( 'to' );
  151. } );
  152. it( 'should chain for nonexistent attributes', () => {
  153. expect( car.bind( 'nonexistent' ) ).to.contain.keys( 'to' );
  154. } );
  155. it( 'should throw when attributes are not strings', () => {
  156. expect( () => {
  157. car.bind();
  158. } ).to.throw( CKEditorError, /observable-bind-wrong-attrs/ );
  159. expect( () => {
  160. car.bind( new Date() );
  161. } ).to.throw( CKEditorError, /observable-bind-wrong-attrs/ );
  162. expect( () => {
  163. car.bind( 'color', new Date() );
  164. } ).to.throw( CKEditorError, /observable-bind-wrong-attrs/ );
  165. } );
  166. it( 'should throw when the same attribute is used than once', () => {
  167. expect( () => {
  168. car.bind( 'color', 'color' );
  169. } ).to.throw( CKEditorError, /observable-bind-duplicate-attrs/ );
  170. } );
  171. it( 'should throw when binding the same attribute more than once', () => {
  172. expect( () => {
  173. car.bind( 'color' );
  174. car.bind( 'color' );
  175. } ).to.throw( CKEditorError, /observable-bind-rebind/ );
  176. } );
  177. describe( 'to', () => {
  178. it( 'should not chain', () => {
  179. expect(
  180. car.bind( 'color' ).to( new Observable( { color: 'red' } ) )
  181. ).to.be.undefined;
  182. } );
  183. it( 'should throw when arguments are of invalid type - empty', () => {
  184. expect( () => {
  185. car = new Car();
  186. car.bind( 'color' ).to();
  187. } ).to.throw( CKEditorError, /observable-bind-to-parse-error/ );
  188. } );
  189. it( 'should throw when binding multiple attributes to multiple observables', () => {
  190. let vehicle = new Car();
  191. const car1 = new Car( { color: 'red', year: 1943 } );
  192. const car2 = new Car( { color: 'yellow', year: 1932 } );
  193. expect( () => {
  194. vehicle.bind( 'color', 'year' ).to( car1, 'color', car2, 'year' );
  195. } ).to.throw( CKEditorError, /observable-bind-to-no-callback/ );
  196. expect( () => {
  197. vehicle = new Car();
  198. vehicle.bind( 'color', 'year' ).to( car1, car2 );
  199. } ).to.throw( CKEditorError, /observable-bind-to-no-callback/ );
  200. expect( () => {
  201. vehicle = new Car();
  202. vehicle.bind( 'color', 'year' ).to( car1, car2, 'year' );
  203. } ).to.throw( CKEditorError, /observable-bind-to-no-callback/ );
  204. expect( () => {
  205. vehicle = new Car();
  206. vehicle.bind( 'color', 'year' ).to( car1, 'color', car2 );
  207. } ).to.throw( CKEditorError, /observable-bind-to-no-callback/ );
  208. expect( () => {
  209. vehicle = new Car();
  210. vehicle.bind( 'color', 'year', 'custom' ).to( car, car );
  211. } ).to.throw( CKEditorError, /observable-bind-to-no-callback/ );
  212. } );
  213. it( 'should throw when binding multiple attributes but passed a callback', () => {
  214. let vehicle = new Car();
  215. expect( () => {
  216. vehicle.bind( 'color', 'year' ).to( car, () => {} );
  217. } ).to.throw( CKEditorError, /observable-bind-to-extra-callback/ );
  218. expect( () => {
  219. vehicle = new Car();
  220. vehicle.bind( 'color', 'year' ).to( car, car, () => {} );
  221. } ).to.throw( CKEditorError, /observable-bind-to-extra-callback/ );
  222. } );
  223. it( 'should throw when binding a single attribute but multiple callbacks', () => {
  224. let vehicle = new Car();
  225. expect( () => {
  226. vehicle.bind( 'color' ).to( car, () => {}, () => {} );
  227. } ).to.throw( CKEditorError, /observable-bind-to-parse-error/ );
  228. expect( () => {
  229. vehicle = new Car();
  230. vehicle.bind( 'color' ).to( car, car, () => {}, () => {} );
  231. } ).to.throw( CKEditorError, /observable-bind-to-parse-error/ );
  232. } );
  233. it( 'should throw when a number of attributes does not match', () => {
  234. let vehicle = new Car();
  235. expect( () => {
  236. vehicle.bind( 'color' ).to( car, 'color', 'year' );
  237. } ).to.throw( CKEditorError, /observable-bind-to-attrs-length/ );
  238. expect( () => {
  239. vehicle = new Car();
  240. vehicle.bind( 'color', 'year' ).to( car, 'color' );
  241. } ).to.throw( CKEditorError, /observable-bind-to-attrs-length/ );
  242. expect( () => {
  243. vehicle = new Car();
  244. vehicle.bind( 'color' ).to( car, 'color', 'year', () => {} );
  245. } ).to.throw( CKEditorError, /observable-bind-to-attrs-length/ );
  246. expect( () => {
  247. vehicle = new Car();
  248. vehicle.bind( 'color' ).to( car, 'color', car, 'color', 'year', () => {} );
  249. } ).to.throw( CKEditorError, /observable-bind-to-attrs-length/ );
  250. } );
  251. it( 'should work when attributes don\'t exist in to() observable #1', () => {
  252. const vehicle = new Car();
  253. vehicle.bind( 'color' ).to( car, 'nonexistent in car' );
  254. assertBinding( vehicle,
  255. { color: undefined, year: undefined },
  256. [
  257. [ car, { 'nonexistent in car': 'foo', year: 1969 } ]
  258. ],
  259. { color: 'foo', year: undefined }
  260. );
  261. } );
  262. it( 'should work when attributes don\'t exist in to() observable #2', () => {
  263. const vehicle = new Car();
  264. vehicle.bind( 'nonexistent in car' ).to( car );
  265. assertBinding( vehicle,
  266. { 'nonexistent in car': undefined, year: undefined },
  267. [
  268. [ car, { 'nonexistent in car': 'foo', year: 1969 } ]
  269. ],
  270. { 'nonexistent in car': 'foo', year: undefined }
  271. );
  272. } );
  273. it( 'should work when attributes don\'t exist in to() observable #3', () => {
  274. const vehicle = new Car();
  275. vehicle.bind( 'year' ).to( car, 'color', car, 'nonexistent in car', ( a, b ) => a + b );
  276. assertBinding( vehicle,
  277. { color: undefined, year: car.color + undefined },
  278. [
  279. [ car, { color: 'blue', year: 1969 } ]
  280. ],
  281. { color: undefined, year: 'blueundefined' }
  282. );
  283. } );
  284. it( 'should set new observable attributes', () => {
  285. const car = new Car( { color: 'green', year: 2001, type: 'pickup' } );
  286. const vehicle = new Car( { 'not involved': true } );
  287. vehicle.bind( 'color', 'year', 'type' ).to( car );
  288. expect( vehicle ).to.have.property( 'color' );
  289. expect( vehicle ).to.have.property( 'year' );
  290. expect( vehicle ).to.have.property( 'type' );
  291. expect( vehicle ).to.have.property( 'not involved' );
  292. } );
  293. it( 'should work when no attribute specified #1', () => {
  294. const vehicle = new Car();
  295. vehicle.bind( 'color' ).to( car );
  296. assertBinding( vehicle,
  297. { color: car.color, year: undefined },
  298. [
  299. [ car, { color: 'blue', year: 1969 } ]
  300. ],
  301. { color: 'blue', year: undefined }
  302. );
  303. } );
  304. it( 'should work for a single attribute', () => {
  305. const vehicle = new Car();
  306. vehicle.bind( 'color' ).to( car, 'color' );
  307. assertBinding( vehicle,
  308. { color: car.color, year: undefined },
  309. [
  310. [ car, { color: 'blue', year: 1969 } ]
  311. ],
  312. { color: 'blue', year: undefined }
  313. );
  314. } );
  315. it( 'should work for multiple attributes', () => {
  316. const vehicle = new Car();
  317. vehicle.bind( 'color', 'year' ).to( car, 'color', 'year' );
  318. assertBinding( vehicle,
  319. { color: car.color, year: car.year },
  320. [
  321. [ car, { color: 'blue', year: 1969 } ]
  322. ],
  323. { color: 'blue', year: 1969 }
  324. );
  325. } );
  326. it( 'should work for attributes that don\'t exist in the observable', () => {
  327. const vehicle = new Car();
  328. vehicle.bind( 'nonexistent in vehicle' ).to( car, 'color' );
  329. assertBinding( vehicle,
  330. { 'nonexistent in vehicle': car.color, color: undefined },
  331. [
  332. [ car, { color: 'blue', year: 1969 } ]
  333. ],
  334. { 'nonexistent in vehicle': 'blue', color: undefined }
  335. );
  336. } );
  337. it( 'should work when using the same attribute name more than once', () => {
  338. const vehicle = new Car();
  339. vehicle.bind( 'color', 'year' ).to( car, 'year', 'year' );
  340. assertBinding( vehicle,
  341. { color: car.year, year: car.year },
  342. [
  343. [ car, { color: 'blue', year: 1969 } ]
  344. ],
  345. { color: 1969, year: 1969 }
  346. );
  347. } );
  348. it( 'should work when binding more that once', () => {
  349. const vehicle = new Car();
  350. vehicle.bind( 'color' ).to( car, 'color' );
  351. vehicle.bind( 'year' ).to( car, 'year' );
  352. assertBinding( vehicle,
  353. { color: car.color, year: car.year },
  354. [
  355. [ car, { color: 'blue', year: 1969 } ]
  356. ],
  357. { color: 'blue', year: 1969 }
  358. );
  359. } );
  360. it( 'should work with callback – set a new observable attribute', () => {
  361. const vehicle = new Car();
  362. const car1 = new Car( { type: 'pickup' } );
  363. const car2 = new Car( { type: 'truck' } );
  364. vehicle.bind( 'type' )
  365. .to( car1, car2, ( ...args ) => args.join( '' ) );
  366. expect( vehicle ).to.have.property( 'type' );
  367. } );
  368. it( 'should work with callback #1', () => {
  369. const vehicle = new Car();
  370. const car1 = new Car( { color: 'black' } );
  371. const car2 = new Car( { color: 'brown' } );
  372. vehicle.bind( 'color' )
  373. .to( car1, car2, ( ...args ) => args.join( '' ) );
  374. assertBinding( vehicle,
  375. { color: car1.color + car2.color, year: undefined },
  376. [
  377. [ car1, { color: 'black', year: 1930 } ],
  378. [ car2, { color: 'green', year: 1950 } ]
  379. ],
  380. { color: 'blackgreen', year: undefined }
  381. );
  382. } );
  383. it( 'should work with callback #2', () => {
  384. const vehicle = new Car();
  385. const car1 = new Car( { color: 'black' } );
  386. const car2 = new Car( { color: 'brown' } );
  387. vehicle.bind( 'color' )
  388. .to( car1, 'color', car2, 'color', ( ...args ) => args.join( '' ) );
  389. assertBinding( vehicle,
  390. { color: car1.color + car2.color, year: undefined },
  391. [
  392. [ car1, { color: 'black', year: 1930 } ],
  393. [ car2, { color: 'green', year: 1950 } ]
  394. ],
  395. { color: 'blackgreen', year: undefined }
  396. );
  397. } );
  398. it( 'should work with callback #3', () => {
  399. const vehicle = new Car();
  400. const car1 = new Car( { color: 'black' } );
  401. const car2 = new Car( { color: 'brown' } );
  402. const car3 = new Car( { color: 'yellow' } );
  403. vehicle.bind( 'color' )
  404. .to( car1, car2, car3, ( ...args ) => args.join( '' ) );
  405. assertBinding( vehicle,
  406. { color: car1.color + car2.color + car3.color, year: undefined },
  407. [
  408. [ car1, { color: 'black', year: 1930 } ],
  409. [ car2, { color: 'green', year: 1950 } ]
  410. ],
  411. { color: 'blackgreenyellow', year: undefined }
  412. );
  413. } );
  414. it( 'should work with callback #4', () => {
  415. const vehicle = new Car();
  416. const car1 = new Car( { color: 'black' } );
  417. const car2 = new Car( { lightness: 'bright' } );
  418. const car3 = new Car( { color: 'yellow' } );
  419. vehicle.bind( 'color' )
  420. .to( car1, car2, 'lightness', car3, ( ...args ) => args.join( '' ) );
  421. assertBinding( vehicle,
  422. { color: car1.color + car2.lightness + car3.color, year: undefined },
  423. [
  424. [ car1, { color: 'black', year: 1930 } ],
  425. [ car2, { color: 'green', year: 1950 } ]
  426. ],
  427. { color: 'blackbrightyellow', year: undefined }
  428. );
  429. } );
  430. it( 'should work with callback #5', () => {
  431. const vehicle = new Car();
  432. const car1 = new Car( { hue: 'reds' } );
  433. const car2 = new Car( { lightness: 'bright' } );
  434. vehicle.bind( 'color' )
  435. .to( car1, 'hue', car2, 'lightness', ( ...args ) => args.join( '' ) );
  436. assertBinding( vehicle,
  437. { color: car1.hue + car2.lightness, year: undefined },
  438. [
  439. [ car1, { hue: 'greens', year: 1930 } ],
  440. [ car2, { lightness: 'dark', year: 1950 } ]
  441. ],
  442. { color: 'greensdark', year: undefined }
  443. );
  444. } );
  445. it( 'should work with callback #6', () => {
  446. const vehicle = new Car();
  447. const car1 = new Car( { hue: 'reds' } );
  448. vehicle.bind( 'color' )
  449. .to( car1, 'hue', ( h ) => h.toUpperCase() );
  450. assertBinding( vehicle,
  451. { color: car1.hue.toUpperCase(), year: undefined },
  452. [
  453. [ car1, { hue: 'greens', year: 1930 } ]
  454. ],
  455. { color: 'GREENS', year: undefined }
  456. );
  457. } );
  458. it( 'should work with callback #7', () => {
  459. const vehicle = new Car();
  460. const car1 = new Car( { color: 'red', year: 1943 } );
  461. const car2 = new Car( { color: 'yellow', year: 1932 } );
  462. vehicle.bind( 'custom' )
  463. .to( car1, 'color', car2, 'year', ( ...args ) => args.join( '/' ) );
  464. assertBinding( vehicle,
  465. { color: undefined, year: undefined, 'custom': car1.color + '/' + car2.year },
  466. [
  467. [ car1, { color: 'blue', year: 2100 } ],
  468. [ car2, { color: 'violet', year: 1969 } ]
  469. ],
  470. { color: undefined, year: undefined, 'custom': 'blue/1969' }
  471. );
  472. } );
  473. it( 'should work with callback #8', () => {
  474. const vehicle = new Car();
  475. const car1 = new Car( { color: 'red', year: 1943 } );
  476. const car2 = new Car( { color: 'yellow', year: 1932 } );
  477. const car3 = new Car( { hue: 'reds' } );
  478. vehicle.bind( 'custom' )
  479. .to( car1, 'color', car2, 'year', car3, 'hue', ( ...args ) => args.join( '/' ) );
  480. assertBinding( vehicle,
  481. { color: undefined, year: undefined, hue: undefined, 'custom': car1.color + '/' + car2.year + '/' + car3.hue },
  482. [
  483. [ car1, { color: 'blue', year: 2100 } ],
  484. [ car2, { color: 'violet', year: 1969 } ]
  485. ],
  486. { color: undefined, year: undefined, hue: undefined, 'custom': 'blue/1969/reds' }
  487. );
  488. } );
  489. it( 'should work with callback – binding more that once #1', () => {
  490. const vehicle = new Car();
  491. const car1 = new Car( { hue: 'reds', produced: 1920 } );
  492. const car2 = new Car( { lightness: 'bright', sold: 1921 } );
  493. vehicle.bind( 'color' )
  494. .to( car1, 'hue', car2, 'lightness', ( ...args ) => args.join( '' ) );
  495. vehicle.bind( 'year' )
  496. .to( car1, 'produced', car2, 'sold', ( ...args ) => args.join( '/' ) );
  497. assertBinding( vehicle,
  498. { color: car1.hue + car2.lightness, year: car1.produced + '/' + car2.sold },
  499. [
  500. [ car1, { hue: 'greens', produced: 1930 } ],
  501. [ car2, { lightness: 'dark', sold: 2000 } ]
  502. ],
  503. { color: 'greensdark', year: '1930/2000' }
  504. );
  505. } );
  506. it( 'should work with callback – binding more that once #2', () => {
  507. const vehicle = new Car();
  508. const car1 = new Car( { hue: 'reds', produced: 1920 } );
  509. const car2 = new Car( { lightness: 'bright', sold: 1921 } );
  510. vehicle.bind( 'color' )
  511. .to( car1, 'hue', car2, 'lightness', ( ...args ) => args.join( '' ) );
  512. vehicle.bind( 'year' )
  513. .to( car1, 'produced', car2, 'sold', ( ...args ) => args.join( '/' ) );
  514. vehicle.bind( 'mix' )
  515. .to( car1, 'hue', car2, 'sold', ( ...args ) => args.join( '+' ) );
  516. assertBinding( vehicle,
  517. {
  518. color: car1.hue + car2.lightness,
  519. year: car1.produced + '/' + car2.sold,
  520. mix: car1.hue + '+' + car2.sold
  521. },
  522. [
  523. [ car1, { hue: 'greens', produced: 1930 } ],
  524. [ car2, { lightness: 'dark', sold: 2000 } ]
  525. ],
  526. {
  527. color: 'greensdark',
  528. year: '1930/2000',
  529. mix: 'greens+2000'
  530. }
  531. );
  532. } );
  533. it( 'should work with callback – binding more that once #3', () => {
  534. const vehicle = new Car();
  535. const car1 = new Car( { hue: 'reds', produced: 1920 } );
  536. const car2 = new Car( { lightness: 'bright', sold: 1921 } );
  537. vehicle.bind( 'color' )
  538. .to( car1, 'hue', car2, 'lightness', ( ...args ) => args.join( '' ) );
  539. vehicle.bind( 'custom1' ).to( car1, 'hue' );
  540. vehicle.bind( 'year' )
  541. .to( car1, 'produced', car2, 'sold', ( ...args ) => args.join( '/' ) );
  542. vehicle.bind( 'custom2', 'custom3' ).to( car1, 'produced', 'hue' );
  543. assertBinding( vehicle,
  544. {
  545. color: car1.hue + car2.lightness,
  546. year: car1.produced + '/' + car2.sold,
  547. custom1: car1.hue,
  548. custom2: car1.produced,
  549. custom3: car1.hue
  550. },
  551. [
  552. [ car1, { hue: 'greens', produced: 1930 } ],
  553. [ car2, { lightness: 'dark', sold: 2000 } ]
  554. ],
  555. {
  556. color: 'greensdark',
  557. year: '1930/2000',
  558. custom1: 'greens',
  559. custom2: 1930,
  560. custom3: 'greens'
  561. }
  562. );
  563. } );
  564. it( 'should fire a single change event per bound attribute', () => {
  565. const vehicle = new Car();
  566. const car = new Car( { color: 'red', year: 1943 } );
  567. const spy = sinon.spy();
  568. vehicle.on( 'change', spy );
  569. vehicle.bind( 'color', 'year' ).to( car );
  570. car.color = 'violet';
  571. car.custom = 'foo';
  572. car.year = 2001;
  573. expect( spy.args.map( args => args[ 1 ] ) )
  574. .to.have.members( [ 'color', 'year', 'color', 'year' ] );
  575. } );
  576. } );
  577. } );
  578. describe( 'unbind', () => {
  579. it( 'should not fail when unbinding a fresh observable', () => {
  580. const observable = new Observable();
  581. observable.unbind();
  582. } );
  583. it( 'should throw when non-string attribute is passed', () => {
  584. expect( () => {
  585. car.unbind( new Date() );
  586. } ).to.throw( CKEditorError, /observable-unbind-wrong-attrs/ );
  587. } );
  588. it( 'should remove all bindings', () => {
  589. const vehicle = new Car();
  590. vehicle.bind( 'color', 'year' ).to( car, 'color', 'year' );
  591. vehicle.unbind();
  592. assertBinding( vehicle,
  593. { color: 'red', year: 2015 },
  594. [
  595. [ car, { color: 'blue', year: 1969 } ]
  596. ],
  597. { color: 'red', year: 2015 }
  598. );
  599. } );
  600. it( 'should remove bindings of certain attributes', () => {
  601. const vehicle = new Car();
  602. const car = new Car( { color: 'red', year: 2000, torque: 160 } );
  603. vehicle.bind( 'color', 'year', 'torque' ).to( car );
  604. vehicle.unbind( 'year', 'torque' );
  605. assertBinding( vehicle,
  606. { color: 'red', year: 2000, torque: 160 },
  607. [
  608. [ car, { color: 'blue', year: 1969, torque: 220 } ]
  609. ],
  610. { color: 'blue', year: 2000, torque: 160 }
  611. );
  612. } );
  613. it( 'should remove bindings of certain attributes, callback', () => {
  614. const vehicle = new Car();
  615. const car1 = new Car( { color: 'red' } );
  616. const car2 = new Car( { color: 'blue' } );
  617. vehicle.bind( 'color' ).to( car1, car2, ( c1, c2 ) => c1 + c2 );
  618. vehicle.unbind( 'color' );
  619. assertBinding( vehicle,
  620. { color: 'redblue' },
  621. [
  622. [ car1, { color: 'green' } ],
  623. [ car2, { color: 'violet' } ]
  624. ],
  625. { color: 'redblue' }
  626. );
  627. } );
  628. it( 'should be able to unbind two attributes from a single source observable attribute', () => {
  629. const vehicle = new Car();
  630. vehicle.bind( 'color' ).to( car, 'color' );
  631. vehicle.bind( 'interiorColor' ).to( car, 'color' );
  632. vehicle.unbind( 'color' );
  633. vehicle.unbind( 'interiorColor' );
  634. assertBinding( vehicle,
  635. { color: 'red', interiorColor: 'red' },
  636. [
  637. [ car, { color: 'blue' } ]
  638. ],
  639. { color: 'red', interiorColor: 'red' }
  640. );
  641. } );
  642. } );
  643. } );