buttonview.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. /**
  2. * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* globals Event */
  6. import testUtils from 'ckeditor5-core/tests/_utils/utils';
  7. import ButtonView from 'ckeditor5-ui/src/button/buttonview';
  8. import IconView from 'ckeditor5-ui/src/icon/iconview';
  9. testUtils.createSinonSandbox();
  10. describe( 'ButtonView', () => {
  11. let locale, view;
  12. beforeEach( () => {
  13. locale = { t() {} };
  14. return ( view = new ButtonView( locale ) ).init();
  15. } );
  16. describe( '<button> bindings', () => {
  17. describe( 'class', () => {
  18. it( 'is set initially', () => {
  19. expect( view.element.classList ).to.have.length( 4 );
  20. expect( view.element.classList.contains( 'ck-button' ) ).to.true;
  21. expect( view.element.classList.contains( 'ck-off' ) ).to.true;
  22. expect( view.element.classList.contains( 'ck-tooltip_s' ) ).to.true;
  23. } );
  24. it( 'reacts on view#isEnabled', () => {
  25. view.isEnabled = true;
  26. expect( view.element.classList.contains( 'ck-disabled' ) ).to.false;
  27. view.isEnabled = false;
  28. expect( view.element.classList.contains( 'ck-disabled' ) ).to.true;
  29. } );
  30. it( 'reacts on view#isOn', () => {
  31. view.isOn = true;
  32. expect( view.element.classList.contains( 'ck-on' ) ).to.true;
  33. view.isOn = false;
  34. expect( view.element.classList.contains( 'ck-on' ) ).to.false;
  35. } );
  36. it( 'reacts on view#withText', () => {
  37. view.withText = true;
  38. expect( view.element.classList.contains( 'ck-button_with-text' ) ).to.true;
  39. view.withText = false;
  40. expect( view.element.classList.contains( 'ck-button_with-text' ) ).to.false;
  41. } );
  42. it( 'reacts on view#type', () => {
  43. // Default value.
  44. expect( view.element.getAttribute( 'type' ) ).to.equal( 'button' );
  45. view.type = 'submit';
  46. expect( view.element.getAttribute( 'type' ) ).to.equal( 'submit' );
  47. // Default value.
  48. view.type = null;
  49. expect( view.element.getAttribute( 'type' ) ).to.equal( 'button' );
  50. } );
  51. } );
  52. describe( 'tooltip', () => {
  53. it( 'is not initially set ', () => {
  54. expect( view.element.dataset.ckTooltip ).to.undefined;
  55. } );
  56. it( 'is always equal to view#title if is defined', () => {
  57. view.title = 'bar';
  58. view.label = 'foo';
  59. view.keystroke = 'A';
  60. expect( view.element.dataset.ckTooltip ).to.equal( 'bar' );
  61. } );
  62. it( 'is equal to view#label when view#title is not defined', () => {
  63. view.label = 'bar';
  64. expect( view.element.dataset.ckTooltip ).to.equal( 'bar' );
  65. } );
  66. it( 'contains keystroke when view#label and view#keystroke is defined', () => {
  67. view.label = 'bar';
  68. view.keystroke = 'A';
  69. expect( view.element.dataset.ckTooltip ).to.equal( 'bar (A)' );
  70. } );
  71. } );
  72. describe( 'text', () => {
  73. it( 'is not initially set ', () => {
  74. expect( view.element.textContent ).to.equal( '' );
  75. } );
  76. it( 'reacts on view#label', () => {
  77. view.label = 'bar';
  78. expect( view.element.textContent ).to.equal( 'bar' );
  79. } );
  80. } );
  81. describe( 'mousedown event', () => {
  82. it( 'should be prevented', () => {
  83. const ret = view.element.dispatchEvent( new Event( 'mousedown', { cancelable: true } ) );
  84. expect( ret ).to.false;
  85. } );
  86. } );
  87. describe( 'execute event', () => {
  88. it( 'triggers view#execute event if button is not disabled', () => {
  89. const spy = sinon.spy();
  90. view.on( 'execute', spy );
  91. view.set( 'isEnabled', true );
  92. view.element.dispatchEvent( new Event( 'click' ) );
  93. sinon.assert.callCount( spy, 1 );
  94. view.isEnabled = false;
  95. view.element.dispatchEvent( new Event( 'click' ) );
  96. sinon.assert.callCount( spy, 1 );
  97. } );
  98. } );
  99. } );
  100. describe( 'icon', () => {
  101. it( 'is not initially set', () => {
  102. expect( view.element.childNodes ).to.have.length( 1 );
  103. expect( view.iconView ).to.undefined;
  104. } );
  105. it( 'is set when view#icon is defined', () => {
  106. view = new ButtonView( locale );
  107. view.icon = 'foo';
  108. return view.init().then( () => {
  109. expect( view.element.childNodes ).to.have.length( 2 );
  110. expect( view.element.childNodes[ 0 ] ).to.equal( view.iconView.element );
  111. expect( view.iconView ).to.instanceOf( IconView );
  112. expect( view.iconView.content ).to.equal( 'foo' );
  113. view.icon = 'bar';
  114. expect( view.iconView.content ).to.equal( 'bar' );
  115. } );
  116. } );
  117. it( 'is destroyed with the view', () => {
  118. view = new ButtonView( locale );
  119. view.icon = 'foo';
  120. return view.init().then( () => {
  121. const spy = sinon.spy( view.iconView, 'destroy' );
  122. return view.destroy().then( () => {
  123. sinon.assert.calledOnce( spy );
  124. } );
  125. } );
  126. } );
  127. } );
  128. } );