codeblockui.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  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 CodeBlockEditing from '../src/codeblockediting';
  7. import CodeBlockUI from '../src/codeblockui';
  8. import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
  9. import codeBlockIcon from '../theme/icons/codeblock.svg';
  10. import { _clear as clearTranslations, add as addTranslations } from '@ckeditor/ckeditor5-utils/src/translation-service';
  11. describe( 'CodeBlockUI', () => {
  12. let editor, command, element;
  13. before( () => {
  14. addTranslations( 'en', {
  15. 'Plain text': 'Plain text'
  16. } );
  17. addTranslations( 'pl', {
  18. 'Plain text': 'Zwykły tekst'
  19. } );
  20. } );
  21. after( () => {
  22. clearTranslations();
  23. } );
  24. beforeEach( () => {
  25. element = document.createElement( 'div' );
  26. document.body.appendChild( element );
  27. return ClassicTestEditor
  28. .create( element, {
  29. plugins: [ CodeBlockEditing, CodeBlockUI ]
  30. } )
  31. .then( newEditor => {
  32. editor = newEditor;
  33. command = editor.commands.get( 'codeBlock' );
  34. } );
  35. } );
  36. afterEach( () => {
  37. element.remove();
  38. return editor.destroy();
  39. } );
  40. describe( 'codeBlock dropdown', () => {
  41. it( 'has #class set', () => {
  42. const dropdown = editor.ui.componentFactory.create( 'codeBlock' );
  43. expect( dropdown.class ).to.equal( 'ck-code-block-dropdown' );
  44. } );
  45. it( 'has isEnabled bound to command\'s isEnabled', () => {
  46. const dropdown = editor.ui.componentFactory.create( 'codeBlock' );
  47. command.isEnabled = true;
  48. expect( dropdown ).to.have.property( 'isEnabled', true );
  49. command.isEnabled = false;
  50. expect( dropdown ).to.have.property( 'isEnabled', false );
  51. } );
  52. it( 'executes the command when executed one of the available language buttons from the list', () => {
  53. const dropdown = editor.ui.componentFactory.create( 'codeBlock' );
  54. const executeSpy = sinon.stub( editor, 'execute' );
  55. const focusSpy = sinon.stub( editor.editing.view, 'focus' );
  56. const listView = dropdown.panelView.children.first;
  57. const cSharpButton = listView.items.get( 2 ).children.first;
  58. expect( cSharpButton.label ).to.equal( 'C#' );
  59. cSharpButton.fire( 'execute' );
  60. sinon.assert.calledOnce( executeSpy );
  61. sinon.assert.calledOnce( focusSpy );
  62. sinon.assert.calledWithExactly( executeSpy.firstCall, 'codeBlock', {
  63. language: 'cs',
  64. forceValue: true
  65. } );
  66. } );
  67. describe( 'language list', () => {
  68. it( 'corresponds to the config', () => {
  69. const dropdown = editor.ui.componentFactory.create( 'codeBlock' );
  70. const listView = dropdown.panelView.children.first;
  71. expect( listView.items
  72. .map( item => {
  73. const { label, withText } = item.children.first;
  74. return { label, withText };
  75. } ) )
  76. .to.deep.equal( [
  77. {
  78. label: 'Plain text',
  79. withText: true
  80. },
  81. {
  82. label: 'C',
  83. withText: true
  84. },
  85. {
  86. label: 'C#',
  87. withText: true
  88. },
  89. {
  90. label: 'C++',
  91. withText: true
  92. },
  93. {
  94. label: 'CSS',
  95. withText: true
  96. },
  97. {
  98. label: 'Diff',
  99. withText: true
  100. },
  101. {
  102. label: 'HTML',
  103. withText: true
  104. },
  105. {
  106. label: 'Java',
  107. withText: true
  108. },
  109. {
  110. label: 'JavaScript',
  111. withText: true
  112. },
  113. {
  114. label: 'PHP',
  115. withText: true
  116. },
  117. {
  118. label: 'Python',
  119. withText: true
  120. },
  121. {
  122. label: 'Ruby',
  123. withText: true
  124. },
  125. {
  126. label: 'TypeScript',
  127. withText: true
  128. },
  129. {
  130. label: 'XML',
  131. withText: true
  132. }
  133. ] );
  134. } );
  135. it( 'sets item\'s #isOn depending on the value of the CodeBlockCommand', () => {
  136. const dropdown = editor.ui.componentFactory.create( 'codeBlock' );
  137. const listView = dropdown.panelView.children.first;
  138. expect( listView.items.get( 2 ).children.first.isOn ).to.be.false;
  139. command.value = 'cs';
  140. expect( listView.items.get( 2 ).children.first.isOn ).to.be.true;
  141. } );
  142. it( 'uses localized "Plain text" label', async () => {
  143. await editor.destroy();
  144. return ClassicTestEditor
  145. .create( element, {
  146. language: 'pl',
  147. plugins: [ CodeBlockEditing, CodeBlockUI ]
  148. } )
  149. .then( newEditor => {
  150. const editor = newEditor;
  151. const dropdown = editor.ui.componentFactory.create( 'codeBlock' );
  152. const listView = dropdown.panelView.children.first;
  153. expect( listView.items.first.children.first.label ).to.equal( 'Zwykły tekst' );
  154. return editor.destroy();
  155. } );
  156. } );
  157. } );
  158. describe( 'button', () => {
  159. it( 'has the base properties', () => {
  160. const dropdown = editor.ui.componentFactory.create( 'codeBlock' );
  161. const button = dropdown.buttonView;
  162. expect( button ).to.have.property( 'label', 'Insert code block' );
  163. expect( button ).to.have.property( 'icon', codeBlockIcon );
  164. expect( button ).to.have.property( 'tooltip', true );
  165. expect( button ).to.have.property( 'isToggleable', true );
  166. } );
  167. it( 'has #isOn bound to command\'s value', () => {
  168. const dropdown = editor.ui.componentFactory.create( 'codeBlock' );
  169. const button = dropdown.buttonView;
  170. command.value = false;
  171. expect( button ).to.have.property( 'isOn', false );
  172. command.value = true;
  173. expect( button ).to.have.property( 'isOn', true );
  174. } );
  175. it( 'should execute the command with the first configured language', () => {
  176. const dropdown = editor.ui.componentFactory.create( 'codeBlock' );
  177. const button = dropdown.buttonView;
  178. const executeSpy = sinon.stub( editor, 'execute' );
  179. const focusSpy = sinon.stub( editor.editing.view, 'focus' );
  180. button.fire( 'execute' );
  181. sinon.assert.calledOnce( executeSpy );
  182. sinon.assert.calledOnce( focusSpy );
  183. sinon.assert.calledWithExactly( executeSpy.firstCall, 'codeBlock', {
  184. language: 'plaintext'
  185. } );
  186. } );
  187. } );
  188. } );
  189. } );