| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060 |
- /**
- * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
- import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
- import utilsTestUtils from '../tests/_utils/utils';
- import ObservableMixin from '../src/observablemixin';
- import EmitterMixin from '../src/emittermixin';
- import EventInfo from '../src/eventinfo';
- import CKEditorError from '../src/ckeditorerror';
- import mix from '../src/mix';
- const assertBinding = utilsTestUtils.assertBinding;
- testUtils.createSinonSandbox();
- describe( 'ObservableMixin', () => {
- it( 'exists', () => {
- expect( ObservableMixin ).to.be.an( 'object' );
- } );
- it( 'mixes in EmitterMixin', () => {
- expect( ObservableMixin ).to.have.property( 'on', EmitterMixin.on );
- } );
- it( 'implements set, bind, and unbind methods', () => {
- expect( ObservableMixin ).to.contain.keys( 'set', 'bind', 'unbind' );
- } );
- } );
- describe( 'Observable', () => {
- class Observable {
- constructor( properties ) {
- if ( properties ) {
- this.set( properties );
- }
- }
- }
- mix( Observable, ObservableMixin );
- let Car, car;
- beforeEach( () => {
- Car = class extends Observable {};
- car = new Car( {
- color: 'red',
- year: 2015
- } );
- } );
- it( 'should set properties on creation', () => {
- expect( car ).to.have.property( 'color', 'red' );
- expect( car ).to.have.property( 'year', 2015 );
- } );
- it( 'should get correctly after set', () => {
- car.color = 'blue';
- expect( car.color ).to.equal( 'blue' );
- } );
- describe( 'set()', () => {
- it( 'should work when passing an object', () => {
- car.set( {
- color: 'blue', // Override
- wheels: 4,
- seats: 5
- } );
- expect( car ).to.deep.equal( {
- color: 'blue',
- year: 2015,
- wheels: 4,
- seats: 5
- } );
- } );
- it( 'should work when passing a key/value pair', () => {
- car.set( 'color', 'blue' );
- car.set( 'wheels', 4 );
- expect( car ).to.deep.equal( {
- color: 'blue',
- year: 2015,
- wheels: 4
- } );
- } );
- it( 'should fire the "change" event', () => {
- const spy = sinon.spy();
- const spyColor = sinon.spy();
- const spyYear = sinon.spy();
- const spyWheels = sinon.spy();
- car.on( 'change', spy );
- car.on( 'change:color', spyColor );
- car.on( 'change:year', spyYear );
- car.on( 'change:wheels', spyWheels );
- // Set property in all possible ways.
- car.color = 'blue';
- car.set( { year: 2003 } );
- car.set( 'wheels', 4 );
- // Check number of calls.
- sinon.assert.calledThrice( spy );
- sinon.assert.calledOnce( spyColor );
- sinon.assert.calledOnce( spyYear );
- sinon.assert.calledOnce( spyWheels );
- // Check context.
- sinon.assert.alwaysCalledOn( spy, car );
- sinon.assert.calledOn( spyColor, car );
- sinon.assert.calledOn( spyYear, car );
- sinon.assert.calledOn( spyWheels, car );
- // Check params.
- sinon.assert.calledWithExactly( spy, sinon.match.instanceOf( EventInfo ), 'color', 'blue', 'red' );
- sinon.assert.calledWithExactly( spy, sinon.match.instanceOf( EventInfo ), 'year', 2003, 2015 );
- sinon.assert.calledWithExactly( spy, sinon.match.instanceOf( EventInfo ), 'wheels', 4, sinon.match.typeOf( 'undefined' ) );
- sinon.assert.calledWithExactly( spyColor, sinon.match.instanceOf( EventInfo ), 'color', 'blue', 'red' );
- sinon.assert.calledWithExactly( spyYear, sinon.match.instanceOf( EventInfo ), 'year', 2003, 2015 );
- sinon.assert.calledWithExactly(
- spyWheels, sinon.match.instanceOf( EventInfo ),
- 'wheels', 4, sinon.match.typeOf( 'undefined' )
- );
- } );
- it( 'should not fire the "change" event for the same property value', () => {
- const spy = sinon.spy();
- const spyColor = sinon.spy();
- car.on( 'change', spy );
- car.on( 'change:color', spyColor );
- // Set the "color" property in all possible ways.
- car.color = 'red';
- car.set( 'color', 'red' );
- car.set( { color: 'red' } );
- sinon.assert.notCalled( spy );
- sinon.assert.notCalled( spyColor );
- } );
- it( 'should fire the "set" event', () => {
- const spy = sinon.spy();
- const spyColor = sinon.spy();
- const spyYear = sinon.spy();
- const spyWheels = sinon.spy();
- car.on( 'set', spy );
- car.on( 'set:color', spyColor );
- car.on( 'set:year', spyYear );
- car.on( 'set:wheels', spyWheels );
- // Set property in all possible ways.
- car.color = 'blue';
- car.set( { year: 2003 } );
- car.set( 'wheels', 4 );
- // Check number of calls.
- sinon.assert.calledThrice( spy );
- sinon.assert.calledOnce( spyColor );
- sinon.assert.calledOnce( spyYear );
- sinon.assert.calledOnce( spyWheels );
- // Check context.
- sinon.assert.alwaysCalledOn( spy, car );
- sinon.assert.calledOn( spyColor, car );
- sinon.assert.calledOn( spyYear, car );
- sinon.assert.calledOn( spyWheels, car );
- // Check params.
- sinon.assert.calledWithExactly( spy, sinon.match.instanceOf( EventInfo ), 'color', 'blue', 'red' );
- sinon.assert.calledWithExactly( spy, sinon.match.instanceOf( EventInfo ), 'year', 2003, 2015 );
- sinon.assert.calledWithExactly( spy, sinon.match.instanceOf( EventInfo ), 'wheels', 4, sinon.match.typeOf( 'undefined' ) );
- sinon.assert.calledWithExactly( spyColor, sinon.match.instanceOf( EventInfo ), 'color', 'blue', 'red' );
- sinon.assert.calledWithExactly( spyYear, sinon.match.instanceOf( EventInfo ), 'year', 2003, 2015 );
- sinon.assert.calledWithExactly(
- spyWheels, sinon.match.instanceOf( EventInfo ),
- 'wheels', 4, sinon.match.typeOf( 'undefined' )
- );
- } );
- it( 'should use "set" return value as an observable new value', () => {
- car.color = 'blue';
- const spy = sinon.spy();
- car.on( 'set:color', evt => {
- evt.stop();
- evt.return = 'red';
- }, { priority: 'high' } );
- car.on( 'change:color', spy );
- car.color = 'pink';
- sinon.assert.calledWithExactly( spy, sinon.match.instanceOf( EventInfo ), 'color', 'red', 'blue' );
- } );
- it( 'should fire the "set" event for the same property value', () => {
- const spy = sinon.spy();
- const spyColor = sinon.spy();
- car.on( 'set', spy );
- car.on( 'set:color', spyColor );
- // Set the "color" property in all possible ways.
- car.color = 'red';
- car.set( 'color', 'red' );
- car.set( { color: 'red' } );
- sinon.assert.calledThrice( spy );
- sinon.assert.calledThrice( spyColor );
- } );
- it( 'should throw when overriding already existing property', () => {
- car.normalProperty = 1;
- expect( () => {
- car.set( 'normalProperty', 2 );
- } ).to.throw( CKEditorError, /^observable-set-cannot-override/ );
- expect( car ).to.have.property( 'normalProperty', 1 );
- } );
- it( 'should throw when overriding already existing property (in the prototype)', () => {
- class Car extends Observable {
- method() {}
- }
- car = new Car();
- expect( () => {
- car.set( 'method', 2 );
- } ).to.throw( CKEditorError, /^observable-set-cannot-override/ );
- expect( car.method ).to.be.a( 'function' );
- } );
- it( 'should allow setting properties with undefined value', () => {
- const spy = sinon.spy();
- car.on( 'change', spy );
- car.set( 'seats', undefined );
- sinon.assert.calledOnce( spy );
- expect( car ).to.contain.keys( 'seats' );
- expect( car.seats ).to.be.undefined;
- car.set( 'seats', 5 );
- sinon.assert.calledTwice( spy );
- expect( car ).to.have.property( 'seats', 5 );
- } );
- } );
- describe( 'bind()', () => {
- it( 'should chain for a single property', () => {
- expect( car.bind( 'color' ) ).to.contain.keys( 'to' );
- } );
- it( 'should chain for multiple properties', () => {
- expect( car.bind( 'color', 'year' ) ).to.contain.keys( 'to' );
- } );
- it( 'should chain for nonexistent properties', () => {
- expect( car.bind( 'nonexistent' ) ).to.contain.keys( 'to' );
- } );
- it( 'should throw when properties are not strings', () => {
- expect( () => {
- car.bind();
- } ).to.throw( CKEditorError, /observable-bind-wrong-properties/ );
- expect( () => {
- car.bind( new Date() );
- } ).to.throw( CKEditorError, /observable-bind-wrong-properties/ );
- expect( () => {
- car.bind( 'color', new Date() );
- } ).to.throw( CKEditorError, /observable-bind-wrong-properties/ );
- } );
- it( 'should throw when the same property is used than once', () => {
- expect( () => {
- car.bind( 'color', 'color' );
- } ).to.throw( CKEditorError, /observable-bind-duplicate-properties/ );
- } );
- it( 'should throw when binding the same property more than once', () => {
- expect( () => {
- car.bind( 'color' );
- car.bind( 'color' );
- } ).to.throw( CKEditorError, /observable-bind-rebind/ );
- } );
- describe( 'to()', () => {
- it( 'should not chain', () => {
- expect(
- car.bind( 'color' ).to( new Observable( { color: 'red' } ) )
- ).to.be.undefined;
- } );
- it( 'should throw when arguments are of invalid type - empty', () => {
- expect( () => {
- car = new Car();
- car.bind( 'color' ).to();
- } ).to.throw( CKEditorError, /observable-bind-to-parse-error/ );
- } );
- it( 'should throw when binding multiple properties to multiple observables', () => {
- let vehicle = new Car();
- const car1 = new Car( { color: 'red', year: 1943 } );
- const car2 = new Car( { color: 'yellow', year: 1932 } );
- expect( () => {
- vehicle.bind( 'color', 'year' ).to( car1, 'color', car2, 'year' );
- } ).to.throw( CKEditorError, /observable-bind-to-no-callback/ );
- expect( () => {
- vehicle = new Car();
- vehicle.bind( 'color', 'year' ).to( car1, car2 );
- } ).to.throw( CKEditorError, /observable-bind-to-no-callback/ );
- expect( () => {
- vehicle = new Car();
- vehicle.bind( 'color', 'year' ).to( car1, car2, 'year' );
- } ).to.throw( CKEditorError, /observable-bind-to-no-callback/ );
- expect( () => {
- vehicle = new Car();
- vehicle.bind( 'color', 'year' ).to( car1, 'color', car2 );
- } ).to.throw( CKEditorError, /observable-bind-to-no-callback/ );
- expect( () => {
- vehicle = new Car();
- vehicle.bind( 'color', 'year', 'custom' ).to( car, car );
- } ).to.throw( CKEditorError, /observable-bind-to-no-callback/ );
- } );
- it( 'should throw when binding multiple properties but passed a callback', () => {
- let vehicle = new Car();
- expect( () => {
- vehicle.bind( 'color', 'year' ).to( car, () => {} );
- } ).to.throw( CKEditorError, /observable-bind-to-extra-callback/ );
- expect( () => {
- vehicle = new Car();
- vehicle.bind( 'color', 'year' ).to( car, car, () => {} );
- } ).to.throw( CKEditorError, /observable-bind-to-extra-callback/ );
- } );
- it( 'should throw when binding a single property but multiple callbacks', () => {
- let vehicle = new Car();
- expect( () => {
- vehicle.bind( 'color' ).to( car, () => {}, () => {} );
- } ).to.throw( CKEditorError, /observable-bind-to-parse-error/ );
- expect( () => {
- vehicle = new Car();
- vehicle.bind( 'color' ).to( car, car, () => {}, () => {} );
- } ).to.throw( CKEditorError, /observable-bind-to-parse-error/ );
- } );
- it( 'should throw when a number of properties does not match', () => {
- let vehicle = new Car();
- expect( () => {
- vehicle.bind( 'color' ).to( car, 'color', 'year' );
- } ).to.throw( CKEditorError, /observable-bind-to-properties-length/ );
- expect( () => {
- vehicle = new Car();
- vehicle.bind( 'color', 'year' ).to( car, 'color' );
- } ).to.throw( CKEditorError, /observable-bind-to-properties-length/ );
- expect( () => {
- vehicle = new Car();
- vehicle.bind( 'color' ).to( car, 'color', 'year', () => {} );
- } ).to.throw( CKEditorError, /observable-bind-to-properties-length/ );
- expect( () => {
- vehicle = new Car();
- vehicle.bind( 'color' ).to( car, 'color', car, 'color', 'year', () => {} );
- } ).to.throw( CKEditorError, /observable-bind-to-properties-length/ );
- } );
- it( 'should work when properties don\'t exist in to() observable #1', () => {
- const vehicle = new Car();
- vehicle.bind( 'color' ).to( car, 'nonexistent in car' );
- assertBinding( vehicle,
- { color: undefined, year: undefined },
- [
- [ car, { 'nonexistent in car': 'foo', year: 1969 } ]
- ],
- { color: 'foo', year: undefined }
- );
- } );
- it( 'should work when properties don\'t exist in to() observable #2', () => {
- const vehicle = new Car();
- vehicle.bind( 'nonexistent in car' ).to( car );
- assertBinding( vehicle,
- { 'nonexistent in car': undefined, year: undefined },
- [
- [ car, { 'nonexistent in car': 'foo', year: 1969 } ]
- ],
- { 'nonexistent in car': 'foo', year: undefined }
- );
- } );
- it( 'should work when properties don\'t exist in to() observable #3', () => {
- const vehicle = new Car();
- vehicle.bind( 'year' ).to( car, 'color', car, 'nonexistent in car', ( a, b ) => a + b );
- assertBinding( vehicle,
- { color: undefined, year: car.color + undefined },
- [
- [ car, { color: 'blue', year: 1969 } ]
- ],
- { color: undefined, year: 'blueundefined' }
- );
- } );
- it( 'should set new observable properties', () => {
- const car = new Car( { color: 'green', year: 2001, type: 'pickup' } );
- const vehicle = new Car( { 'not involved': true } );
- vehicle.bind( 'color', 'year', 'type' ).to( car );
- expect( vehicle ).to.have.property( 'color' );
- expect( vehicle ).to.have.property( 'year' );
- expect( vehicle ).to.have.property( 'type' );
- expect( vehicle ).to.have.property( 'not involved' );
- } );
- it( 'should work when no property specified #1', () => {
- const vehicle = new Car();
- vehicle.bind( 'color' ).to( car );
- assertBinding( vehicle,
- { color: car.color, year: undefined },
- [
- [ car, { color: 'blue', year: 1969 } ]
- ],
- { color: 'blue', year: undefined }
- );
- } );
- it( 'should work for a single property', () => {
- const vehicle = new Car();
- vehicle.bind( 'color' ).to( car, 'color' );
- assertBinding( vehicle,
- { color: car.color, year: undefined },
- [
- [ car, { color: 'blue', year: 1969 } ]
- ],
- { color: 'blue', year: undefined }
- );
- } );
- it( 'should work for multiple properties', () => {
- const vehicle = new Car();
- vehicle.bind( 'color', 'year' ).to( car, 'color', 'year' );
- assertBinding( vehicle,
- { color: car.color, year: car.year },
- [
- [ car, { color: 'blue', year: 1969 } ]
- ],
- { color: 'blue', year: 1969 }
- );
- } );
- it( 'should work for properties that don\'t exist in the observable', () => {
- const vehicle = new Car();
- vehicle.bind( 'nonexistent in vehicle' ).to( car, 'color' );
- assertBinding( vehicle,
- { 'nonexistent in vehicle': car.color, color: undefined },
- [
- [ car, { color: 'blue', year: 1969 } ]
- ],
- { 'nonexistent in vehicle': 'blue', color: undefined }
- );
- } );
- it( 'should work when using the same property name more than once', () => {
- const vehicle = new Car();
- vehicle.bind( 'color', 'year' ).to( car, 'year', 'year' );
- assertBinding( vehicle,
- { color: car.year, year: car.year },
- [
- [ car, { color: 'blue', year: 1969 } ]
- ],
- { color: 1969, year: 1969 }
- );
- } );
- it( 'should work when binding more that once', () => {
- const vehicle = new Car();
- vehicle.bind( 'color' ).to( car, 'color' );
- vehicle.bind( 'year' ).to( car, 'year' );
- assertBinding( vehicle,
- { color: car.color, year: car.year },
- [
- [ car, { color: 'blue', year: 1969 } ]
- ],
- { color: 'blue', year: 1969 }
- );
- } );
- it( 'should work with callback – set a new observable property', () => {
- const vehicle = new Car();
- const car1 = new Car( { type: 'pickup' } );
- const car2 = new Car( { type: 'truck' } );
- vehicle.bind( 'type' )
- .to( car1, car2, ( ...args ) => args.join( '' ) );
- expect( vehicle ).to.have.property( 'type' );
- } );
- it( 'should work with callback #1', () => {
- const vehicle = new Car();
- const car1 = new Car( { color: 'black' } );
- const car2 = new Car( { color: 'brown' } );
- vehicle.bind( 'color' )
- .to( car1, car2, ( ...args ) => args.join( '' ) );
- assertBinding( vehicle,
- { color: car1.color + car2.color, year: undefined },
- [
- [ car1, { color: 'black', year: 1930 } ],
- [ car2, { color: 'green', year: 1950 } ]
- ],
- { color: 'blackgreen', year: undefined }
- );
- } );
- it( 'should work with callback #2', () => {
- const vehicle = new Car();
- const car1 = new Car( { color: 'black' } );
- const car2 = new Car( { color: 'brown' } );
- vehicle.bind( 'color' )
- .to( car1, 'color', car2, 'color', ( ...args ) => args.join( '' ) );
- assertBinding( vehicle,
- { color: car1.color + car2.color, year: undefined },
- [
- [ car1, { color: 'black', year: 1930 } ],
- [ car2, { color: 'green', year: 1950 } ]
- ],
- { color: 'blackgreen', year: undefined }
- );
- } );
- it( 'should work with callback #3', () => {
- const vehicle = new Car();
- const car1 = new Car( { color: 'black' } );
- const car2 = new Car( { color: 'brown' } );
- const car3 = new Car( { color: 'yellow' } );
- vehicle.bind( 'color' )
- .to( car1, car2, car3, ( ...args ) => args.join( '' ) );
- assertBinding( vehicle,
- { color: car1.color + car2.color + car3.color, year: undefined },
- [
- [ car1, { color: 'black', year: 1930 } ],
- [ car2, { color: 'green', year: 1950 } ]
- ],
- { color: 'blackgreenyellow', year: undefined }
- );
- } );
- it( 'should work with callback #4', () => {
- const vehicle = new Car();
- const car1 = new Car( { color: 'black' } );
- const car2 = new Car( { lightness: 'bright' } );
- const car3 = new Car( { color: 'yellow' } );
- vehicle.bind( 'color' )
- .to( car1, car2, 'lightness', car3, ( ...args ) => args.join( '' ) );
- assertBinding( vehicle,
- { color: car1.color + car2.lightness + car3.color, year: undefined },
- [
- [ car1, { color: 'black', year: 1930 } ],
- [ car2, { color: 'green', year: 1950 } ]
- ],
- { color: 'blackbrightyellow', year: undefined }
- );
- } );
- it( 'should work with callback #5', () => {
- const vehicle = new Car();
- const car1 = new Car( { hue: 'reds' } );
- const car2 = new Car( { lightness: 'bright' } );
- vehicle.bind( 'color' )
- .to( car1, 'hue', car2, 'lightness', ( ...args ) => args.join( '' ) );
- assertBinding( vehicle,
- { color: car1.hue + car2.lightness, year: undefined },
- [
- [ car1, { hue: 'greens', year: 1930 } ],
- [ car2, { lightness: 'dark', year: 1950 } ]
- ],
- { color: 'greensdark', year: undefined }
- );
- } );
- it( 'should work with callback #6', () => {
- const vehicle = new Car();
- const car1 = new Car( { hue: 'reds' } );
- vehicle.bind( 'color' )
- .to( car1, 'hue', h => h.toUpperCase() );
- assertBinding( vehicle,
- { color: car1.hue.toUpperCase(), year: undefined },
- [
- [ car1, { hue: 'greens', year: 1930 } ]
- ],
- { color: 'GREENS', year: undefined }
- );
- } );
- it( 'should work with callback #7', () => {
- const vehicle = new Car();
- const car1 = new Car( { color: 'red', year: 1943 } );
- const car2 = new Car( { color: 'yellow', year: 1932 } );
- vehicle.bind( 'custom' )
- .to( car1, 'color', car2, 'year', ( ...args ) => args.join( '/' ) );
- assertBinding( vehicle,
- { color: undefined, year: undefined, 'custom': car1.color + '/' + car2.year },
- [
- [ car1, { color: 'blue', year: 2100 } ],
- [ car2, { color: 'violet', year: 1969 } ]
- ],
- { color: undefined, year: undefined, 'custom': 'blue/1969' }
- );
- } );
- it( 'should work with callback #8', () => {
- const vehicle = new Car();
- const car1 = new Car( { color: 'red', year: 1943 } );
- const car2 = new Car( { color: 'yellow', year: 1932 } );
- const car3 = new Car( { hue: 'reds' } );
- vehicle.bind( 'custom' )
- .to( car1, 'color', car2, 'year', car3, 'hue', ( ...args ) => args.join( '/' ) );
- assertBinding( vehicle,
- { color: undefined, year: undefined, hue: undefined, 'custom': car1.color + '/' + car2.year + '/' + car3.hue },
- [
- [ car1, { color: 'blue', year: 2100 } ],
- [ car2, { color: 'violet', year: 1969 } ]
- ],
- { color: undefined, year: undefined, hue: undefined, 'custom': 'blue/1969/reds' }
- );
- } );
- it( 'should work with callback – binding more that once #1', () => {
- const vehicle = new Car();
- const car1 = new Car( { hue: 'reds', produced: 1920 } );
- const car2 = new Car( { lightness: 'bright', sold: 1921 } );
- vehicle.bind( 'color' )
- .to( car1, 'hue', car2, 'lightness', ( ...args ) => args.join( '' ) );
- vehicle.bind( 'year' )
- .to( car1, 'produced', car2, 'sold', ( ...args ) => args.join( '/' ) );
- assertBinding( vehicle,
- { color: car1.hue + car2.lightness, year: car1.produced + '/' + car2.sold },
- [
- [ car1, { hue: 'greens', produced: 1930 } ],
- [ car2, { lightness: 'dark', sold: 2000 } ]
- ],
- { color: 'greensdark', year: '1930/2000' }
- );
- } );
- it( 'should work with callback – binding more that once #2', () => {
- const vehicle = new Car();
- const car1 = new Car( { hue: 'reds', produced: 1920 } );
- const car2 = new Car( { lightness: 'bright', sold: 1921 } );
- vehicle.bind( 'color' )
- .to( car1, 'hue', car2, 'lightness', ( ...args ) => args.join( '' ) );
- vehicle.bind( 'year' )
- .to( car1, 'produced', car2, 'sold', ( ...args ) => args.join( '/' ) );
- vehicle.bind( 'mix' )
- .to( car1, 'hue', car2, 'sold', ( ...args ) => args.join( '+' ) );
- assertBinding( vehicle,
- {
- color: car1.hue + car2.lightness,
- year: car1.produced + '/' + car2.sold,
- mix: car1.hue + '+' + car2.sold
- },
- [
- [ car1, { hue: 'greens', produced: 1930 } ],
- [ car2, { lightness: 'dark', sold: 2000 } ]
- ],
- {
- color: 'greensdark',
- year: '1930/2000',
- mix: 'greens+2000'
- }
- );
- } );
- it( 'should work with callback – binding more that once #3', () => {
- const vehicle = new Car();
- const car1 = new Car( { hue: 'reds', produced: 1920 } );
- const car2 = new Car( { lightness: 'bright', sold: 1921 } );
- vehicle.bind( 'color' )
- .to( car1, 'hue', car2, 'lightness', ( ...args ) => args.join( '' ) );
- vehicle.bind( 'custom1' ).to( car1, 'hue' );
- vehicle.bind( 'year' )
- .to( car1, 'produced', car2, 'sold', ( ...args ) => args.join( '/' ) );
- vehicle.bind( 'custom2', 'custom3' ).to( car1, 'produced', 'hue' );
- assertBinding( vehicle,
- {
- color: car1.hue + car2.lightness,
- year: car1.produced + '/' + car2.sold,
- custom1: car1.hue,
- custom2: car1.produced,
- custom3: car1.hue
- },
- [
- [ car1, { hue: 'greens', produced: 1930 } ],
- [ car2, { lightness: 'dark', sold: 2000 } ]
- ],
- {
- color: 'greensdark',
- year: '1930/2000',
- custom1: 'greens',
- custom2: 1930,
- custom3: 'greens'
- }
- );
- } );
- it( 'should fire a single change event per bound property', () => {
- const vehicle = new Car();
- const car = new Car( { color: 'red', year: 1943 } );
- const spy = sinon.spy();
- vehicle.on( 'change', spy );
- vehicle.bind( 'color', 'year' ).to( car );
- car.color = 'violet';
- car.custom = 'foo';
- car.year = 2001;
- expect( spy.args.map( args => args[ 1 ] ) )
- .to.have.members( [ 'color', 'year', 'color', 'year' ] );
- } );
- } );
- describe( 'toMany()', () => {
- let Wheel;
- beforeEach( () => {
- Wheel = class extends Observable {
- };
- } );
- it( 'should not chain', () => {
- expect(
- car.bind( 'color' ).toMany( [ new Observable( { color: 'red' } ) ], 'color', () => {} )
- ).to.be.undefined;
- } );
- it( 'should throw when binding multiple properties', () => {
- let vehicle = new Car();
- expect( () => {
- vehicle.bind( 'color', 'year' ).toMany( [ car ], 'foo', () => {} );
- } ).to.throw( CKEditorError, /observable-bind-to-many-not-one-binding/ );
- expect( () => {
- vehicle = new Car();
- vehicle.bind( 'color', 'year' ).to( car, car, () => {} );
- } ).to.throw( CKEditorError, /observable-bind-to-extra-callback/ );
- } );
- it( 'binds observable property to collection property using callback', () => {
- const wheels = [
- new Wheel( { isTyrePressureOK: true } ),
- new Wheel( { isTyrePressureOK: true } ),
- new Wheel( { isTyrePressureOK: true } ),
- new Wheel( { isTyrePressureOK: true } )
- ];
- car.bind( 'showTyrePressureWarning' ).toMany( wheels, 'isTyrePressureOK', ( ...areEnabled ) => {
- // Every tyre must have OK pressure.
- return !areEnabled.every( isTyrePressureOK => isTyrePressureOK );
- } );
- expect( car.showTyrePressureWarning ).to.be.false;
- wheels[ 0 ].isTyrePressureOK = false;
- expect( car.showTyrePressureWarning ).to.be.true;
- wheels[ 0 ].isTyrePressureOK = true;
- expect( car.showTyrePressureWarning ).to.be.false;
- wheels[ 1 ].isTyrePressureOK = false;
- expect( car.showTyrePressureWarning ).to.be.true;
- } );
- } );
- } );
- describe( 'unbind()', () => {
- it( 'should not fail when unbinding a fresh observable', () => {
- const observable = new Observable();
- observable.unbind();
- } );
- it( 'should not fail when unbinding property that is not bound', () => {
- const observable = new Observable();
- observable.bind( 'foo' ).to( car, 'color' );
- expect( () => observable.unbind( 'bar' ) ).to.not.throw();
- } );
- it( 'should throw when non-string property is passed', () => {
- expect( () => {
- car.unbind( new Date() );
- } ).to.throw( CKEditorError, /observable-unbind-wrong-properties/ );
- } );
- it( 'should remove all bindings', () => {
- const vehicle = new Car();
- vehicle.bind( 'color', 'year' ).to( car, 'color', 'year' );
- vehicle.unbind();
- assertBinding( vehicle,
- { color: 'red', year: 2015 },
- [
- [ car, { color: 'blue', year: 1969 } ]
- ],
- { color: 'red', year: 2015 }
- );
- } );
- it( 'should remove bindings of certain properties', () => {
- const vehicle = new Car();
- const car = new Car( { color: 'red', year: 2000, torque: 160 } );
- vehicle.bind( 'color', 'year', 'torque' ).to( car );
- vehicle.unbind( 'year', 'torque' );
- assertBinding( vehicle,
- { color: 'red', year: 2000, torque: 160 },
- [
- [ car, { color: 'blue', year: 1969, torque: 220 } ]
- ],
- { color: 'blue', year: 2000, torque: 160 }
- );
- } );
- it( 'should remove bindings of certain properties, callback', () => {
- const vehicle = new Car();
- const car1 = new Car( { color: 'red' } );
- const car2 = new Car( { color: 'blue' } );
- vehicle.bind( 'color' ).to( car1, car2, ( c1, c2 ) => c1 + c2 );
- vehicle.unbind( 'color' );
- assertBinding( vehicle,
- { color: 'redblue' },
- [
- [ car1, { color: 'green' } ],
- [ car2, { color: 'violet' } ]
- ],
- { color: 'redblue' }
- );
- } );
- it( 'should be able to unbind two properties from a single source observable property', () => {
- const vehicle = new Car();
- vehicle.bind( 'color' ).to( car, 'color' );
- vehicle.bind( 'interiorColor' ).to( car, 'color' );
- vehicle.unbind( 'color' );
- vehicle.unbind( 'interiorColor' );
- assertBinding( vehicle,
- { color: 'red', interiorColor: 'red' },
- [
- [ car, { color: 'blue' } ]
- ],
- { color: 'red', interiorColor: 'red' }
- );
- } );
- } );
- describe( 'decorate()', () => {
- it( 'makes the method fire an event', () => {
- const spy = sinon.spy();
- class Foo extends Observable {
- method() {}
- }
- const foo = new Foo();
- foo.decorate( 'method' );
- foo.on( 'method', spy );
- foo.method( 1, 2 );
- expect( spy.calledOnce ).to.be.true;
- expect( spy.args[ 0 ][ 1 ] ).to.deep.equal( [ 1, 2 ] );
- } );
- it( 'executes the original method in a listener with the default priority', () => {
- const calls = [];
- class Foo extends Observable {
- method() {
- calls.push( 'original' );
- }
- }
- const foo = new Foo();
- foo.decorate( 'method' );
- foo.on( 'method', () => calls.push( 'high' ), { priority: 'high' } );
- foo.on( 'method', () => calls.push( 'low' ), { priority: 'low' } );
- foo.method();
- expect( calls ).to.deep.equal( [ 'high', 'original', 'low' ] );
- } );
- it( 'supports overriding return values', () => {
- class Foo extends Observable {
- method() {
- return 1;
- }
- }
- const foo = new Foo();
- foo.decorate( 'method' );
- foo.on( 'method', evt => {
- expect( evt.return ).to.equal( 1 );
- evt.return = 2;
- } );
- expect( foo.method() ).to.equal( 2 );
- } );
- it( 'supports overriding arguments', () => {
- class Foo extends Observable {
- method( a ) {
- expect( a ).to.equal( 2 );
- }
- }
- const foo = new Foo();
- foo.decorate( 'method' );
- foo.on( 'method', ( evt, args ) => {
- args[ 0 ] = 2;
- }, { priority: 'high' } );
- foo.method( 1 );
- } );
- it( 'supports stopping the event (which prevents execution of the orignal method', () => {
- class Foo extends Observable {
- method() {
- throw new Error( 'this should not be executed' );
- }
- }
- const foo = new Foo();
- foo.decorate( 'method' );
- foo.on( 'method', evt => {
- evt.stop();
- }, { priority: 'high' } );
- foo.method();
- } );
- it( 'throws when trying to decorate non existing method', () => {
- class Foo extends Observable {}
- const foo = new Foo();
- expect( () => {
- foo.decorate( 'method' );
- } ).to.throw( CKEditorError, /^observablemixin-cannot-decorate-undefined:/ );
- } );
- } );
- } );
|