/** * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md. */ /* bender-tags: ui */ /* global HTMLElement */ 'use strict'; import testUtils from '/tests/_utils/utils.js'; import Template from '/ckeditor5/core/ui/template.js'; testUtils.createSinonSandbox(); describe( 'Template', () => { describe( 'constructor', () => { it( 'accepts the definition', () => { let def = { tag: 'p' }; expect( new Template( def ).def ).to.equal( def ); } ); } ); describe( 'render', () => { it( 'returns null when no definition', () => { expect( new Template().render() ).to.be.null; } ); it( 'creates an element', () => { let el = new Template( { tag: 'p', attrs: { 'class': [ 'a', 'b' ], x: 'bar' }, text: 'foo' } ).render(); expect( el ).to.be.instanceof( HTMLElement ); expect( el.parentNode ).to.be.null; expect( el.outerHTML ).to.be.equal( '

foo

' ); } ); it( 'creates element\'s children', () => { let el = new Template( { tag: 'p', attrs: { a: 'A' }, children: [ { tag: 'b', text: 'B' }, { tag: 'i', text: 'C', children: [ { tag: 'b', text: 'D' } ] } ] } ).render(); expect( el.outerHTML ).to.be.equal( '

BCD

' ); } ); describe( 'callback', () => { it( 'works for attributes', () => { let spy1 = testUtils.sinon.spy(); let spy2 = testUtils.sinon.spy(); let el = new Template( { tag: 'p', attrs: { 'class': spy1 }, children: [ { tag: 'span', attrs: { id: spy2 } } ] } ).render(); sinon.assert.calledWithExactly( spy1, el, sinon.match.func ); sinon.assert.calledWithExactly( spy2, el.firstChild, sinon.match.func ); spy1.firstCall.args[ 1 ]( el, 'foo' ); spy2.firstCall.args[ 1 ]( el.firstChild, 'bar' ); expect( el.outerHTML ).to.be.equal( '

' ); } ); it( 'works for "text" property', () => { let spy1 = testUtils.sinon.spy(); let spy2 = testUtils.sinon.spy(); let el = new Template( { tag: 'p', text: spy1, children: [ { tag: 'span', text: spy2 } ] } ).render(); sinon.assert.calledWithExactly( spy1, el, sinon.match.func ); sinon.assert.calledWithExactly( spy2, el.firstChild, sinon.match.func ); spy2.firstCall.args[ 1 ]( el.firstChild, 'bar' ); expect( el.outerHTML ).to.be.equal( '

bar

' ); spy1.firstCall.args[ 1 ]( el, 'foo' ); expect( el.outerHTML ).to.be.equal( '

foo

' ); } ); it( 'works for "on" property', () => { let spy1 = testUtils.sinon.spy(); let spy2 = testUtils.sinon.spy(); let spy3 = testUtils.sinon.spy(); let spy4 = testUtils.sinon.spy(); let el = new Template( { tag: 'p', children: [ { tag: 'span', on: { bar: spy2 } } ], on: { foo: spy1, baz: [ spy3, spy4 ] } } ).render(); sinon.assert.calledWithExactly( spy1, el, 'foo', null ); sinon.assert.calledWithExactly( spy2, el.firstChild, 'bar', null ); sinon.assert.calledWithExactly( spy3, el, 'baz', null ); sinon.assert.calledWithExactly( spy4, el, 'baz', null ); } ); it( 'works for "on" property with selectors', () => { let spy1 = testUtils.sinon.spy(); let spy2 = testUtils.sinon.spy(); let spy3 = testUtils.sinon.spy(); let spy4 = testUtils.sinon.spy(); let el = new Template( { tag: 'p', children: [ { tag: 'span', attrs: { 'id': 'x' } }, { tag: 'span', attrs: { 'class': 'y' }, on: { 'bar@p': spy2 } }, ], on: { 'foo@span': spy1, 'baz@.y': [ spy3, spy4 ] } } ).render(); sinon.assert.calledWithExactly( spy1, el, 'foo', 'span' ); sinon.assert.calledWithExactly( spy2, el.lastChild, 'bar', 'p' ); sinon.assert.calledWithExactly( spy3, el, 'baz', '.y' ); sinon.assert.calledWithExactly( spy4, el, 'baz', '.y' ); } ); } ); } ); } );