| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358 |
- /**
- * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
- /* globals HTMLElement, Event, document */
- import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
- import Template from '../src/template';
- import { TemplateToBinding, TemplateIfBinding } from '../src/template';
- import View from '../src/view';
- import ViewCollection from '../src/viewcollection';
- import Model from '../src/model';
- import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
- import EmitterMixin from '@ckeditor/ckeditor5-utils/src/emittermixin';
- import DomEmitterMixin from '@ckeditor/ckeditor5-utils/src/dom/emittermixin';
- import Collection from '@ckeditor/ckeditor5-utils/src/collection';
- import normalizeHtml from '@ckeditor/ckeditor5-utils/tests/_utils/normalizehtml';
- import log from '@ckeditor/ckeditor5-utils/src/log';
- testUtils.createSinonSandbox();
- let el, text;
- describe( 'Template', () => {
- describe( 'constructor()', () => {
- it( 'sets #_isRendered property', () => {
- expect( new Template( { tag: 'p' } )._isRendered ).to.be.false;
- } );
- it( 'accepts and normalizes the definition', () => {
- const bind = Template.bind( new Model( {} ), Object.create( DomEmitterMixin ) );
- const tpl = new Template( {
- tag: 'p',
- attributes: {
- a: 'foo',
- b: [ 'bar', 'baz' ],
- c: {
- ns: 'abc',
- value: bind.to( 'qux' )
- }
- },
- children: [
- {
- text: 'content'
- },
- {
- text: bind.to( 'x' )
- },
- 'abc',
- {
- text: [ 'a', 'b' ]
- }
- ],
- on: {
- 'a@span': bind.to( 'b' ),
- 'b@span': bind.to( () => {} ),
- 'c@span': [
- bind.to( 'c' ),
- bind.to( () => {} )
- ]
- }
- } );
- expect( tpl.attributes.a[ 0 ] ).to.equal( 'foo' );
- expect( tpl.attributes.b[ 0 ] ).to.equal( 'bar' );
- expect( tpl.attributes.b[ 1 ] ).to.equal( 'baz' );
- expect( tpl.attributes.c[ 0 ].value[ 0 ] ).to.be.instanceof( TemplateToBinding );
- expect( tpl.children ).to.have.length( 4 );
- expect( tpl.children.get( 0 ).text[ 0 ] ).to.equal( 'content' );
- expect( tpl.children.get( 1 ).text[ 0 ] ).to.be.instanceof( TemplateToBinding );
- expect( tpl.children.get( 2 ).text[ 0 ] ).to.equal( 'abc' );
- expect( tpl.children.get( 3 ).text[ 0 ] ).to.equal( 'a' );
- expect( tpl.children.get( 3 ).text[ 1 ] ).to.equal( 'b' );
- expect( tpl.eventListeners[ 'a@span' ][ 0 ] ).to.be.instanceof( TemplateToBinding );
- expect( tpl.eventListeners[ 'b@span' ][ 0 ] ).to.be.instanceof( TemplateToBinding );
- expect( tpl.eventListeners[ 'c@span' ][ 0 ] ).to.be.instanceof( TemplateToBinding );
- expect( tpl.eventListeners[ 'c@span' ][ 1 ] ).to.be.instanceof( TemplateToBinding );
- // Note that Template mixes EmitterMixin.
- expect( tpl.on ).to.be.a( 'function' );
- expect( tpl.on[ 'a@span' ] ).to.be.undefined;
- } );
- it( 'defines #children collection', () => {
- const elementTpl = new Template( {
- tag: 'p',
- } );
- const textTpl = new Template( {
- text: 'foo'
- } );
- expect( elementTpl.children ).to.be.instanceof( Collection );
- expect( elementTpl.children ).to.have.length( 0 );
- // Text will never have children.
- expect( textTpl.children ).to.be.undefined;
- } );
- it( 'does not modify passed definition', () => {
- const def = {
- tag: 'p',
- attributes: {
- a: 'foo',
- },
- children: [
- {
- tag: 'span'
- }
- ]
- };
- const tpl = new Template( def );
- expect( def.attributes ).to.not.equal( tpl.attributes );
- expect( def.children ).to.not.equal( tpl.children );
- expect( def.children[ 0 ] ).to.not.equal( tpl.children.get( 0 ) );
- expect( def.attributes.a ).to.equal( 'foo' );
- expect( def.children[ 0 ].tag ).to.equal( 'span' );
- expect( tpl.attributes.a[ 0 ] ).to.equal( 'foo' );
- expect( tpl.children.get( 0 ).tag ).to.equal( 'span' );
- } );
- } );
- describe( 'render()', () => {
- it( 'throws when the template definition is wrong', () => {
- expect( () => {
- new Template( {} ).render();
- } ).to.throw( CKEditorError, /ui-template-wrong-syntax/ );
- expect( () => {
- new Template( {
- tag: 'p',
- text: 'foo'
- } ).render();
- } ).to.throw( CKEditorError, /ui-template-wrong-syntax/ );
- } );
- it( 'sets #_isRendered true', () => {
- const tpl = new Template( { tag: 'p' } );
- expect( tpl._isRendered ).to.be.false;
- tpl.render();
- expect( tpl._isRendered ).to.be.true;
- } );
- describe( 'DOM Node', () => {
- it( 'creates HTMLElement', () => {
- const el = new Template( {
- tag: 'p',
- } ).render();
- expect( el ).to.be.instanceof( HTMLElement );
- expect( el.parentNode ).to.be.null;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p></p>' );
- expect( el.namespaceURI ).to.equal( 'http://www.w3.org/1999/xhtml' );
- } );
- it( 'creates an element in a custom namespace', () => {
- const el = new Template( {
- tag: 'p',
- ns: 'foo'
- } ).render();
- expect( el.namespaceURI ).to.equal( 'foo' );
- } );
- it( 'creates a Text node', () => {
- const node = new Template( { text: 'foo' } ).render();
- expect( node.nodeType ).to.equal( 3 );
- expect( node.textContent ).to.equal( 'foo' );
- } );
- } );
- describe( 'attributes', () => {
- it( 'renders HTMLElement attributes', () => {
- const el = new Template( {
- tag: 'p',
- attributes: {
- 'class': [ 'a', 'b' ],
- x: 'bar'
- },
- children: [ 'foo' ]
- } ).render();
- expect( el ).to.be.instanceof( HTMLElement );
- expect( el.parentNode ).to.be.null;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="a b" x="bar">foo</p>' );
- expect( el.attributes.getNamedItem( 'class' ).namespaceURI ).to.be.null;
- } );
- it( 'renders HTMLElement attributes – empty', () => {
- const el = new Template( {
- tag: 'p',
- attributes: {
- class: '',
- x: [ '', '' ]
- },
- children: [ 'foo' ]
- } ).render();
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>foo</p>' );
- } );
- it( 'renders HTMLElement attributes – falsy values', () => {
- const el = new Template( {
- tag: 'p',
- attributes: {
- class: false,
- x: [ '', null, undefined, false ],
- y: [ 'foo', null, undefined, false ]
- },
- children: [ 'foo' ]
- } ).render();
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p y="foo">foo</p>' );
- } );
- it( 'renders HTMLElement attributes in a custom namespace', () => {
- const el = new Template( {
- tag: 'p',
- attributes: {
- class: {
- ns: 'foo',
- value: [ 'a', 'b' ]
- },
- x: {
- ns: 'abc',
- value: 'bar'
- }
- },
- children: [ 'foo' ]
- } ).render();
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="a b" x="bar">foo</p>' );
- expect( el.attributes.getNamedItem( 'class' ).namespaceURI ).to.equal( 'foo' );
- expect( el.attributes.getNamedItem( 'x' ).namespaceURI ).to.equal( 'abc' );
- } );
- describe( 'style', () => {
- let observable, emitter, bind;
- beforeEach( () => {
- observable = new Model( {
- width: '10px',
- backgroundColor: 'yellow'
- } );
- emitter = Object.create( EmitterMixin );
- bind = Template.bind( observable, emitter );
- } );
- it( 'renders as a static value', () => {
- setElement( {
- tag: 'p',
- attributes: {
- style: 'color: red'
- }
- } );
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p style="color:red;"></p>' );
- } );
- it( 'renders as a static value (Array of values)', () => {
- setElement( {
- tag: 'p',
- attributes: {
- style: [ 'color: red;', 'display: block;' ]
- }
- } );
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p style="color:red;display:block;"></p>' );
- } );
- it( 'renders as a value bound to the model', () => {
- setElement( {
- tag: 'p',
- attributes: {
- style: bind.to( 'width', w => `width: ${ w }` )
- }
- } );
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p style="width:10px;"></p>' );
- observable.width = '1em';
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p style="width:1em;"></p>' );
- } );
- it( 'renders as a value bound to the model (Array of bindings)', () => {
- setElement( {
- tag: 'p',
- attributes: {
- style: [
- bind.to( 'width', w => `width: ${ w };` ),
- bind.to( 'backgroundColor', c => `background-color: ${ c };` )
- ]
- }
- } );
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p style="width:10px;background-color:yellow;"></p>' );
- observable.width = '1em';
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p style="width:1em;background-color:yellow;"></p>' );
- } );
- describe( 'object', () => {
- it( 'renders with static and bound attributes', () => {
- setElement( {
- tag: 'p',
- attributes: {
- style: {
- width: bind.to( 'width' ),
- height: '10px',
- backgroundColor: bind.to( 'backgroundColor' )
- }
- }
- } );
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p style="width:10px;height:10px;background-color:yellow;"></p>' );
- observable.width = '20px';
- observable.backgroundColor = 'green';
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p style="width:20px;height:10px;background-color:green;"></p>' );
- } );
- it( 'renders with empty string attributes', () => {
- setElement( {
- tag: 'p',
- attributes: {
- style: {
- width: '',
- backgroundColor: bind.to( 'backgroundColor' )
- }
- }
- } );
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p style="background-color:yellow;"></p>' );
- observable.backgroundColor = '';
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p></p>' );
- } );
- it( 'renders with falsy values', () => {
- setElement( {
- tag: 'p',
- attributes: {
- style: {
- width: null,
- height: false,
- color: undefined
- }
- }
- } );
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p></p>' );
- } );
- } );
- } );
- } );
- describe( 'children', () => {
- it( 'creates HTMLElement children', () => {
- const el = new Template( {
- tag: 'p',
- attributes: {
- a: 'A'
- },
- children: [
- {
- tag: 'b',
- children: [ 'B' ]
- },
- {
- tag: 'i',
- children: [
- 'C',
- {
- tag: 'b',
- children: [ 'D' ]
- }
- ]
- }
- ]
- } ).render();
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p a="A"><b>B</b><i>C<b>D</b></i></p>' );
- } );
- it( 'creates a child Text Node (different syntaxes)', () => {
- const el = new Template( {
- tag: 'p',
- children: [
- 'foo',
- { text: 'bar' }
- ]
- } ).render();
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>foobar</p>' );
- } );
- it( 'creates multiple child Text Nodes', () => {
- const el = new Template( {
- tag: 'p',
- children: [
- 'a',
- 'b',
- { text: 'c' },
- 'd',
- { text: [ 'e', 'f' ] }
- ]
- } ).render();
- expect( el.childNodes ).to.have.length( 5 );
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>abcdef</p>' );
- } );
- it( 'renders view children', () => {
- const v1 = getView( {
- tag: 'span',
- attributes: {
- class: [
- 'v1'
- ]
- }
- } );
- const v2 = getView( {
- tag: 'span',
- attributes: {
- class: [
- 'v2'
- ]
- }
- } );
- const tpl = new Template( {
- tag: 'p',
- children: [ v1, v2 ]
- } );
- expect( tpl.children.get( 0 ) ).to.equal( v1 );
- expect( tpl.children.get( 1 ) ).to.equal( v2 );
- const rendered = tpl.render();
- expect( normalizeHtml( rendered.outerHTML ) ).to.equal( '<p><span class="v1"></span><span class="v2"></span></p>' );
- // Make sure the child views will not re–render their elements but
- // use ones rendered by the template instance above.
- expect( v1.element ).to.equal( rendered.firstChild );
- expect( v2.element ).to.equal( rendered.lastChild );
- } );
- it( 'renders view collection', () => {
- const collection = new ViewCollection();
- const v1 = getView( {
- tag: 'span',
- attributes: {
- class: [
- 'v1'
- ]
- }
- } );
- const v2 = getView( {
- tag: 'span',
- attributes: {
- class: [
- 'v2'
- ]
- }
- } );
- collection.add( v1 );
- collection.add( v2 );
- const rendered = new Template( {
- tag: 'p',
- children: collection
- } ).render();
- expect( normalizeHtml( rendered.outerHTML ) ).to.equal( '<p><span class="v1"></span><span class="v2"></span></p>' );
- // Make sure the child views will not re–render their elements but
- // use ones rendered by the template instance above.
- expect( v1.element ).to.equal( rendered.firstChild );
- expect( v2.element ).to.equal( rendered.lastChild );
- expect( collection._parentElement ).to.equal( rendered );
- } );
- // #117
- it( 'renders template children', () => {
- const childTplA = new Template( {
- tag: 'a'
- } );
- const childTplB = new Template( {
- tag: 'b'
- } );
- const view = new View();
- view.set( {
- foo: 'bar',
- bar: 'foo'
- } );
- const bind = Template.bind( view, view );
- // Yes, this TC is crazy in some sort of way. It's all about template
- // normalization and deep cloning and the like.
- //
- // To **really** prove the code is safe there must be a View instance,
- // which has some child bound to its attribute and... there must be a
- // Template instance (below), which also has a child bound to the same attribute.
- //
- // I know, the view instance and its template aren't even rendered.
- //
- // The truth is that madness behind this test case is so deep there are no
- // words to explain it. But what actually matters is that it proves the Template
- // class is free of "Maximum call stack size exceeded" error in certain
- // situations.
- view.template = new Template( {
- tag: 'span',
- children: [
- {
- text: bind.to( 'bar' )
- }
- ]
- } );
- const childTplC = new Template( {
- tag: 'i',
- children: [
- {
- text: bind.to( 'bar' )
- }
- ]
- } );
- const tpl = new Template( {
- tag: 'p',
- children: [
- childTplA,
- childTplB,
- childTplC
- ]
- } );
- // Make sure child instances weren't cloned.
- expect( tpl.children.get( 0 ) ).to.equal( childTplA );
- expect( tpl.children.get( 1 ) ).to.equal( childTplB );
- expect( tpl.children.get( 2 ) ).to.equal( childTplC );
- expect( normalizeHtml( tpl.render().outerHTML ) ).to.equal(
- '<p><a></a><b></b><i>foo</i></p>'
- );
- } );
- } );
- describe( 'bindings', () => {
- it( 'activates model bindings – root', () => {
- const observable = new Model( {
- foo: 'bar'
- } );
- const emitter = Object.create( EmitterMixin );
- const bind = Template.bind( observable, emitter );
- const el = new Template( {
- tag: 'div',
- attributes: {
- class: bind.to( 'foo' )
- }
- } ).render();
- expect( el.getAttribute( 'class' ) ).to.equal( 'bar' );
- observable.foo = 'baz';
- expect( el.getAttribute( 'class' ) ).to.equal( 'baz' );
- } );
- it( 'activates model bindings – children', () => {
- const observable = new Model( {
- foo: 'bar'
- } );
- const emitter = Object.create( EmitterMixin );
- const bind = Template.bind( observable, emitter );
- const el = new Template( {
- tag: 'div',
- children: [
- {
- tag: 'span',
- children: [
- {
- text: [
- bind.to( 'foo' ),
- 'static'
- ]
- }
- ]
- }
- ]
- } ).render();
- expect( el.firstChild.textContent ).to.equal( 'bar static' );
- observable.foo = 'baz';
- expect( el.firstChild.textContent ).to.equal( 'baz static' );
- } );
- } );
- } );
- describe( 'apply()', () => {
- let observable, domEmitter, bind;
- beforeEach( () => {
- el = document.createElement( 'div' );
- text = document.createTextNode( '' );
- observable = new Model( {
- foo: 'bar',
- baz: 'qux'
- } );
- domEmitter = Object.create( DomEmitterMixin );
- bind = Template.bind( observable, domEmitter );
- } );
- it( 'throws when wrong template definition', () => {
- expect( () => {
- new Template( {
- tag: 'p',
- text: 'foo'
- } ).apply( el );
- } ).to.throw( CKEditorError, /ui-template-wrong-syntax/ );
- } );
- it( 'throws when no HTMLElement passed', () => {
- expect( () => {
- new Template( {
- tag: 'p'
- } ).apply();
- } ).to.throw( CKEditorError, /ui-template-wrong-node/ );
- } );
- it( 'accepts empty template definition', () => {
- new Template( {} ).apply( el );
- new Template( {} ).apply( text );
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<div></div>' );
- expect( text.textContent ).to.equal( '' );
- } );
- describe( 'text', () => {
- it( 'applies textContent to a Text Node', () => {
- new Template( {
- text: 'abc'
- } ).apply( text );
- expect( text.textContent ).to.equal( 'abc' );
- } );
- it( 'applies new textContent to an existing Text Node of an HTMLElement', () => {
- el.textContent = 'bar';
- new Template( {
- tag: 'div',
- children: [ 'foo' ]
- } ).apply( el );
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<div>foo</div>' );
- } );
- } );
- describe( 'attributes', () => {
- it( 'applies attributes to an HTMLElement', () => {
- new Template( {
- tag: 'div',
- attributes: {
- 'class': [ 'a', 'b' ],
- x: 'bar'
- }
- } ).apply( el );
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<div class="a b" x="bar"></div>' );
- } );
- it( 'applies attributes and TextContent to a DOM tree', () => {
- el.textContent = 'abc';
- el.appendChild( document.createElement( 'span' ) );
- new Template( {
- tag: 'div',
- attributes: {
- 'class': 'parent'
- },
- children: [
- 'Children:',
- {
- tag: 'span',
- attributes: {
- class: 'child'
- }
- }
- ]
- } ).apply( el );
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<div class="parent">Children:<span class="child"></span></div>' );
- } );
- } );
- describe( 'children', () => {
- it( 'doesn\'t apply new child to an HTMLElement – Text Node', () => {
- new Template( {
- tag: 'div',
- children: [ 'foo' ]
- } ).apply( el );
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<div></div>' );
- } );
- it( 'doesn\'t apply new child to an HTMLElement – HTMLElement', () => {
- new Template( {
- tag: 'div',
- children: [
- {
- tag: 'span'
- }
- ]
- } ).apply( el );
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<div></div>' );
- } );
- it( 'doesn\'t apply new child to an HTMLElement – view', () => {
- const view = getView( {
- tag: 'span',
- attributes: {
- class: [
- 'v1'
- ]
- }
- } );
- new Template( {
- tag: 'p',
- children: [ view ]
- } ).apply( el );
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<div></div>' );
- } );
- it( 'doesn\'t apply new child to an HTMLElement – view collection', () => {
- const collection = new ViewCollection();
- collection.add( getView( {
- tag: 'span',
- attributes: {
- class: [
- 'v1'
- ]
- }
- } ) );
- new Template( {
- tag: 'p',
- children: collection
- } ).apply( el );
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<div></div>' );
- expect( collection._parentElement ).to.be.null;
- } );
- it( 'should work for deep DOM structure', () => {
- const childA = document.createElement( 'a' );
- const childB = document.createElement( 'b' );
- childA.textContent = 'anchor';
- childB.textContent = 'bold';
- el.appendChild( childA );
- el.appendChild( childB );
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<div><a>anchor</a><b>bold</b></div>' );
- const spy1 = testUtils.sinon.spy();
- const spy2 = testUtils.sinon.spy();
- const spy3 = testUtils.sinon.spy();
- observable.on( 'ku', spy1 );
- observable.on( 'kd', spy2 );
- observable.on( 'mo', spy3 );
- new Template( {
- tag: 'div',
- children: [
- {
- tag: 'a',
- on: {
- keyup: bind.to( 'ku' )
- },
- attributes: {
- class: bind.to( 'foo', val => 'applied-A-' + val ),
- id: 'applied-A'
- },
- children: [ 'Text applied to childA.' ]
- },
- {
- tag: 'b',
- on: {
- keydown: bind.to( 'kd' )
- },
- attributes: {
- class: bind.to( 'baz', val => 'applied-B-' + val ),
- id: 'applied-B'
- },
- children: [ 'Text applied to childB.' ]
- },
- 'Text which is not to be applied because it does NOT exist in original element.'
- ],
- on: {
- 'mouseover@a': bind.to( 'mo' )
- },
- attributes: {
- id: bind.to( 'foo', val => val.toUpperCase() ),
- class: bind.to( 'baz', val => 'applied-parent-' + val )
- }
- } ).apply( el );
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<div class="applied-parent-qux" id="BAR">' +
- '<a class="applied-A-bar" id="applied-A">Text applied to childA.</a>' +
- '<b class="applied-B-qux" id="applied-B">Text applied to childB.</b>' +
- '</div>' );
- observable.foo = 'updated';
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<div class="applied-parent-qux" id="UPDATED">' +
- '<a class="applied-A-updated" id="applied-A">Text applied to childA.</a>' +
- '<b class="applied-B-qux" id="applied-B">Text applied to childB.</b>' +
- '</div>' );
- document.body.appendChild( el );
- // Test "mouseover@a".
- dispatchEvent( el, 'mouseover' );
- dispatchEvent( childA, 'mouseover' );
- // Test "keyup".
- dispatchEvent( childA, 'keyup' );
- // Test "keydown".
- dispatchEvent( childB, 'keydown' );
- sinon.assert.calledOnce( spy1 );
- sinon.assert.calledOnce( spy2 );
- sinon.assert.calledOnce( spy3 );
- } );
- } );
- } );
- describe( 'bind()', () => {
- it( 'returns object', () => {
- expect( Template.bind() ).to.be.an( 'object' );
- } );
- it( 'provides "to" and "if" interface', () => {
- const bind = Template.bind();
- expect( bind ).to.have.keys( 'to', 'if' );
- expect( bind.to ).to.be.a( 'function' );
- expect( bind.if ).to.be.a( 'function' );
- } );
- describe( 'event', () => {
- let observable, domEmitter, bind;
- beforeEach( () => {
- observable = new Model( {
- foo: 'bar',
- baz: 'qux'
- } );
- domEmitter = Object.create( DomEmitterMixin );
- bind = Template.bind( observable, domEmitter );
- } );
- it( 'accepts plain binding', () => {
- const spy = testUtils.sinon.spy();
- setElement( {
- tag: 'p',
- on: {
- x: bind.to( 'a' ),
- }
- } );
- observable.on( 'a', spy );
- dispatchEvent( el, 'x' );
- sinon.assert.calledWithExactly( spy,
- sinon.match.has( 'name', 'a' ),
- sinon.match.has( 'target', el )
- );
- } );
- it( 'accepts an array of event bindings', () => {
- const spy1 = testUtils.sinon.spy();
- const spy2 = testUtils.sinon.spy();
- setElement( {
- tag: 'p',
- on: {
- x: [
- bind.to( 'a' ),
- bind.to( 'b' )
- ]
- }
- } );
- observable.on( 'a', spy1 );
- observable.on( 'b', spy2 );
- dispatchEvent( el, 'x' );
- sinon.assert.calledWithExactly( spy1,
- sinon.match.has( 'name', 'a' ),
- sinon.match.has( 'target', el )
- );
- sinon.assert.calledWithExactly( spy2,
- sinon.match.has( 'name', 'b' ),
- sinon.match.has( 'target', el )
- );
- } );
- it( 'accepts DOM selectors', () => {
- const spy1 = testUtils.sinon.spy();
- const spy2 = testUtils.sinon.spy();
- const spy3 = testUtils.sinon.spy();
- setElement( {
- tag: 'p',
- children: [
- {
- tag: 'span',
- attributes: {
- 'class': 'y',
- },
- on: {
- 'test@p': bind.to( 'c' )
- }
- },
- {
- tag: 'div',
- children: [
- {
- tag: 'span',
- attributes: {
- 'class': 'y',
- }
- }
- ],
- }
- ],
- on: {
- 'test@.y': bind.to( 'a' ),
- 'test@div': bind.to( 'b' )
- }
- } );
- observable.on( 'a', spy1 );
- observable.on( 'b', spy2 );
- observable.on( 'c', spy3 );
- // Test "test@p".
- dispatchEvent( el, 'test' );
- sinon.assert.callCount( spy1, 0 );
- sinon.assert.callCount( spy2, 0 );
- sinon.assert.callCount( spy3, 0 );
- // Test "test@.y".
- dispatchEvent( el.firstChild, 'test' );
- expect( spy1.firstCall.calledWithExactly(
- sinon.match.has( 'name', 'a' ),
- sinon.match.has( 'target', el.firstChild )
- ) ).to.be.true;
- sinon.assert.callCount( spy2, 0 );
- sinon.assert.callCount( spy3, 0 );
- // Test "test@div".
- dispatchEvent( el.lastChild, 'test' );
- sinon.assert.callCount( spy1, 1 );
- expect( spy2.firstCall.calledWithExactly(
- sinon.match.has( 'name', 'b' ),
- sinon.match.has( 'target', el.lastChild )
- ) ).to.be.true;
- sinon.assert.callCount( spy3, 0 );
- // Test "test@.y".
- dispatchEvent( el.lastChild.firstChild, 'test' );
- expect( spy1.secondCall.calledWithExactly(
- sinon.match.has( 'name', 'a' ),
- sinon.match.has( 'target', el.lastChild.firstChild )
- ) ).to.be.true;
- sinon.assert.callCount( spy2, 1 );
- sinon.assert.callCount( spy3, 0 );
- } );
- it( 'accepts function callbacks', () => {
- const spy1 = testUtils.sinon.spy();
- const spy2 = testUtils.sinon.spy();
- setElement( {
- tag: 'p',
- children: [
- {
- tag: 'span'
- }
- ],
- on: {
- x: bind.to( spy1 ),
- 'y@span': [
- bind.to( spy2 ),
- bind.to( 'c' )
- ]
- }
- } );
- dispatchEvent( el, 'x' );
- dispatchEvent( el.firstChild, 'y' );
- sinon.assert.calledWithExactly( spy1,
- sinon.match.has( 'target', el )
- );
- sinon.assert.calledWithExactly( spy2,
- sinon.match.has( 'target', el.firstChild )
- );
- } );
- it( 'supports event delegation', () => {
- const spy = testUtils.sinon.spy();
- setElement( {
- tag: 'p',
- children: [
- {
- tag: 'span'
- }
- ],
- on: {
- x: bind.to( 'a' ),
- }
- } );
- observable.on( 'a', spy );
- dispatchEvent( el.firstChild, 'x' );
- sinon.assert.calledWithExactly( spy,
- sinon.match.has( 'name', 'a' ),
- sinon.match.has( 'target', el.firstChild )
- );
- } );
- it( 'works for future elements', () => {
- const spy = testUtils.sinon.spy();
- setElement( {
- tag: 'p',
- on: {
- 'test@div': bind.to( 'a' )
- }
- } );
- observable.on( 'a', spy );
- const div = document.createElement( 'div' );
- el.appendChild( div );
- dispatchEvent( div, 'test' );
- sinon.assert.calledWithExactly( spy, sinon.match.has( 'name', 'a' ), sinon.match.has( 'target', div ) );
- } );
- } );
- describe( 'model', () => {
- let observable, emitter, bind;
- beforeEach( () => {
- observable = new Model( {
- foo: 'bar',
- baz: 'qux'
- } );
- emitter = Object.create( EmitterMixin );
- bind = Template.bind( observable, emitter );
- } );
- describe( 'to', () => {
- it( 'returns an instance of TemplateToBinding', () => {
- const spy = testUtils.sinon.spy();
- const binding = bind.to( 'foo', spy );
- expect( binding ).to.be.instanceof( TemplateToBinding );
- expect( spy.called ).to.be.false;
- expect( binding ).to.have.keys( [ 'observable', 'eventNameOrFunction', 'emitter', 'attribute', 'callback' ] );
- expect( binding.observable ).to.equal( observable );
- expect( binding.callback ).to.equal( spy );
- expect( binding.attribute ).to.equal( 'foo' );
- } );
- it( 'allows binding attribute to the observable – simple (HTMLElement attribute)', () => {
- setElement( {
- tag: 'p',
- attributes: {
- 'class': bind.to( 'foo' )
- },
- children: [ 'abc' ]
- } );
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="bar">abc</p>' );
- observable.foo = 'baz';
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="baz">abc</p>' );
- expect( el.attributes.getNamedItem( 'class' ).namespaceURI ).to.be.null;
- } );
- it( 'allows binding attribute to the observable – simple (Text Node)', () => {
- setElement( {
- tag: 'p',
- children: [
- {
- text: bind.to( 'foo' )
- }
- ]
- } );
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>bar</p>' );
- observable.foo = 'baz';
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>baz</p>' );
- } );
- it( 'allows binding attribute to the observable – value processing', () => {
- const callback = value => value > 0 ? 'positive' : 'negative';
- setElement( {
- tag: 'p',
- attributes: {
- 'class': bind.to( 'foo', callback )
- },
- children: [
- {
- text: bind.to( 'foo', callback )
- }
- ]
- } );
- observable.foo = 3;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="positive">positive</p>' );
- observable.foo = -7;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="negative">negative</p>' );
- } );
- it( 'allows binding attribute to the observable – value processing (use Node)', () => {
- const callback = ( value, node ) => {
- return ( !!node.tagName && value > 0 ) ? 'HTMLElement positive' : '';
- };
- setElement( {
- tag: 'p',
- attributes: {
- 'class': bind.to( 'foo', callback )
- },
- children: [
- {
- text: bind.to( 'foo', callback )
- }
- ]
- } );
- observable.foo = 3;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="HTMLElement positive"></p>' );
- observable.foo = -7;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p></p>' );
- } );
- it( 'allows binding attribute to the observable – custom callback', () => {
- setElement( {
- tag: 'p',
- attributes: {
- 'class': bind.to( 'foo', ( value, el ) => {
- el.innerHTML = value;
- if ( value == 'changed' ) {
- return value;
- }
- } )
- }
- } );
- observable.foo = 'moo';
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>moo</p>' );
- observable.foo = 'changed';
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="changed">changed</p>' );
- } );
- it( 'allows binding attribute to the observable – array of bindings (HTMLElement attribute)', () => {
- setElement( {
- tag: 'p',
- attributes: {
- 'class': [
- 'ck-class',
- bind.to( 'foo' ),
- bind.to( 'baz' ),
- bind.to( 'foo', value => `foo-is-${value}` ),
- 'ck-end'
- ]
- },
- children: [ 'abc' ]
- } );
- observable.foo = 'a';
- observable.baz = 'b';
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="ck-class a b foo-is-a ck-end">abc</p>' );
- observable.foo = 'c';
- observable.baz = 'd';
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="ck-class c d foo-is-c ck-end">abc</p>' );
- } );
- it( 'allows binding attribute to the observable – array of bindings (Text Node)', () => {
- setElement( {
- tag: 'p',
- attributes: {
- },
- children: [
- {
- text: [
- 'ck-class',
- bind.to( 'foo' ),
- bind.to( 'baz' ),
- bind.to( 'foo', value => `foo-is-${value}` ),
- 'ck-end'
- ]
- }
- ]
- } );
- observable.foo = 'a';
- observable.baz = 'b';
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>ck-class a b foo-is-a ck-end</p>' );
- observable.foo = 'c';
- observable.baz = 'd';
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>ck-class c d foo-is-c ck-end</p>' );
- } );
- it( 'allows binding attribute to the observable – falsy values', () => {
- setElement( {
- tag: 'p',
- attributes: {
- simple: bind.to( 'foo' ),
- complex: [ null, bind.to( 'foo' ), undefined, false ],
- zero: [ 0, bind.to( 'foo' ) ],
- emptystring: [ '', bind.to( 'foo' ) ]
- },
- children: [ 'abc' ]
- } );
- observable.foo = 'bar';
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p complex="bar" emptystring="bar" simple="bar" zero="0 bar">abc</p>' );
- observable.foo = 0;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p complex="0" emptystring="0" simple="0" zero="0 0">abc</p>' );
- observable.foo = false;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p zero="0">abc</p>' );
- observable.foo = null;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p zero="0">abc</p>' );
- observable.foo = undefined;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p zero="0">abc</p>' );
- observable.foo = '';
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p zero="0">abc</p>' );
- } );
- it( 'allows binding attribute to the observable – a custom namespace', () => {
- setElement( {
- tag: 'p',
- attributes: {
- class: {
- ns: 'foo',
- value: bind.to( 'foo' )
- },
- custom: {
- ns: 'foo',
- value: [
- bind.to( 'foo' ),
- bind.to( 'baz' )
- ]
- }
- },
- children: [ 'abc' ]
- } );
- observable.foo = 'bar';
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="bar" custom="bar qux">abc</p>' );
- expect( el.attributes.getNamedItem( 'class' ).namespaceURI ).to.equal( 'foo' );
- observable.foo = 'baz';
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="baz" custom="baz qux">abc</p>' );
- expect( el.attributes.getNamedItem( 'class' ).namespaceURI ).to.equal( 'foo' );
- } );
- } );
- describe( 'if', () => {
- it( 'returns an object which describes the binding', () => {
- const spy = testUtils.sinon.spy();
- const binding = bind.if( 'foo', 'whenTrue', spy );
- expect( binding ).to.be.instanceof( TemplateIfBinding );
- expect( spy.called ).to.be.false;
- expect( binding ).to.have.keys( [ 'observable', 'emitter', 'attribute', 'callback', 'valueIfTrue' ] );
- expect( binding.observable ).to.equal( observable );
- expect( binding.callback ).to.equal( spy );
- expect( binding.attribute ).to.equal( 'foo' );
- expect( binding.valueIfTrue ).to.equal( 'whenTrue' );
- } );
- it( 'allows binding attribute to the observable – presence of an attribute (HTMLElement attribute)', () => {
- setElement( {
- tag: 'p',
- attributes: {
- 'class': bind.if( 'foo' )
- },
- children: [ 'abc' ]
- } );
- observable.foo = 'bar';
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="true">abc</p>' );
- observable.foo = true;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="true">abc</p>' );
- observable.foo = 0;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="true">abc</p>' );
- observable.foo = false;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>abc</p>' );
- observable.foo = null;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>abc</p>' );
- observable.foo = undefined;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>abc</p>' );
- observable.foo = '';
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>abc</p>' );
- } );
- // TODO: Is this alright? It makes sense but it's pretty useless. Text Node cannot be
- // removed just like an attribute of some HTMLElement.
- it( 'allows binding attribute to the observable – presence of an attribute (Text Node)', () => {
- setElement( {
- tag: 'p',
- children: [
- {
- text: bind.if( 'foo' )
- }
- ]
- } );
- observable.foo = 'abc';
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>true</p>' );
- observable.foo = true;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>true</p>' );
- observable.foo = 0;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>true</p>' );
- observable.foo = false;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p></p>' );
- observable.foo = null;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p></p>' );
- observable.foo = undefined;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p></p>' );
- observable.foo = '';
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p></p>' );
- } );
- it( 'allows binding attribute to the observable – value of an attribute (HTMLElement attribute)', () => {
- setElement( {
- tag: 'p',
- attributes: {
- 'class': bind.if( 'foo', 'bar' )
- },
- children: [ 'abc' ]
- } );
- observable.foo = 'bar';
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="bar">abc</p>' );
- observable.foo = true;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="bar">abc</p>' );
- observable.foo = 0;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="bar">abc</p>' );
- observable.foo = 64;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="bar">abc</p>' );
- observable.foo = false;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>abc</p>' );
- observable.foo = null;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>abc</p>' );
- observable.foo = undefined;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>abc</p>' );
- } );
- it( 'allows binding attribute to the observable – value of an attribute (Text Node)', () => {
- setElement( {
- tag: 'p',
- children: [
- {
- text: bind.if( 'foo', 'bar' )
- }
- ]
- } );
- observable.foo = 'bar';
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>bar</p>' );
- observable.foo = false;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p></p>' );
- observable.foo = 64;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>bar</p>' );
- } );
- it( 'allows binding attribute to the observable – array of bindings (HTMLElement attribute)', () => {
- setElement( {
- tag: 'p',
- attributes: {
- 'class': [
- 'ck-class',
- bind.if( 'foo', 'foo-set' ),
- bind.if( 'bar', 'bar-not-set', ( value ) => !value ),
- 'ck-end'
- ]
- },
- children: [ 'abc' ]
- } );
- observable.foo = observable.bar = true;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="ck-class foo-set ck-end">abc</p>' );
- observable.foo = observable.bar = false;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="ck-class bar-not-set ck-end">abc</p>' );
- } );
- it( 'allows binding attribute to the observable – value of an attribute processed by a callback', () => {
- setElement( {
- tag: 'p',
- attributes: {
- 'class': bind.if( 'foo', 'there–is–no–foo', value => !value )
- },
- children: [ 'abc' ]
- } );
- observable.foo = 'bar';
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>abc</p>' );
- observable.foo = false;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="there–is–no–foo">abc</p>' );
- observable.foo = 64;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>abc</p>' );
- } );
- it( 'allows binding attribute to the observable – value of an attribute processed by a callback (use Node)', () => {
- setElement( {
- tag: 'p',
- attributes: {
- 'class': bind.if( 'foo', 'eqls-tag-name', ( value, el ) => el.tagName === value )
- },
- children: [ 'abc' ]
- } );
- observable.foo = 'bar';
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>abc</p>' );
- observable.foo = 'P';
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="eqls-tag-name">abc</p>' );
- observable.foo = 64;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>abc</p>' );
- } );
- it( 'allows binding attribute to the observable – falsy values', () => {
- setElement( {
- tag: 'p',
- attributes: {
- 'class': bind.if( 'foo', 'foo-is-set' )
- },
- children: [ 'abc' ]
- } );
- observable.foo = 'bar';
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="foo-is-set">abc</p>' );
- observable.foo = true;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="foo-is-set">abc</p>' );
- observable.foo = 0;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="foo-is-set">abc</p>' );
- observable.foo = false;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>abc</p>' );
- observable.foo = null;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>abc</p>' );
- observable.foo = undefined;
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>abc</p>' );
- observable.foo = '';
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>abc</p>' );
- } );
- } );
- it( 'works with Template#apply() – root element', () => {
- new Template( {
- tag: 'div',
- attributes: {
- class: bind.to( 'foo' )
- }
- } ).apply( el );
- expect( el.getAttribute( 'class' ) ).to.equal( 'bar' );
- observable.foo = 'baz';
- expect( el.getAttribute( 'class' ) ).to.equal( 'baz' );
- } );
- it( 'works with Template#apply() – children', () => {
- const el = document.createElement( 'div' );
- const child = document.createElement( 'span' );
- child.textContent = 'foo';
- el.appendChild( child );
- new Template( {
- tag: 'div',
- children: [
- {
- tag: 'span',
- children: [
- {
- text: bind.to( 'foo' )
- }
- ]
- }
- ]
- } ).apply( el );
- expect( child.textContent ).to.equal( 'bar' );
- observable.foo = 'baz';
- expect( child.textContent ).to.equal( 'baz' );
- } );
- } );
- } );
- describe( 'extend()', () => {
- let observable, emitter, bind;
- beforeEach( () => {
- observable = new Model( {
- foo: 'bar',
- baz: 'qux'
- } );
- emitter = Object.create( DomEmitterMixin );
- bind = Template.bind( observable, emitter );
- } );
- it( 'does not modify passed definition', () => {
- const def = {
- tag: 'p',
- attributes: {
- a: 'foo',
- }
- };
- const ext = {
- attributes: {
- b: 'bar'
- }
- };
- const tpl = new Template( def );
- Template.extend( tpl, ext );
- expect( ext.attributes.b ).to.equal( 'bar' );
- expect( tpl.attributes.a[ 0 ] ).to.equal( 'foo' );
- expect( tpl.attributes.b[ 0 ] ).to.equal( 'bar' );
- } );
- it( 'logs a warning if an element has already been rendered', () => {
- const spy = testUtils.sinon.stub( log, 'warn' );
- const tpl = new Template( {
- tag: 'p'
- } );
- Template.extend( tpl, {
- attributes: {
- class: 'foo'
- }
- } );
- tpl.render();
- Template.extend( tpl, {
- attributes: {
- class: 'bar'
- }
- } );
- sinon.assert.calledOnce( spy );
- sinon.assert.calledWithExactly( spy, sinon.match( /^template-extend-render/ ) );
- } );
- describe( 'attributes', () => {
- it( 'extends existing - simple', () => {
- extensionTest(
- {
- tag: 'p',
- attributes: {
- a: 'b'
- }
- },
- {
- attributes: {
- a: 'c'
- }
- },
- '<p a="b c"></p>'
- );
- } );
- it( 'extends existing - complex #1', () => {
- extensionTest(
- {
- tag: 'p',
- attributes: {
- a: [ 'b', 'c' ]
- }
- },
- {
- attributes: {
- a: 'd'
- }
- },
- '<p a="b c d"></p>'
- );
- } );
- it( 'extends existing - complex #2', () => {
- extensionTest(
- {
- tag: 'p',
- attributes: {
- a: {
- value: 'b'
- }
- }
- },
- {
- attributes: {
- a: [ 'c', 'd' ]
- }
- },
- '<p a="b c d"></p>'
- );
- } );
- it( 'extends existing - complex #3', () => {
- extensionTest(
- {
- tag: 'p',
- attributes: {
- a: [ 'b' ]
- }
- },
- {
- attributes: {
- a: [ 'c', 'd' ]
- }
- },
- '<p a="b c d"></p>'
- );
- } );
- it( 'extends existing - bindings #1', () => {
- const el = extensionTest(
- {
- tag: 'p',
- attributes: {
- a: bind.to( 'foo' )
- }
- },
- {
- attributes: {
- a: [ 'c', 'd' ]
- }
- },
- '<p a="bar c d"></p>'
- );
- observable.foo = 'baz';
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p a="baz c d"></p>' );
- } );
- it( 'extends existing - bindings #2', () => {
- const el = extensionTest(
- {
- tag: 'p',
- attributes: {
- a: [ 'b', bind.to( 'foo' ) ]
- }
- },
- {
- attributes: {
- a: [ 'c', bind.to( 'baz' ) ]
- }
- },
- '<p a="b bar c qux"></p>'
- );
- observable.foo = 'abc';
- observable.baz = 'def';
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p a="b abc c def"></p>' );
- } );
- it( 'creates new - no attributes', () => {
- extensionTest(
- {
- tag: 'p',
- },
- {
- attributes: {
- c: 'd'
- }
- },
- '<p c="d"></p>'
- );
- } );
- it( 'creates new - simple', () => {
- extensionTest(
- {
- tag: 'p',
- attributes: {
- a: 'b'
- }
- },
- {
- attributes: {
- c: 'd'
- }
- },
- '<p a="b" c="d"></p>'
- );
- } );
- it( 'creates new - array', () => {
- extensionTest(
- {
- tag: 'p',
- attributes: {
- a: 'b'
- }
- },
- {
- attributes: {
- c: [ 'd', 'e' ]
- }
- },
- '<p a="b" c="d e"></p>'
- );
- } );
- it( 'creates new - bindings #1', () => {
- const el = extensionTest(
- {
- tag: 'p',
- attributes: {
- a: 'b'
- }
- },
- {
- attributes: {
- c: bind.to( 'foo' )
- }
- },
- '<p a="b" c="bar"></p>'
- );
- observable.foo = 'abc';
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p a="b" c="abc"></p>' );
- } );
- it( 'creates new - bindings #2', () => {
- const el = extensionTest(
- {
- tag: 'p',
- attributes: {
- a: 'b'
- }
- },
- {
- attributes: {
- c: [ 'd', bind.to( 'foo' ) ]
- }
- },
- '<p a="b" c="d bar"></p>'
- );
- observable.foo = 'abc';
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p a="b" c="d abc"></p>' );
- } );
- } );
- describe( 'text', () => {
- it( 'extends existing - simple', () => {
- const el = extensionTest(
- {
- tag: 'p',
- children: [
- 'foo'
- ]
- },
- {
- children: [
- 'bar'
- ]
- },
- '<p>foobar</p>'
- );
- expect( el.childNodes ).to.have.length( 1 );
- } );
- it( 'extends existing - complex #1', () => {
- const el = extensionTest(
- {
- tag: 'p',
- children: [
- { text: 'foo' }
- ]
- },
- {
- children: [
- 'bar'
- ]
- },
- '<p>foobar</p>'
- );
- expect( el.childNodes ).to.have.length( 1 );
- } );
- it( 'extends existing - complex #2', () => {
- const el = extensionTest(
- {
- tag: 'p',
- children: [
- { text: 'foo' }
- ]
- },
- {
- children: [
- { text: 'bar' }
- ]
- },
- '<p>foobar</p>'
- );
- expect( el.childNodes ).to.have.length( 1 );
- } );
- it( 'extends existing - bindings #1', () => {
- const el = extensionTest(
- {
- tag: 'p',
- children: [
- { text: bind.to( 'foo' ) }
- ]
- },
- {
- children: [
- 'abc'
- ]
- },
- '<p>bar abc</p>'
- );
- observable.foo = 'asd';
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>asd abc</p>' );
- expect( el.childNodes ).to.have.length( 1 );
- } );
- it( 'extends existing - bindings #2', () => {
- const el = extensionTest(
- {
- tag: 'p',
- children: [
- 'abc'
- ]
- },
- {
- children: [
- { text: bind.to( 'foo' ) }
- ]
- },
- '<p>abc bar</p>'
- );
- observable.foo = 'asd';
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>abc asd</p>' );
- expect( el.childNodes ).to.have.length( 1 );
- } );
- it( 'extends existing - bindings #3', () => {
- const el = extensionTest(
- {
- tag: 'p',
- children: [
- { text: bind.to( 'foo' ) },
- 'X'
- ]
- },
- {
- children: [
- { text: bind.to( 'baz' ) },
- 'Y'
- ]
- },
- '<p>bar quxXY</p>'
- );
- observable.foo = 'A';
- observable.baz = 'B';
- expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p>A BXY</p>' );
- expect( el.childNodes ).to.have.length( 2 );
- } );
- } );
- describe( 'children', () => {
- it( 'should throw when the number of children does not correspond', () => {
- expect( () => {
- extensionTest(
- {
- tag: 'p',
- children: [
- 'foo'
- ]
- },
- {
- children: [
- 'foo',
- 'bar'
- ]
- },
- 'it should fail'
- );
- } ).to.throw( CKEditorError, /ui-template-extend-children-mismatch/ );
- } );
- it( 'should throw when no children in target but extending one', () => {
- expect( () => {
- extensionTest(
- {
- tag: 'p',
- },
- {
- children: [
- {
- tag: 'b'
- }
- ]
- },
- 'it should fail'
- );
- } ).to.throw( CKEditorError, /ui-template-extend-children-mismatch/ );
- } );
- it( 'should throw when the number of children does not correspond on some deeper level', () => {
- expect( () => {
- extensionTest(
- {
- tag: 'p',
- children: [
- {
- tag: 'span',
- attributes: {
- class: 'A'
- },
- children: [
- 'A',
- {
- tag: 'span',
- attributes: {
- class: 'AA'
- },
- children: [
- 'AA'
- ]
- }
- ]
- }
- ]
- },
- {
- children: [
- {
- attributes: {
- class: 'B'
- },
- children: [
- 'B'
- ]
- }
- ]
- },
- 'it should fail'
- );
- } ).to.throw( CKEditorError, /ui-template-extend-children-mismatch/ );
- } );
- it( 'extends existing - simple', () => {
- extensionTest(
- {
- tag: 'p',
- children: [
- {
- tag: 'span',
- attributes: {
- class: 'foo'
- }
- }
- ]
- },
- {
- children: [
- {
- tag: 'span',
- attributes: {
- class: 'bar'
- }
- }
- ]
- },
- '<p><span class="foo bar"></span></p>'
- );
- } );
- it( 'extends existing - complex', () => {
- extensionTest(
- {
- tag: 'p',
- children: [
- {
- tag: 'span',
- attributes: {
- class: 'A'
- },
- children: [
- 'A',
- {
- tag: 'span',
- attributes: {
- class: 'AA'
- },
- children: [
- 'AA'
- ]
- }
- ]
- }
- ]
- },
- {
- children: [
- {
- tag: 'span',
- attributes: {
- class: 'B'
- },
- children: [
- 'B',
- {
- tag: 'span',
- attributes: {
- class: 'BB'
- },
- children: [
- 'BB'
- ]
- }
- ]
- }
- ]
- },
- '<p><span class="A B">AB<span class="AA BB">AABB</span></span></p>'
- );
- } );
- it( 'allows extending a particular child', () => {
- const template = new Template( {
- tag: 'p',
- children: [
- {
- tag: 'span',
- attributes: {
- class: 'foo'
- }
- }
- ]
- } );
- Template.extend( template.children.get( 0 ), {
- attributes: {
- class: 'bar'
- }
- } );
- expect( template.render().outerHTML ).to.equal( '<p><span class="foo bar"></span></p>' );
- } );
- it( 'allows extending a particular child – recursively', () => {
- const template = new Template( {
- tag: 'p',
- children: [
- {
- tag: 'span',
- attributes: {
- class: 'A'
- },
- children: [
- 'A',
- {
- tag: 'span',
- attributes: {
- class: 'AA'
- },
- children: [
- 'AA'
- ]
- }
- ]
- }
- ]
- } );
- Template.extend( template.children.get( 0 ), {
- attributes: {
- class: 'B',
- },
- children: [
- 'B',
- {
- attributes: {
- class: 'BB'
- }
- }
- ]
- } );
- expect( template.render().outerHTML ).to.equal( '<p><span class="A B">AB<span class="AA BB">AA</span></span></p>' );
- } );
- } );
- describe( 'listeners', () => {
- it( 'extends existing', () => {
- const spy1 = testUtils.sinon.spy();
- const spy2 = testUtils.sinon.spy();
- const spy3 = testUtils.sinon.spy();
- const spy4 = testUtils.sinon.spy();
- const spy5 = testUtils.sinon.spy();
- observable.on( 'A', spy1 );
- observable.on( 'C', spy2 );
- observable.on( 'B', spy3 );
- observable.on( 'D', spy4 );
- const el = extensionTest(
- {
- tag: 'p',
- children: [
- {
- tag: 'span'
- }
- ],
- on: {
- click: bind.to( 'A' ),
- 'click@span': [
- bind.to( 'B' ),
- bind.to( spy5 )
- ]
- }
- },
- {
- on: {
- click: bind.to( 'C' ),
- 'click@span': bind.to( 'D' )
- }
- },
- '<p><span></span></p>'
- );
- dispatchEvent( el, 'click' );
- expect( spy1.calledOnce ).to.be.true;
- expect( spy2.calledOnce ).to.be.true;
- expect( spy3.called ).to.be.false;
- expect( spy4.called ).to.be.false;
- expect( spy5.called ).to.be.false;
- dispatchEvent( el.firstChild, 'click' );
- expect( spy1.calledTwice ).to.be.true;
- expect( spy2.calledTwice ).to.be.true;
- expect( spy3.calledOnce ).to.be.true;
- expect( spy4.calledOnce ).to.be.true;
- expect( spy5.calledOnce ).to.be.true;
- } );
- it( 'creates new', () => {
- const spy1 = testUtils.sinon.spy();
- const spy2 = testUtils.sinon.spy();
- const spy3 = testUtils.sinon.spy();
- observable.on( 'A', spy1 );
- observable.on( 'B', spy2 );
- const el = extensionTest(
- {
- tag: 'p',
- children: [
- {
- tag: 'span'
- }
- ],
- },
- {
- on: {
- click: bind.to( 'A' ),
- 'click@span': [
- bind.to( 'B' ),
- bind.to( spy3 )
- ]
- }
- },
- '<p><span></span></p>'
- );
- dispatchEvent( el, 'click' );
- expect( spy1.calledOnce ).to.be.true;
- expect( spy2.called ).to.be.false;
- expect( spy3.called ).to.be.false;
- dispatchEvent( el.firstChild, 'click' );
- expect( spy1.calledTwice ).to.be.true;
- expect( spy2.calledOnce ).to.be.true;
- expect( spy3.calledOnce ).to.be.true;
- } );
- } );
- } );
- } );
- function setElement( template ) {
- el = new Template( template ).render();
- document.body.appendChild( el );
- }
- function extensionTest( baseDefinition, extendedDefinition, expectedHtml ) {
- const template = new Template( baseDefinition );
- Template.extend( template, extendedDefinition );
- const el = template.render();
- document.body.appendChild( el );
- expect( normalizeHtml( el.outerHTML ) ).to.equal( expectedHtml );
- return el;
- }
- function dispatchEvent( el, domEvtName ) {
- if ( !el.parentNode ) {
- throw new Error( 'To dispatch an event, element must be in DOM. Otherwise #target is null.' );
- }
- el.dispatchEvent( new Event( domEvtName, {
- bubbles: true
- } ) );
- }
- function getView( def ) {
- const view = new View();
- view.template = new Template( def );
- return view;
- }
|