integration.js 3.9 KB

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