controllercollection.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479
  1. /**
  2. * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* bender-tags: ui */
  6. import testUtils from '/tests/core/_utils/utils.js';
  7. import ControllerCollection from '/ckeditor5/ui/controllercollection.js';
  8. import Controller from '/ckeditor5/ui/controller.js';
  9. import Collection from '/ckeditor5/utils/collection.js';
  10. import Model from '/ckeditor5/ui/model.js';
  11. import View from '/ckeditor5/ui/view.js';
  12. import Template from '/ckeditor5/ui/template.js';
  13. import CKEditorError from '/ckeditor5/utils/ckeditorerror.js';
  14. testUtils.createSinonSandbox();
  15. let ParentView, ItemController, ItemView;
  16. let models;
  17. describe( 'ControllerCollection', () => {
  18. beforeEach( () => {
  19. defineParentViewClass();
  20. defineItemControllerClass();
  21. defineItemViewClass();
  22. createModelCollection();
  23. } );
  24. describe( 'constructor', () => {
  25. it( 'should throw when no name is passed', () => {
  26. expect( () => {
  27. new ControllerCollection();
  28. } ).to.throw( /^ui-controllercollection-no-name/ );
  29. } );
  30. it( 'accepts locale', () => {
  31. const locale = {};
  32. const collection = new ControllerCollection( 'foo', locale );
  33. expect( collection.locale ).to.equal( locale );
  34. } );
  35. } );
  36. describe( 'add', () => {
  37. it( 'should add a child controller and return promise', () => {
  38. const parentController = new Controller();
  39. const childController = new Controller();
  40. const collection = parentController.addCollection( 'x' );
  41. const returned = collection.add( childController );
  42. expect( returned ).to.be.an.instanceof( Promise );
  43. expect( collection.get( 0 ) ).to.be.equal( childController );
  44. } );
  45. it( 'should add a child controller at given position', () => {
  46. const parentController = new Controller();
  47. const childController1 = new Controller();
  48. const childController2 = new Controller();
  49. const collection = parentController.addCollection( 'x' );
  50. collection.add( childController1 );
  51. collection.add( childController2, 0 );
  52. expect( collection.get( 0 ) ).to.be.equal( childController2 );
  53. expect( collection.get( 1 ) ).to.be.equal( childController1 );
  54. } );
  55. it( 'should initialize child controller if parent is ready', () => {
  56. const parentController = new Controller( null, new ParentView() );
  57. const childController = new Controller( null, new View() );
  58. const spy = testUtils.sinon.spy( childController, 'init' );
  59. const collection = parentController.addCollection( 'x' );
  60. collection.add( childController );
  61. collection.remove( childController );
  62. sinon.assert.notCalled( spy );
  63. return parentController.init()
  64. .then( () => {
  65. return collection.add( childController );
  66. } )
  67. .then( () => {
  68. sinon.assert.calledOnce( spy );
  69. } );
  70. } );
  71. it( 'should not initialize child controller twice', () => {
  72. const parentController = new Controller( null, new ParentView() );
  73. const childController = new Controller( null, new View() );
  74. const spy = testUtils.sinon.spy( childController, 'init' );
  75. const collection = parentController.addCollection( 'x' );
  76. return parentController.init()
  77. .then( () => {
  78. return childController.init();
  79. } )
  80. .then( () => {
  81. return collection.add( childController );
  82. } )
  83. .then( () => {
  84. sinon.assert.calledOnce( spy );
  85. } );
  86. } );
  87. } );
  88. describe( 'bind', () => {
  89. it( 'returns object', () => {
  90. expect( new ControllerCollection( 'foo' ).bind( {} ) ).to.be.an( 'object' );
  91. } );
  92. it( 'provides "as" interface', () => {
  93. const bind = new ControllerCollection( 'foo' ).bind( {} );
  94. expect( bind ).to.have.keys( 'as' );
  95. expect( bind.as ).to.be.a( 'function' );
  96. } );
  97. describe( 'as', () => {
  98. it( 'does not chain', () => {
  99. const controllers = new ControllerCollection( 'synced' );
  100. const returned = controllers.bind( models ).as( ItemController, ItemView );
  101. expect( returned ).to.be.undefined;
  102. } );
  103. describe( 'standard factory', () => {
  104. it( 'expands the initial collection of the models', () => {
  105. const controllers = new ControllerCollection( 'synced' );
  106. controllers.bind( models ).as( ItemController, ItemView );
  107. expect( controllers ).to.have.length( 5 );
  108. expect( controllers.get( 0 ).model.uid ).to.equal( '0' );
  109. expect( controllers.get( 4 ).model.uid ).to.equal( '4' );
  110. } );
  111. it( 'uses the controller and view classes to expand the collection', () => {
  112. const controllers = new ControllerCollection( 'synced' );
  113. controllers.bind( models ).as( ItemController, ItemView );
  114. expect( controllers.get( 0 ) ).to.be.instanceOf( ItemController );
  115. expect( controllers.get( 0 ).view ).to.be.instanceOf( ItemView );
  116. } );
  117. it( 'supports adding new models to the collection', () => {
  118. const controllers = new ControllerCollection( 'synced' );
  119. controllers.bind( models ).as( ItemController, ItemView );
  120. models.add( new Model( { uid: '6' } ) );
  121. models.add( new Model( { uid: '5' } ), 5 );
  122. expect( controllers.get( 5 ).model.uid ).to.equal( '5' );
  123. expect( controllers.get( 6 ).model.uid ).to.equal( '6' );
  124. expect( controllers ).to.have.length( 7 );
  125. } );
  126. it( 'supports removing models from the collection', () => {
  127. const controllers = new ControllerCollection( 'synced' );
  128. controllers.bind( models ).as( ItemController, ItemView );
  129. models.remove( 2 );
  130. models.remove( 3 );
  131. expect( controllers.map( c => c.id ) ).to.have.members( [ '0', '1', '3' ] );
  132. } );
  133. it( 'passes controller collection\'s locale to the views', () => {
  134. const locale = {};
  135. const controllers = new ControllerCollection( 'synced', locale );
  136. controllers.bind( models ).as( ItemController, ItemView );
  137. expect( controllers.get( 0 ).view.locale ).to.equal( locale );
  138. } );
  139. } );
  140. describe( 'custom factory', () => {
  141. it( 'expands the initial collection of the models', () => {
  142. const controllers = new ControllerCollection( 'synced' );
  143. controllers.bind( models ).as( ( model, locale ) => {
  144. return new ItemController( model, new ItemView( locale ) );
  145. } );
  146. expect( controllers ).to.have.length( 5 );
  147. expect( controllers.get( 0 ).model.uid ).to.equal( '0' );
  148. expect( controllers.get( 4 ).model.uid ).to.equal( '4' );
  149. } );
  150. it( 'uses the controller and view classes to expand the collection', () => {
  151. const controllers = new ControllerCollection( 'synced' );
  152. controllers.bind( models ).as( ( model, locale ) => {
  153. return new ItemController( model, new ItemView( locale ) );
  154. } );
  155. expect( controllers.get( 0 ) ).to.be.instanceOf( ItemController );
  156. expect( controllers.get( 0 ).view ).to.be.instanceOf( ItemView );
  157. } );
  158. it( 'supports adding new models to the collection', () => {
  159. const controllers = new ControllerCollection( 'synced' );
  160. controllers.bind( models ).as( ( model, locale ) => {
  161. return new ItemController( model, new ItemView( locale ) );
  162. } );
  163. models.add( new Model( { uid: '6' } ) );
  164. models.add( new Model( { uid: '5' } ), 5 );
  165. expect( controllers.get( 5 ).model.uid ).to.equal( '5' );
  166. expect( controllers.get( 6 ).model.uid ).to.equal( '6' );
  167. expect( controllers ).to.have.length( 7 );
  168. } );
  169. it( 'supports removing models from the collection', () => {
  170. const controllers = new ControllerCollection( 'synced' );
  171. controllers.bind( models ).as( ( model, locale ) => {
  172. return new ItemController( model, new ItemView( locale ) );
  173. } );
  174. models.remove( 2 );
  175. models.remove( 3 );
  176. expect( controllers.map( c => c.id ) ).to.have.members( [ '0', '1', '3' ] );
  177. } );
  178. it( 'passes controller collection\'s locale to the views', () => {
  179. const locale = {};
  180. const controllers = new ControllerCollection( 'synced', locale );
  181. controllers.bind( models ).as( ( model, locale ) => {
  182. return new ItemController( model, new ItemView( locale ) );
  183. } );
  184. expect( controllers.get( 0 ).view.locale ).to.equal( locale );
  185. } );
  186. } );
  187. } );
  188. } );
  189. describe( 'pipe', () => {
  190. it( 'should throw when event names are not strings', () => {
  191. const collection = new ControllerCollection( 'foo' );
  192. expect( () => {
  193. collection.pipe();
  194. } ).to.throw( CKEditorError, /ui-controllercollection-pipe-wrong-events/ );
  195. expect( () => {
  196. collection.pipe( new Date() );
  197. } ).to.throw( CKEditorError, /ui-controllercollection-pipe-wrong-events/ );
  198. expect( () => {
  199. collection.pipe( 'color', new Date() );
  200. } ).to.throw( CKEditorError, /ui-controllercollection-pipe-wrong-events/ );
  201. } );
  202. it( 'returns object', () => {
  203. expect( new ControllerCollection( 'foo' ).pipe( 'foo' ) ).to.be.an( 'object' );
  204. } );
  205. it( 'provides "to" interface', () => {
  206. const pipe = new ControllerCollection( 'foo' ).pipe( 'foo' );
  207. expect( pipe ).to.have.keys( 'to' );
  208. expect( pipe.to ).to.be.a( 'function' );
  209. } );
  210. describe( 'to', () => {
  211. it( 'does not chain', () => {
  212. const collection = new ControllerCollection( 'foo' );
  213. const returned = collection.pipe( 'foo' ).to( {} );
  214. expect( returned ).to.be.undefined;
  215. } );
  216. it( 'forwards an event to another observable – existing controller', ( done ) => {
  217. const target = new Model();
  218. const collection = new ControllerCollection( 'foo' );
  219. const model = new Model();
  220. collection.add( new Controller( model ) );
  221. collection.pipe( 'foo' ).to( target );
  222. target.on( 'foo', ( ...args ) => {
  223. assertPipe( args, 'foo', target, model );
  224. done();
  225. } );
  226. model.fire( 'foo' );
  227. } );
  228. it( 'forwards an event to another observable – new controller', ( done ) => {
  229. const target = new Model();
  230. const collection = new ControllerCollection( 'foo' );
  231. const model = new Model();
  232. collection.pipe( 'foo' ).to( target );
  233. collection.add( new Controller( model ) );
  234. target.on( 'foo', ( ...args ) => {
  235. assertPipe( args, 'foo', target, model );
  236. done();
  237. } );
  238. model.fire( 'foo' );
  239. } );
  240. it( 'forwards multiple events to another observable', () => {
  241. const target = new Model();
  242. const collection = new ControllerCollection( 'foo' );
  243. const modelA = new Model();
  244. const modelB = new Model();
  245. const modelC = new Model();
  246. collection.pipe( 'foo', 'bar', 'baz' ).to( target );
  247. collection.add( new Controller( modelA ) );
  248. collection.add( new Controller( modelB ) );
  249. collection.add( new Controller( modelC ) );
  250. const evts = [];
  251. function recordEvent( ...args ) {
  252. evts.push( args );
  253. }
  254. target.on( 'foo', recordEvent );
  255. target.on( 'bar', recordEvent );
  256. target.on( 'baz', recordEvent );
  257. modelA.fire( 'foo' );
  258. expect( evts ).to.have.length( 1 );
  259. assertPipe( evts[ 0 ], 'foo', target, modelA );
  260. modelB.fire( 'bar' );
  261. expect( evts ).to.have.length( 2 );
  262. assertPipe( evts[ 1 ], 'bar', target, modelB );
  263. modelC.fire( 'baz' );
  264. expect( evts ).to.have.length( 3 );
  265. assertPipe( evts[ 2 ], 'baz', target, modelC );
  266. } );
  267. it( 'does not forward events which are not supposed to be piped', () => {
  268. const target = new Model();
  269. const collection = new ControllerCollection( 'foo' );
  270. const model = new Model();
  271. collection.pipe( 'foo', 'bar', 'baz' ).to( target );
  272. collection.add( new Controller( model ) );
  273. let firedCounter = 0;
  274. target.on( 'foo', () => ++firedCounter );
  275. target.on( 'bar', () => ++firedCounter );
  276. target.on( 'baz', () => ++firedCounter );
  277. model.fire( 'foo' );
  278. model.fire( 'baz' );
  279. model.fire( 'baz' );
  280. model.fire( 'not-piped' );
  281. expect( firedCounter ).to.equal( 3 );
  282. } );
  283. it( 'stops forwarding when controller removed from the collection', () => {
  284. const target = new Model();
  285. const collection = new ControllerCollection( 'foo' );
  286. const model = new Model();
  287. collection.pipe( 'foo' ).to( target );
  288. collection.add( new Controller( model ) );
  289. let firedCounter = 0;
  290. target.on( 'foo', () => ++firedCounter );
  291. model.fire( 'foo' );
  292. collection.remove( 0 );
  293. model.fire( 'foo' );
  294. expect( firedCounter ).to.equal( 1 );
  295. } );
  296. it( 'supports deep event piping', ( done ) => {
  297. const collection = new ControllerCollection( 'foo' );
  298. const target = new Model();
  299. const modelA = new Model();
  300. const modelAA = new Model();
  301. const controllerA = new Controller( modelA );
  302. const controllerAA = new Controller( modelAA );
  303. const barCollection = controllerA.addCollection( 'bar' );
  304. collection.add( controllerA );
  305. collection.pipe( 'foo' ).to( target );
  306. barCollection.add( controllerAA );
  307. barCollection.pipe( 'foo' ).to( modelA );
  308. target.on( 'foo', ( ...args ) => {
  309. assertPipe( args, 'foo', target, modelA, modelAA );
  310. done();
  311. } );
  312. modelAA.fire( 'foo' );
  313. } );
  314. } );
  315. } );
  316. } );
  317. function defineParentViewClass() {
  318. ParentView = class extends View {
  319. constructor() {
  320. super();
  321. this.element = document.createElement( 'span' );
  322. this.register( 'x', true );
  323. }
  324. };
  325. }
  326. function defineItemControllerClass() {
  327. ItemController = class extends Controller {
  328. constructor( model, view ) {
  329. super( model, view );
  330. view.model.bind( 'uid' ).to( model );
  331. }
  332. };
  333. }
  334. function defineItemViewClass() {
  335. ItemView = class extends View {
  336. constructor( locale ) {
  337. super( locale );
  338. const bind = this.bind;
  339. this.template = new Template( {
  340. tag: 'li',
  341. attributes: {
  342. id: bind.to( 'uid' )
  343. }
  344. } );
  345. }
  346. };
  347. }
  348. function createModelCollection() {
  349. models = new Collection( { idProperty: 'uid' } );
  350. for ( let i = 0; i < 5; i++ ) {
  351. models.add( new Model( {
  352. uid: Number( i ).toString()
  353. } ) );
  354. }
  355. }
  356. function assertPipe( evtArgs, expectedName, ...observables ) {
  357. let pipeNumber = 0;
  358. for ( let observable of observables ) {
  359. expect( evtArgs[ pipeNumber ].name ).to.equal( expectedName );
  360. expect( evtArgs[ pipeNumber ].source ).to.equal( observable );
  361. ++pipeNumber;
  362. }
  363. }