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 = '

Testing icons placeholders (not replaced with SVG)

'; // Get icons, convert to array const results = finder.find(node); const list: Element[] = Array.prototype.slice.call(results, 0); // Test valid icons 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' ); // Icon without name 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); // Icon with extra classes 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'); // Icon within icon 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' // Validation is done in finder.ts, not in finder instance ); 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' ); // No more icons 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!
' + 'Block icons:' + ' ' + 'Inline rotated icons:' + ' ' + ' ' + 'Block rotated icons:' + ' ' + // Invalid rotation ' ' + 'Flip:' + ' ' + // Double 'horizontal' flip: second entry should not change anything ' ' + ' ' + ' ' + ' ' + // Invalid value ' ' + ''; // Get icons, convert to array const results = finder.find(node); const list: Element[] = Array.prototype.slice.call(results, 0); function testElement( name: string, expected: IconifyIconCustomisations ): void { 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 ); } // Block icon 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: IconifyIconCustomisations = { inline: false, }; expect(finder.customisations(element as IconifyElement)).to.be.eql( expected ); // Rotated icons 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, // No rotation because 30% is not a valid value }); // Flip 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, }); // No more icons 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!
' + 'Block icon:' + ' ' + 'Width and height:' + ' ' + ' ' + 'Width:' + ' ' + ' ' + 'Height:' + ' ' + ' ' + ''; // Get icons, convert to array const results = finder.find(node); const list: Element[] = Array.prototype.slice.call(results, 0); function testElement( name: string, expected: IconifyIconCustomisations ): void { 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 ); } // Block icon 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: IconifyIconCustomisations = { inline: false, }; expect(finder.customisations(element as IconifyElement)).to.be.eql( expected ); // Width and height testElement('mdi:account', { inline: false, width: '24', height: '24', }); testElement('mdi:account-box', { inline: false, width: '100%', height: '100%', }); // Width only testElement('mdi:account-twotone', { inline: true, width: '32', }); testElement('mdi:account-outline', { inline: false, width: 'auto', }); // Height only testElement('mdi:account-sharp', { inline: false, height: '2em', }); testElement('mdi:account-square', { inline: true, height: 'auto', }); // No more icons 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!
' + 'Inline icon:' + ' ' + 'Alignment:' + ' ' + ' ' + // 'bottom' overrides 'top', 'center' overrides 'right', extra comma ' ' + // spaces instead of comma, 'middle' overrides 'bottom' ' ' + ''; // Get icons, convert to array const results = finder.find(node); const list: Element[] = Array.prototype.slice.call(results, 0); function testElement( name: string, expected: IconifyIconCustomisations ): void { 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 ); } // First icon 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: IconifyIconCustomisations = { inline: true, }; expect(finder.customisations(element as IconifyElement)).to.be.eql( expected ); // Alignment 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', }); // No more icons element = list.shift(); expect(element).to.be.equal(void 0); }); });