fontfamilyui.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  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. /* global document */
  6. import FontFamilyEditing from '../../src/fontfamily/fontfamilyediting';
  7. import FontFamilyUI from '../../src/fontfamily/fontfamilyui';
  8. import fontFamilyIcon from '../../theme/icons/font-family.svg';
  9. import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
  10. import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
  11. import { add as addTranslations, _clear as clearTranslations } from '@ckeditor/ckeditor5-utils/src/translation-service';
  12. describe( 'FontFamilyUI', () => {
  13. let editor, command, element;
  14. testUtils.createSinonSandbox();
  15. before( () => {
  16. addTranslations( 'en', {
  17. 'Font Family': 'Font Family',
  18. 'Default': 'Default'
  19. } );
  20. addTranslations( 'pl', {
  21. 'Font Family': 'Czcionka',
  22. 'Default': 'Domyślna'
  23. } );
  24. } );
  25. after( () => {
  26. clearTranslations();
  27. } );
  28. beforeEach( () => {
  29. element = document.createElement( 'div' );
  30. document.body.appendChild( element );
  31. return ClassicTestEditor
  32. .create( element, {
  33. plugins: [ FontFamilyEditing, FontFamilyUI ]
  34. } )
  35. .then( newEditor => {
  36. editor = newEditor;
  37. } );
  38. } );
  39. afterEach( () => {
  40. element.remove();
  41. return editor.destroy();
  42. } );
  43. describe( 'fontFamily Dropdown', () => {
  44. let dropdown;
  45. beforeEach( () => {
  46. command = editor.commands.get( 'fontFamily' );
  47. dropdown = editor.ui.componentFactory.create( 'fontFamily' );
  48. } );
  49. it( 'button has the base properties', () => {
  50. const button = dropdown.buttonView;
  51. expect( button ).to.have.property( 'label', 'Font Family' );
  52. expect( button ).to.have.property( 'tooltip', true );
  53. expect( button ).to.have.property( 'icon', fontFamilyIcon );
  54. } );
  55. it( 'should add custom CSS class to dropdown', () => {
  56. const dropdown = editor.ui.componentFactory.create( 'fontFamily' );
  57. dropdown.render();
  58. expect( dropdown.element.classList.contains( 'ck-font-family-dropdown' ) ).to.be.true;
  59. } );
  60. it( 'should focus view after command execution', () => {
  61. const focusSpy = testUtils.sinon.spy( editor.editing.view, 'focus' );
  62. const dropdown = editor.ui.componentFactory.create( 'fontFamily' );
  63. dropdown.commandName = 'fontFamily';
  64. dropdown.fire( 'execute' );
  65. sinon.assert.calledOnce( focusSpy );
  66. } );
  67. it( 'should activate current option in dropdown', () => {
  68. const listView = dropdown.listView;
  69. command.value = undefined;
  70. // The first item is 'default' font family.
  71. expect( listView.items.map( item => item.children.first.isOn ) )
  72. .to.deep.equal( [ true, false, false, false, false, false, false, false, false ] );
  73. command.value = 'Arial';
  74. // The second item is 'Arial' font family.
  75. expect( listView.items.map( item => item.children.first.isOn ) )
  76. .to.deep.equal( [ false, true, false, false, false, false, false, false, false ] );
  77. } );
  78. it( 'should activate current option in dropdown for full font family definitions', () => {
  79. const element = document.createElement( 'div' );
  80. document.body.appendChild( element );
  81. return ClassicTestEditor
  82. .create( element, {
  83. plugins: [ FontFamilyEditing, FontFamilyUI ],
  84. fontSize: {
  85. supportAllValues: true
  86. }
  87. } )
  88. .then( editor => {
  89. const command = editor.commands.get( 'fontFamily' );
  90. const dropdown = editor.ui.componentFactory.create( 'fontFamily' );
  91. const listView = dropdown.listView;
  92. command.value = undefined;
  93. // The first item is 'default' font family.
  94. expect( listView.items.map( item => item.children.first.isOn ) )
  95. .to.deep.equal( [ true, false, false, false, false, false, false, false, false ] );
  96. command.value = '\'Courier New\', Courier, monospace';
  97. // The third item is 'Courier New' font family.
  98. expect( listView.items.map( item => item.children.first.isOn ) )
  99. .to.deep.equal( [ false, false, true, false, false, false, false, false, false ] );
  100. return editor.destroy();
  101. } )
  102. .then( () => {
  103. element.remove();
  104. } );
  105. } );
  106. describe( 'model to command binding', () => {
  107. it( 'isEnabled', () => {
  108. command.isEnabled = false;
  109. expect( dropdown.buttonView.isEnabled ).to.be.false;
  110. command.isEnabled = true;
  111. expect( dropdown.buttonView.isEnabled ).to.be.true;
  112. } );
  113. } );
  114. describe( 'localization', () => {
  115. let editorElement;
  116. beforeEach( async () => {
  117. await editor.destroy();
  118. return localizedEditor( [ 'default', 'Arial' ] );
  119. } );
  120. afterEach( () => {
  121. editorElement.remove();
  122. } );
  123. it( 'works for the #buttonView', () => {
  124. const buttonView = dropdown.buttonView;
  125. expect( buttonView.label ).to.equal( 'Czcionka' );
  126. } );
  127. it( 'works for the listView#items in the panel', () => {
  128. const listView = dropdown.listView;
  129. expect( listView.items.map( item => item.children.first.label ) ).to.deep.equal( [
  130. 'Domyślna',
  131. 'Arial'
  132. ] );
  133. } );
  134. function localizedEditor( options ) {
  135. editorElement = document.createElement( 'div' );
  136. document.body.appendChild( editorElement );
  137. return ClassicTestEditor
  138. .create( editorElement, {
  139. plugins: [ FontFamilyEditing, FontFamilyUI ],
  140. toolbar: [ 'fontFamily' ],
  141. language: 'pl',
  142. fontFamily: {
  143. options
  144. }
  145. } )
  146. .then( newEditor => {
  147. editor = newEditor;
  148. dropdown = editor.ui.componentFactory.create( 'fontFamily' );
  149. command = editor.commands.get( 'fontFamily' );
  150. editorElement.remove();
  151. return editor.destroy();
  152. } );
  153. }
  154. } );
  155. } );
  156. } );