| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121 |
- /**
- * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
- /* global document, HTMLElement */
- 'use strict';
- var modules = bender.amd.require( 'ckeditor', 'ui/view' );
- var view;
- describe( 'plain view', function() {
- beforeEach( 'Create a test view instance', function() {
- var View = modules[ 'ui/view' ];
- view = new View( {
- a: 'foo',
- b: 42
- } );
- } );
- it( 'accepts the model', function() {
- expect( view ).to.have.deep.property( 'model.a', 'foo' );
- expect( view ).to.have.deep.property( 'model.b', 42 );
- } );
- it( 'has no default element', function() {
- expect( view.el ).to.be.null();
- } );
- it( 'has no default template', function() {
- expect( view.template ).to.be.undefined();
- } );
- it( 'has no default regions', function() {
- expect( view.regions.length ).to.be.equal( 0 );
- } );
- } );
- describe( 'rich view', function() {
- beforeEach( 'Create a test view instance', function() {
- var View = modules[ 'ui/view' ];
- var Component = class extends View {
- constructor( model ) {
- super( model );
- this.template = {
- tag: 'p',
- attributes: {
- 'class': 'a',
- x: this.bindModel( 'plain' )
- },
- text: this.bindModel( 'text' ),
- children: [
- {
- tag: 'b',
- text: 'c',
- attributes: {
- y: this.bindModel( 'augmented', function( el, value ) {
- return ( value > 0 ? 'positive' : 'negative' );
- } )
- }
- },
- {
- tag: 'i',
- text: 'd',
- attributes: {
- z: this.bindModel( 'custom', function( el, value ) {
- el.innerHTML = value;
- if ( value == 'foo' ) {
- return value;
- }
- } )
- }
- }
- ]
- };
- }
- };
- view = new Component( {
- plain: 'z',
- augmented: 7,
- custom: 'moo',
- text: 'bar'
- } );
- } );
- it( 'renders the element', function() {
- expect( view.el ).to.be.instanceof( HTMLElement );
- expect( view.el.parentNode ).to.be.null();
- expect( getOuterHtml( view.el ) ).to.be.equal( '<p class="a" x="z">bar<b y="positive">c</b><i>moo</i></p>' );
- } );
- it( 'reacts to changes in model', function() {
- view.model.plain = 'x';
- expect( getOuterHtml( view.el ) ).to.be.equal( '<p class="a" x="x">bar<b y="positive">c</b><i>moo</i></p>' );
- view.model.augmented = 2;
- expect( getOuterHtml( view.el ) ).to.be.equal( '<p class="a" x="x">bar<b y="positive">c</b><i>moo</i></p>' );
- view.model.augmented = -2;
- expect( getOuterHtml( view.el ) ).to.be.equal( '<p class="a" x="x">bar<b y="negative">c</b><i>moo</i></p>' );
- view.model.custom = 'foo';
- expect( getOuterHtml( view.el ) ).to.be.equal( '<p class="a" x="x">bar<b y="negative">c</b><i z="foo">foo</i></p>' );
- view.model.text = 'baz';
- expect( getOuterHtml( view.el ) ).to.be.equal( '<p class="a" x="x">baz</p>' );
- } );
- } );
- function getOuterHtml( el ) {
- var container = document.createElement( 'div' );
- container.appendChild( el.cloneNode( 1 ) );
- return container.innerHTML;
- }
|