model.js 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873
  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. } );
  127. describe( 'extend', () => {
  128. it( 'should create new Model based classes', () => {
  129. class Truck extends Car {}
  130. let truck = new Truck();
  131. expect( truck ).to.be.an.instanceof( Car );
  132. expect( truck ).to.be.an.instanceof( Model );
  133. } );
  134. } );
  135. describe( 'bind', () => {
  136. it( 'should chain for a single attribute', () => {
  137. expect( car.bind( 'color' ) ).to.contain.keys( 'to' );
  138. } );
  139. it( 'should chain for multiple attributes', () => {
  140. expect( car.bind( 'color', 'year' ) ).to.contain.keys( 'to' );
  141. } );
  142. it( 'should chain for nonexistent attributes', () => {
  143. expect( car.bind( 'nonexistent' ) ).to.contain.keys( 'to' );
  144. } );
  145. it( 'should throw when attributes are not strings', () => {
  146. expect( () => {
  147. car.bind();
  148. } ).to.throw( CKEditorError, /model-bind-wrong-attrs/ );
  149. expect( () => {
  150. car.bind( new Date() );
  151. } ).to.throw( CKEditorError, /model-bind-wrong-attrs/ );
  152. expect( () => {
  153. car.bind( 'color', new Date() );
  154. } ).to.throw( CKEditorError, /model-bind-wrong-attrs/ );
  155. } );
  156. it( 'should throw when the same attribute is used than once', () => {
  157. expect( () => {
  158. car.bind( 'color', 'color' );
  159. } ).to.throw( CKEditorError, /model-bind-duplicate-attrs/ );
  160. } );
  161. it( 'should throw when binding the same attribute more than once', () => {
  162. expect( () => {
  163. car.bind( 'color' );
  164. car.bind( 'color' );
  165. } ).to.throw( CKEditorError, /model-bind-rebind/ );
  166. } );
  167. describe( 'to', () => {
  168. it( 'should not chain', () => {
  169. expect(
  170. car.bind( 'color' ).to( new Model( { color: 'red' } ) )
  171. ).to.be.undefined;
  172. } );
  173. it( 'should throw when arguments are of invalid type', () => {
  174. expect( () => {
  175. car = new Car();
  176. car.bind( 'color' ).to();
  177. } ).to.throw( CKEditorError, /model-bind-to-parse-error/ );
  178. expect( () => {
  179. car = new Car();
  180. car.bind( 'color' ).to( new Model(), new Date() );
  181. } ).to.throw( CKEditorError, /model-bind-to-parse-error/ );
  182. expect( () => {
  183. car = new Car( { color: 'red' } );
  184. car.bind( 'color' ).to( new Model(), 'color', new Date() );
  185. } ).to.throw( CKEditorError, /model-bind-to-parse-error/ );
  186. } );
  187. it( 'should throw when binding multiple attributes to multiple models', () => {
  188. let vehicle = new Car();
  189. const car1 = new Car( { color: 'red', year: 1943 } );
  190. const car2 = new Car( { color: 'yellow', year: 1932 } );
  191. expect( () => {
  192. vehicle.bind( 'color', 'year' ).to( car1, 'color', car2, 'year' );
  193. } ).to.throw( CKEditorError, /model-bind-to-no-callback/ );
  194. expect( () => {
  195. vehicle = new Car();
  196. vehicle.bind( 'color', 'year' ).to( car1, car2 );
  197. } ).to.throw( CKEditorError, /model-bind-to-no-callback/ );
  198. expect( () => {
  199. vehicle = new Car();
  200. vehicle.bind( 'color', 'year' ).to( car1, car2, 'year' );
  201. } ).to.throw( CKEditorError, /model-bind-to-no-callback/ );
  202. expect( () => {
  203. vehicle = new Car();
  204. vehicle.bind( 'color', 'year' ).to( car1, 'color', car2 );
  205. } ).to.throw( CKEditorError, /model-bind-to-no-callback/ );
  206. expect( () => {
  207. vehicle = new Car();
  208. vehicle.bind( 'color', 'year', 'custom' ).to( car, car );
  209. } ).to.throw( CKEditorError, /model-bind-to-no-callback/ );
  210. } );
  211. it( 'should throw when binding multiple attributes but passed a callback', () => {
  212. let vehicle = new Car();
  213. expect( () => {
  214. vehicle.bind( 'color', 'year' ).to( car, () => {} );
  215. } ).to.throw( CKEditorError, /model-bind-to-extra-callback/ );
  216. expect( () => {
  217. vehicle = new Car();
  218. vehicle.bind( 'color', 'year' ).to( car, car, () => {} );
  219. } ).to.throw( CKEditorError, /model-bind-to-extra-callback/ );
  220. } );
  221. it( 'should throw when binding a single attribute but multiple callbacks', () => {
  222. let vehicle = new Car();
  223. expect( () => {
  224. vehicle.bind( 'color' ).to( car, () => {}, () => {} );
  225. } ).to.throw( CKEditorError, /model-bind-to-parse-error/ );
  226. expect( () => {
  227. vehicle = new Car();
  228. vehicle.bind( 'color' ).to( car, car, () => {}, () => {} );
  229. } ).to.throw( CKEditorError, /model-bind-to-parse-error/ );
  230. } );
  231. it( 'should throw when a number of attributes does not match', () => {
  232. let vehicle = new Car();
  233. expect( () => {
  234. vehicle.bind( 'color' ).to( car, 'color', 'year' );
  235. } ).to.throw( CKEditorError, /model-bind-to-attrs-length/ );
  236. expect( () => {
  237. vehicle = new Car();
  238. vehicle.bind( 'color', 'year' ).to( car, 'color' );
  239. } ).to.throw( CKEditorError, /model-bind-to-attrs-length/ );
  240. expect( () => {
  241. vehicle = new Car();
  242. vehicle.bind( 'color' ).to( car, 'color', 'year', () => {} );
  243. } ).to.throw( CKEditorError, /model-bind-to-attrs-length/ );
  244. expect( () => {
  245. vehicle = new Car();
  246. vehicle.bind( 'color' ).to( car, 'color', car, 'color', 'year', () => {} );
  247. } ).to.throw( CKEditorError, /model-bind-to-attrs-length/ );
  248. } );
  249. it( 'should throw when attributes don\'t exist in to() model', () => {
  250. const vehicle = new Car();
  251. expect( () => {
  252. vehicle.bind( 'color' ).to( car, 'nonexistent in car' );
  253. } ).to.throw( CKEditorError, /model-bind-to-missing-attr/ );
  254. expect( () => {
  255. vehicle.bind( 'nonexistent in car' ).to( car );
  256. } ).to.throw( CKEditorError, /model-bind-to-missing-attr/ );
  257. expect( () => {
  258. vehicle.bind( 'year' ).to( car, 'color', car, 'nonexistent in car', () => {} );
  259. } ).to.throw( CKEditorError, /model-bind-to-missing-attr/ );
  260. } );
  261. it( 'should set new model attributes', () => {
  262. const car = new Car( { color: 'green', year: 2001, type: 'pickup' } );
  263. const vehicle = new Car( { 'not involved': true } );
  264. vehicle.bind( 'color', 'year', 'type' ).to( car );
  265. expect( vehicle._attributes ).to.have.keys( 'color', 'year', 'type', 'not involved' );
  266. } );
  267. it( 'should work when no attribute specified #1', () => {
  268. const vehicle = new Car();
  269. vehicle.bind( 'color' ).to( car );
  270. assertBinding( vehicle,
  271. { color: car.color, year: undefined },
  272. [
  273. [ car, { color: 'blue', year: 1969 } ]
  274. ],
  275. { color: 'blue', year: undefined }
  276. );
  277. } );
  278. it( 'should work for a single attribute', () => {
  279. const vehicle = new Car();
  280. vehicle.bind( 'color' ).to( car, 'color' );
  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 multiple attributes', () => {
  290. const vehicle = new Car();
  291. vehicle.bind( 'color', 'year' ).to( car, 'color', 'year' );
  292. assertBinding( vehicle,
  293. { color: car.color, year: car.year },
  294. [
  295. [ car, { color: 'blue', year: 1969 } ]
  296. ],
  297. { color: 'blue', year: 1969 }
  298. );
  299. } );
  300. it( 'should work for attributes that don\'t exist in the model', () => {
  301. const vehicle = new Car();
  302. vehicle.bind( 'nonexistent in vehicle' ).to( car, 'color' );
  303. assertBinding( vehicle,
  304. { 'nonexistent in vehicle': car.color, color: undefined },
  305. [
  306. [ car, { color: 'blue', year: 1969 } ]
  307. ],
  308. { 'nonexistent in vehicle': 'blue', color: undefined }
  309. );
  310. } );
  311. it( 'should work when using the same attribute name more than once', () => {
  312. const vehicle = new Car();
  313. vehicle.bind( 'color', 'year' ).to( car, 'year', 'year' );
  314. assertBinding( vehicle,
  315. { color: car.year, year: car.year },
  316. [
  317. [ car, { color: 'blue', year: 1969 } ]
  318. ],
  319. { color: 1969, year: 1969 }
  320. );
  321. } );
  322. it( 'should work when binding more that once', () => {
  323. const vehicle = new Car();
  324. vehicle.bind( 'color' ).to( car, 'color' );
  325. vehicle.bind( 'year' ).to( car, 'year' );
  326. assertBinding( vehicle,
  327. { color: car.color, year: car.year },
  328. [
  329. [ car, { color: 'blue', year: 1969 } ]
  330. ],
  331. { color: 'blue', year: 1969 }
  332. );
  333. } );
  334. it( 'should work with callback – set a new model attribute', () => {
  335. const vehicle = new Car();
  336. const car1 = new Car( { type: 'pickup' } );
  337. const car2 = new Car( { type: 'truck' } );
  338. vehicle.bind( 'type' )
  339. .to( car1, car2, ( ...args ) => args.join( '' ) );
  340. expect( vehicle._attributes ).to.have.keys( [ 'type' ] );
  341. } );
  342. it( 'should work with callback #1', () => {
  343. const vehicle = new Car();
  344. const car1 = new Car( { color: 'black' } );
  345. const car2 = new Car( { color: 'brown' } );
  346. vehicle.bind( 'color' )
  347. .to( car1, car2, ( ...args ) => args.join( '' ) );
  348. assertBinding( vehicle,
  349. { color: car1.color + car2.color, year: undefined },
  350. [
  351. [ car1, { color: 'black', year: 1930 } ],
  352. [ car2, { color: 'green', year: 1950 } ]
  353. ],
  354. { color: 'blackgreen', year: undefined }
  355. );
  356. } );
  357. it( 'should work with callback #2', () => {
  358. const vehicle = new Car();
  359. const car1 = new Car( { color: 'black' } );
  360. const car2 = new Car( { color: 'brown' } );
  361. vehicle.bind( 'color' )
  362. .to( car1, 'color', car2, 'color', ( ...args ) => args.join( '' ) );
  363. assertBinding( vehicle,
  364. { color: car1.color + car2.color, year: undefined },
  365. [
  366. [ car1, { color: 'black', year: 1930 } ],
  367. [ car2, { color: 'green', year: 1950 } ]
  368. ],
  369. { color: 'blackgreen', year: undefined }
  370. );
  371. } );
  372. it( 'should work with callback #3', () => {
  373. const vehicle = new Car();
  374. const car1 = new Car( { color: 'black' } );
  375. const car2 = new Car( { color: 'brown' } );
  376. const car3 = new Car( { color: 'yellow' } );
  377. vehicle.bind( 'color' )
  378. .to( car1, car2, car3, ( ...args ) => args.join( '' ) );
  379. assertBinding( vehicle,
  380. { color: car1.color + car2.color + car3.color, year: undefined },
  381. [
  382. [ car1, { color: 'black', year: 1930 } ],
  383. [ car2, { color: 'green', year: 1950 } ]
  384. ],
  385. { color: 'blackgreenyellow', year: undefined }
  386. );
  387. } );
  388. it( 'should work with callback #4', () => {
  389. const vehicle = new Car();
  390. const car1 = new Car( { color: 'black' } );
  391. const car2 = new Car( { lightness: 'bright' } );
  392. const car3 = new Car( { color: 'yellow' } );
  393. vehicle.bind( 'color' )
  394. .to( car1, car2, 'lightness', car3, ( ...args ) => args.join( '' ) );
  395. assertBinding( vehicle,
  396. { color: car1.color + car2.lightness + car3.color, year: undefined },
  397. [
  398. [ car1, { color: 'black', year: 1930 } ],
  399. [ car2, { color: 'green', year: 1950 } ]
  400. ],
  401. { color: 'blackbrightyellow', year: undefined }
  402. );
  403. } );
  404. it( 'should work with callback #5', () => {
  405. const vehicle = new Car();
  406. const car1 = new Car( { hue: 'reds' } );
  407. const car2 = new Car( { lightness: 'bright' } );
  408. vehicle.bind( 'color' )
  409. .to( car1, 'hue', car2, 'lightness', ( ...args ) => args.join( '' ) );
  410. assertBinding( vehicle,
  411. { color: car1.hue + car2.lightness, year: undefined },
  412. [
  413. [ car1, { hue: 'greens', year: 1930 } ],
  414. [ car2, { lightness: 'dark', year: 1950 } ]
  415. ],
  416. { color: 'greensdark', year: undefined }
  417. );
  418. } );
  419. it( 'should work with callback #6', () => {
  420. const vehicle = new Car();
  421. const car1 = new Car( { hue: 'reds' } );
  422. vehicle.bind( 'color' )
  423. .to( car1, 'hue', ( h ) => h.toUpperCase() );
  424. assertBinding( vehicle,
  425. { color: car1.hue.toUpperCase(), year: undefined },
  426. [
  427. [ car1, { hue: 'greens', year: 1930 } ]
  428. ],
  429. { color: 'GREENS', year: undefined }
  430. );
  431. } );
  432. it( 'should work with callback #7', () => {
  433. const vehicle = new Car();
  434. const car1 = new Car( { color: 'red', year: 1943 } );
  435. const car2 = new Car( { color: 'yellow', year: 1932 } );
  436. vehicle.bind( 'custom' )
  437. .to( car1, 'color', car2, 'year', ( ...args ) => args.join( '/' ) );
  438. assertBinding( vehicle,
  439. { color: undefined, year: undefined, 'custom': car1.color + '/' + car2.year },
  440. [
  441. [ car1, { color: 'blue', year: 2100 } ],
  442. [ car2, { color: 'violet', year: 1969 } ]
  443. ],
  444. { color: undefined, year: undefined, 'custom': 'blue/1969' }
  445. );
  446. } );
  447. it( 'should work with callback #8', () => {
  448. const vehicle = new Car();
  449. const car1 = new Car( { color: 'red', year: 1943 } );
  450. const car2 = new Car( { color: 'yellow', year: 1932 } );
  451. const car3 = new Car( { hue: 'reds' } );
  452. vehicle.bind( 'custom' )
  453. .to( car1, 'color', car2, 'year', car3, 'hue', ( ...args ) => args.join( '/' ) );
  454. assertBinding( vehicle,
  455. { color: undefined, year: undefined, hue: undefined, 'custom': car1.color + '/' + car2.year + '/' + car3.hue },
  456. [
  457. [ car1, { color: 'blue', year: 2100 } ],
  458. [ car2, { color: 'violet', year: 1969 } ]
  459. ],
  460. { color: undefined, year: undefined, hue: undefined, 'custom': 'blue/1969/reds' }
  461. );
  462. } );
  463. it( 'should work with callback – binding more that once #1', () => {
  464. const vehicle = new Car();
  465. const car1 = new Car( { hue: 'reds', produced: 1920 } );
  466. const car2 = new Car( { lightness: 'bright', sold: 1921 } );
  467. vehicle.bind( 'color' )
  468. .to( car1, 'hue', car2, 'lightness', ( ...args ) => args.join( '' ) );
  469. vehicle.bind( 'year' )
  470. .to( car1, 'produced', car2, 'sold', ( ...args ) => args.join( '/' ) );
  471. assertBinding( vehicle,
  472. { color: car1.hue + car2.lightness, year: car1.produced + '/' + car2.sold },
  473. [
  474. [ car1, { hue: 'greens', produced: 1930 } ],
  475. [ car2, { lightness: 'dark', sold: 2000 } ]
  476. ],
  477. { color: 'greensdark', year: '1930/2000' }
  478. );
  479. } );
  480. it( 'should work with callback – binding more that once #2', () => {
  481. const vehicle = new Car();
  482. const car1 = new Car( { hue: 'reds', produced: 1920 } );
  483. const car2 = new Car( { lightness: 'bright', sold: 1921 } );
  484. vehicle.bind( 'color' )
  485. .to( car1, 'hue', car2, 'lightness', ( ...args ) => args.join( '' ) );
  486. vehicle.bind( 'year' )
  487. .to( car1, 'produced', car2, 'sold', ( ...args ) => args.join( '/' ) );
  488. vehicle.bind( 'mix' )
  489. .to( car1, 'hue', car2, 'sold', ( ...args ) => args.join( '+' ) );
  490. assertBinding( vehicle,
  491. {
  492. color: car1.hue + car2.lightness,
  493. year: car1.produced + '/' + car2.sold,
  494. mix: car1.hue + '+' + car2.sold
  495. },
  496. [
  497. [ car1, { hue: 'greens', produced: 1930 } ],
  498. [ car2, { lightness: 'dark', sold: 2000 } ]
  499. ],
  500. {
  501. color: 'greensdark',
  502. year: '1930/2000',
  503. mix: 'greens+2000'
  504. }
  505. );
  506. } );
  507. it( 'should work with callback – binding more that once #3', () => {
  508. const vehicle = new Car();
  509. const car1 = new Car( { hue: 'reds', produced: 1920 } );
  510. const car2 = new Car( { lightness: 'bright', sold: 1921 } );
  511. vehicle.bind( 'color' )
  512. .to( car1, 'hue', car2, 'lightness', ( ...args ) => args.join( '' ) );
  513. vehicle.bind( 'custom1' ).to( car1, 'hue' );
  514. vehicle.bind( 'year' )
  515. .to( car1, 'produced', car2, 'sold', ( ...args ) => args.join( '/' ) );
  516. vehicle.bind( 'custom2', 'custom3' ).to( car1, 'produced', 'hue' );
  517. assertBinding( vehicle,
  518. {
  519. color: car1.hue + car2.lightness,
  520. year: car1.produced + '/' + car2.sold,
  521. custom1: car1.hue,
  522. custom2: car1.produced,
  523. custom3: car1.hue
  524. },
  525. [
  526. [ car1, { hue: 'greens', produced: 1930 } ],
  527. [ car2, { lightness: 'dark', sold: 2000 } ]
  528. ],
  529. {
  530. color: 'greensdark',
  531. year: '1930/2000',
  532. custom1: 'greens',
  533. custom2: 1930,
  534. custom3: 'greens'
  535. }
  536. );
  537. } );
  538. it( 'should fire a single change event per bound attribute', () => {
  539. const vehicle = new Car();
  540. const car = new Car( { color: 'red', year: 1943 } );
  541. const spy = sinon.spy();
  542. vehicle.on( 'change', spy );
  543. vehicle.bind( 'color', 'year' ).to( car );
  544. car.color = 'violet';
  545. car.custom = 'foo';
  546. car.year = 2001;
  547. expect( spy.args.map( args => args[ 1 ] ) )
  548. .to.have.members( [ 'color', 'year', 'color', 'year' ] );
  549. } );
  550. } );
  551. } );
  552. describe( 'unbind', () => {
  553. it( 'should throw when non-string attribute is passed', () => {
  554. expect( () => {
  555. car.unbind( new Date() );
  556. } ).to.throw( CKEditorError, /model-unbind-wrong-attrs/ );
  557. } );
  558. it( 'should remove all bindings', () => {
  559. const vehicle = new Car();
  560. vehicle.bind( 'color', 'year' ).to( car, 'color', 'year' );
  561. vehicle.unbind();
  562. assertBinding( vehicle,
  563. { color: 'red', year: 2015 },
  564. [
  565. [ car, { color: 'blue', year: 1969 } ]
  566. ],
  567. { color: 'red', year: 2015 }
  568. );
  569. } );
  570. it( 'should remove bindings of certain attributes', () => {
  571. const vehicle = new Car();
  572. const car = new Car( { color: 'red', year: 2000, torque: 160 } );
  573. vehicle.bind( 'color', 'year', 'torque' ).to( car );
  574. vehicle.unbind( 'year', 'torque' );
  575. assertBinding( vehicle,
  576. { color: 'red', year: 2000, torque: 160 },
  577. [
  578. [ car, { color: 'blue', year: 1969, torque: 220 } ]
  579. ],
  580. { color: 'blue', year: 2000, torque: 160 }
  581. );
  582. } );
  583. it( 'should remove bindings of certain attributes, callback', () => {
  584. const vehicle = new Car();
  585. const car1 = new Car( { color: 'red' } );
  586. const car2 = new Car( { color: 'blue' } );
  587. vehicle.bind( 'color' ).to( car1, car2, ( c1, c2 ) => c1 + c2 );
  588. vehicle.unbind( 'color' );
  589. assertBinding( vehicle,
  590. { color: 'redblue' },
  591. [
  592. [ car1, { color: 'green' } ],
  593. [ car2, { color: 'violet' } ]
  594. ],
  595. { color: 'redblue' }
  596. );
  597. } );
  598. it( 'should process the internal structure and listeners correctly', () => {
  599. const model = new Model();
  600. const bound1 = new Model( { b1a: 'foo' } );
  601. const bound2 = new Model( { b2b: 42, 'b2c': 'bar' } );
  602. const bound3 = new Model( { b3d: 'baz' } );
  603. model.bind( 'a' ).to( bound1, 'b1a' );
  604. model.bind( 'b', 'c' ).to( bound2, 'b2b', 'b2c' );
  605. model.bind( 'd', 'e' ).to( bound3, 'b3d', 'b3d' );
  606. assertStructure( model,
  607. [ 'a', 'b', 'c', 'd', 'e' ],
  608. [ bound1, bound2, bound3 ],
  609. [
  610. { b1a: [ 'a' ] },
  611. { b2b: [ 'b' ], b2c: [ 'c' ] },
  612. { b3d: [ 'd', 'e' ] }
  613. ]
  614. );
  615. model.unbind( 'c', 'd' );
  616. assertStructure( model,
  617. [ 'a', 'b', 'e' ],
  618. [ bound1, bound2, bound3 ],
  619. [
  620. { b1a: [ 'a' ] },
  621. { b2b: [ 'b' ] },
  622. { b3d: [ 'e' ] }
  623. ]
  624. );
  625. model.unbind( 'b' );
  626. assertStructure( model,
  627. [ 'a', 'e' ],
  628. [ bound1, bound3 ],
  629. [
  630. { b1a: [ 'a' ] },
  631. { b3d: [ 'e' ] }
  632. ]
  633. );
  634. model.unbind();
  635. assertStructure( model, [], [], [] );
  636. } );
  637. } );
  638. // Syntax given that model `A` is bound to models [`B`, `C`, ...]:
  639. //
  640. // assertBinding( A,
  641. // { initial `A` attributes },
  642. // [
  643. // [ B, { new `B` attributes } ],
  644. // [ C, { new `C` attributes } ],
  645. // ...
  646. // ],
  647. // { `A` attributes after [`B`, 'C', ...] changed }
  648. // );
  649. //
  650. function assertBinding( model, stateBefore, data, stateAfter ) {
  651. let key, pair;
  652. for ( key in stateBefore ) {
  653. expect( model[ key ] ).to.be.equal( stateBefore[ key ] );
  654. }
  655. // Change attributes of bound models.
  656. for ( pair of data ) {
  657. for ( key in pair[ 1 ] ) {
  658. pair[ 0 ][ key ] = pair[ 1 ][ key ];
  659. }
  660. }
  661. for ( key in stateAfter ) {
  662. expect( model[ key ] ).to.be.equal( stateAfter[ key ] );
  663. }
  664. }
  665. function assertStructure( model, expectedBoundAttributes, expectedBoundModels, expectedBindings ) {
  666. const boundModels = [ ...model._boundModels.keys() ];
  667. // Check model._boundAttributes object.
  668. if ( expectedBoundAttributes.length ) {
  669. expect( model._boundAttributes ).to.have.keys( expectedBoundAttributes );
  670. } else {
  671. expect( model._boundAttributes ).to.be.empty;
  672. }
  673. // Check model._boundModels models.
  674. expect( boundModels ).to.have.members( expectedBoundModels );
  675. // Check model._listeningTo models.
  676. boundModels.map( boundModel => {
  677. expect( model._listeningTo ).to.have.ownProperty( boundModel._emitterId );
  678. } );
  679. // Check model._boundModels bindings.
  680. expectedBindings.forEach( ( binding, index ) => {
  681. const bindingKeys = Object.keys( binding );
  682. expect( model._boundModels.get( expectedBoundModels[ index ] ) ).to.have.keys( bindingKeys );
  683. bindingKeys.forEach( key => {
  684. const entries = [ ...model._boundModels.get( expectedBoundModels[ index ] )[ key ] ];
  685. expect( entries.map( e => e.attr ) ).to.have.members( binding[ key ] );
  686. } );
  687. } );
  688. }
  689. } );