| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555 |
- /**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
- /* globals document */
- /* bender-tags: ui */
- import testUtils from '/tests/core/_utils/utils.js';
- import ControllerCollection from '/ckeditor5/ui/controllercollection.js';
- import Controller from '/ckeditor5/ui/controller.js';
- import Collection from '/ckeditor5/utils/collection.js';
- import Model from '/ckeditor5/ui/model.js';
- import View from '/ckeditor5/ui/view.js';
- import Template from '/ckeditor5/ui/template.js';
- import CKEditorError from '/ckeditor5/utils/ckeditorerror.js';
- testUtils.createSinonSandbox();
- let ParentView, ItemController, ItemView;
- let models;
- describe( 'ControllerCollection', () => {
- beforeEach( () => {
- defineParentViewClass();
- defineItemControllerClass();
- defineItemViewClass();
- createModelCollection();
- } );
- describe( 'constructor', () => {
- it( 'should throw when no name is passed', () => {
- expect( () => {
- new ControllerCollection();
- } ).to.throw( /^ui-controllercollection-no-name/ );
- } );
- it( 'accepts locale', () => {
- const locale = {};
- const collection = new ControllerCollection( 'foo', locale );
- expect( collection.locale ).to.equal( locale );
- } );
- } );
- describe( 'add', () => {
- it( 'should add a child controller and return promise', () => {
- const parentController = new Controller();
- const childController = new Controller();
- const collection = parentController.addCollection( 'x' );
- const returned = collection.add( childController );
- expect( returned ).to.be.an.instanceof( Promise );
- expect( collection.get( 0 ) ).to.be.equal( childController );
- } );
- it( 'should add a child controller at given position', () => {
- const parentController = new Controller();
- const childController1 = new Controller();
- const childController2 = new Controller();
- const collection = parentController.addCollection( 'x' );
- collection.add( childController1 );
- collection.add( childController2, 0 );
- expect( collection.get( 0 ) ).to.be.equal( childController2 );
- expect( collection.get( 1 ) ).to.be.equal( childController1 );
- } );
- it( 'should initialize child controller if parent is ready', () => {
- const parentController = new Controller( null, new ParentView() );
- const childController = new Controller( null, new View() );
- const spy = testUtils.sinon.spy( childController, 'init' );
- const collection = parentController.addCollection( 'x' );
- collection.add( childController );
- collection.remove( childController );
- sinon.assert.notCalled( spy );
- return parentController.init()
- .then( () => {
- return collection.add( childController );
- } )
- .then( () => {
- sinon.assert.calledOnce( spy );
- } );
- } );
- it( 'should not initialize child controller twice', () => {
- const parentController = new Controller( null, new ParentView() );
- const childController = new Controller( null, new View() );
- const spy = testUtils.sinon.spy( childController, 'init' );
- const collection = parentController.addCollection( 'x' );
- return parentController.init()
- .then( () => {
- return childController.init();
- } )
- .then( () => {
- return collection.add( childController );
- } )
- .then( () => {
- sinon.assert.calledOnce( spy );
- } );
- } );
- } );
- describe( 'bind', () => {
- it( 'returns object', () => {
- expect( new ControllerCollection( 'foo' ).bind( {} ) ).to.be.an( 'object' );
- } );
- it( 'provides "as" interface', () => {
- const bind = new ControllerCollection( 'foo' ).bind( {} );
- expect( bind ).to.have.keys( 'as' );
- expect( bind.as ).to.be.a( 'function' );
- } );
- describe( 'as', () => {
- it( 'does not chain', () => {
- const controllers = new ControllerCollection( 'synced' );
- const returned = controllers.bind( models ).as( ItemController, ItemView );
- expect( returned ).to.be.undefined;
- } );
- describe( 'standard factory', () => {
- it( 'expands the initial collection of the models', () => {
- const controllers = new ControllerCollection( 'synced' );
- controllers.bind( models ).as( ItemController, ItemView );
- expect( controllers ).to.have.length( 5 );
- expect( controllers.get( 0 ).model.uid ).to.equal( '0' );
- expect( controllers.get( 4 ).model.uid ).to.equal( '4' );
- } );
- it( 'uses the controller and view classes to expand the collection', () => {
- const controllers = new ControllerCollection( 'synced' );
- controllers.bind( models ).as( ItemController, ItemView );
- expect( controllers.get( 0 ) ).to.be.instanceOf( ItemController );
- expect( controllers.get( 0 ).view ).to.be.instanceOf( ItemView );
- } );
- it( 'supports adding new models to the collection', () => {
- const controllers = new ControllerCollection( 'synced' );
- controllers.bind( models ).as( ItemController, ItemView );
- models.add( new Model( { uid: '6' } ) );
- models.add( new Model( { uid: '5' } ), 5 );
- expect( controllers.get( 5 ).model.uid ).to.equal( '5' );
- expect( controllers.get( 6 ).model.uid ).to.equal( '6' );
- expect( controllers ).to.have.length( 7 );
- } );
- it( 'supports removing models from the collection', () => {
- const controllers = new ControllerCollection( 'synced' );
- controllers.bind( models ).as( ItemController, ItemView );
- models.remove( 2 );
- models.remove( 3 );
- expect( controllers.map( c => c.model.uid ) ).to.have.members( [ '0', '1', '3' ] );
- } );
- it( 'passes controller collection\'s locale to the views', () => {
- const locale = {};
- const controllers = new ControllerCollection( 'synced', locale );
- controllers.bind( models ).as( ItemController, ItemView );
- expect( controllers.get( 0 ).view.locale ).to.equal( locale );
- } );
- } );
- describe( 'custom factory', () => {
- it( 'expands the initial collection of the models', () => {
- const controllers = new ControllerCollection( 'synced' );
- controllers.bind( models ).as( ( model, locale ) => {
- return new ItemController( model, new ItemView( locale ) );
- } );
- expect( controllers ).to.have.length( 5 );
- expect( controllers.get( 0 ).model.uid ).to.equal( '0' );
- expect( controllers.get( 4 ).model.uid ).to.equal( '4' );
- } );
- it( 'uses the controller and view classes to expand the collection', () => {
- const controllers = new ControllerCollection( 'synced' );
- controllers.bind( models ).as( ( model, locale ) => {
- return new ItemController( model, new ItemView( locale ) );
- } );
- expect( controllers.get( 0 ) ).to.be.instanceOf( ItemController );
- expect( controllers.get( 0 ).view ).to.be.instanceOf( ItemView );
- } );
- it( 'supports adding new models to the collection', () => {
- const controllers = new ControllerCollection( 'synced' );
- controllers.bind( models ).as( ( model, locale ) => {
- return new ItemController( model, new ItemView( locale ) );
- } );
- models.add( new Model( { uid: '6' } ) );
- models.add( new Model( { uid: '5' } ), 5 );
- expect( controllers.get( 5 ).model.uid ).to.equal( '5' );
- expect( controllers.get( 6 ).model.uid ).to.equal( '6' );
- expect( controllers ).to.have.length( 7 );
- } );
- it( 'supports removing models from the collection', () => {
- const controllers = new ControllerCollection( 'synced' );
- controllers.bind( models ).as( ( model, locale ) => {
- return new ItemController( model, new ItemView( locale ) );
- } );
- models.remove( 2 );
- models.remove( 3 );
- expect( controllers.map( c => c.model.uid ) ).to.have.members( [ '0', '1', '3' ] );
- } );
- it( 'passes controller collection\'s locale to the views', () => {
- const locale = {};
- const controllers = new ControllerCollection( 'synced', locale );
- controllers.bind( models ).as( ( model, locale ) => {
- return new ItemController( model, new ItemView( locale ) );
- } );
- expect( controllers.get( 0 ).view.locale ).to.equal( locale );
- } );
- } );
- describe( 'custom data format with custom factory', () => {
- it( 'expands the initial collection of the models', () => {
- const controllers = new ControllerCollection( 'synced' );
- const data = new Collection();
- data.add( { foo: 'a' } );
- data.add( { foo: 'b' } );
- controllers.bind( data ).as( ( item, locale ) => {
- const model = new Model( {
- custom: item.foo
- } );
- return new ItemController( model, new ItemView( locale ) );
- } );
- expect( controllers ).to.have.length( 2 );
- expect( controllers.get( 0 ).model.custom ).to.equal( 'a' );
- expect( controllers.get( 1 ).model.custom ).to.equal( 'b' );
- expect( controllers.get( 0 ) ).to.be.instanceOf( ItemController );
- expect( controllers.get( 0 ).view ).to.be.instanceOf( ItemView );
- } );
- } );
- } );
- } );
- describe( 'delegate', () => {
- it( 'should throw when event names are not strings', () => {
- const collection = new ControllerCollection( 'foo' );
- expect( () => {
- collection.delegate();
- } ).to.throw( CKEditorError, /ui-controllercollection-delegate-wrong-events/ );
- expect( () => {
- collection.delegate( new Date() );
- } ).to.throw( CKEditorError, /ui-controllercollection-delegate-wrong-events/ );
- expect( () => {
- collection.delegate( 'color', new Date() );
- } ).to.throw( CKEditorError, /ui-controllercollection-delegate-wrong-events/ );
- } );
- it( 'returns object', () => {
- expect( new ControllerCollection( 'foo' ).delegate( 'foo' ) ).to.be.an( 'object' );
- } );
- it( 'provides "to" interface', () => {
- const delegate = new ControllerCollection( 'foo' ).delegate( 'foo' );
- expect( delegate ).to.have.keys( 'to' );
- expect( delegate.to ).to.be.a( 'function' );
- } );
- describe( 'to', () => {
- it( 'does not chain', () => {
- const collection = new ControllerCollection( 'foo' );
- const returned = collection.delegate( 'foo' ).to( {} );
- expect( returned ).to.be.undefined;
- } );
- it( 'forwards an event to another observable – existing controller', ( done ) => {
- const target = new Model();
- const collection = new ControllerCollection( 'foo' );
- const model = new Model();
- collection.add( new Controller( model ) );
- collection.delegate( 'foo' ).to( target );
- target.on( 'foo', ( ...args ) => {
- assertDelegated( args, {
- expectedName: 'foo',
- expectedSource: model,
- expectedPath: [ model, target ],
- expectedData: []
- } );
- done();
- } );
- model.fire( 'foo' );
- } );
- it( 'forwards an event to another observable – new controller', ( done ) => {
- const target = new Model();
- const collection = new ControllerCollection( 'foo' );
- const model = new Model();
- collection.delegate( 'foo' ).to( target );
- collection.add( new Controller( model ) );
- target.on( 'foo', ( ...args ) => {
- assertDelegated( args, {
- expectedName: 'foo',
- expectedSource: model,
- expectedPath: [ model, target ],
- expectedData: []
- } );
- done();
- } );
- model.fire( 'foo' );
- } );
- it( 'forwards multiple events to another observable', () => {
- const target = new Model();
- const collection = new ControllerCollection( 'foo' );
- const modelA = new Model();
- const modelB = new Model();
- const modelC = new Model();
- const spyFoo = sinon.spy();
- const spyBar = sinon.spy();
- const spyBaz = sinon.spy();
- collection.delegate( 'foo', 'bar', 'baz' ).to( target );
- collection.add( new Controller( modelA ) );
- collection.add( new Controller( modelB ) );
- collection.add( new Controller( modelC ) );
- target.on( 'foo', spyFoo );
- target.on( 'bar', spyBar );
- target.on( 'baz', spyBaz );
- modelA.fire( 'foo' );
- sinon.assert.calledOnce( spyFoo );
- sinon.assert.notCalled( spyBar );
- sinon.assert.notCalled( spyBaz );
- assertDelegated( spyFoo.args[ 0 ], {
- expectedName: 'foo',
- expectedSource: modelA,
- expectedPath: [ modelA, target ],
- expectedData: []
- } );
- modelB.fire( 'bar' );
- sinon.assert.calledOnce( spyFoo );
- sinon.assert.calledOnce( spyBar );
- sinon.assert.notCalled( spyBaz );
- assertDelegated( spyBar.args[ 0 ], {
- expectedName: 'bar',
- expectedSource: modelB,
- expectedPath: [ modelB, target ],
- expectedData: []
- } );
- modelC.fire( 'baz' );
- sinon.assert.calledOnce( spyFoo );
- sinon.assert.calledOnce( spyBar );
- sinon.assert.calledOnce( spyBaz );
- assertDelegated( spyBaz.args[ 0 ], {
- expectedName: 'baz',
- expectedSource: modelC,
- expectedPath: [ modelC, target ],
- expectedData: []
- } );
- modelC.fire( 'not-delegated' );
- sinon.assert.calledOnce( spyFoo );
- sinon.assert.calledOnce( spyBar );
- sinon.assert.calledOnce( spyBaz );
- } );
- it( 'does not forward events which are not supposed to be delegated', () => {
- const target = new Model();
- const collection = new ControllerCollection( 'foo' );
- const model = new Model();
- const spyFoo = sinon.spy();
- const spyBar = sinon.spy();
- const spyBaz = sinon.spy();
- collection.delegate( 'foo', 'bar', 'baz' ).to( target );
- collection.add( new Controller( model ) );
- target.on( 'foo', spyFoo );
- target.on( 'bar', spyBar );
- target.on( 'baz', spyBaz );
- model.fire( 'foo' );
- model.fire( 'bar' );
- model.fire( 'baz' );
- model.fire( 'not-delegated' );
- sinon.assert.callOrder( spyFoo, spyBar, spyBaz );
- sinon.assert.callCount( spyFoo, 1 );
- sinon.assert.callCount( spyBar, 1 );
- sinon.assert.callCount( spyBaz, 1 );
- } );
- it( 'stops forwarding when controller removed from the collection', () => {
- const target = new Model();
- const collection = new ControllerCollection( 'foo' );
- const model = new Model();
- const spy = sinon.spy();
- collection.delegate( 'foo' ).to( target );
- target.on( 'foo', spy );
- collection.add( new Controller( model ) );
- model.fire( 'foo' );
- sinon.assert.callCount( spy, 1 );
- collection.remove( 0 );
- model.fire( 'foo' );
- sinon.assert.callCount( spy, 1 );
- } );
- it( 'supports deep event delegation', ( done ) => {
- const collection = new ControllerCollection( 'foo' );
- const target = new Model();
- const modelA = new Model();
- const modelAA = new Model();
- const data = {};
- const controllerA = new Controller( modelA );
- const controllerAA = new Controller( modelAA );
- const barCollection = controllerA.addCollection( 'bar' );
- collection.add( controllerA );
- collection.delegate( 'foo' ).to( target );
- barCollection.add( controllerAA );
- barCollection.delegate( 'foo' ).to( modelA );
- target.on( 'foo', ( ...args ) => {
- assertDelegated( args, {
- expectedName: 'foo',
- expectedSource: modelAA,
- expectedPath: [ modelAA, modelA, target ],
- expectedData: [ data ]
- } );
- done();
- } );
- modelAA.fire( 'foo', data );
- } );
- } );
- } );
- } );
- function defineParentViewClass() {
- ParentView = class extends View {
- constructor() {
- super();
- this.element = document.createElement( 'span' );
- this.register( 'x', true );
- }
- };
- }
- function defineItemControllerClass() {
- ItemController = class extends Controller {
- constructor( model, view ) {
- super( model, view );
- view.model.bind( 'uid' ).to( model );
- }
- };
- }
- function defineItemViewClass() {
- ItemView = class extends View {
- constructor( locale ) {
- super( locale );
- const bind = this.bind;
- this.template = new Template( {
- tag: 'li',
- attributes: {
- id: bind.to( 'uid' )
- }
- } );
- }
- };
- }
- function createModelCollection() {
- models = new Collection( { idProperty: 'uid' } );
- for ( let i = 0; i < 5; i++ ) {
- models.add( new Model( {
- uid: Number( i ).toString()
- } ) );
- }
- }
- function assertDelegated( evtArgs, { expectedName, expectedSource, expectedPath, expectedData } ) {
- const evtInfo = evtArgs[ 0 ];
- expect( evtInfo.name ).to.equal( expectedName );
- expect( evtInfo.source ).to.equal( expectedSource );
- expect( evtInfo.path ).to.deep.equal( expectedPath );
- expect( evtArgs.slice( 1 ) ).to.deep.equal( expectedData );
- }
|