controllercollection.js 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296
  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/ckeditor5/_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. testUtils.createSinonSandbox();
  14. let ParentView, ItemController, ItemView;
  15. let models;
  16. describe( 'ControllerCollection', () => {
  17. beforeEach( () => {
  18. defineParentViewClass();
  19. defineItemControllerClass();
  20. defineItemViewClass();
  21. createModelCollection();
  22. } );
  23. describe( 'constructor', () => {
  24. it( 'should throw when no name is passed', () => {
  25. expect( () => {
  26. new ControllerCollection();
  27. } ).to.throw( /^ui-controllercollection-no-name/ );
  28. } );
  29. it( 'accepts locale', () => {
  30. const locale = {};
  31. const collection = new ControllerCollection( 'foo', locale );
  32. expect( collection.locale ).to.equal( locale );
  33. } );
  34. } );
  35. describe( 'add', () => {
  36. it( 'should add a child controller and return promise', () => {
  37. const parentController = new Controller();
  38. const childController = new Controller();
  39. const collection = parentController.addCollection( 'x' );
  40. const returned = collection.add( childController );
  41. expect( returned ).to.be.an.instanceof( Promise );
  42. expect( collection.get( 0 ) ).to.be.equal( childController );
  43. } );
  44. it( 'should add a child controller at given position', () => {
  45. const parentController = new Controller();
  46. const childController1 = new Controller();
  47. const childController2 = new Controller();
  48. const collection = parentController.addCollection( 'x' );
  49. collection.add( childController1 );
  50. collection.add( childController2, 0 );
  51. expect( collection.get( 0 ) ).to.be.equal( childController2 );
  52. expect( collection.get( 1 ) ).to.be.equal( childController1 );
  53. } );
  54. it( 'should initialize child controller if parent is ready', () => {
  55. const parentController = new Controller( null, new ParentView() );
  56. const childController = new Controller( null, new View() );
  57. const spy = testUtils.sinon.spy( childController, 'init' );
  58. const collection = parentController.addCollection( 'x' );
  59. collection.add( childController );
  60. collection.remove( childController );
  61. sinon.assert.notCalled( spy );
  62. return parentController.init()
  63. .then( () => {
  64. return collection.add( childController );
  65. } )
  66. .then( () => {
  67. sinon.assert.calledOnce( spy );
  68. } );
  69. } );
  70. it( 'should not initialize child controller twice', () => {
  71. const parentController = new Controller( null, new ParentView() );
  72. const childController = new Controller( null, new View() );
  73. const spy = testUtils.sinon.spy( childController, 'init' );
  74. const collection = parentController.addCollection( 'x' );
  75. return parentController.init()
  76. .then( () => {
  77. return childController.init();
  78. } )
  79. .then( () => {
  80. return collection.add( childController );
  81. } )
  82. .then( () => {
  83. sinon.assert.calledOnce( spy );
  84. } );
  85. } );
  86. } );
  87. describe( 'bind', () => {
  88. it( 'returns object', () => {
  89. expect( new ControllerCollection( 'foo' ).bind( {} ) ).to.be.an( 'object' );
  90. } );
  91. it( 'provides "as" interface', () => {
  92. const bind = new ControllerCollection( 'foo' ).bind( {} );
  93. expect( bind ).to.have.keys( 'as' );
  94. expect( bind.as ).to.be.a( 'function' );
  95. } );
  96. describe( 'as', () => {
  97. it( 'does not chain', () => {
  98. const controllers = new ControllerCollection( 'synced' );
  99. const returned = controllers.bind( models ).as( ItemController, ItemView );
  100. expect( returned ).to.be.undefined;
  101. } );
  102. describe( 'standard factory', () => {
  103. it( 'expands the initial collection of the models', () => {
  104. const controllers = new ControllerCollection( 'synced' );
  105. controllers.bind( models ).as( ItemController, ItemView );
  106. expect( controllers ).to.have.length( 5 );
  107. expect( controllers.get( 0 ).model.uid ).to.equal( '0' );
  108. expect( controllers.get( 4 ).model.uid ).to.equal( '4' );
  109. } );
  110. it( 'uses the controller and view classes to expand the collection', () => {
  111. const controllers = new ControllerCollection( 'synced' );
  112. controllers.bind( models ).as( ItemController, ItemView );
  113. expect( controllers.get( 0 ) ).to.be.instanceOf( ItemController );
  114. expect( controllers.get( 0 ).view ).to.be.instanceOf( ItemView );
  115. } );
  116. it( 'supports adding new models to the collection', () => {
  117. const controllers = new ControllerCollection( 'synced' );
  118. controllers.bind( models ).as( ItemController, ItemView );
  119. models.add( new Model( { uid: '6' } ) );
  120. models.add( new Model( { uid: '5' } ), 5 );
  121. expect( controllers.get( 5 ).model.uid ).to.equal( '5' );
  122. expect( controllers.get( 6 ).model.uid ).to.equal( '6' );
  123. expect( controllers ).to.have.length( 7 );
  124. } );
  125. it( 'supports removing models from the collection', () => {
  126. const controllers = new ControllerCollection( 'synced' );
  127. controllers.bind( models ).as( ItemController, ItemView );
  128. models.remove( 2 );
  129. models.remove( 3 );
  130. expect( controllers.map( c => c.id ) ).to.have.members( [ '0', '1', '3' ] );
  131. } );
  132. it( 'passes controller collection\'s locale to the views', () => {
  133. const locale = {};
  134. const controllers = new ControllerCollection( 'synced', locale );
  135. controllers.bind( models ).as( ItemController, ItemView );
  136. expect( controllers.get( 0 ).view.locale ).to.equal( locale );
  137. } );
  138. } );
  139. describe( 'custom factory', () => {
  140. it( 'expands the initial collection of the models', () => {
  141. const controllers = new ControllerCollection( 'synced' );
  142. controllers.bind( models ).as( ( model, locale ) => {
  143. return new ItemController( model, new ItemView( locale ) );
  144. } );
  145. expect( controllers ).to.have.length( 5 );
  146. expect( controllers.get( 0 ).model.uid ).to.equal( '0' );
  147. expect( controllers.get( 4 ).model.uid ).to.equal( '4' );
  148. } );
  149. it( 'uses the controller and view classes to expand the collection', () => {
  150. const controllers = new ControllerCollection( 'synced' );
  151. controllers.bind( models ).as( ( model, locale ) => {
  152. return new ItemController( model, new ItemView( locale ) );
  153. } );
  154. expect( controllers.get( 0 ) ).to.be.instanceOf( ItemController );
  155. expect( controllers.get( 0 ).view ).to.be.instanceOf( ItemView );
  156. } );
  157. it( 'supports adding new models to 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. models.add( new Model( { uid: '6' } ) );
  163. models.add( new Model( { uid: '5' } ), 5 );
  164. expect( controllers.get( 5 ).model.uid ).to.equal( '5' );
  165. expect( controllers.get( 6 ).model.uid ).to.equal( '6' );
  166. expect( controllers ).to.have.length( 7 );
  167. } );
  168. it( 'supports removing models from the collection', () => {
  169. const controllers = new ControllerCollection( 'synced' );
  170. controllers.bind( models ).as( ( model, locale ) => {
  171. return new ItemController( model, new ItemView( locale ) );
  172. } );
  173. models.remove( 2 );
  174. models.remove( 3 );
  175. expect( controllers.map( c => c.id ) ).to.have.members( [ '0', '1', '3' ] );
  176. } );
  177. it( 'passes controller collection\'s locale to the views', () => {
  178. const locale = {};
  179. const controllers = new ControllerCollection( 'synced', locale );
  180. controllers.bind( models ).as( ( model, locale ) => {
  181. return new ItemController( model, new ItemView( locale ) );
  182. } );
  183. expect( controllers.get( 0 ).view.locale ).to.equal( locale );
  184. } );
  185. } );
  186. } );
  187. } );
  188. } );
  189. function defineParentViewClass() {
  190. ParentView = class extends View {
  191. constructor() {
  192. super();
  193. this.element = document.createElement( 'span' );
  194. this.register( 'x', true );
  195. }
  196. };
  197. }
  198. function defineItemControllerClass() {
  199. ItemController = class extends Controller {
  200. constructor( model, view ) {
  201. super( model, view );
  202. view.model.bind( 'uid' ).to( model );
  203. }
  204. };
  205. }
  206. function defineItemViewClass() {
  207. ItemView = class extends View {
  208. constructor( locale ) {
  209. super( locale );
  210. const bind = this.bind;
  211. this.template = new Template( {
  212. tag: 'li',
  213. attributes: {
  214. id: bind.to( 'uid' )
  215. }
  216. } );
  217. }
  218. };
  219. }
  220. function createModelCollection() {
  221. models = new Collection( { idProperty: 'uid' } );
  222. for ( let i = 0; i < 5; i++ ) {
  223. models.add( new Model( {
  224. uid: Number( i ).toString()
  225. } ) );
  226. }
  227. }