8
0

iconview.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  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.getAttribute( 'class' ) ).to.equal( 'ck-icon' );
  26. expect( view.element.getAttribute( 'viewBox' ) ).to.equal( '0 0 20 20' );
  27. } );
  28. } );
  29. describe( '<svg> bindings', () => {
  30. describe( 'viewBox', () => {
  31. it( 'should react to changes in view#viewBox', () => {
  32. expect( view.element.getAttribute( 'viewBox' ) ).to.equal( '0 0 20 20' );
  33. view.viewBox = '1 2 3 4';
  34. expect( view.element.getAttribute( 'viewBox' ) ).to.equal( '1 2 3 4' );
  35. } );
  36. } );
  37. describe( 'inline svg', () => {
  38. it( 'should react to changes in view#content', () => {
  39. assertIconInnerHTML( view, '' );
  40. view.content = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="test"></g></svg>';
  41. assertIconInnerHTML( view, '<g id="test"></g>' );
  42. view.content = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>';
  43. assertIconInnerHTML( view, '' );
  44. } );
  45. it( 'works for #content with more than <svg> declaration', () => {
  46. assertIconInnerHTML( view, '' );
  47. view.content =
  48. '<?xml version="1.0" encoding="utf-8"?><svg version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="test"></g></svg>';
  49. assertIconInnerHTML( view, '<g id="test"></g>' );
  50. } );
  51. it( 'should respect parsed <svg>\'s viewBox attribute', () => {
  52. assertIconInnerHTML( view, '' );
  53. view.content = '<svg version="1.1" viewBox="10 20 30 40" xmlns="http://www.w3.org/2000/svg"><g id="test"></g></svg>';
  54. expect( view.viewBox ).to.equal( '10 20 30 40' );
  55. } );
  56. } );
  57. describe( 'fill color', () => {
  58. it( 'should be set intially based on view#fillColor', () => {
  59. view.fillColor = 'red';
  60. view.content = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg">' +
  61. '<path class="ck-icon__fill"/>' +
  62. '<path/>' +
  63. '<path class="ck-icon__fill"/>' +
  64. '</svg>';
  65. expect( view.element.children[ 0 ].style.fill ).to.equal( 'red' );
  66. expect( view.element.children[ 1 ].style.fill ).to.equal( '' );
  67. expect( view.element.children[ 2 ].style.fill ).to.equal( 'red' );
  68. } );
  69. it( 'should react to changes in view#fillColor', () => {
  70. view.content = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg">' +
  71. '<path class="ck-icon__fill"/>' +
  72. '<path/>' +
  73. '<path class="ck-icon__fill"/>' +
  74. '</svg>';
  75. expect( view.element.children[ 0 ].style.fill ).to.equal( '' );
  76. expect( view.element.children[ 1 ].style.fill ).to.equal( '' );
  77. expect( view.element.children[ 2 ].style.fill ).to.equal( '' );
  78. view.fillColor = 'red';
  79. expect( view.element.children[ 0 ].style.fill ).to.equal( 'red' );
  80. expect( view.element.children[ 1 ].style.fill ).to.equal( '' );
  81. expect( view.element.children[ 2 ].style.fill ).to.equal( 'red' );
  82. } );
  83. it( 'should react to changes in view#content', () => {
  84. view.content = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg">' +
  85. '<path class="ck-icon__fill"/>' +
  86. '<path/>' +
  87. '<path class="ck-icon__fill"/>' +
  88. '</svg>';
  89. view.fillColor = 'red';
  90. expect( view.element.children[ 0 ].style.fill ).to.equal( 'red' );
  91. expect( view.element.children[ 1 ].style.fill ).to.equal( '' );
  92. expect( view.element.children[ 2 ].style.fill ).to.equal( 'red' );
  93. view.content = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg">' +
  94. '<path/>' +
  95. '<path class="ck-icon__fill"/>' +
  96. '</svg>';
  97. expect( view.element.children[ 0 ].style.fill ).to.equal( '' );
  98. expect( view.element.children[ 1 ].style.fill ).to.equal( 'red' );
  99. } );
  100. } );
  101. } );
  102. } );
  103. function assertIconInnerHTML( icon, expected ) {
  104. // Edge adds the xmlns attribute to each node when obtaining from parent's innerHTML.
  105. expect( normalizeHtml( icon.element.innerHTML.replace( /xmlns="[^"]+"/, '' ) ) )
  106. .to.equal( expected );
  107. }