8
0

iconview.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  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. import IconView from '../../src/icon/iconview';
  6. import normalizeHtml from '@ckeditor/ckeditor5-utils/tests/_utils/normalizehtml';
  7. describe( 'IconView', () => {
  8. let view;
  9. beforeEach( () => {
  10. view = new IconView();
  11. view.render();
  12. } );
  13. describe( 'constructor()', () => {
  14. it( 'sets #content', () => {
  15. expect( view.content ).to.equal( '' );
  16. } );
  17. it( 'sets #viewBox', () => {
  18. expect( view.viewBox ).to.equal( '0 0 20 20' );
  19. } );
  20. it( 'sets #fillColor', () => {
  21. expect( view.fillColor ).to.equal( '' );
  22. } );
  23. it( 'creates element from template', () => {
  24. expect( view.element.tagName ).to.equal( 'svg' );
  25. expect( view.element.classList.contains( 'ck' ) ).to.be.true;
  26. expect( view.element.classList.contains( 'ck-icon' ) ).to.be.true;
  27. expect( view.element.getAttribute( 'viewBox' ) ).to.equal( '0 0 20 20' );
  28. } );
  29. } );
  30. describe( '<svg> bindings', () => {
  31. describe( 'viewBox', () => {
  32. it( 'should react to changes in view#viewBox', () => {
  33. expect( view.element.getAttribute( 'viewBox' ) ).to.equal( '0 0 20 20' );
  34. view.viewBox = '1 2 3 4';
  35. expect( view.element.getAttribute( 'viewBox' ) ).to.equal( '1 2 3 4' );
  36. } );
  37. } );
  38. describe( 'inline svg', () => {
  39. it( 'should react to changes in view#content', () => {
  40. assertIconInnerHTML( view, '' );
  41. view.content = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="test"></g></svg>';
  42. assertIconInnerHTML( view, '<g id="test"></g>' );
  43. view.content = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>';
  44. assertIconInnerHTML( view, '' );
  45. } );
  46. it( 'works for #content with more than <svg> declaration', () => {
  47. assertIconInnerHTML( view, '' );
  48. view.content =
  49. '<?xml version="1.0" encoding="utf-8"?><svg version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="test"></g></svg>';
  50. assertIconInnerHTML( view, '<g id="test"></g>' );
  51. } );
  52. it( 'should respect parsed <svg>\'s viewBox attribute', () => {
  53. assertIconInnerHTML( view, '' );
  54. view.content = '<svg version="1.1" viewBox="10 20 30 40" xmlns="http://www.w3.org/2000/svg"><g id="test"></g></svg>';
  55. expect( view.viewBox ).to.equal( '10 20 30 40' );
  56. } );
  57. } );
  58. describe( 'fill color', () => {
  59. it( 'should be set intially based on view#fillColor', () => {
  60. view.fillColor = 'red';
  61. view.content = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg">' +
  62. '<path class="ck-icon__fill"/>' +
  63. '<path/>' +
  64. '<path class="ck-icon__fill"/>' +
  65. '</svg>';
  66. expect( view.element.children[ 0 ].style.fill ).to.equal( 'red' );
  67. expect( view.element.children[ 1 ].style.fill ).to.equal( '' );
  68. expect( view.element.children[ 2 ].style.fill ).to.equal( 'red' );
  69. } );
  70. it( 'should react to changes in view#fillColor', () => {
  71. view.content = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg">' +
  72. '<path class="ck-icon__fill"/>' +
  73. '<path/>' +
  74. '<path class="ck-icon__fill"/>' +
  75. '</svg>';
  76. expect( view.element.children[ 0 ].style.fill ).to.equal( '' );
  77. expect( view.element.children[ 1 ].style.fill ).to.equal( '' );
  78. expect( view.element.children[ 2 ].style.fill ).to.equal( '' );
  79. view.fillColor = 'red';
  80. expect( view.element.children[ 0 ].style.fill ).to.equal( 'red' );
  81. expect( view.element.children[ 1 ].style.fill ).to.equal( '' );
  82. expect( view.element.children[ 2 ].style.fill ).to.equal( 'red' );
  83. } );
  84. it( 'should react to changes in view#content', () => {
  85. view.content = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg">' +
  86. '<path class="ck-icon__fill"/>' +
  87. '<path/>' +
  88. '<path class="ck-icon__fill"/>' +
  89. '</svg>';
  90. view.fillColor = 'red';
  91. expect( view.element.children[ 0 ].style.fill ).to.equal( 'red' );
  92. expect( view.element.children[ 1 ].style.fill ).to.equal( '' );
  93. expect( view.element.children[ 2 ].style.fill ).to.equal( 'red' );
  94. view.content = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg">' +
  95. '<path/>' +
  96. '<path class="ck-icon__fill"/>' +
  97. '</svg>';
  98. expect( view.element.children[ 0 ].style.fill ).to.equal( '' );
  99. expect( view.element.children[ 1 ].style.fill ).to.equal( 'red' );
  100. } );
  101. } );
  102. } );
  103. } );
  104. function assertIconInnerHTML( icon, expected ) {
  105. expect( normalizeHtml( icon.element.innerHTML ) )
  106. .to.equal( expected );
  107. }