model.js 25 KB

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