observablemixin.js 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922
  1. /**
  2. * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
  6. import utilsTestUtils from '../tests/_utils/utils';
  7. import ObservableMixin from '../src/observablemixin';
  8. import EmitterMixin from '../src/emittermixin';
  9. import EventInfo from '../src/eventinfo';
  10. import CKEditorError from '../src/ckeditorerror';
  11. import mix from '../src/mix';
  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. const spy = sinon.spy();
  75. const spyColor = sinon.spy();
  76. const spyYear = sinon.spy();
  77. const 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(
  103. spyWheels, sinon.match.instanceOf( EventInfo ),
  104. 'wheels', 4, sinon.match.typeOf( 'undefined' )
  105. );
  106. } );
  107. it( 'should not fire the "change" event for the same attribute value', () => {
  108. const spy = sinon.spy();
  109. const spyColor = sinon.spy();
  110. car.on( 'change', spy );
  111. car.on( 'change:color', spyColor );
  112. // Set the "color" property in all possible ways.
  113. car.color = 'red';
  114. car.set( 'color', 'red' );
  115. car.set( { color: 'red' } );
  116. sinon.assert.notCalled( spy );
  117. sinon.assert.notCalled( spyColor );
  118. } );
  119. it( 'should throw when overriding already existing property', () => {
  120. car.normalProperty = 1;
  121. expect( () => {
  122. car.set( 'normalProperty', 2 );
  123. } ).to.throw( CKEditorError, /^observable-set-cannot-override/ );
  124. expect( car ).to.have.property( 'normalProperty', 1 );
  125. } );
  126. it( 'should throw when overriding already existing property (in the prototype)', () => {
  127. class Car extends Observable {
  128. method() {}
  129. }
  130. car = new Car();
  131. expect( () => {
  132. car.set( 'method', 2 );
  133. } ).to.throw( CKEditorError, /^observable-set-cannot-override/ );
  134. expect( car.method ).to.be.a( 'function' );
  135. } );
  136. it( 'should allow setting attributes with undefined value', () => {
  137. const spy = sinon.spy();
  138. car.on( 'change', spy );
  139. car.set( 'seats', undefined );
  140. sinon.assert.calledOnce( spy );
  141. expect( car ).to.contain.keys( 'seats' );
  142. expect( car.seats ).to.be.undefined;
  143. car.set( 'seats', 5 );
  144. sinon.assert.calledTwice( spy );
  145. expect( car ).to.have.property( 'seats', 5 );
  146. } );
  147. } );
  148. describe( 'bind()', () => {
  149. it( 'should chain for a single attribute', () => {
  150. expect( car.bind( 'color' ) ).to.contain.keys( 'to' );
  151. } );
  152. it( 'should chain for multiple attributes', () => {
  153. expect( car.bind( 'color', 'year' ) ).to.contain.keys( 'to' );
  154. } );
  155. it( 'should chain for nonexistent attributes', () => {
  156. expect( car.bind( 'nonexistent' ) ).to.contain.keys( 'to' );
  157. } );
  158. it( 'should throw when attributes are not strings', () => {
  159. expect( () => {
  160. car.bind();
  161. } ).to.throw( CKEditorError, /observable-bind-wrong-attrs/ );
  162. expect( () => {
  163. car.bind( new Date() );
  164. } ).to.throw( CKEditorError, /observable-bind-wrong-attrs/ );
  165. expect( () => {
  166. car.bind( 'color', new Date() );
  167. } ).to.throw( CKEditorError, /observable-bind-wrong-attrs/ );
  168. } );
  169. it( 'should throw when the same attribute is used than once', () => {
  170. expect( () => {
  171. car.bind( 'color', 'color' );
  172. } ).to.throw( CKEditorError, /observable-bind-duplicate-attrs/ );
  173. } );
  174. it( 'should throw when binding the same attribute more than once', () => {
  175. expect( () => {
  176. car.bind( 'color' );
  177. car.bind( 'color' );
  178. } ).to.throw( CKEditorError, /observable-bind-rebind/ );
  179. } );
  180. describe( 'to()', () => {
  181. it( 'should not chain', () => {
  182. expect(
  183. car.bind( 'color' ).to( new Observable( { color: 'red' } ) )
  184. ).to.be.undefined;
  185. } );
  186. it( 'should throw when arguments are of invalid type - empty', () => {
  187. expect( () => {
  188. car = new Car();
  189. car.bind( 'color' ).to();
  190. } ).to.throw( CKEditorError, /observable-bind-to-parse-error/ );
  191. } );
  192. it( 'should throw when binding multiple attributes to multiple observables', () => {
  193. let vehicle = new Car();
  194. const car1 = new Car( { color: 'red', year: 1943 } );
  195. const car2 = new Car( { color: 'yellow', year: 1932 } );
  196. expect( () => {
  197. vehicle.bind( 'color', 'year' ).to( car1, 'color', car2, 'year' );
  198. } ).to.throw( CKEditorError, /observable-bind-to-no-callback/ );
  199. expect( () => {
  200. vehicle = new Car();
  201. vehicle.bind( 'color', 'year' ).to( car1, car2 );
  202. } ).to.throw( CKEditorError, /observable-bind-to-no-callback/ );
  203. expect( () => {
  204. vehicle = new Car();
  205. vehicle.bind( 'color', 'year' ).to( car1, car2, 'year' );
  206. } ).to.throw( CKEditorError, /observable-bind-to-no-callback/ );
  207. expect( () => {
  208. vehicle = new Car();
  209. vehicle.bind( 'color', 'year' ).to( car1, 'color', car2 );
  210. } ).to.throw( CKEditorError, /observable-bind-to-no-callback/ );
  211. expect( () => {
  212. vehicle = new Car();
  213. vehicle.bind( 'color', 'year', 'custom' ).to( car, car );
  214. } ).to.throw( CKEditorError, /observable-bind-to-no-callback/ );
  215. } );
  216. it( 'should throw when binding multiple attributes but passed a callback', () => {
  217. let vehicle = new Car();
  218. expect( () => {
  219. vehicle.bind( 'color', 'year' ).to( car, () => {} );
  220. } ).to.throw( CKEditorError, /observable-bind-to-extra-callback/ );
  221. expect( () => {
  222. vehicle = new Car();
  223. vehicle.bind( 'color', 'year' ).to( car, car, () => {} );
  224. } ).to.throw( CKEditorError, /observable-bind-to-extra-callback/ );
  225. } );
  226. it( 'should throw when binding a single attribute but multiple callbacks', () => {
  227. let vehicle = new Car();
  228. expect( () => {
  229. vehicle.bind( 'color' ).to( car, () => {}, () => {} );
  230. } ).to.throw( CKEditorError, /observable-bind-to-parse-error/ );
  231. expect( () => {
  232. vehicle = new Car();
  233. vehicle.bind( 'color' ).to( car, car, () => {}, () => {} );
  234. } ).to.throw( CKEditorError, /observable-bind-to-parse-error/ );
  235. } );
  236. it( 'should throw when a number of attributes does not match', () => {
  237. let vehicle = new Car();
  238. expect( () => {
  239. vehicle.bind( 'color' ).to( car, 'color', 'year' );
  240. } ).to.throw( CKEditorError, /observable-bind-to-attrs-length/ );
  241. expect( () => {
  242. vehicle = new Car();
  243. vehicle.bind( 'color', 'year' ).to( car, 'color' );
  244. } ).to.throw( CKEditorError, /observable-bind-to-attrs-length/ );
  245. expect( () => {
  246. vehicle = new Car();
  247. vehicle.bind( 'color' ).to( car, 'color', 'year', () => {} );
  248. } ).to.throw( CKEditorError, /observable-bind-to-attrs-length/ );
  249. expect( () => {
  250. vehicle = new Car();
  251. vehicle.bind( 'color' ).to( car, 'color', car, 'color', 'year', () => {} );
  252. } ).to.throw( CKEditorError, /observable-bind-to-attrs-length/ );
  253. } );
  254. it( 'should work when attributes don\'t exist in to() observable #1', () => {
  255. const vehicle = new Car();
  256. vehicle.bind( 'color' ).to( car, 'nonexistent in car' );
  257. assertBinding( vehicle,
  258. { color: undefined, year: undefined },
  259. [
  260. [ car, { 'nonexistent in car': 'foo', year: 1969 } ]
  261. ],
  262. { color: 'foo', year: undefined }
  263. );
  264. } );
  265. it( 'should work when attributes don\'t exist in to() observable #2', () => {
  266. const vehicle = new Car();
  267. vehicle.bind( 'nonexistent in car' ).to( car );
  268. assertBinding( vehicle,
  269. { 'nonexistent in car': undefined, year: undefined },
  270. [
  271. [ car, { 'nonexistent in car': 'foo', year: 1969 } ]
  272. ],
  273. { 'nonexistent in car': 'foo', year: undefined }
  274. );
  275. } );
  276. it( 'should work when attributes don\'t exist in to() observable #3', () => {
  277. const vehicle = new Car();
  278. vehicle.bind( 'year' ).to( car, 'color', car, 'nonexistent in car', ( a, b ) => a + b );
  279. assertBinding( vehicle,
  280. { color: undefined, year: car.color + undefined },
  281. [
  282. [ car, { color: 'blue', year: 1969 } ]
  283. ],
  284. { color: undefined, year: 'blueundefined' }
  285. );
  286. } );
  287. it( 'should set new observable attributes', () => {
  288. const car = new Car( { color: 'green', year: 2001, type: 'pickup' } );
  289. const vehicle = new Car( { 'not involved': true } );
  290. vehicle.bind( 'color', 'year', 'type' ).to( car );
  291. expect( vehicle ).to.have.property( 'color' );
  292. expect( vehicle ).to.have.property( 'year' );
  293. expect( vehicle ).to.have.property( 'type' );
  294. expect( vehicle ).to.have.property( 'not involved' );
  295. } );
  296. it( 'should work when no attribute specified #1', () => {
  297. const vehicle = new Car();
  298. vehicle.bind( 'color' ).to( car );
  299. assertBinding( vehicle,
  300. { color: car.color, year: undefined },
  301. [
  302. [ car, { color: 'blue', year: 1969 } ]
  303. ],
  304. { color: 'blue', year: undefined }
  305. );
  306. } );
  307. it( 'should work for a single attribute', () => {
  308. const vehicle = new Car();
  309. vehicle.bind( 'color' ).to( car, 'color' );
  310. assertBinding( vehicle,
  311. { color: car.color, year: undefined },
  312. [
  313. [ car, { color: 'blue', year: 1969 } ]
  314. ],
  315. { color: 'blue', year: undefined }
  316. );
  317. } );
  318. it( 'should work for multiple attributes', () => {
  319. const vehicle = new Car();
  320. vehicle.bind( 'color', 'year' ).to( car, 'color', 'year' );
  321. assertBinding( vehicle,
  322. { color: car.color, year: car.year },
  323. [
  324. [ car, { color: 'blue', year: 1969 } ]
  325. ],
  326. { color: 'blue', year: 1969 }
  327. );
  328. } );
  329. it( 'should work for attributes that don\'t exist in the observable', () => {
  330. const vehicle = new Car();
  331. vehicle.bind( 'nonexistent in vehicle' ).to( car, 'color' );
  332. assertBinding( vehicle,
  333. { 'nonexistent in vehicle': car.color, color: undefined },
  334. [
  335. [ car, { color: 'blue', year: 1969 } ]
  336. ],
  337. { 'nonexistent in vehicle': 'blue', color: undefined }
  338. );
  339. } );
  340. it( 'should work when using the same attribute name more than once', () => {
  341. const vehicle = new Car();
  342. vehicle.bind( 'color', 'year' ).to( car, 'year', 'year' );
  343. assertBinding( vehicle,
  344. { color: car.year, year: car.year },
  345. [
  346. [ car, { color: 'blue', year: 1969 } ]
  347. ],
  348. { color: 1969, year: 1969 }
  349. );
  350. } );
  351. it( 'should work when binding more that once', () => {
  352. const vehicle = new Car();
  353. vehicle.bind( 'color' ).to( car, 'color' );
  354. vehicle.bind( 'year' ).to( car, 'year' );
  355. assertBinding( vehicle,
  356. { color: car.color, year: car.year },
  357. [
  358. [ car, { color: 'blue', year: 1969 } ]
  359. ],
  360. { color: 'blue', year: 1969 }
  361. );
  362. } );
  363. it( 'should work with callback – set a new observable attribute', () => {
  364. const vehicle = new Car();
  365. const car1 = new Car( { type: 'pickup' } );
  366. const car2 = new Car( { type: 'truck' } );
  367. vehicle.bind( 'type' )
  368. .to( car1, car2, ( ...args ) => args.join( '' ) );
  369. expect( vehicle ).to.have.property( 'type' );
  370. } );
  371. it( 'should work with callback #1', () => {
  372. const vehicle = new Car();
  373. const car1 = new Car( { color: 'black' } );
  374. const car2 = new Car( { color: 'brown' } );
  375. vehicle.bind( 'color' )
  376. .to( car1, car2, ( ...args ) => args.join( '' ) );
  377. assertBinding( vehicle,
  378. { color: car1.color + car2.color, year: undefined },
  379. [
  380. [ car1, { color: 'black', year: 1930 } ],
  381. [ car2, { color: 'green', year: 1950 } ]
  382. ],
  383. { color: 'blackgreen', year: undefined }
  384. );
  385. } );
  386. it( 'should work with callback #2', () => {
  387. const vehicle = new Car();
  388. const car1 = new Car( { color: 'black' } );
  389. const car2 = new Car( { color: 'brown' } );
  390. vehicle.bind( 'color' )
  391. .to( car1, 'color', car2, 'color', ( ...args ) => args.join( '' ) );
  392. assertBinding( vehicle,
  393. { color: car1.color + car2.color, year: undefined },
  394. [
  395. [ car1, { color: 'black', year: 1930 } ],
  396. [ car2, { color: 'green', year: 1950 } ]
  397. ],
  398. { color: 'blackgreen', year: undefined }
  399. );
  400. } );
  401. it( 'should work with callback #3', () => {
  402. const vehicle = new Car();
  403. const car1 = new Car( { color: 'black' } );
  404. const car2 = new Car( { color: 'brown' } );
  405. const car3 = new Car( { color: 'yellow' } );
  406. vehicle.bind( 'color' )
  407. .to( car1, car2, car3, ( ...args ) => args.join( '' ) );
  408. assertBinding( vehicle,
  409. { color: car1.color + car2.color + car3.color, year: undefined },
  410. [
  411. [ car1, { color: 'black', year: 1930 } ],
  412. [ car2, { color: 'green', year: 1950 } ]
  413. ],
  414. { color: 'blackgreenyellow', year: undefined }
  415. );
  416. } );
  417. it( 'should work with callback #4', () => {
  418. const vehicle = new Car();
  419. const car1 = new Car( { color: 'black' } );
  420. const car2 = new Car( { lightness: 'bright' } );
  421. const car3 = new Car( { color: 'yellow' } );
  422. vehicle.bind( 'color' )
  423. .to( car1, car2, 'lightness', car3, ( ...args ) => args.join( '' ) );
  424. assertBinding( vehicle,
  425. { color: car1.color + car2.lightness + car3.color, year: undefined },
  426. [
  427. [ car1, { color: 'black', year: 1930 } ],
  428. [ car2, { color: 'green', year: 1950 } ]
  429. ],
  430. { color: 'blackbrightyellow', year: undefined }
  431. );
  432. } );
  433. it( 'should work with callback #5', () => {
  434. const vehicle = new Car();
  435. const car1 = new Car( { hue: 'reds' } );
  436. const car2 = new Car( { lightness: 'bright' } );
  437. vehicle.bind( 'color' )
  438. .to( car1, 'hue', car2, 'lightness', ( ...args ) => args.join( '' ) );
  439. assertBinding( vehicle,
  440. { color: car1.hue + car2.lightness, year: undefined },
  441. [
  442. [ car1, { hue: 'greens', year: 1930 } ],
  443. [ car2, { lightness: 'dark', year: 1950 } ]
  444. ],
  445. { color: 'greensdark', year: undefined }
  446. );
  447. } );
  448. it( 'should work with callback #6', () => {
  449. const vehicle = new Car();
  450. const car1 = new Car( { hue: 'reds' } );
  451. vehicle.bind( 'color' )
  452. .to( car1, 'hue', h => h.toUpperCase() );
  453. assertBinding( vehicle,
  454. { color: car1.hue.toUpperCase(), year: undefined },
  455. [
  456. [ car1, { hue: 'greens', year: 1930 } ]
  457. ],
  458. { color: 'GREENS', year: undefined }
  459. );
  460. } );
  461. it( 'should work with callback #7', () => {
  462. const vehicle = new Car();
  463. const car1 = new Car( { color: 'red', year: 1943 } );
  464. const car2 = new Car( { color: 'yellow', year: 1932 } );
  465. vehicle.bind( 'custom' )
  466. .to( car1, 'color', car2, 'year', ( ...args ) => args.join( '/' ) );
  467. assertBinding( vehicle,
  468. { color: undefined, year: undefined, 'custom': car1.color + '/' + car2.year },
  469. [
  470. [ car1, { color: 'blue', year: 2100 } ],
  471. [ car2, { color: 'violet', year: 1969 } ]
  472. ],
  473. { color: undefined, year: undefined, 'custom': 'blue/1969' }
  474. );
  475. } );
  476. it( 'should work with callback #8', () => {
  477. const vehicle = new Car();
  478. const car1 = new Car( { color: 'red', year: 1943 } );
  479. const car2 = new Car( { color: 'yellow', year: 1932 } );
  480. const car3 = new Car( { hue: 'reds' } );
  481. vehicle.bind( 'custom' )
  482. .to( car1, 'color', car2, 'year', car3, 'hue', ( ...args ) => args.join( '/' ) );
  483. assertBinding( vehicle,
  484. { color: undefined, year: undefined, hue: undefined, 'custom': car1.color + '/' + car2.year + '/' + car3.hue },
  485. [
  486. [ car1, { color: 'blue', year: 2100 } ],
  487. [ car2, { color: 'violet', year: 1969 } ]
  488. ],
  489. { color: undefined, year: undefined, hue: undefined, 'custom': 'blue/1969/reds' }
  490. );
  491. } );
  492. it( 'should work with callback – binding more that once #1', () => {
  493. const vehicle = new Car();
  494. const car1 = new Car( { hue: 'reds', produced: 1920 } );
  495. const car2 = new Car( { lightness: 'bright', sold: 1921 } );
  496. vehicle.bind( 'color' )
  497. .to( car1, 'hue', car2, 'lightness', ( ...args ) => args.join( '' ) );
  498. vehicle.bind( 'year' )
  499. .to( car1, 'produced', car2, 'sold', ( ...args ) => args.join( '/' ) );
  500. assertBinding( vehicle,
  501. { color: car1.hue + car2.lightness, year: car1.produced + '/' + car2.sold },
  502. [
  503. [ car1, { hue: 'greens', produced: 1930 } ],
  504. [ car2, { lightness: 'dark', sold: 2000 } ]
  505. ],
  506. { color: 'greensdark', year: '1930/2000' }
  507. );
  508. } );
  509. it( 'should work with callback – binding more that once #2', () => {
  510. const vehicle = new Car();
  511. const car1 = new Car( { hue: 'reds', produced: 1920 } );
  512. const car2 = new Car( { lightness: 'bright', sold: 1921 } );
  513. vehicle.bind( 'color' )
  514. .to( car1, 'hue', car2, 'lightness', ( ...args ) => args.join( '' ) );
  515. vehicle.bind( 'year' )
  516. .to( car1, 'produced', car2, 'sold', ( ...args ) => args.join( '/' ) );
  517. vehicle.bind( 'mix' )
  518. .to( car1, 'hue', car2, 'sold', ( ...args ) => args.join( '+' ) );
  519. assertBinding( vehicle,
  520. {
  521. color: car1.hue + car2.lightness,
  522. year: car1.produced + '/' + car2.sold,
  523. mix: car1.hue + '+' + car2.sold
  524. },
  525. [
  526. [ car1, { hue: 'greens', produced: 1930 } ],
  527. [ car2, { lightness: 'dark', sold: 2000 } ]
  528. ],
  529. {
  530. color: 'greensdark',
  531. year: '1930/2000',
  532. mix: 'greens+2000'
  533. }
  534. );
  535. } );
  536. it( 'should work with callback – binding more that once #3', () => {
  537. const vehicle = new Car();
  538. const car1 = new Car( { hue: 'reds', produced: 1920 } );
  539. const car2 = new Car( { lightness: 'bright', sold: 1921 } );
  540. vehicle.bind( 'color' )
  541. .to( car1, 'hue', car2, 'lightness', ( ...args ) => args.join( '' ) );
  542. vehicle.bind( 'custom1' ).to( car1, 'hue' );
  543. vehicle.bind( 'year' )
  544. .to( car1, 'produced', car2, 'sold', ( ...args ) => args.join( '/' ) );
  545. vehicle.bind( 'custom2', 'custom3' ).to( car1, 'produced', 'hue' );
  546. assertBinding( vehicle,
  547. {
  548. color: car1.hue + car2.lightness,
  549. year: car1.produced + '/' + car2.sold,
  550. custom1: car1.hue,
  551. custom2: car1.produced,
  552. custom3: car1.hue
  553. },
  554. [
  555. [ car1, { hue: 'greens', produced: 1930 } ],
  556. [ car2, { lightness: 'dark', sold: 2000 } ]
  557. ],
  558. {
  559. color: 'greensdark',
  560. year: '1930/2000',
  561. custom1: 'greens',
  562. custom2: 1930,
  563. custom3: 'greens'
  564. }
  565. );
  566. } );
  567. it( 'should fire a single change event per bound attribute', () => {
  568. const vehicle = new Car();
  569. const car = new Car( { color: 'red', year: 1943 } );
  570. const spy = sinon.spy();
  571. vehicle.on( 'change', spy );
  572. vehicle.bind( 'color', 'year' ).to( car );
  573. car.color = 'violet';
  574. car.custom = 'foo';
  575. car.year = 2001;
  576. expect( spy.args.map( args => args[ 1 ] ) )
  577. .to.have.members( [ 'color', 'year', 'color', 'year' ] );
  578. } );
  579. } );
  580. } );
  581. describe( 'unbind()', () => {
  582. it( 'should not fail when unbinding a fresh observable', () => {
  583. const observable = new Observable();
  584. observable.unbind();
  585. } );
  586. it( 'should throw when non-string attribute is passed', () => {
  587. expect( () => {
  588. car.unbind( new Date() );
  589. } ).to.throw( CKEditorError, /observable-unbind-wrong-attrs/ );
  590. } );
  591. it( 'should remove all bindings', () => {
  592. const vehicle = new Car();
  593. vehicle.bind( 'color', 'year' ).to( car, 'color', 'year' );
  594. vehicle.unbind();
  595. assertBinding( vehicle,
  596. { color: 'red', year: 2015 },
  597. [
  598. [ car, { color: 'blue', year: 1969 } ]
  599. ],
  600. { color: 'red', year: 2015 }
  601. );
  602. } );
  603. it( 'should remove bindings of certain attributes', () => {
  604. const vehicle = new Car();
  605. const car = new Car( { color: 'red', year: 2000, torque: 160 } );
  606. vehicle.bind( 'color', 'year', 'torque' ).to( car );
  607. vehicle.unbind( 'year', 'torque' );
  608. assertBinding( vehicle,
  609. { color: 'red', year: 2000, torque: 160 },
  610. [
  611. [ car, { color: 'blue', year: 1969, torque: 220 } ]
  612. ],
  613. { color: 'blue', year: 2000, torque: 160 }
  614. );
  615. } );
  616. it( 'should remove bindings of certain attributes, callback', () => {
  617. const vehicle = new Car();
  618. const car1 = new Car( { color: 'red' } );
  619. const car2 = new Car( { color: 'blue' } );
  620. vehicle.bind( 'color' ).to( car1, car2, ( c1, c2 ) => c1 + c2 );
  621. vehicle.unbind( 'color' );
  622. assertBinding( vehicle,
  623. { color: 'redblue' },
  624. [
  625. [ car1, { color: 'green' } ],
  626. [ car2, { color: 'violet' } ]
  627. ],
  628. { color: 'redblue' }
  629. );
  630. } );
  631. it( 'should be able to unbind two attributes from a single source observable attribute', () => {
  632. const vehicle = new Car();
  633. vehicle.bind( 'color' ).to( car, 'color' );
  634. vehicle.bind( 'interiorColor' ).to( car, 'color' );
  635. vehicle.unbind( 'color' );
  636. vehicle.unbind( 'interiorColor' );
  637. assertBinding( vehicle,
  638. { color: 'red', interiorColor: 'red' },
  639. [
  640. [ car, { color: 'blue' } ]
  641. ],
  642. { color: 'red', interiorColor: 'red' }
  643. );
  644. } );
  645. } );
  646. describe( 'decorate()', () => {
  647. it( 'makes the method fire an event', () => {
  648. const spy = sinon.spy();
  649. class Foo extends Observable {
  650. method() {}
  651. }
  652. const foo = new Foo();
  653. foo.decorate( 'method' );
  654. foo.on( 'method', spy );
  655. foo.method( 1, 2 );
  656. expect( spy.calledOnce ).to.be.true;
  657. expect( spy.args[ 0 ][ 1 ] ).to.deep.equal( [ 1, 2 ] );
  658. } );
  659. it( 'executes the original method in a listener with the default priority', () => {
  660. const calls = [];
  661. class Foo extends Observable {
  662. method() {
  663. calls.push( 'original' );
  664. }
  665. }
  666. const foo = new Foo();
  667. foo.decorate( 'method' );
  668. foo.on( 'method', () => calls.push( 'high' ), { priority: 'high' } );
  669. foo.on( 'method', () => calls.push( 'low' ), { priority: 'low' } );
  670. foo.method();
  671. expect( calls ).to.deep.equal( [ 'high', 'original', 'low' ] );
  672. } );
  673. it( 'supports overriding return values', () => {
  674. class Foo extends Observable {
  675. method() {
  676. return 1;
  677. }
  678. }
  679. const foo = new Foo();
  680. foo.decorate( 'method' );
  681. foo.on( 'method', evt => {
  682. expect( evt.return ).to.equal( 1 );
  683. evt.return = 2;
  684. } );
  685. expect( foo.method() ).to.equal( 2 );
  686. } );
  687. it( 'supports overriding arguments', () => {
  688. class Foo extends Observable {
  689. method( a ) {
  690. expect( a ).to.equal( 2 );
  691. }
  692. }
  693. const foo = new Foo();
  694. foo.decorate( 'method' );
  695. foo.on( 'method', ( evt, args ) => {
  696. args[ 0 ] = 2;
  697. }, { priority: 'high' } );
  698. foo.method( 1 );
  699. } );
  700. it( 'supports stopping the event (which prevents execution of the orignal method', () => {
  701. class Foo extends Observable {
  702. method() {
  703. throw new Error( 'this should not be executed' );
  704. }
  705. }
  706. const foo = new Foo();
  707. foo.decorate( 'method' );
  708. foo.on( 'method', evt => {
  709. evt.stop();
  710. }, { priority: 'high' } );
  711. foo.method();
  712. } );
  713. it( 'throws when trying to decorate non existing method', () => {
  714. class Foo extends Observable {}
  715. const foo = new Foo();
  716. expect( () => {
  717. foo.decorate( 'method' );
  718. } ).to.throw( CKEditorError, /^observablemixin-cannot-decorate-undefined:/ );
  719. } );
  720. } );
  721. } );