import mocha from 'mocha' ; import chai from 'chai' ; import { getNode } from './node' ; import { finder } from '@iconify/iconify/lib/finders/iconify' ; import { IconifyElement } from '@iconify/iconify/lib/modules/element' ; import { IconifyIconCustomisations } from '@iconify/utils/lib/customisations' ; const expect = chai . expect ; describe ( 'Testing Iconify finder' , ( ) => { it ( 'Finding nodes and getting node name' , ( ) => { const node = getNode ( 'iconify-finder' ) ; node . innerHTML = '<div><p>Testing <span>icons</span> placeholders (not replaced with SVG)</p><ul>' + '<li>Valid icons: <span class="iconify" data-icon="mdi:home"></span><i class="iconify-inline" data-icon="mdi:account"></i></li>' + '<li>Icon without name: <span class="iconify"></span></li>' + '<li>Icon with extra classes: <i class="iconify iconify--mdi" data-icon="mdi:home"></i></li>' + '<li>Icon within icon: <span class="iconify" data-icon="mdi:alert:invalid"><i class="iconify" data-icon="mdi:question">text</i></span></li>' + '<li>Icon with wrong tag: <p class="iconify" data-icon="mdi:alert"></p></li>' + '</ul></div>' ; const results = finder . find ( node ) ; const list = Array . prototype . slice . call ( results , 0 ) ; let element = list . shift ( ) ; expect ( element ) . to . not . be . equal ( void 0 ) ; expect ( element . tagName ) . to . be . equal ( 'SPAN' ) ; expect ( element . getAttribute ( 'data-icon' ) ) . to . be . equal ( 'mdi:home' ) ; expect ( finder . name ( element as IconifyElement ) ) . to . be . equal ( 'mdi:home' ) ; element = list . shift ( ) ; expect ( element ) . to . not . be . equal ( void 0 ) ; expect ( element . tagName ) . to . be . equal ( 'I' ) ; expect ( element . getAttribute ( 'data-icon' ) ) . to . be . equal ( 'mdi:account' ) ; expect ( finder . name ( element as IconifyElement ) ) . to . be . equal ( 'mdi:account' ) ; element = list . shift ( ) ; expect ( element ) . to . not . be . equal ( void 0 ) ; expect ( element . tagName ) . to . be . equal ( 'SPAN' ) ; expect ( element . getAttribute ( 'data-icon' ) ) . to . be . equal ( null ) ; expect ( finder . name ( element as IconifyElement ) ) . to . be . equal ( null ) ; element = list . shift ( ) ; expect ( element ) . to . not . be . equal ( void 0 ) ; expect ( element . tagName ) . to . be . equal ( 'I' ) ; expect ( element . getAttribute ( 'data-icon' ) ) . to . be . equal ( 'mdi:home' ) ; expect ( finder . name ( element as IconifyElement ) ) . to . be . equal ( 'mdi:home' ) ; element = list . shift ( ) ; expect ( element ) . to . not . be . equal ( void 0 ) ; expect ( element . tagName ) . to . be . equal ( 'SPAN' ) ; expect ( element . getAttribute ( 'data-icon' ) ) . to . be . equal ( 'mdi:alert:invalid' ) ; expect ( finder . name ( element as IconifyElement ) ) . to . be . equal ( 'mdi:alert:invalid' ) ; element = list . shift ( ) ; expect ( element ) . to . not . be . equal ( void 0 ) ; expect ( element . tagName ) . to . be . equal ( 'I' ) ; expect ( element . getAttribute ( 'data-icon' ) ) . to . be . equal ( 'mdi:question' ) ; expect ( finder . name ( element as IconifyElement ) ) . to . be . equal ( 'mdi:question' ) ; element = list . shift ( ) ; expect ( element ) . to . be . equal ( void 0 ) ; } ) ; it ( 'Transformations and inline/block' , ( ) => { const node = getNode ( 'iconify-finder' ) ; node . innerHTML = 'This test does not render SVG!<br />' + 'Block icons:' + '    <span class="iconify-inline" data-icon="mdi:home" data-inline="false"></span>' + 'Inline rotated icons:' + '    <span class="iconify-inline" data-icon="mdi:account" data-rotate="90deg"></span>' + '    <span class="iconify iconify-inline" data-icon="mdi:account-circle" data-rotate="2"></span>' + 'Block rotated icons:' + '    <span class="iconify" data-icon="mdi:account-box" data-rotate="175%"></span>' + '    <span class="iconify" data-icon="mdi:user" data-rotate="30%"></span>' + 'Flip:' + '    <span class="iconify" data-icon="ic:baseline-account" data-flip="horizontal,vertical"></span>' + '    <span class="iconify" data-icon="ic:twotone-account" data-flip="horizontal,vertical,horizontal"></span>' + '    <span class="iconify" data-icon="ic:round-account" data-hFlip="true"></span>' + '    <span class="iconify" data-icon="ic:sharp-account" data-vFlip="true"></span>' + '    <span class="iconify" data-icon="ic:box-account" data-vFlip="false"></span>' + '    <span class="iconify" data-icon="ic:outline-account" data-hFlip="invalid"></span>' + '' ; const results = finder . find ( node ) ; const list = Array . prototype . slice . call ( results , 0 ) ; function testElement ( name , expected ) { let element = list . shift ( ) ; expect ( element ) . to . not . be . equal ( void 0 ) ; expect ( element . getAttribute ( 'data-icon' ) ) . to . be . equal ( name ) ; expect ( finder . customisations ( element as IconifyElement ) ) . to . be . eql ( expected ) ; } let element = list . shift ( ) ; expect ( element ) . to . not . be . equal ( void 0 ) ; expect ( element . tagName ) . to . be . equal ( 'SPAN' ) ; expect ( element . getAttribute ( 'data-icon' ) ) . to . be . equal ( 'mdi:home' ) ; const expected = { inline : false , } ; expect ( finder . customisations ( element as IconifyElement ) ) . to . be . eql ( expected ) ; testElement ( 'mdi:account' , { inline : true , rotate : 1 , } ) ; testElement ( 'mdi:account-circle' , { inline : true , rotate : 2 , } ) ; testElement ( 'mdi:account-box' , { inline : false , rotate : 3 , } ) ; testElement ( 'mdi:user' , { inline : false , } ) ; testElement ( 'ic:baseline-account' , { inline : false , hFlip : true , vFlip : true , } ) ; testElement ( 'ic:twotone-account' , { inline : false , hFlip : true , vFlip : true , } ) ; testElement ( 'ic:round-account' , { inline : false , hFlip : true , } ) ; testElement ( 'ic:sharp-account' , { inline : false , vFlip : true , } ) ; testElement ( 'ic:box-account' , { inline : false , vFlip : false , } ) ; testElement ( 'ic:outline-account' , { inline : false , } ) ; element = list . shift ( ) ; expect ( element ) . to . be . equal ( void 0 ) ; } ) ; it ( 'Dimensions' , ( ) => { const node = getNode ( 'iconify-finder' ) ; node . innerHTML = 'This test does not render SVG!<br />' + 'Block icon:' + '    <span class="iconify iconify-inline" data-icon="mdi:home" data-inline="false"></span>' + 'Width and height:' + '    <span class="iconify" data-icon="mdi:account" data-width="24" data-height="24"></span>' + '    <span class="iconify" data-icon="mdi:account-box" data-width="100%" data-height="100%"></span>' + 'Width:' + '    <span class="iconify" data-icon="mdi:account-twotone" data-width="32" data-inline="true"></span>' + '    <span class="iconify" data-icon="mdi:account-outline" data-width="auto" data-height=""></span>' + 'Height:' + '    <span class="iconify-inline" data-icon="mdi:account-sharp" data-height="2em" data-inline="false"></span>' + '    <span class="iconify-inline" data-icon="mdi:account-square" data-height="auto" data-width=""></span>' + '' ; const results = finder . find ( node ) ; const list = Array . prototype . slice . call ( results , 0 ) ; function testElement ( name , expected ) { let element = list . shift ( ) ; expect ( element ) . to . not . be . equal ( void 0 ) ; expect ( element . getAttribute ( 'data-icon' ) ) . to . be . equal ( name ) ; expect ( finder . customisations ( element as IconifyElement ) ) . to . be . eql ( expected ) ; } let element = list . shift ( ) ; expect ( element ) . to . not . be . equal ( void 0 ) ; expect ( element . tagName ) . to . be . equal ( 'SPAN' ) ; expect ( element . getAttribute ( 'data-icon' ) ) . to . be . equal ( 'mdi:home' ) ; const expected = { inline : false , } ; expect ( finder . customisations ( element as IconifyElement ) ) . to . be . eql ( expected ) ; testElement ( 'mdi:account' , { inline : false , width : '24' , height : '24' , } ) ; testElement ( 'mdi:account-box' , { inline : false , width : '100%' , height : '100%' , } ) ; testElement ( 'mdi:account-twotone' , { inline : true , width : '32' , } ) ; testElement ( 'mdi:account-outline' , { inline : false , width : 'auto' , } ) ; testElement ( 'mdi:account-sharp' , { inline : false , height : '2em' , } ) ; testElement ( 'mdi:account-square' , { inline : true , height : 'auto' , } ) ; element = list . shift ( ) ; expect ( element ) . to . be . equal ( void 0 ) ; } ) ; it ( 'Alignment' , ( ) => { const node = getNode ( 'iconify-finder' ) ; node . innerHTML = 'This test does not render SVG!<br />' + 'Inline icon:' + '    <i class="iconify" data-icon="mdi:home" data-inline="true"></i>' + 'Alignment:' + '    <i class="iconify" data-icon="mdi:account" data-align="left,top"></i>' + '    <i class="iconify" data-icon="mdi:account-box" data-align="right,slice"></i>' + '    <i class="iconify-inline" data-icon="mdi:account-outline" data-align="top,right,bottom,meet,center,"></i>' + '    <i class="iconify iconify-inline" data-icon="mdi:account-twotone" data-align="bottom middle"></i>' + '' ; const results = finder . find ( node ) ; const list = Array . prototype . slice . call ( results , 0 ) ; function testElement ( name , expected ) { let element = list . shift ( ) ; expect ( element ) . to . not . be . equal ( void 0 ) ; expect ( element . getAttribute ( 'data-icon' ) ) . to . be . equal ( name ) ; expect ( finder . customisations ( element as IconifyElement ) ) . to . be . eql ( expected ) ; } let element = list . shift ( ) ; expect ( element ) . to . not . be . equal ( void 0 ) ; expect ( element . tagName ) . to . be . equal ( 'I' ) ; expect ( element . getAttribute ( 'data-icon' ) ) . to . be . equal ( 'mdi:home' ) ; const expected = { inline : true , } ; expect ( finder . customisations ( element as IconifyElement ) ) . to . be . eql ( expected ) ; testElement ( 'mdi:account' , { inline : false , hAlign : 'left' , vAlign : 'top' , } ) ; testElement ( 'mdi:account-box' , { inline : false , hAlign : 'right' , slice : true , } ) ; testElement ( 'mdi:account-outline' , { inline : true , hAlign : 'center' , vAlign : 'bottom' , slice : false , } ) ; testElement ( 'mdi:account-twotone' , { inline : true , vAlign : 'middle' , } ) ; element = list . shift ( ) ; expect ( element ) . to . be . equal ( void 0 ) ; } ) ; } ) ;