integration.js 4.0 KB

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