8
0

observablemixin.js 29 KB

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