iconify/packages/browser-tests/tests/21-observe-dom-test.ts

import mocha from 'mocha';
import chai from 'chai';

import { getNode } 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';
import { setRoot, getRootNodes } from '@iconify/iconify/lib/modules/root';
import { scanDOM } from '@iconify/iconify/lib/modules/scanner';
import { initObserver } 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:
					'<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('Basic test', (done) => {
		const node = getNode('observe-dom');

		// Set root and init observer
		setRoot(node);
		initObserver(scanDOM);

		// Test getRootNodes
		expect(getRootNodes()).to.be.eql([
			{
				node: node,
				temporary: false,
			},
		]);

		// Set HTML
		node.innerHTML =
			'<p>Testing observing DOM</p>' +
			'<span class="iconify" data-icon="mdi:home"></span>';

		// 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);

			done();
		}, 100);
	});

	it('Change icon', (done) => {
		const node = getNode('observe-dom');

		// Set root and init observer
		setRoot(node);
		initObserver(scanDOM);

		// Set HTML
		node.innerHTML =
			'<p>Testing observing DOM</p>' +
			'<span class="iconify" data-icon="mdi:home"></span>';

		// 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);
	});
});