/** * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ import IconView from '../../src/icon/iconview'; import normalizeHtml from '@ckeditor/ckeditor5-utils/tests/_utils/normalizehtml'; describe( 'IconView', () => { let view; beforeEach( () => { view = new IconView(); view.render(); } ); describe( 'constructor()', () => { it( 'sets #content', () => { expect( view.content ).to.equal( '' ); } ); it( 'sets #viewBox', () => { expect( view.viewBox ).to.equal( '0 0 20 20' ); } ); it( 'sets #fillColor', () => { expect( view.fillColor ).to.equal( '' ); } ); it( 'creates element from template', () => { expect( view.element.tagName ).to.equal( 'svg' ); expect( view.element.classList.contains( 'ck' ) ).to.be.true; expect( view.element.classList.contains( 'ck-icon' ) ).to.be.true; expect( view.element.getAttribute( 'viewBox' ) ).to.equal( '0 0 20 20' ); } ); } ); describe( ' bindings', () => { describe( 'viewBox', () => { it( 'should react to changes in view#viewBox', () => { expect( view.element.getAttribute( 'viewBox' ) ).to.equal( '0 0 20 20' ); view.viewBox = '1 2 3 4'; expect( view.element.getAttribute( 'viewBox' ) ).to.equal( '1 2 3 4' ); } ); } ); describe( 'inline svg', () => { it( 'should react to changes in view#content', () => { assertIconInnerHTML( view, '' ); view.content = ''; assertIconInnerHTML( view, '' ); view.content = ''; assertIconInnerHTML( view, '' ); } ); it( 'works for #content with more than declaration', () => { assertIconInnerHTML( view, '' ); view.content = ''; assertIconInnerHTML( view, '' ); } ); it( 'should respect parsed \'s viewBox attribute', () => { assertIconInnerHTML( view, '' ); view.content = ''; expect( view.viewBox ).to.equal( '10 20 30 40' ); } ); } ); describe( 'fill color', () => { it( 'should be set intially based on view#fillColor', () => { view.fillColor = 'red'; view.content = '' + '' + '' + '' + ''; expect( view.element.children[ 0 ].style.fill ).to.equal( 'red' ); expect( view.element.children[ 1 ].style.fill ).to.equal( '' ); expect( view.element.children[ 2 ].style.fill ).to.equal( 'red' ); } ); it( 'should react to changes in view#fillColor', () => { view.content = '' + '' + '' + '' + ''; expect( view.element.children[ 0 ].style.fill ).to.equal( '' ); expect( view.element.children[ 1 ].style.fill ).to.equal( '' ); expect( view.element.children[ 2 ].style.fill ).to.equal( '' ); view.fillColor = 'red'; expect( view.element.children[ 0 ].style.fill ).to.equal( 'red' ); expect( view.element.children[ 1 ].style.fill ).to.equal( '' ); expect( view.element.children[ 2 ].style.fill ).to.equal( 'red' ); } ); it( 'should react to changes in view#content', () => { view.content = '' + '' + '' + '' + ''; view.fillColor = 'red'; expect( view.element.children[ 0 ].style.fill ).to.equal( 'red' ); expect( view.element.children[ 1 ].style.fill ).to.equal( '' ); expect( view.element.children[ 2 ].style.fill ).to.equal( 'red' ); view.content = '' + '' + '' + ''; expect( view.element.children[ 0 ].style.fill ).to.equal( '' ); expect( view.element.children[ 1 ].style.fill ).to.equal( 'red' ); } ); } ); } ); } ); function assertIconInnerHTML( icon, expected ) { expect( normalizeHtml( icon.element.innerHTML ) ) .to.equal( expected ); }