8
0

labeledinputview.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. import View from '../../src/view';
  6. import LabeledInputView from '../../src/labeledinput/labeledinputview';
  7. import InputView from '../../src/inputtext/inputtextview';
  8. import LabelView from '../../src/label/labelview';
  9. describe( 'LabeledInputView', () => {
  10. const locale = {};
  11. let view;
  12. beforeEach( () => {
  13. view = new LabeledInputView( locale, InputView );
  14. view.render();
  15. } );
  16. describe( 'constructor()', () => {
  17. it( 'should set view#locale', () => {
  18. expect( view.locale ).to.deep.equal( locale );
  19. } );
  20. it( 'should set view#errorText', () => {
  21. expect( view.errorText ).to.be.null;
  22. } );
  23. it( 'should set view#infoText', () => {
  24. expect( view.infoText ).to.be.null;
  25. } );
  26. it( 'should create view#inputView', () => {
  27. expect( view.inputView ).to.instanceOf( InputView );
  28. } );
  29. it( 'should create view#labelView', () => {
  30. expect( view.labelView ).to.instanceOf( LabelView );
  31. } );
  32. it( 'should create view#statusView', () => {
  33. expect( view.statusView ).to.instanceOf( View );
  34. expect( view.statusView.element.tagName ).to.equal( 'DIV' );
  35. expect( view.statusView.element.classList.contains( 'ck' ) ).to.be.true;
  36. expect( view.statusView.element.classList.contains( 'ck-labeled-input__status' ) ).to.be.true;
  37. } );
  38. it( 'should pair #inputView and #labelView by unique id', () => {
  39. expect( view.labelView.for ).to.equal( view.inputView.id );
  40. } );
  41. it( 'should pair #inputView and #statusView by unique id', () => {
  42. expect( view.inputView.ariaDesribedById ).to.equal( view.statusView.element.id );
  43. } );
  44. } );
  45. describe( 'template', () => {
  46. it( 'should have the CSS class', () => {
  47. expect( view.element.classList.contains( 'ck' ) ).to.be.true;
  48. expect( view.element.classList.contains( 'ck-labeled-input' ) ).to.be.true;
  49. } );
  50. it( 'should have label view', () => {
  51. expect( view.template.children[ 0 ] ).to.equal( view.labelView );
  52. } );
  53. it( 'should have input view', () => {
  54. expect( view.template.children[ 1 ] ).to.equal( view.inputView );
  55. } );
  56. it( 'should have the status container', () => {
  57. expect( view.template.children[ 2 ] ).to.equal( view.statusView );
  58. } );
  59. describe( 'DOM bindings', () => {
  60. describe( 'class', () => {
  61. it( 'should react on view#isReadOnly', () => {
  62. view.isReadOnly = false;
  63. expect( view.element.classList.contains( 'ck-disabled' ) ).to.be.false;
  64. view.isReadOnly = true;
  65. expect( view.element.classList.contains( 'ck-disabled' ) ).to.be.true;
  66. } );
  67. } );
  68. describe( 'status container', () => {
  69. it( 'should react on view#errorText', () => {
  70. const statusElement = view.statusView.element;
  71. view.errorText = '';
  72. expect( statusElement.classList.contains( 'ck-hidden' ) ).to.be.true;
  73. expect( statusElement.classList.contains( 'ck-labeled-input__status_error' ) ).to.be.false;
  74. expect( statusElement.innerHTML ).to.equal( '' );
  75. view.errorText = 'foo';
  76. expect( statusElement.classList.contains( 'ck-hidden' ) ).to.be.false;
  77. expect( statusElement.classList.contains( 'ck-labeled-input__status_error' ) ).to.be.true;
  78. expect( statusElement.innerHTML ).to.equal( 'foo' );
  79. } );
  80. it( 'should react on view#infoText', () => {
  81. const statusElement = view.statusView.element;
  82. view.infoText = '';
  83. expect( statusElement.classList.contains( 'ck-hidden' ) ).to.be.true;
  84. expect( statusElement.classList.contains( 'ck-labeled-input__status_error' ) ).to.be.false;
  85. expect( statusElement.innerHTML ).to.equal( '' );
  86. view.infoText = 'foo';
  87. expect( statusElement.classList.contains( 'ck-hidden' ) ).to.be.false;
  88. expect( statusElement.classList.contains( 'ck-labeled-input__status_error' ) ).to.be.false;
  89. expect( statusElement.innerHTML ).to.equal( 'foo' );
  90. } );
  91. } );
  92. } );
  93. } );
  94. describe( 'binding', () => {
  95. it( 'should bind view#text to view.labelView#label', () => {
  96. view.label = 'Foo bar';
  97. expect( view.labelView.text ).to.equal( 'Foo bar' );
  98. } );
  99. it( 'should bind view#value to view.inputView#value', () => {
  100. view.value = 'Lorem ipsum';
  101. expect( view.inputView.value ).to.equal( 'Lorem ipsum' );
  102. } );
  103. it( 'should bind view#isreadOnly to view.inputView#isReadOnly', () => {
  104. view.isReadOnly = false;
  105. expect( view.inputView.isReadOnly ).to.be.false;
  106. view.isReadOnly = true;
  107. expect( view.inputView.isReadOnly ).to.be.true;
  108. } );
  109. it( 'should bind view#errorText to view.inputView#hasError', () => {
  110. view.errorText = '';
  111. expect( view.inputView.hasError ).to.be.false;
  112. view.errorText = 'foo';
  113. expect( view.inputView.hasError ).to.be.true;
  114. } );
  115. it( 'should clear view#errorText upon view.inputView#input', () => {
  116. view.errorText = 'foo';
  117. view.inputView.fire( 'input' );
  118. expect( view.errorText ).to.be.null;
  119. } );
  120. } );
  121. describe( 'select()', () => {
  122. it( 'should select input value', () => {
  123. const spy = sinon.spy( view.inputView, 'select' );
  124. view.select();
  125. sinon.assert.calledOnce( spy );
  126. } );
  127. } );
  128. describe( 'focus()', () => {
  129. it( 'focuses the input in DOM', () => {
  130. const spy = sinon.spy( view.inputView, 'focus' );
  131. view.focus();
  132. sinon.assert.calledOnce( spy );
  133. } );
  134. } );
  135. } );