view.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. /**
  2. * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* global document, HTMLElement */
  6. 'use strict';
  7. var modules = bender.amd.require( 'ckeditor', 'ui/view' );
  8. var view;
  9. describe( 'plain view', function() {
  10. beforeEach( 'Create a test view instance', function() {
  11. var View = modules[ 'ui/view' ];
  12. view = new View( {
  13. a: 'foo',
  14. b: 42
  15. } );
  16. } );
  17. it( 'accepts the model', function() {
  18. expect( view ).to.have.deep.property( 'model.a', 'foo' );
  19. expect( view ).to.have.deep.property( 'model.b', 42 );
  20. } );
  21. it( 'has no default element', function() {
  22. expect( view.el ).to.be.null();
  23. } );
  24. it( 'has no default template', function() {
  25. expect( view.template ).to.be.undefined();
  26. } );
  27. it( 'has no default regions', function() {
  28. expect( view.regions.length ).to.be.equal( 0 );
  29. } );
  30. } );
  31. describe( 'rich view', function() {
  32. beforeEach( 'Create a test view instance', function() {
  33. var View = modules[ 'ui/view' ];
  34. var Component = class extends View {
  35. constructor( model ) {
  36. super( model );
  37. this.template = {
  38. tag: 'p',
  39. attributes: {
  40. 'class': 'a',
  41. x: this.bindModel( 'plain' )
  42. },
  43. text: this.bindModel( 'text' ),
  44. children: [
  45. {
  46. tag: 'b',
  47. text: 'c',
  48. attributes: {
  49. y: this.bindModel( 'augmented', function( el, value ) {
  50. return ( value > 0 ? 'positive' : 'negative' );
  51. } )
  52. }
  53. },
  54. {
  55. tag: 'i',
  56. text: 'd',
  57. attributes: {
  58. z: this.bindModel( 'custom', function( el, value ) {
  59. el.innerHTML = value;
  60. if ( value == 'foo' ) {
  61. return value;
  62. }
  63. } )
  64. }
  65. }
  66. ]
  67. };
  68. }
  69. };
  70. view = new Component( {
  71. plain: 'z',
  72. augmented: 7,
  73. custom: 'moo',
  74. text: 'bar'
  75. } );
  76. } );
  77. it( 'renders the element', function() {
  78. expect( view.el ).to.be.instanceof( HTMLElement );
  79. expect( view.el.parentNode ).to.be.null();
  80. expect( getOuterHtml( view.el ) ).to.be.equal( '<p class="a" x="z">bar<b y="positive">c</b><i>moo</i></p>' );
  81. } );
  82. it( 'reacts to changes in model', function() {
  83. view.model.plain = 'x';
  84. expect( getOuterHtml( view.el ) ).to.be.equal( '<p class="a" x="x">bar<b y="positive">c</b><i>moo</i></p>' );
  85. view.model.augmented = 2;
  86. expect( getOuterHtml( view.el ) ).to.be.equal( '<p class="a" x="x">bar<b y="positive">c</b><i>moo</i></p>' );
  87. view.model.augmented = -2;
  88. expect( getOuterHtml( view.el ) ).to.be.equal( '<p class="a" x="x">bar<b y="negative">c</b><i>moo</i></p>' );
  89. view.model.custom = 'foo';
  90. expect( getOuterHtml( view.el ) ).to.be.equal( '<p class="a" x="x">bar<b y="negative">c</b><i z="foo">foo</i></p>' );
  91. view.model.text = 'baz';
  92. expect( getOuterHtml( view.el ) ).to.be.equal( '<p class="a" x="x">baz</p>' );
  93. } );
  94. } );
  95. function getOuterHtml( el ) {
  96. var container = document.createElement( 'div' );
  97. container.appendChild( el.cloneNode( 1 ) );
  98. return container.innerHTML;
  99. }