utils.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. /**
  2. * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. import {
  6. FONT_COLOR,
  7. FONT_BACKGROUND_COLOR,
  8. normalizeColorOptions,
  9. addColorTableToDropdown,
  10. renderDowncastElement
  11. } from './../src/utils';
  12. import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
  13. import ColorTableView from './../src/ui/colortableview';
  14. import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
  15. describe( 'utils', () => {
  16. testUtils.createSinonSandbox();
  17. describe( 'color and background color related', () => {
  18. it( 'plugin names has proper values', () => {
  19. expect( FONT_COLOR ).to.equal( 'fontColor' );
  20. expect( FONT_BACKGROUND_COLOR ).to.equal( 'fontBackgroundColor' );
  21. } );
  22. it( 'normalizeColorOptions() can produce the same output object', () => {
  23. const normalizedArray = normalizeColorOptions( [
  24. 'black',
  25. {
  26. color: 'black'
  27. },
  28. {
  29. color: 'black',
  30. label: 'Black'
  31. },
  32. {
  33. color: 'black',
  34. label: 'Black',
  35. hasBorder: true
  36. },
  37. {
  38. color: 'black',
  39. hasBorder: true
  40. }
  41. ] );
  42. expect( normalizedArray ).to.deep.equal( [
  43. {
  44. model: 'black',
  45. label: 'black',
  46. hasBorder: false,
  47. view: {
  48. name: 'span',
  49. styles: {
  50. color: 'black'
  51. }
  52. }
  53. },
  54. {
  55. model: 'black',
  56. label: 'black',
  57. hasBorder: false,
  58. view: {
  59. name: 'span',
  60. styles: {
  61. color: 'black'
  62. }
  63. }
  64. },
  65. {
  66. model: 'black',
  67. label: 'Black',
  68. hasBorder: false,
  69. view: {
  70. name: 'span',
  71. styles: {
  72. color: 'black'
  73. }
  74. }
  75. },
  76. {
  77. model: 'black',
  78. label: 'Black',
  79. hasBorder: true,
  80. view: {
  81. name: 'span',
  82. styles: {
  83. color: 'black'
  84. }
  85. }
  86. },
  87. {
  88. model: 'black',
  89. label: 'black',
  90. hasBorder: true,
  91. view: {
  92. name: 'span',
  93. styles: {
  94. color: 'black'
  95. }
  96. }
  97. },
  98. ] );
  99. } );
  100. it( 'addColorTableToDropdown()', () => {
  101. const dropdown = createDropdown();
  102. dropdown.render();
  103. addColorTableToDropdown( {
  104. dropdownView: dropdown,
  105. colors: [
  106. {
  107. label: 'Black',
  108. color: '#000',
  109. options: {
  110. hasBorder: false
  111. }
  112. },
  113. {
  114. label: 'White',
  115. color: '#FFFFFF',
  116. options: {
  117. hasBorder: true
  118. }
  119. }
  120. ],
  121. columns: 2,
  122. removeButtonTooltip: 'Remove Color'
  123. } );
  124. expect( dropdown.colorTableView ).to.be.instanceOf( ColorTableView );
  125. expect( dropdown.panelView.children.length ).to.equal( 1 );
  126. } );
  127. it( 'renderDowncastElement()', () => {
  128. const testRender = renderDowncastElement( 'color' );
  129. const fake = testUtils.sinon.fake();
  130. testRender( 'blue', { createAttributeElement: fake } );
  131. sinon.assert.calledWithExactly( fake, 'span', { style: 'color:blue' }, { priority: 7 } );
  132. } );
  133. } );
  134. } );