import mocha from 'mocha' ; import chai from 'chai' ; import { getNode } from './node' ; import { addFinder , findPlaceholders , } from '@iconify/iconify/lib/modules/finder' ; import { finder as iconifyFinder } from '@iconify/iconify/lib/finders/iconify-v1' ; import { finder as iconifyIconFinder } from '@iconify/iconify/lib/finders/iconify-v1-icon' ; import { getStorage , addIconSet , getIconFromStorage , } from '@iconify/core/lib/storage/storage' ; import { renderIconInPlaceholder } from '@iconify/iconify/lib/modules/render' ; import { stringToIcon } from '@iconify/utils/lib/icon/name' ; import { IconifyElement } from '@iconify/iconify/lib/modules/element' ; const expect = chai . expect ; describe ( 'Testing legacy renderer' , ( ) => { const storage = getStorage ( '' , 'mdi' ) ; before ( ( ) => { addFinder ( iconifyIconFinder ) ; addFinder ( iconifyFinder ) ; addIconSet ( storage , { prefix : 'mdi' , icons : { 'account-box' : { body : '<path d="M6 17c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6m9-9a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3a3 3 0 0 1 3 3M3 5v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2z" fill="currentColor"/>' , } , 'account-cash' : { body : '<path d="M11 8c0 2.21-1.79 4-4 4s-4-1.79-4-4s1.79-4 4-4s4 1.79 4 4m0 6.72V20H0v-2c0-2.21 3.13-4 7-4c1.5 0 2.87.27 4 .72M24 20H13V3h11v17m-8-8.5a2.5 2.5 0 0 1 5 0a2.5 2.5 0 0 1-5 0M22 7a2 2 0 0 1-2-2h-3c0 1.11-.89 2-2 2v9a2 2 0 0 1 2 2h3c0-1.1.9-2 2-2V7z" fill="currentColor"/>' , } , 'account' : { body : '<path d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4z" fill="currentColor"/>' , } , 'home' : { body : '<path d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5z" fill="currentColor"/>' , } , } , width : 24 , height : 24 , } ) ; } ) ; it ( 'Convert placeholders to SVG' , ( ) => { const node = getNode ( 'renderer' ) ; node . innerHTML = '<div><p>Testing renderer v1 (should render SVG!)</p><ul>' + '<li>Inline icons:<br />' + '   Red icon with red border: <span class="iconify" data-icon="mdi:home" style="color: red; border: 1px solid red;"></span><br />' + '   No vertical-align, green border: <i class="iconify test-icon iconify--mdi-account" data-icon="mdi:account" style="vertical-align: 0;" data-flip="horizontal" aria-hidden="false"></i>' + '</li>' + '<li>Block icons:' + '   <iconify-icon data-icon="mdi-account-cash" title="&lt;Cash&gt;!"></iconify-icon>' + '   <span class="iconify-icon" data-icon="mdi:account" data-flip="vertical" data-width="auto"></span>' + '</li>' + '<li>Changed by attribute:' + '   <iconify-icon data-icon="mdi:account-box" data-inline="true" data-rotate="2" data-width="42"></iconify-icon>' + '</li>' + '<li>Mix of classes:' + '   <i class="iconify iconify-icon should-be-block" data-icon="mdi:home"></i>' + '</li>' + '</ul></div>' ; const items = findPlaceholders ( node ) ; expect ( items . length ) . to . be . equal ( 6 ) ; expect ( items [ 0 ] . finder ) . to . be . equal ( iconifyIconFinder ) ; expect ( items [ 1 ] . finder ) . to . be . equal ( iconifyIconFinder ) ; expect ( items [ 2 ] . finder ) . to . be . equal ( iconifyIconFinder ) ; expect ( items [ 3 ] . finder ) . to . be . equal ( iconifyIconFinder ) ; expect ( items [ 4 ] . finder ) . to . be . equal ( iconifyFinder ) ; expect ( items [ 5 ] . finder ) . to . be . equal ( iconifyFinder ) ; /**
         * Test third icon (first 2 should be last)
         */ let element = items . shift ( ) ; expect ( element . name ) . to . be . eql ( { provider : '' , prefix : 'mdi' , name : 'account-cash' , } ) ; expect ( element . finder ) . to . be . equal ( iconifyIconFinder ) ; let customisations = element . finder . customisations ( element . element ) ; expect ( customisations ) . to . be . eql ( { inline : false , } ) ; let iconData = getIconFromStorage ( storage , element . name . name ) ; expect ( iconData ) . to . not . be . equal ( null ) ; let svg = renderIconInPlaceholder ( element , customisations , iconData ) as IconifyElement ; expect ( svg . tagName . toUpperCase ( ) ) . to . be . equal ( 'SVG' ) ; expect ( svg . getAttribute ( 'viewBox' ) ) . to . be . equal ( '0 0 24 24' ) ; expect ( svg . getAttribute ( 'height' ) ) . to . be . equal ( '1em' ) ; expect ( svg . getAttribute ( 'data-icon' ) ) . to . be . equal ( 'mdi-account-cash' ) ; expect ( svg . getAttribute ( 'class' ) ) . to . be . equal ( 'iconify iconify--mdi' ) ; expect ( svg . getAttribute ( 'title' ) ) . to . be . equal ( '<Cash>!' ) ; expect ( svg . style . verticalAlign ) . to . be . equal ( '' ) ; expect ( element . finder . name ( svg ) ) . to . be . equal ( 'mdi-account-cash' ) ; expect ( element . finder . customisations ( svg ) ) . to . be . eql ( customisations ) ; /**
         * Test fourth item
         */ element = items . shift ( ) ; expect ( element . name ) . to . be . eql ( { provider : '' , prefix : 'mdi' , name : 'account' , } ) ; expect ( element . finder ) . to . be . equal ( iconifyIconFinder ) ; customisations = element . finder . customisations ( element . element ) ; expect ( customisations ) . to . be . eql ( { inline : false , vFlip : true , width : 'auto' , } ) ; iconData = getIconFromStorage ( storage , element . name . name ) ; expect ( iconData ) . to . not . be . equal ( null ) ; svg = renderIconInPlaceholder ( element , customisations , iconData ) as IconifyElement ; expect ( svg . tagName . toUpperCase ( ) ) . to . be . equal ( 'SVG' ) ; expect ( svg . getAttribute ( 'viewBox' ) ) . to . be . equal ( '0 0 24 24' ) ; expect ( svg . getAttribute ( 'height' ) ) . to . be . equal ( '24' ) ; expect ( svg . getAttribute ( 'data-icon' ) ) . to . be . equal ( 'mdi:account' ) ; expect ( svg . getAttribute ( 'class' ) ) . to . be . equal ( 'iconify iconify--mdi iconify-icon' ) ; expect ( svg . style . verticalAlign ) . to . be . equal ( '' ) ; expect ( element . finder . name ( svg ) ) . to . be . equal ( 'mdi:account' ) ; expect ( element . finder . customisations ( svg ) ) . to . be . eql ( customisations ) ; /**
         * Test fifth icon
         */ element = items . shift ( ) ; expect ( element . name ) . to . be . eql ( { provider : '' , prefix : 'mdi' , name : 'account-box' , } ) ; expect ( element . finder ) . to . be . equal ( iconifyIconFinder ) ; customisations = element . finder . customisations ( element . element ) ; expect ( customisations ) . to . be . eql ( { inline : true , rotate : 2 , width : '42' , } ) ; iconData = getIconFromStorage ( storage , element . name . name ) ; expect ( iconData ) . to . not . be . equal ( null ) ; svg = renderIconInPlaceholder ( element , customisations , iconData ) as IconifyElement ; expect ( svg . tagName . toUpperCase ( ) ) . to . be . equal ( 'SVG' ) ; expect ( svg . getAttribute ( 'viewBox' ) ) . to . be . equal ( '0 0 24 24' ) ; expect ( svg . getAttribute ( 'height' ) ) . to . be . equal ( '42' ) ; expect ( svg . getAttribute ( 'data-icon' ) ) . to . be . equal ( 'mdi:account-box' ) ; expect ( svg . getAttribute ( 'class' ) ) . to . be . equal ( 'iconify iconify--mdi' ) ; let verticalAlign = svg . style . verticalAlign ; expect ( verticalAlign === '-0.125em' || verticalAlign === '-0.12em' ) . to . be . equal ( true , 'Invalid vertical-align value: ' + verticalAlign ) ; expect ( element . finder . name ( svg ) ) . to . be . equal ( 'mdi:account-box' ) ; expect ( element . finder . customisations ( svg ) ) . to . be . eql ( customisations ) ; const rotationSVG = svg ; /**
         * Test sixth icon
         */ element = items . shift ( ) ; expect ( element . name ) . to . be . eql ( { provider : '' , prefix : 'mdi' , name : 'home' , } ) ; expect ( element . finder ) . to . be . equal ( iconifyIconFinder ) ; customisations = element . finder . customisations ( element . element ) ; expect ( customisations ) . to . be . eql ( { inline : false , } ) ; iconData = getIconFromStorage ( storage , element . name . name ) ; expect ( iconData ) . to . not . be . equal ( null ) ; svg = renderIconInPlaceholder ( element , customisations , iconData ) as IconifyElement ; expect ( svg . tagName . toUpperCase ( ) ) . to . be . equal ( 'SVG' ) ; expect ( svg . getAttribute ( 'viewBox' ) ) . to . be . equal ( '0 0 24 24' ) ; expect ( svg . getAttribute ( 'height' ) ) . to . be . equal ( '1em' ) ; expect ( svg . getAttribute ( 'data-icon' ) ) . to . be . equal ( 'mdi:home' ) ; expect ( svg . getAttribute ( 'class' ) ) . to . be . equal ( 'iconify iconify--mdi iconify-icon should-be-block' ) ; expect ( svg . style . verticalAlign ) . to . be . equal ( '' ) ; expect ( element . finder . name ( svg ) ) . to . be . equal ( 'mdi:home' ) ; expect ( element . finder . customisations ( svg ) ) . to . be . eql ( customisations ) ; /**
         * Test first icon
         */ element = items . shift ( ) ; expect ( element . name ) . to . be . eql ( { provider : '' , prefix : 'mdi' , name : 'home' , } ) ; expect ( element . finder ) . to . be . equal ( iconifyFinder ) ; customisations = element . finder . customisations ( element . element ) ; expect ( customisations ) . to . be . eql ( { inline : true , } ) ; iconData = getIconFromStorage ( storage , element . name . name ) ; expect ( iconData ) . to . not . be . equal ( null ) ; svg = renderIconInPlaceholder ( element , customisations , iconData ) as IconifyElement ; expect ( svg . tagName . toUpperCase ( ) ) . to . be . equal ( 'SVG' ) ; expect ( svg . getAttribute ( 'viewBox' ) ) . to . be . equal ( '0 0 24 24' ) ; expect ( svg . getAttribute ( 'width' ) ) . to . be . equal ( '1em' ) ; expect ( svg . getAttribute ( 'data-icon' ) ) . to . be . equal ( 'mdi:home' ) ; expect ( svg . getAttribute ( 'class' ) ) . to . be . equal ( 'iconify iconify--mdi' ) ; expect ( svg . style . color ) . to . be . equal ( 'red' ) ; expect ( svg . style . borderWidth ) . to . be . equal ( '1px' ) ; verticalAlign = svg . style . verticalAlign ; expect ( verticalAlign === '-0.125em' || verticalAlign === '-0.12em' ) . to . be . equal ( true , 'Invalid vertical-align value: ' + verticalAlign ) ; expect ( element . finder . name ( svg ) ) . to . be . equal ( 'mdi:home' ) ; expect ( element . finder . customisations ( svg ) ) . to . be . eql ( customisations ) ; /**
         * Test second item
         */ element = items . shift ( ) ; expect ( element . name ) . to . be . eql ( { provider : '' , prefix : 'mdi' , name : 'account' , } ) ; expect ( element . finder ) . to . be . equal ( iconifyFinder ) ; customisations = element . finder . customisations ( element . element ) ; expect ( customisations ) . to . be . eql ( { inline : true , hFlip : true , } ) ; element . element . style . border = '1px solid green' ; iconData = getIconFromStorage ( storage , element . name . name ) ; expect ( iconData ) . to . not . be . equal ( null ) ; svg = renderIconInPlaceholder ( element , customisations , iconData ) as IconifyElement ; expect ( svg . tagName . toUpperCase ( ) ) . to . be . equal ( 'SVG' ) ; expect ( svg . getAttribute ( 'viewBox' ) ) . to . be . equal ( '0 0 24 24' ) ; expect ( svg . getAttribute ( 'height' ) ) . to . be . equal ( '1em' ) ; expect ( svg . getAttribute ( 'data-icon' ) ) . to . be . equal ( 'mdi:account' ) ; expect ( svg . getAttribute ( 'class' ) ) . to . be . equal ( 'iconify iconify--mdi test-icon' ) ; expect ( svg . style . verticalAlign ) . to . be . equal ( '0px' ) ; expect ( svg . style . borderWidth ) . to . be . equal ( '1px' ) ; expect ( element . finder . name ( svg ) ) . to . be . equal ( 'mdi:account' ) ; expect ( element . finder . customisations ( svg ) ) . to . be . eql ( customisations ) ; expect ( items ) . to . be . eql ( [ ] ) ; expect ( findPlaceholders ( node ) ) . to . be . eql ( [ ] ) ; /**
         * Test finding modified SVG
         */ rotationSVG . removeAttribute ( 'data-rotate' ) ; const items2 = findPlaceholders ( node ) ; expect ( items2 . length ) . to . be . equal ( 1 ) ; element = items2 . shift ( ) ; expect ( element . element ) . to . be . equal ( rotationSVG ) ; expect ( element . customisations ) . to . be . eql ( { inline : true , width : '42' , } ) ; } ) ; it ( 'Change attributes' , ( ) => { const node = getNode ( 'renderer' ) ; node . innerHTML = '<div>Testing attributes v1: <span class="iconify" data-icon="mdi:home" data-flip="horizontal" style="color: red; box-shadow: 0 0 2px black;"></span></div>' ; const items = findPlaceholders ( node ) ; expect ( items . length ) . to . be . equal ( 1 ) ; /**
         * Test icon
         */ let element = items . shift ( ) ; expect ( element . name ) . to . be . eql ( { provider : '' , prefix : 'mdi' , name : 'home' , } ) ; expect ( element . finder ) . to . be . equal ( iconifyFinder ) ; let customisations = element . finder . customisations ( element . element ) ; expect ( customisations ) . to . be . eql ( { inline : true , hFlip : true , } ) ; let iconData = getIconFromStorage ( storage , element . name . name ) ; expect ( iconData ) . to . not . be . equal ( null ) ; let svg = renderIconInPlaceholder ( element , customisations , iconData ) as IconifyElement ; expect ( svg . tagName . toUpperCase ( ) ) . to . be . equal ( 'SVG' ) ; expect ( svg . getAttribute ( 'viewBox' ) ) . to . be . equal ( '0 0 24 24' ) ; expect ( svg . getAttribute ( 'width' ) ) . to . be . equal ( '1em' ) ; expect ( svg . getAttribute ( 'data-icon' ) ) . to . be . equal ( 'mdi:home' ) ; expect ( svg . getAttribute ( 'class' ) ) . to . be . equal ( 'iconify iconify--mdi' ) ; expect ( svg . style . color ) . to . be . equal ( 'red' ) ; let verticalAlign = svg . style . verticalAlign ; expect ( verticalAlign === '-0.125em' || verticalAlign === '-0.12em' ) . to . be . equal ( true , 'Invalid vertical-align value: ' + verticalAlign ) ; expect ( element . finder . name ( svg ) ) . to . be . equal ( 'mdi:home' ) ; expect ( element . finder . customisations ( svg ) ) . to . be . eql ( customisations ) ; let lastElement = element ; let lastCustomisations = customisations ; let lastSVG = svg ; /**
         * Render SVG without changes
         */ element = { element : svg , finder : element . finder , name : stringToIcon ( element . finder . name ( svg ) as string ) , } ; expect ( element ) . to . not . be . eql ( lastElement ) ; expect ( element . name ) . to . be . eql ( lastElement . name ) ; customisations = element . finder . customisations ( element . element ) ; expect ( customisations ) . to . be . eql ( lastCustomisations ) ; expect ( customisations ) . to . be . eql ( { inline : true , hFlip : true , } ) ; iconData = getIconFromStorage ( storage , element . name . name ) ; expect ( iconData ) . to . not . be . equal ( null ) ; svg = renderIconInPlaceholder ( element , customisations , iconData ) as IconifyElement ; expect ( svg ) . to . not . be . eql ( lastSVG ) ; expect ( svg . tagName . toUpperCase ( ) ) . to . be . equal ( 'SVG' ) ; [ 'aria-hidden' , 'focusable' , 'role' , 'width' , 'height' , 'viewBox' , 'preserveAspectRatio' , 'data-icon' , 'class' , ] . forEach ( ( attr ) => { expect ( svg . getAttribute ( attr ) ) . to . be . equal ( lastSVG . getAttribute ( attr ) , 'Different values for attribute ' + attr ) ; } ) ; [ 'vertical-align' , 'color' ] . forEach ( ( attr ) => { expect ( svg . style [ attr ] ) . to . be . equal ( lastSVG . style [ attr ] , 'Different values for style ' + attr ) ; } ) ; expect ( element . finder . name ( svg ) ) . to . be . equal ( 'mdi:home' ) ; expect ( element . finder . customisations ( svg ) ) . to . be . eql ( customisations ) ; lastElement = element ; lastCustomisations = customisations ; lastSVG = svg ; /**
         * Rotate icon
         */ lastSVG . setAttribute ( 'data-rotate' , '1' ) ; element = { element : svg , finder : element . finder , name : stringToIcon ( element . finder . name ( svg ) as string ) , } ; expect ( element ) . to . not . be . eql ( lastElement ) ; expect ( element . name ) . to . be . eql ( lastElement . name ) ; customisations = element . finder . customisations ( element . element ) ; expect ( customisations ) . to . not . be . eql ( lastCustomisations ) ; expect ( customisations ) . to . be . eql ( { inline : true , rotate : 1 , hFlip : true , } ) ; iconData = getIconFromStorage ( storage , element . name . name ) ; expect ( iconData ) . to . not . be . equal ( null ) ; svg = renderIconInPlaceholder ( element , customisations , iconData ) as IconifyElement ; expect ( svg ) . to . not . be . eql ( lastSVG ) ; expect ( svg . getAttribute ( 'data-rotate' ) ) . to . be . equal ( '1' ) ; expect ( element . finder . name ( svg ) ) . to . be . equal ( 'mdi:home' ) ; expect ( element . finder . customisations ( svg ) ) . to . be . eql ( customisations ) ; lastElement = element ; lastCustomisations = customisations ; lastSVG = svg ; /**
         * Change icon name and reset flip
         */ lastSVG . setAttribute ( 'data-icon' , 'mdi-account' ) ; lastSVG . removeAttribute ( 'data-flip' ) ; element = { element : svg , finder : element . finder , name : stringToIcon ( element . finder . name ( svg ) as string ) , } ; expect ( element ) . to . not . be . eql ( lastElement ) ; expect ( element . name ) . to . not . be . eql ( lastElement . name ) ; expect ( element . name ) . to . be . eql ( { provider : '' , prefix : 'mdi' , name : 'account' , } ) ; customisations = element . finder . customisations ( element . element ) ; expect ( customisations ) . to . not . be . eql ( lastCustomisations ) ; expect ( customisations ) . to . be . eql ( { inline : true , rotate : 1 , } ) ; iconData = getIconFromStorage ( storage , element . name . name ) ; expect ( iconData ) . to . not . be . equal ( null ) ; svg = renderIconInPlaceholder ( element , customisations , iconData ) as IconifyElement ; expect ( svg ) . to . not . be . eql ( lastSVG ) ; expect ( svg . getAttribute ( 'data-rotate' ) ) . to . be . equal ( '1' ) ; expect ( svg . getAttribute ( 'data-icon' ) ) . to . be . equal ( 'mdi-account' ) ; expect ( svg . getAttribute ( 'data-flip' ) ) . to . be . equal ( null ) ; expect ( element . finder . name ( svg ) ) . to . be . equal ( 'mdi-account' ) ; expect ( element . finder . customisations ( svg ) ) . to . be . eql ( customisations ) ; } ) ; it ( 'Invalid icon name' , ( ) => { const node = getNode ( 'renderer' ) ; node . innerHTML = '<div>Testing invalid icon name v1: <span class="iconify" data-icon="mdi:home" data-flip="horizontal" style="color: red; box-shadow: 0 0 2px black;"></span></div>' ; const items = findPlaceholders ( node ) ; expect ( items . length ) . to . be . equal ( 1 ) ; /**
         * Test icon
         */ let element = items . shift ( ) ; expect ( element . name ) . to . be . eql ( { provider : '' , prefix : 'mdi' , name : 'home' , } ) ; expect ( element . finder ) . to . be . equal ( iconifyFinder ) ; let customisations = element . finder . customisations ( element . element ) ; expect ( customisations ) . to . be . eql ( { inline : true , hFlip : true , } ) ; let iconData = getIconFromStorage ( storage , element . name . name ) ; expect ( iconData ) . to . not . be . equal ( null ) ; let svg = renderIconInPlaceholder ( element , customisations , iconData ) as IconifyElement ; /**
         * Change icon name to invalid
         */ svg . setAttribute ( 'data-icon' , 'mdi' ) ; const name = element . finder . name ( svg ) ; expect ( name ) . to . be . equal ( 'mdi' ) ; expect ( stringToIcon ( name as string ) ) . to . be . equal ( null ) ; } ) ; it ( 'Empty icon name' , ( ) => { const node = getNode ( 'renderer' ) ; node . innerHTML = '<div>Testing empty icon name v1 (should render SVG!): <span class="iconify" data-icon="mdi:home" data-flip="horizontal" style="color: red; box-shadow: 0 0 2px black;"></span></div>' ; const items = findPlaceholders ( node ) ; expect ( items . length ) . to . be . equal ( 1 ) ; /**
         * Test icon
         */ let element = items . shift ( ) ; expect ( element . name ) . to . be . eql ( { provider : '' , prefix : 'mdi' , name : 'home' , } ) ; expect ( element . finder ) . to . be . equal ( iconifyFinder ) ; let customisations = element . finder . customisations ( element . element ) ; expect ( customisations ) . to . be . eql ( { inline : true , hFlip : true , } ) ; let iconData = getIconFromStorage ( storage , element . name . name ) ; expect ( iconData ) . to . not . be . equal ( null ) ; let svg = renderIconInPlaceholder ( element , customisations , iconData ) as IconifyElement ; /**
         * Change icon name to invalid
         */ svg . removeAttribute ( 'data-icon' ) ; expect ( element . finder . name ( svg ) ) . to . be . equal ( null ) ; } ) ; it ( 'Change icon name' , ( ) => { const node = getNode ( 'renderer' ) ; node . innerHTML = '<div>Testing icon name v1 (should render SVG!): <span class="iconify" data-icon="mdi:home" data-flip="horizontal" style="color: red; box-shadow: 0 0 2px black;"></span></div>' ; const items = findPlaceholders ( node ) ; expect ( items . length ) . to . be . equal ( 1 ) ; /**
         * Test icon
         */ let element = items . shift ( ) ; expect ( element . name ) . to . be . eql ( { provider : '' , prefix : 'mdi' , name : 'home' , } ) ; expect ( element . finder ) . to . be . equal ( iconifyFinder ) ; let customisations = element . finder . customisations ( element . element ) ; expect ( customisations ) . to . be . eql ( { inline : true , hFlip : true , } ) ; let iconData = getIconFromStorage ( storage , element . name . name ) ; expect ( iconData ) . to . not . be . equal ( null ) ; expect ( iconData . body . indexOf ( 'M6 17c0-2' ) ) . to . be . equal ( - 1 , 'Wrong icon body: ' + iconData . body ) ; let svg = renderIconInPlaceholder ( element , customisations , iconData ) as IconifyElement ; let lastElement = element ; let lastCustomisations = customisations ; let lastSVG = svg ; /**
         * Change name
         */ svg . setAttribute ( 'data-icon' , 'mdi:account-box' ) ; element = { element : svg , finder : element . finder , name : stringToIcon ( element . finder . name ( svg ) as string ) , } ; expect ( element ) . to . not . be . eql ( lastElement ) ; expect ( element . name ) . to . not . be . eql ( lastElement . name ) ; customisations = element . finder . customisations ( element . element ) ; expect ( customisations ) . to . be . eql ( lastCustomisations ) ; expect ( customisations ) . to . be . eql ( { inline : true , hFlip : true , } ) ; iconData = getIconFromStorage ( storage , element . name . name ) ; expect ( iconData ) . to . not . be . equal ( null ) ; expect ( iconData . body . indexOf ( 'M6 17c0-2' ) ) . to . not . be . equal ( - 1 , 'Wrong icon body: ' + iconData . body ) ; svg = renderIconInPlaceholder ( element , customisations , iconData ) as IconifyElement ; expect ( svg ) . to . not . be . eql ( lastSVG ) ; expect ( element . finder . name ( svg ) ) . to . be . equal ( 'mdi:account-box' ) ; expect ( element . finder . customisations ( svg ) ) . to . be . eql ( customisations ) ; } ) ; it ( 'Rotating icon' , ( ) => { const node = getNode ( 'renderer' ) ; node . innerHTML = '<div>Testing rotation v1 (should render SVG!): <span class="iconify-icon" data-icon="mdi:home"></span></div>' ; const items = findPlaceholders ( node ) ; expect ( items . length ) . to . be . equal ( 1 ) ; /**
         * Test icon
         */ let element = items . shift ( ) ; expect ( element . name ) . to . be . eql ( { provider : '' , prefix : 'mdi' , name : 'home' , } ) ; expect ( element . finder ) . to . be . equal ( iconifyIconFinder ) ; let customisations = element . finder . customisations ( element . element ) ; expect ( customisations ) . to . be . eql ( { inline : false , } ) ; let iconData = getIconFromStorage ( storage , element . name . name ) ; expect ( iconData ) . to . not . be . equal ( null ) ; let svg = renderIconInPlaceholder ( element , customisations , iconData ) as IconifyElement ; let html = renderIconInPlaceholder ( element , customisations , iconData , true ) as string ; expect ( html . indexOf ( 'transform="' ) ) . to . be . equal ( - 1 , 'Found transform in icon: ' + html ) ; let lastElement = element ; let lastCustomisations = customisations ; let lastSVG = svg ; /**
         * Rotate
         */ svg . setAttribute ( 'data-rotate' , '2' ) ; element = { element : svg , finder : element . finder , name : stringToIcon ( element . finder . name ( svg ) as string ) , } ; expect ( element ) . to . not . be . eql ( lastElement ) ; expect ( element . name ) . to . be . eql ( lastElement . name ) ; customisations = element . finder . customisations ( element . element ) ; expect ( customisations ) . to . not . be . eql ( lastCustomisations ) ; expect ( customisations ) . to . be . eql ( { inline : false , rotate : 2 , } ) ; iconData = getIconFromStorage ( storage , element . name . name ) ; expect ( iconData ) . to . not . be . equal ( null ) ; svg = renderIconInPlaceholder ( element , customisations , iconData ) as IconifyElement ; expect ( svg ) . to . not . be . eql ( lastSVG ) ; html = renderIconInPlaceholder ( element , customisations , iconData , true ) as string ; expect ( html . indexOf ( 'transform="' ) ) . to . not . be . equal ( - 1 , 'Missing transform in icon: ' + html ) ; expect ( element . finder . name ( svg ) ) . to . be . equal ( 'mdi:home' ) ; expect ( element . finder . customisations ( svg ) ) . to . be . eql ( customisations ) ; } ) ; it ( 'Changing size' , ( ) => { const node = getNode ( 'renderer' ) ; node . innerHTML = '<div>Testing size v1 (should render SVG!): <span class="iconify" data-icon="mdi:home" style="box-shadow: 0 0 2px black;"></span></div>' ; const items = findPlaceholders ( node ) ; expect ( items . length ) . to . be . equal ( 1 ) ; /**
         * Test icon
         */ let element = items . shift ( ) ; expect ( element . name ) . to . be . eql ( { provider : '' , prefix : 'mdi' , name : 'home' , } ) ; expect ( element . finder ) . to . be . equal ( iconifyFinder ) ; let customisations = element . finder . customisations ( element . element ) ; expect ( customisations ) . to . be . eql ( { inline : true , } ) ; let iconData = getIconFromStorage ( storage , element . name . name ) ; expect ( iconData ) . to . not . be . equal ( null ) ; let svg = renderIconInPlaceholder ( element , customisations , iconData ) as IconifyElement ; expect ( svg . getAttribute ( 'width' ) ) . to . be . equal ( '1em' ) ; expect ( svg . getAttribute ( 'height' ) ) . to . be . equal ( '1em' ) ; let lastElement = element ; let lastCustomisations = customisations ; let lastSVG = svg ; /**
         * Set height
         */ svg . setAttribute ( 'data-height' , '24' ) ; element = { element : svg , finder : element . finder , name : stringToIcon ( element . finder . name ( svg ) as string ) , } ; expect ( element ) . to . not . be . eql ( lastElement ) ; expect ( element . name ) . to . be . eql ( lastElement . name ) ; customisations = element . finder . customisations ( element . element ) ; expect ( customisations ) . to . not . be . eql ( lastCustomisations ) ; expect ( customisations ) . to . be . eql ( { inline : true , height : '24' , } ) ; iconData = getIconFromStorage ( storage , element . name . name ) ; expect ( iconData ) . to . not . be . equal ( null ) ; svg = renderIconInPlaceholder ( element , customisations , iconData ) as IconifyElement ; expect ( svg ) . to . not . be . eql ( lastSVG ) ; expect ( svg . getAttribute ( 'width' ) ) . to . be . equal ( '24' ) ; expect ( svg . getAttribute ( 'height' ) ) . to . be . equal ( '24' ) ; expect ( element . finder . name ( svg ) ) . to . be . equal ( 'mdi:home' ) ; expect ( element . finder . customisations ( svg ) ) . to . be . eql ( customisations ) ; } ) ; it ( 'Changing alignment' , ( ) => { const node = getNode ( 'renderer' ) ; node . innerHTML = '<div>Testing alignment v1 (should render SVG!): <span class="iconify" data-icon="mdi:home" data-width="48" data-height="24" style="box-shadow: 0 0 2px black;"></span></div>' ; const items = findPlaceholders ( node ) ; expect ( items . length ) . to . be . equal ( 1 ) ; /**
         * Test icon
         */ let element = items . shift ( ) ; expect ( element . name ) . to . be . eql ( { provider : '' , prefix : 'mdi' , name : 'home' , } ) ; expect ( element . finder ) . to . be . equal ( iconifyFinder ) ; let customisations = element . finder . customisations ( element . element ) ; expect ( customisations ) . to . be . eql ( { inline : true , width : '48' , height : '24' , } ) ; let iconData = getIconFromStorage ( storage , element . name . name ) ; expect ( iconData ) . to . not . be . equal ( null ) ; let svg = renderIconInPlaceholder ( element , customisations , iconData ) as IconifyElement ; expect ( svg . getAttribute ( 'width' ) ) . to . be . equal ( '48' ) ; expect ( svg . getAttribute ( 'height' ) ) . to . be . equal ( '24' ) ; expect ( svg . getAttribute ( 'preserveAspectRatio' ) ) . to . be . equal ( 'xMidYMid meet' ) ; let lastElement = element ; let lastCustomisations = customisations ; let lastSVG = svg ; /**
         * Set alignment
         */ svg . setAttribute ( 'data-align' , 'left, bottom' ) ; element = { element : svg , finder : element . finder , name : stringToIcon ( element . finder . name ( svg ) as string ) , } ; expect ( element ) . to . not . be . eql ( lastElement ) ; expect ( element . name ) . to . be . eql ( lastElement . name ) ; customisations = element . finder . customisations ( element . element ) ; expect ( customisations ) . to . not . be . eql ( lastCustomisations ) ; expect ( customisations ) . to . be . eql ( { inline : true , width : '48' , height : '24' , hAlign : 'left' , vAlign : 'bottom' , } ) ; iconData = getIconFromStorage ( storage , element . name . name ) ; expect ( iconData ) . to . not . be . equal ( null ) ; svg = renderIconInPlaceholder ( element , customisations , iconData ) as IconifyElement ; expect ( svg ) . to . not . be . eql ( lastSVG ) ; expect ( svg . getAttribute ( 'width' ) ) . to . be . equal ( '48' ) ; expect ( svg . getAttribute ( 'height' ) ) . to . be . equal ( '24' ) ; expect ( svg . getAttribute ( 'preserveAspectRatio' ) ) . to . be . equal ( 'xMinYMax meet' ) ; expect ( element . finder . name ( svg ) ) . to . be . equal ( 'mdi:home' ) ; expect ( element . finder . customisations ( svg ) ) . to . be . eql ( customisations ) ; } ) ; } ) ;