utils.js 2.6 KB

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