integration.js 4.0 KB

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