8
0

integration.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  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 Font from '../src/font';
  7. import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
  8. import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
  9. import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
  10. describe( 'Integration test Font', () => {
  11. let element, editor, model;
  12. beforeEach( () => {
  13. element = document.createElement( 'div' );
  14. document.body.appendChild( element );
  15. return ClassicTestEditor
  16. .create( element, {
  17. plugins: [ Font, ArticlePluginSet ],
  18. image: {
  19. toolbar: [ 'imageStyle:full', 'imageStyle:side' ]
  20. }
  21. } )
  22. .then( newEditor => {
  23. editor = newEditor;
  24. model = editor.model;
  25. } );
  26. } );
  27. afterEach( () => {
  28. element.remove();
  29. return editor.destroy();
  30. } );
  31. describe( 'in-between font plugin features', () => {
  32. it( 'should render one span element for all types of font features', () => {
  33. setModelData( model,
  34. '<paragraph>' +
  35. '<$text fontColor="#123456" fontBackgroundColor="rgb(10,20,30)" fontSize="big" ' +
  36. 'fontFamily="Arial, Helvetica, sans-serif">foo</$text>' +
  37. '</paragraph>'
  38. );
  39. expect( editor.getData() ).to.equal(
  40. '<p>' +
  41. '<span ' +
  42. 'class="text-big" ' +
  43. 'style="background-color:rgb(10,20,30);color:#123456;font-family:Arial, Helvetica, sans-serif;"' +
  44. '>foo' +
  45. '</span>' +
  46. '</p>'
  47. );
  48. } );
  49. it( 'should render one span element for all types of font features (supportAllValues=true)', () => {
  50. const element = document.createElement( 'div' );
  51. document.body.appendChild( element );
  52. return ClassicTestEditor
  53. .create( element, {
  54. plugins: [ Font, ArticlePluginSet ],
  55. fontFamily: {
  56. supportAllValues: true
  57. },
  58. fontSize: {
  59. options: [ 10, 12, 14 ],
  60. supportAllValues: true
  61. },
  62. image: {
  63. toolbar: [ 'imageStyle:full', 'imageStyle:side' ]
  64. }
  65. } )
  66. .then( editor => {
  67. const model = editor.model;
  68. setModelData( model,
  69. '<paragraph>' +
  70. '<$text fontColor="#123456" fontBackgroundColor="rgb(10,20,30)" ' +
  71. 'fontSize="48px" fontFamily="docs-Roboto"' +
  72. '>foo' +
  73. '</$text>' +
  74. '</paragraph>'
  75. );
  76. expect( editor.getData() ).to.equal(
  77. '<p>' +
  78. '<span ' +
  79. 'style="background-color:rgb(10,20,30);color:#123456;font-family:docs-Roboto;font-size:48px;"' +
  80. '>foo' +
  81. '</span>' +
  82. '</p>'
  83. );
  84. return editor.destroy();
  85. } )
  86. .then( () => {
  87. element.remove();
  88. } );
  89. } );
  90. } );
  91. describe( 'between font plugin and other', () => {
  92. it( 'should render elements wrapped in proper order', () => {
  93. setModelData( model,
  94. '<paragraph>' +
  95. '<$text bold="true" linkHref="foo" fontColor="red" fontSize="big">foo</$text>' +
  96. '</paragraph>'
  97. );
  98. expect( editor.getData() ).to.equal(
  99. '<p>' +
  100. '<a href="foo">' +
  101. '<span class="text-big" style="color:red;">' +
  102. '<strong>foo</strong>' +
  103. '</span>' +
  104. '</a>' +
  105. '</p>'
  106. );
  107. } );
  108. it( 'should render elements wrapped in proper order (supportAllValues=true)', () => {
  109. const element = document.createElement( 'div' );
  110. document.body.appendChild( element );
  111. return ClassicTestEditor
  112. .create( element, {
  113. plugins: [ Font, ArticlePluginSet ],
  114. fontFamily: {
  115. supportAllValues: true
  116. },
  117. fontSize: {
  118. options: [ 10, 12, 14 ],
  119. supportAllValues: true
  120. },
  121. image: {
  122. toolbar: [ 'imageStyle:full', 'imageStyle:side' ]
  123. }
  124. } )
  125. .then( editor => {
  126. const model = editor.model;
  127. setModelData( model,
  128. '<paragraph>' +
  129. '<$text bold="true" linkHref="foo" fontColor="red" fontSize="18px">foo</$text>' +
  130. '</paragraph>'
  131. );
  132. expect( editor.getData() ).to.equal(
  133. '<p>' +
  134. '<a href="foo">' +
  135. '<span style="color:red;font-size:18px;">' +
  136. '<strong>foo</strong>' +
  137. '</span>' +
  138. '</a>' +
  139. '</p>'
  140. );
  141. return editor.destroy();
  142. } )
  143. .then( () => {
  144. element.remove();
  145. } );
  146. } );
  147. } );
  148. } );