labeledinputview.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. /**
  2. * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  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.ariaDescribedById ).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.hasAttribute( 'role' ) ).to.be.false;
  75. expect( statusElement.innerHTML ).to.equal( '' );
  76. view.errorText = 'foo';
  77. expect( statusElement.classList.contains( 'ck-hidden' ) ).to.be.false;
  78. expect( statusElement.classList.contains( 'ck-labeled-input__status_error' ) ).to.be.true;
  79. expect( statusElement.getAttribute( 'role' ) ).to.equal( 'alert' );
  80. expect( statusElement.innerHTML ).to.equal( 'foo' );
  81. } );
  82. it( 'should react on view#infoText', () => {
  83. const statusElement = view.statusView.element;
  84. view.infoText = '';
  85. expect( statusElement.classList.contains( 'ck-hidden' ) ).to.be.true;
  86. expect( statusElement.classList.contains( 'ck-labeled-input__status_error' ) ).to.be.false;
  87. expect( statusElement.hasAttribute( 'role' ) ).to.be.false;
  88. expect( statusElement.innerHTML ).to.equal( '' );
  89. view.infoText = 'foo';
  90. expect( statusElement.classList.contains( 'ck-hidden' ) ).to.be.false;
  91. expect( statusElement.classList.contains( 'ck-labeled-input__status_error' ) ).to.be.false;
  92. expect( statusElement.hasAttribute( 'role' ) ).to.be.false;
  93. expect( statusElement.innerHTML ).to.equal( 'foo' );
  94. } );
  95. } );
  96. } );
  97. } );
  98. describe( 'binding', () => {
  99. it( 'should bind view#text to view.labelView#label', () => {
  100. view.label = 'Foo bar';
  101. expect( view.labelView.text ).to.equal( 'Foo bar' );
  102. } );
  103. it( 'should bind view#value to view.inputView#value', () => {
  104. view.value = 'Lorem ipsum';
  105. expect( view.inputView.value ).to.equal( 'Lorem ipsum' );
  106. } );
  107. it( 'should bind view#isreadOnly to view.inputView#isReadOnly', () => {
  108. view.isReadOnly = false;
  109. expect( view.inputView.isReadOnly ).to.be.false;
  110. view.isReadOnly = true;
  111. expect( view.inputView.isReadOnly ).to.be.true;
  112. } );
  113. it( 'should bind view#errorText to view.inputView#hasError', () => {
  114. view.errorText = '';
  115. expect( view.inputView.hasError ).to.be.false;
  116. view.errorText = 'foo';
  117. expect( view.inputView.hasError ).to.be.true;
  118. } );
  119. it( 'should clear view#errorText upon view.inputView#input', () => {
  120. view.errorText = 'foo';
  121. view.inputView.fire( 'input' );
  122. expect( view.errorText ).to.be.null;
  123. } );
  124. } );
  125. describe( 'select()', () => {
  126. it( 'should select input value', () => {
  127. const spy = sinon.spy( view.inputView, 'select' );
  128. view.select();
  129. sinon.assert.calledOnce( spy );
  130. } );
  131. } );
  132. describe( 'focus()', () => {
  133. it( 'focuses the input in DOM', () => {
  134. const spy = sinon.spy( view.inputView, 'focus' );
  135. view.focus();
  136. sinon.assert.calledOnce( spy );
  137. } );
  138. } );
  139. } );