import mocha from 'mocha'; import chai from 'chai'; import { getNode, setRoot } from './node'; import { addFinder } from '@iconify/iconify/lib/modules/finder'; import { finder as iconifyFinder } from '@iconify/iconify/lib/finders/iconify'; import { finder as iconifyIconFinder } from '@iconify/iconify/lib/finders/iconify-icon'; import { getStorage, addIconSet } from '@iconify/core/lib/storage/storage'; import { listRootNodes } from '@iconify/iconify/lib/modules/root'; import { scanDOM } from '@iconify/iconify/lib/modules/scanner'; import { initObserver, observeNode, removeObservedNode, } from '@iconify/iconify/lib/modules/observer'; const expect = chai.expect; // Add finders addFinder(iconifyFinder); addFinder(iconifyIconFinder); describe('Observe DOM', () => { // Add mentioned icons to storage const storage = getStorage('', 'mdi'); addIconSet(storage, { prefix: 'mdi', icons: { 'account-box': { body: '', }, 'account-cash': { body: '', }, 'account': { body: '', }, 'home': { body: '', }, }, width: 24, height: 24, }); it('Basic test', (done) => { const node = getNode('observe-dom'); const ignoredNode = getNode('observe-dom'); // Set root and init observer setRoot(node); initObserver(scanDOM); // Test listRootNodes const nodes = listRootNodes(); expect(nodes.length).to.be.equal(1); expect(nodes[0].node).to.be.equal(node); expect(nodes[0].temporary).to.be.equal(false); // Set HTML node.innerHTML = '

Testing observing DOM (should render SVG!)

' + ''; ignoredNode.innerHTML = '

This node should be ignored

' + ''; // Test nodes setTimeout(() => { // Find elements let elements = node.querySelectorAll('svg.iconify'); expect(elements.length).to.be.equal(1); elements = ignoredNode.querySelectorAll('svg.iconify'); expect(elements.length).to.be.equal( 0, 'Looks like document.body is observed!' ); // Test for "home" icon contents expect(node.innerHTML.indexOf('20v-6h4v6h5v')).to.not.be.equal(-1); done(); }, 100); }); it('Change icon', (done) => { const node = getNode('observe-dom'); // Set root and init observer setRoot(node); initObserver(scanDOM); // Set HTML node.innerHTML = '

Testing observing DOM (should render SVG!)

' + ''; // Test nodes setTimeout(() => { // Find elements const elements = node.querySelectorAll('svg.iconify'); expect(elements.length).to.be.equal(1); // Test for "home" icon contents expect(node.innerHTML.indexOf('20v-6h4v6h5v')).to.not.be.equal(-1); // Change icon elements[0].setAttribute('data-icon', 'mdi:account'); // Test nodes after timer setTimeout(() => { // Find elements const elements = node.querySelectorAll('svg.iconify'); expect(elements.length).to.be.equal(1); // Test for "home" icon contents expect(node.innerHTML.indexOf('20v-6h4v6h5v')).to.be.equal(-1); expect(node.innerHTML.indexOf('M12 4a4')).to.not.be.equal(-1); done(); }, 100); }, 100); }); it('Adding node to observe', (done) => { const baseNode = getNode('observe-dom'); const node = getNode('observe-dom'); // Set root and init observer setRoot(baseNode); initObserver(scanDOM); // Test listRootNodes let nodes = listRootNodes(); expect(nodes.length).to.be.equal(1); expect(nodes[0].node).to.be.equal(baseNode); expect(nodes[0].temporary).to.be.equal(false); // Observe another node observeNode(node); nodes = listRootNodes(); expect(nodes.length).to.be.equal(2); expect(nodes[0].node).to.be.equal(baseNode); expect(nodes[0].temporary).to.be.equal(false); expect(nodes[1].node).to.be.equal(node); expect(nodes[1].temporary).to.be.equal(false); // Set HTML baseNode.innerHTML = '

Testing observing 2 nodes (1) (should render SVG!)

' + ''; node.innerHTML = '

Testing observing 2 nodes (2) (should render SVG!)

' + ''; // Test nodes setTimeout(() => { // Find elements let elements = node.querySelectorAll('svg.iconify'); expect(elements.length).to.be.equal(1); elements = baseNode.querySelectorAll('svg.iconify'); expect(elements.length).to.be.equal(1); // Test for "home" icon contents expect(node.innerHTML.indexOf('20v-6h4v6h5v')).to.not.be.equal(-1); expect(baseNode.innerHTML.indexOf('20v-6h4v6h5v')).to.not.be.equal( -1 ); done(); }, 100); }); it('Adding node to observe after setting content', (done) => { const baseNode = getNode('observe-dom'); const node = getNode('observe-dom'); // Set root and init observer setRoot(baseNode); initObserver(scanDOM); // Test listRootNodes let nodes = listRootNodes(); expect(nodes.length).to.be.equal(1); expect(nodes[0].node).to.be.equal(baseNode); expect(nodes[0].temporary).to.be.equal(false); // Set HTML baseNode.innerHTML = '

Testing observing 2 nodes (1) (should render SVG!)

' + ''; node.innerHTML = '

Testing observing 2 nodes (2) (should render SVG!)

' + ''; // Observe node: should run scan on next tick observeNode(node); // Test nodes setTimeout(() => { // Find elements let elements = node.querySelectorAll('svg.iconify'); expect(elements.length).to.be.equal(1); elements = baseNode.querySelectorAll('svg.iconify'); expect(elements.length).to.be.equal(1); // Test for "home" icon contents expect(node.innerHTML.indexOf('20v-6h4v6h5v')).to.not.be.equal(-1); expect(baseNode.innerHTML.indexOf('20v-6h4v6h5v')).to.not.be.equal( -1 ); done(); }, 100); }); it('Stop observing node', (done) => { const baseNode = getNode('observe-dom'); const node = getNode('observe-dom'); // Set root and init observer setRoot(baseNode); initObserver(scanDOM); // Test listRootNodes let nodes = listRootNodes(); expect(nodes.length).to.be.equal(1); expect(nodes[0].node).to.be.equal(baseNode); expect(nodes[0].temporary).to.be.equal(false); // Observe another node observeNode(node); nodes = listRootNodes(); expect(nodes.length).to.be.equal(2); expect(nodes[0].node).to.be.equal(baseNode); expect(nodes[0].temporary).to.be.equal(false); expect(nodes[1].node).to.be.equal(node); expect(nodes[1].temporary).to.be.equal(false); // Stop observing baseNode removeObservedNode(baseNode); nodes = listRootNodes(); expect(nodes.length).to.be.equal(1); expect(nodes[0].node).to.be.equal(node); expect(nodes[0].temporary).to.be.equal(false); // Set HTML baseNode.innerHTML = '

Testing observing 2 nodes (1) (should NOT render SVG!)

' + ''; node.innerHTML = '

Testing observing 2 nodes (2) (should render SVG!)

' + ''; // Test nodes setTimeout(() => { // Find elements let elements = node.querySelectorAll('svg.iconify'); expect(elements.length).to.be.equal(1); elements = baseNode.querySelectorAll('svg.iconify'); expect(elements.length).to.be.equal(0); // Test for "home" icon contents expect(node.innerHTML.indexOf('20v-6h4v6h5v')).to.not.be.equal(-1); expect(baseNode.innerHTML.indexOf('20v-6h4v6h5v')).to.be.equal(-1); done(); }, 100); }); });