controllercollection.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629
  1. /**
  2. * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* globals document */
  6. /* bender-tags: ui */
  7. import testUtils from 'tests/core/_utils/utils.js';
  8. import ControllerCollection from 'ckeditor5/ui/controllercollection.js';
  9. import Controller from 'ckeditor5/ui/controller.js';
  10. import Collection from 'ckeditor5/utils/collection.js';
  11. import Model from 'ckeditor5/ui/model.js';
  12. import View from 'ckeditor5/ui/view.js';
  13. import Template from 'ckeditor5/ui/template.js';
  14. import CKEditorError from 'ckeditor5/utils/ckeditorerror.js';
  15. testUtils.createSinonSandbox();
  16. let ParentView, ItemController, ItemView;
  17. let models;
  18. describe( 'ControllerCollection', () => {
  19. beforeEach( () => {
  20. defineParentViewClass();
  21. defineItemControllerClass();
  22. defineItemViewClass();
  23. createModelCollection();
  24. } );
  25. describe( 'constructor()', () => {
  26. it( 'should throw when no name is passed', () => {
  27. expect( () => {
  28. new ControllerCollection();
  29. } ).to.throw( /^ui-controllercollection-no-name/ );
  30. } );
  31. it( 'accepts locale', () => {
  32. const locale = {};
  33. const collection = new ControllerCollection( 'foo', locale );
  34. expect( collection.locale ).to.equal( locale );
  35. } );
  36. } );
  37. describe( 'add', () => {
  38. it( 'should add a child controller and return promise', () => {
  39. const parentController = new Controller();
  40. const childController = new Controller();
  41. const collection = parentController.addCollection( 'x' );
  42. const returned = collection.add( childController );
  43. expect( returned ).to.be.an.instanceof( Promise );
  44. expect( collection.get( 0 ) ).to.be.equal( childController );
  45. } );
  46. it( 'should add a child controller at given position', () => {
  47. const parentController = new Controller();
  48. const childController1 = new Controller();
  49. const childController2 = new Controller();
  50. const collection = parentController.addCollection( 'x' );
  51. collection.add( childController1 );
  52. collection.add( childController2, 0 );
  53. expect( collection.get( 0 ) ).to.be.equal( childController2 );
  54. expect( collection.get( 1 ) ).to.be.equal( childController1 );
  55. } );
  56. it( 'should initialize child controller if parent is ready', () => {
  57. const parentController = new Controller( null, new ParentView() );
  58. const childController = new Controller( null, new View() );
  59. const spy = testUtils.sinon.spy( childController, 'init' );
  60. const collection = parentController.addCollection( 'x' );
  61. collection.add( childController );
  62. collection.remove( childController );
  63. sinon.assert.notCalled( spy );
  64. return parentController.init()
  65. .then( () => {
  66. return collection.add( childController );
  67. } )
  68. .then( () => {
  69. sinon.assert.calledOnce( spy );
  70. } );
  71. } );
  72. it( 'should not initialize child controller twice', () => {
  73. const parentController = new Controller( null, new ParentView() );
  74. const childController = new Controller( null, new View() );
  75. const spy = testUtils.sinon.spy( childController, 'init' );
  76. const collection = parentController.addCollection( 'x' );
  77. return parentController.init()
  78. .then( () => {
  79. return childController.init();
  80. } )
  81. .then( () => {
  82. return collection.add( childController );
  83. } )
  84. .then( () => {
  85. sinon.assert.calledOnce( spy );
  86. } );
  87. } );
  88. } );
  89. describe( 'bind', () => {
  90. it( 'returns object', () => {
  91. expect( new ControllerCollection( 'foo' ).bind( {} ) ).to.be.an( 'object' );
  92. } );
  93. it( 'provides "as" interface', () => {
  94. const bind = new ControllerCollection( 'foo' ).bind( {} );
  95. expect( bind ).to.have.keys( 'as' );
  96. expect( bind.as ).to.be.a( 'function' );
  97. } );
  98. describe( 'as', () => {
  99. it( 'does not chain', () => {
  100. const controllers = new ControllerCollection( 'synced' );
  101. const returned = controllers.bind( models ).as( ItemController, ItemView );
  102. expect( returned ).to.be.undefined;
  103. } );
  104. describe( 'standard handler', () => {
  105. it( 'expands the initial collection of the models', () => {
  106. const controllers = new ControllerCollection( 'synced' );
  107. controllers.bind( models ).as( ItemController, ItemView );
  108. expect( controllers ).to.have.length( 5 );
  109. expect( controllers.get( 0 ).model.uid ).to.equal( '0' );
  110. expect( controllers.get( 4 ).model.uid ).to.equal( '4' );
  111. } );
  112. it( 'uses the controller and view classes to expand the collection', () => {
  113. const controllers = new ControllerCollection( 'synced' );
  114. controllers.bind( models ).as( ItemController, ItemView );
  115. expect( controllers.get( 0 ) ).to.be.instanceOf( ItemController );
  116. expect( controllers.get( 0 ).view ).to.be.instanceOf( ItemView );
  117. } );
  118. it( 'supports adding new models to the collection', () => {
  119. const controllers = new ControllerCollection( 'synced' );
  120. controllers.bind( models ).as( ItemController, ItemView );
  121. models.add( new Model( { uid: '6' } ) );
  122. models.add( new Model( { uid: '5' } ), 5 );
  123. expect( controllers.get( 5 ).model.uid ).to.equal( '5' );
  124. expect( controllers.get( 6 ).model.uid ).to.equal( '6' );
  125. expect( controllers ).to.have.length( 7 );
  126. } );
  127. it( 'supports adding to the beginning of the collection', () => {
  128. const controllers = new ControllerCollection( 'synced' );
  129. controllers.bind( models ).as( ItemController, ItemView );
  130. models.add( new Model( { uid: 'x' } ), 0 );
  131. expect( controllers.map( c => c.model.uid ) ).to.deep.equal( [ 'x', '0', '1', '2', '3', '4' ] );
  132. } );
  133. it( 'supports removing models from the collection', () => {
  134. const controllers = new ControllerCollection( 'synced' );
  135. controllers.bind( models ).as( ItemController, ItemView );
  136. models.remove( 2 );
  137. models.remove( 3 );
  138. expect( controllers.map( c => c.model.uid ) ).to.have.members( [ '0', '1', '3' ] );
  139. } );
  140. it( 'passes controller collection\'s locale to the views', () => {
  141. const locale = {};
  142. const controllers = new ControllerCollection( 'synced', locale );
  143. controllers.bind( models ).as( ItemController, ItemView );
  144. expect( controllers.get( 0 ).view.locale ).to.equal( locale );
  145. } );
  146. } );
  147. describe( 'custom handler', () => {
  148. it( 'expands the initial collection of the models', () => {
  149. const controllers = new ControllerCollection( 'synced' );
  150. controllers.bind( models ).as( ( model, locale ) => {
  151. return new ItemController( model, new ItemView( locale ) );
  152. } );
  153. expect( controllers ).to.have.length( 5 );
  154. expect( controllers.get( 0 ).model.uid ).to.equal( '0' );
  155. expect( controllers.get( 4 ).model.uid ).to.equal( '4' );
  156. } );
  157. it( 'uses the controller and view classes to expand the collection', () => {
  158. const controllers = new ControllerCollection( 'synced' );
  159. controllers.bind( models ).as( ( model, locale ) => {
  160. return new ItemController( model, new ItemView( locale ) );
  161. } );
  162. expect( controllers.get( 0 ) ).to.be.instanceOf( ItemController );
  163. expect( controllers.get( 0 ).view ).to.be.instanceOf( ItemView );
  164. } );
  165. it( 'supports adding new models to the collection', () => {
  166. const controllers = new ControllerCollection( 'synced' );
  167. controllers.bind( models ).as( ( model, locale ) => {
  168. return new ItemController( model, new ItemView( locale ) );
  169. } );
  170. models.add( new Model( { uid: '6' } ) );
  171. models.add( new Model( { uid: '5' } ), 5 );
  172. expect( controllers.get( 5 ).model.uid ).to.equal( '5' );
  173. expect( controllers.get( 6 ).model.uid ).to.equal( '6' );
  174. expect( controllers ).to.have.length( 7 );
  175. } );
  176. it( 'supports removing models from the collection', () => {
  177. const controllers = new ControllerCollection( 'synced' );
  178. controllers.bind( models ).as( ( model, locale ) => {
  179. return new ItemController( model, new ItemView( locale ) );
  180. } );
  181. models.remove( 2 );
  182. models.remove( 3 );
  183. expect( controllers.map( c => c.model.uid ) ).to.have.members( [ '0', '1', '3' ] );
  184. } );
  185. it( 'supports returning null', () => {
  186. const controllers = new ControllerCollection( 'synced' );
  187. controllers.bind( models ).as( ( model, locale ) => {
  188. if ( model.uid == 2 ) {
  189. return null;
  190. } else {
  191. return new ItemController( model, new ItemView( locale ) );
  192. }
  193. } );
  194. expect( controllers.map( c => c.model.uid ) ).to.have.members( [ '0', '1', '3', '4' ] );
  195. } );
  196. it( 'supports adding to structure with missing controller', () => {
  197. const controllers = new ControllerCollection( 'synced' );
  198. controllers.bind( models ).as( ( model, locale ) => {
  199. if ( model.uid == 2 ) {
  200. return null;
  201. } else {
  202. return new ItemController( model, new ItemView( locale ) );
  203. }
  204. } );
  205. models.add( new Model( { uid: '0.5' } ), 1 );
  206. models.add( new Model( { uid: '3.5' } ), 5 );
  207. expect( models.map( c => c.uid ) ).to.have.members( [ '0', '0.5', '1', '2', '3', '3.5', '4' ] );
  208. expect( controllers.map( c => c.model.uid ) ).to.have.members( [ '0', '0.5', '1', '3', '3.5', '4' ] );
  209. } );
  210. it( 'supports removing to structure with missing controller', () => {
  211. const controllers = new ControllerCollection( 'synced' );
  212. controllers.bind( models ).as( ( model, locale ) => {
  213. if ( model.uid == 2 ) {
  214. return null;
  215. } else {
  216. return new ItemController( model, new ItemView( locale ) );
  217. }
  218. } );
  219. models.remove( 3 );
  220. expect( controllers.map( c => c.model.uid ) ).to.have.members( [ '0', '1', '4' ] );
  221. } );
  222. it( 'supports removing model with missing controller', () => {
  223. const controllers = new ControllerCollection( 'synced' );
  224. controllers.bind( models ).as( ( model, locale ) => {
  225. if ( model.uid == 2 ) {
  226. return null;
  227. } else {
  228. return new ItemController( model, new ItemView( locale ) );
  229. }
  230. } );
  231. models.remove( 2 );
  232. expect( controllers.map( c => c.model.uid ) ).to.have.members( [ '0', '1', '3', '4' ] );
  233. } );
  234. it( 'passes controller collection\'s locale to the views', () => {
  235. const locale = {};
  236. const controllers = new ControllerCollection( 'synced', locale );
  237. controllers.bind( models ).as( ( model, locale ) => {
  238. return new ItemController( model, new ItemView( locale ) );
  239. } );
  240. expect( controllers.get( 0 ).view.locale ).to.equal( locale );
  241. } );
  242. } );
  243. describe( 'custom data format with custom handler', () => {
  244. it( 'expands the initial collection of the models', () => {
  245. const controllers = new ControllerCollection( 'synced' );
  246. const data = new Collection();
  247. data.add( { foo: 'a' } );
  248. data.add( { foo: 'b' } );
  249. controllers.bind( data ).as( ( item, locale ) => {
  250. const model = new Model( {
  251. custom: item.foo
  252. } );
  253. return new ItemController( model, new ItemView( locale ) );
  254. } );
  255. expect( controllers ).to.have.length( 2 );
  256. expect( controllers.get( 0 ).model.custom ).to.equal( 'a' );
  257. expect( controllers.get( 1 ).model.custom ).to.equal( 'b' );
  258. expect( controllers.get( 0 ) ).to.be.instanceOf( ItemController );
  259. expect( controllers.get( 0 ).view ).to.be.instanceOf( ItemView );
  260. } );
  261. } );
  262. } );
  263. } );
  264. describe( 'delegate', () => {
  265. it( 'should throw when event names are not strings', () => {
  266. const collection = new ControllerCollection( 'foo' );
  267. expect( () => {
  268. collection.delegate();
  269. } ).to.throw( CKEditorError, /ui-controllercollection-delegate-wrong-events/ );
  270. expect( () => {
  271. collection.delegate( new Date() );
  272. } ).to.throw( CKEditorError, /ui-controllercollection-delegate-wrong-events/ );
  273. expect( () => {
  274. collection.delegate( 'color', new Date() );
  275. } ).to.throw( CKEditorError, /ui-controllercollection-delegate-wrong-events/ );
  276. } );
  277. it( 'returns object', () => {
  278. expect( new ControllerCollection( 'foo' ).delegate( 'foo' ) ).to.be.an( 'object' );
  279. } );
  280. it( 'provides "to" interface', () => {
  281. const delegate = new ControllerCollection( 'foo' ).delegate( 'foo' );
  282. expect( delegate ).to.have.keys( 'to' );
  283. expect( delegate.to ).to.be.a( 'function' );
  284. } );
  285. describe( 'to', () => {
  286. it( 'does not chain', () => {
  287. const collection = new ControllerCollection( 'foo' );
  288. const returned = collection.delegate( 'foo' ).to( {} );
  289. expect( returned ).to.be.undefined;
  290. } );
  291. it( 'forwards an event to another observable – existing controller', ( done ) => {
  292. const target = new Model();
  293. const collection = new ControllerCollection( 'foo' );
  294. const model = new Model();
  295. collection.add( new Controller( model ) );
  296. collection.delegate( 'foo' ).to( target );
  297. target.on( 'foo', ( ...args ) => {
  298. assertDelegated( args, {
  299. expectedName: 'foo',
  300. expectedSource: model,
  301. expectedPath: [ model, target ],
  302. expectedData: []
  303. } );
  304. done();
  305. } );
  306. model.fire( 'foo' );
  307. } );
  308. it( 'forwards an event to another observable – new controller', ( done ) => {
  309. const target = new Model();
  310. const collection = new ControllerCollection( 'foo' );
  311. const model = new Model();
  312. collection.delegate( 'foo' ).to( target );
  313. collection.add( new Controller( model ) );
  314. target.on( 'foo', ( ...args ) => {
  315. assertDelegated( args, {
  316. expectedName: 'foo',
  317. expectedSource: model,
  318. expectedPath: [ model, target ],
  319. expectedData: []
  320. } );
  321. done();
  322. } );
  323. model.fire( 'foo' );
  324. } );
  325. it( 'forwards multiple events to another observable', () => {
  326. const target = new Model();
  327. const collection = new ControllerCollection( 'foo' );
  328. const modelA = new Model();
  329. const modelB = new Model();
  330. const modelC = new Model();
  331. const spyFoo = sinon.spy();
  332. const spyBar = sinon.spy();
  333. const spyBaz = sinon.spy();
  334. collection.delegate( 'foo', 'bar', 'baz' ).to( target );
  335. collection.add( new Controller( modelA ) );
  336. collection.add( new Controller( modelB ) );
  337. collection.add( new Controller( modelC ) );
  338. target.on( 'foo', spyFoo );
  339. target.on( 'bar', spyBar );
  340. target.on( 'baz', spyBaz );
  341. modelA.fire( 'foo' );
  342. sinon.assert.calledOnce( spyFoo );
  343. sinon.assert.notCalled( spyBar );
  344. sinon.assert.notCalled( spyBaz );
  345. assertDelegated( spyFoo.args[ 0 ], {
  346. expectedName: 'foo',
  347. expectedSource: modelA,
  348. expectedPath: [ modelA, target ],
  349. expectedData: []
  350. } );
  351. modelB.fire( 'bar' );
  352. sinon.assert.calledOnce( spyFoo );
  353. sinon.assert.calledOnce( spyBar );
  354. sinon.assert.notCalled( spyBaz );
  355. assertDelegated( spyBar.args[ 0 ], {
  356. expectedName: 'bar',
  357. expectedSource: modelB,
  358. expectedPath: [ modelB, target ],
  359. expectedData: []
  360. } );
  361. modelC.fire( 'baz' );
  362. sinon.assert.calledOnce( spyFoo );
  363. sinon.assert.calledOnce( spyBar );
  364. sinon.assert.calledOnce( spyBaz );
  365. assertDelegated( spyBaz.args[ 0 ], {
  366. expectedName: 'baz',
  367. expectedSource: modelC,
  368. expectedPath: [ modelC, target ],
  369. expectedData: []
  370. } );
  371. modelC.fire( 'not-delegated' );
  372. sinon.assert.calledOnce( spyFoo );
  373. sinon.assert.calledOnce( spyBar );
  374. sinon.assert.calledOnce( spyBaz );
  375. } );
  376. it( 'does not forward events which are not supposed to be delegated', () => {
  377. const target = new Model();
  378. const collection = new ControllerCollection( 'foo' );
  379. const model = new Model();
  380. const spyFoo = sinon.spy();
  381. const spyBar = sinon.spy();
  382. const spyBaz = sinon.spy();
  383. collection.delegate( 'foo', 'bar', 'baz' ).to( target );
  384. collection.add( new Controller( model ) );
  385. target.on( 'foo', spyFoo );
  386. target.on( 'bar', spyBar );
  387. target.on( 'baz', spyBaz );
  388. model.fire( 'foo' );
  389. model.fire( 'bar' );
  390. model.fire( 'baz' );
  391. model.fire( 'not-delegated' );
  392. sinon.assert.callOrder( spyFoo, spyBar, spyBaz );
  393. sinon.assert.callCount( spyFoo, 1 );
  394. sinon.assert.callCount( spyBar, 1 );
  395. sinon.assert.callCount( spyBaz, 1 );
  396. } );
  397. it( 'stops forwarding when controller removed from the collection', () => {
  398. const target = new Model();
  399. const collection = new ControllerCollection( 'foo' );
  400. const model = new Model();
  401. const spy = sinon.spy();
  402. collection.delegate( 'foo' ).to( target );
  403. target.on( 'foo', spy );
  404. collection.add( new Controller( model ) );
  405. model.fire( 'foo' );
  406. sinon.assert.callCount( spy, 1 );
  407. collection.remove( 0 );
  408. model.fire( 'foo' );
  409. sinon.assert.callCount( spy, 1 );
  410. } );
  411. it( 'supports deep event delegation', ( done ) => {
  412. const collection = new ControllerCollection( 'foo' );
  413. const target = new Model();
  414. const modelA = new Model();
  415. const modelAA = new Model();
  416. const data = {};
  417. const controllerA = new Controller( modelA );
  418. const controllerAA = new Controller( modelAA );
  419. const barCollection = controllerA.addCollection( 'bar' );
  420. collection.add( controllerA );
  421. collection.delegate( 'foo' ).to( target );
  422. barCollection.add( controllerAA );
  423. barCollection.delegate( 'foo' ).to( modelA );
  424. target.on( 'foo', ( ...args ) => {
  425. assertDelegated( args, {
  426. expectedName: 'foo',
  427. expectedSource: modelAA,
  428. expectedPath: [ modelAA, modelA, target ],
  429. expectedData: [ data ]
  430. } );
  431. done();
  432. } );
  433. modelAA.fire( 'foo', data );
  434. } );
  435. } );
  436. } );
  437. } );
  438. function defineParentViewClass() {
  439. ParentView = class extends View {
  440. constructor() {
  441. super();
  442. this.element = document.createElement( 'span' );
  443. this.register( 'x', true );
  444. }
  445. };
  446. }
  447. function defineItemControllerClass() {
  448. ItemController = class extends Controller {
  449. constructor( model, view ) {
  450. super( model, view );
  451. view.bind( 'uid' ).to( model );
  452. }
  453. };
  454. }
  455. function defineItemViewClass() {
  456. ItemView = class extends View {
  457. constructor( locale ) {
  458. super( locale );
  459. const bind = this.bindTemplate;
  460. this.template = new Template( {
  461. tag: 'li',
  462. attributes: {
  463. id: bind.to( 'uid' )
  464. }
  465. } );
  466. }
  467. };
  468. }
  469. function createModelCollection() {
  470. models = new Collection( { idProperty: 'uid' } );
  471. for ( let i = 0; i < 5; i++ ) {
  472. models.add( new Model( {
  473. uid: Number( i ).toString()
  474. } ) );
  475. }
  476. }
  477. function assertDelegated( evtArgs, { expectedName, expectedSource, expectedPath, expectedData } ) {
  478. const evtInfo = evtArgs[ 0 ];
  479. expect( evtInfo.name ).to.equal( expectedName );
  480. expect( evtInfo.source ).to.equal( expectedSource );
  481. expect( evtInfo.path ).to.deep.equal( expectedPath );
  482. expect( evtArgs.slice( 1 ) ).to.deep.equal( expectedData );
  483. }