specialcharactersnavigationview.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  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 SpecialCharactersNavigationView from '../../src/ui/specialcharactersnavigationview';
  6. import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
  7. import FormHeaderView from '@ckeditor/ckeditor5-ui/src/formheader/formheaderview';
  8. import View from '@ckeditor/ckeditor5-ui/src/view';
  9. import DropdownView from '@ckeditor/ckeditor5-ui/src/dropdown/dropdownview';
  10. describe( 'SpecialCharactersNavigationView', () => {
  11. let view, locale;
  12. testUtils.createSinonSandbox();
  13. beforeEach( () => {
  14. locale = {
  15. t: val => val
  16. };
  17. view = new SpecialCharactersNavigationView( locale, [ 'groupA', 'groupB' ] );
  18. view.render();
  19. } );
  20. afterEach( () => {
  21. view.destroy();
  22. } );
  23. describe( 'constructor()', () => {
  24. it( 'should be an instance of the FormHeaderView', () => {
  25. expect( view ).to.be.instanceOf( FormHeaderView );
  26. } );
  27. it( 'should have "Special characters" label', () => {
  28. expect( view.label ).to.equal( 'Special characters' );
  29. } );
  30. it( 'creates #groupDropdownView', () => {
  31. expect( view.groupDropdownView ).to.be.instanceOf( DropdownView );
  32. } );
  33. it( 'creates #element from template', () => {
  34. expect( view.element.classList.contains( 'ck' ) ).to.be.true;
  35. expect( view.element.classList.contains( 'ck-special-characters-navigation' ) ).to.be.true;
  36. expect( view.element.firstChild.classList.contains( 'ck-form__header__label' ) ).to.be.true;
  37. expect( view.element.lastChild.classList.contains( 'ck-dropdown' ) ).to.be.true;
  38. } );
  39. it( 'should contain following instances as children: View, Dropdown', () => {
  40. expect( view.children.first ).to.be.instanceOf( View );
  41. expect( view.children.last ).to.be.instanceOf( DropdownView );
  42. } );
  43. } );
  44. describe( 'currentGroupName()', () => {
  45. it( 'returns the #value of #groupDropdownView', () => {
  46. expect( view.currentGroupName ).to.equal( 'groupA' );
  47. view.groupDropdownView.listView.items.last.children.first.fire( 'execute' );
  48. expect( view.currentGroupName ).to.equal( 'groupB' );
  49. } );
  50. } );
  51. describe( '#groupDropdownView', () => {
  52. let groupDropdownView;
  53. beforeEach( () => {
  54. groupDropdownView = view.groupDropdownView;
  55. } );
  56. it( 'has a default #value', () => {
  57. expect( view.currentGroupName ).to.equal( 'groupA' );
  58. } );
  59. it( 'has a right #panelPosition (LTR)', () => {
  60. expect( groupDropdownView.panelPosition ).to.equal( 'sw' );
  61. } );
  62. it( 'has a right #panelPosition (RTL)', () => {
  63. const locale = {
  64. uiLanguageDirection: 'rtl',
  65. t: val => val
  66. };
  67. view = new SpecialCharactersNavigationView( locale, [ 'groupA', 'groupB' ] );
  68. view.render();
  69. expect( view.groupDropdownView.panelPosition ).to.equal( 'se' );
  70. view.destroy();
  71. } );
  72. it( 'delegates #execute to the naviation view', () => {
  73. const spy = sinon.spy();
  74. view.on( 'execute', spy );
  75. groupDropdownView.fire( 'execute' );
  76. sinon.assert.calledOnce( spy );
  77. } );
  78. describe( 'buttonView', () => {
  79. it( 'binds #label to #value', () => {
  80. expect( groupDropdownView.buttonView.label ).to.equal( 'groupA' );
  81. groupDropdownView.listView.items.last.children.first.fire( 'execute' );
  82. expect( groupDropdownView.buttonView.label ).to.equal( 'groupB' );
  83. } );
  84. it( 'should be configured by the #groupDropdownView', () => {
  85. expect( groupDropdownView.buttonView.isOn ).to.be.false;
  86. expect( groupDropdownView.buttonView.withText ).to.be.true;
  87. expect( groupDropdownView.buttonView.tooltip ).to.equal( 'Character categories' );
  88. } );
  89. it( 'should have class "ck-dropdown__button_label-width_auto"', () => {
  90. const element = groupDropdownView.buttonView.element;
  91. expect( element.classList.contains( 'ck-dropdown__button_label-width_auto' ) ).to.be.true;
  92. } );
  93. } );
  94. describe( 'character group list items', () => {
  95. it( 'have basic properties', () => {
  96. expect( groupDropdownView.listView.items
  97. .map( item => {
  98. const { label, withText } = item.children.first;
  99. return { label, withText };
  100. } ) )
  101. .to.deep.equal( [
  102. { label: 'groupA', withText: true },
  103. { label: 'groupB', withText: true }
  104. ] );
  105. } );
  106. it( 'bind #isOn to the #value of the dropdown', () => {
  107. const firstButton = groupDropdownView.listView.items.first.children.last;
  108. const lastButton = groupDropdownView.listView.items.last.children.last;
  109. expect( firstButton.isOn ).to.be.true;
  110. expect( lastButton.isOn ).to.be.false;
  111. groupDropdownView.value = 'groupB';
  112. expect( firstButton.isOn ).to.be.false;
  113. expect( lastButton.isOn ).to.be.true;
  114. } );
  115. } );
  116. } );
  117. } );