import mocha from 'mocha'; import chai from 'chai'; import { getNode, setRoot } from './node'; import { elementFinderProperty } from '@iconify/iconify/lib/modules/element'; import { initObserver, pauseObserver, resumeObserver, } from '@iconify/iconify/lib/modules/observer'; const expect = chai.expect; describe('Testing observer with DOM manipulation', () => { it('Series of events', (done) => { const node = getNode('observer-manipulation'); setRoot(node); let counter = 0; let waitingCallback: string | boolean = true; node.innerHTML = '
'; initObserver((root) => { expect(root.node).to.be.equal(node); expect(waitingCallback).to.be.equal(true); counter++; switch (counter) { case 1: // Added few nodes // Remove few nodes. It should not trigger event listener waitingCallback = 'removing nodes'; (() => { const item = node.querySelector('ul > li:last-child'); const parent = item.parentNode; parent.removeChild(item); // Set timer for next step to make sure callback is not called setTimeout(() => { // Add node. This should trigger callback const newItem = document.createElement('li'); parent.appendChild(newItem); waitingCallback = true; }, 50); })(); break; case 2: // Added one list item // Pause observer waitingCallback = 'pause test'; (() => { const item = node.querySelector('ul > li:last-child'); pauseObserver(); item.innerHTML = 'Strong text!'; // Set timer for next step to make sure callback is not called setTimeout(() => { // Resume observer and wait a bit. Resuming observer should not trigger update waitingCallback = 'resume test'; resumeObserver(); setTimeout(() => { // Change text of item: should remove and add new text node waitingCallback = true; item.innerHTML = 'Weak text!'; }, 50); }, 50); })(); break; case 3: waitingCallback = 'attributes on ul'; (() => { const item = node.querySelector('ul'); item.setAttribute('data-foo', 'bar'); // Set timer for next step to make sure callback is not called setTimeout(() => { waitingCallback = true; const item = node.querySelector('svg'); item[elementFinderProperty] = true; // Add fake finder property to trigger update item.setAttribute('data-icon', 'mdi-account'); item.setAttribute('data-rotate', '2'); }, 50); })(); break; case 4: (() => { // Test removing attribute from SVG const item = node.querySelector('svg'); item.removeAttribute('data-rotate'); })(); break; case 5: done(); break; default: done('Unexpected callback call!'); } }); // Add few nodes to trigger observer node.querySelector('div').innerHTML = 'Some text!'; }); });