|
|
@@ -4,6 +4,7 @@
|
|
|
*/
|
|
|
|
|
|
import IconView from '../../src/icon/iconview';
|
|
|
+import normalizeHtml from '@ckeditor/ckeditor5-utils/tests/_utils/normalizehtml';
|
|
|
|
|
|
describe( 'IconView', () => {
|
|
|
let view;
|
|
|
@@ -22,6 +23,10 @@ describe( 'IconView', () => {
|
|
|
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.getAttribute( 'class' ) ).to.equal( 'ck-icon' );
|
|
|
@@ -66,5 +71,50 @@ describe( 'IconView', () => {
|
|
|
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 = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg">' +
|
|
|
+ '<path class="ck-icon__fill"></path><path></path><path class="ck-icon__fill"></path></svg>';
|
|
|
+
|
|
|
+ expect( normalizeHtml( view.element.innerHTML ) )
|
|
|
+ .to.equal( '<path class="ck-icon__fill" style="fill:red"></path>' +
|
|
|
+ '<path></path>' +
|
|
|
+ '<path class="ck-icon__fill" style="fill:red"></path>' );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'should react to changes in view#fillColor', () => {
|
|
|
+ view.content = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg">' +
|
|
|
+ '<path class="ck-icon__fill"></path><path></path><path class="ck-icon__fill"></path></svg>';
|
|
|
+
|
|
|
+ expect( normalizeHtml( view.element.innerHTML ) )
|
|
|
+ .to.equal( '<path class="ck-icon__fill"></path><path></path><path class="ck-icon__fill"></path>' );
|
|
|
+
|
|
|
+ view.fillColor = 'red';
|
|
|
+ expect( normalizeHtml( view.element.innerHTML ) )
|
|
|
+ .to.equal( '<path class="ck-icon__fill" style="fill:red"></path>' +
|
|
|
+ '<path></path>' +
|
|
|
+ '<path class="ck-icon__fill" style="fill:red"></path>' );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'should react to changes in view#content', () => {
|
|
|
+ view.content = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg">' +
|
|
|
+ '<path class="ck-icon__fill"></path><path></path><path class="ck-icon__fill"></path></svg>';
|
|
|
+ view.fillColor = 'red';
|
|
|
+
|
|
|
+ expect( normalizeHtml( view.element.innerHTML ) )
|
|
|
+ .to.equal( '<path class="ck-icon__fill" style="fill:red"></path>' +
|
|
|
+ '<path></path>' +
|
|
|
+ '<path class="ck-icon__fill" style="fill:red"></path>' );
|
|
|
+
|
|
|
+ view.content = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg">' +
|
|
|
+ '<path></path><path class="ck-icon__fill"></path></svg>';
|
|
|
+
|
|
|
+ expect( normalizeHtml( view.element.innerHTML ) )
|
|
|
+ .to.equal( '<path></path><path class="ck-icon__fill" style="fill:red"></path>' );
|
|
|
+ } );
|
|
|
+ } );
|
|
|
} );
|
|
|
} );
|