als-document 1.1.2 → 1.2.1

package/tests/parser.test.js

@@ -0,0 +1,353 @@
+const { describe, it, beforeEach } = require('node:test')
+const assert = require('node:assert')
+const { Node, parseHTML, Root } = require('../index')
+const generator = require('./utils')
+
+describe('HTML Parser', () => {
+	let parsedHTML;
+
+	beforeEach(() => {
+		parsedHTML = parseHTML('<div><p>Text</p></div>').children[0];
+	});
+
+	describe('parseHTML', () => {
+		it('returns an instance of Node', () => {
+			assert(parsedHTML instanceof Node );
+		});
+
+		it('correctly sets node type', () => {
+			assert(parsedHTML.tagName === 'div');
+		});
+
+		it.skip('correctly sets child nodes', () => {
+			assert(parsedHTML.children.leng === 1);
+			assert(parsedHTML.children[0].tagName === 'p');
+		});
+
+		it('correctly parses nested HTML', () => {
+			const nestedHTML = parseHTML('<div><span><a href="#">Link</a></span></div>');
+			assert(nestedHTML.children[0].children[0].children[0].tagName === 'a');
+		});
+
+		it('correctly parses text nodes', () => {
+			assert(parsedHTML.children[0].innerHTML === 'Text');
+		});
+	});
+
+});
+
+describe('Advanced tests', () => {
+	it('handles empty HTML correctly', () => {
+		const result = parseHTML('');
+		assert(result.children.length === 0);
+	});
+
+	it('handles deeply nested HTML', () => {
+		let deepHTML = '<div>';
+		for (let i = 0; i < 1000; i++) {
+			deepHTML += '<div>';
+			deepHTML += generator.generate();
+		}
+		for (let i = 0; i < 1000; i++) {
+			deepHTML += '</div>';
+		}
+		const now = Date.now()
+		// const memoryBefore = performance.memory.totalJSHeapSize
+		const result = parseHTML(deepHTML);
+		// const memoryAfter = performance.memory.totalJSHeapSize
+		let time = Date.now() - now
+		// console.log(memoryAfter - memoryBefore)
+		assert(time < 20, `Big html (${(deepHTML.length / 1024).toFixed(2)}KB) in less then 20ms (${time}ms)`)
+		assert(result instanceof Root); // or any other validation you see fit
+	});
+
+	it('handles incorrectly closed tags', () => {
+		const result = parseHTML('<div><p>Text</div>');
+		// Depending on the behavior you expect: either an error, or a specific structure.
+		// For this example, I'll assume you expect the <p> tag to be auto-closed
+		assert(result.children[0].children[0].tagName === 'p');
+	});
+
+	it('handles attributes without values', () => {
+		const result = parseHTML('<input disabled>');
+		assert(result.children[0].attributes.disabled !== undefined);
+	});
+
+	it('ignores comments', () => {
+		const result = parseHTML('<!-- this is a comment --><div></div>');
+		assert(result.children.length === 1);
+		assert(result.children[0].tagName === 'div');
+	});
+
+	it('correctly parses script content', () => {
+		const result = parseHTML('<script>let x = 5;<\/script>');
+		assert(result.children[0].innerHTML === 'let x = 5;');
+	});
+
+	it('parses special entities correctly', () => {
+		const result = parseHTML('<p>&lt; &amp; &gt;</p>');
+		assert(result.children[0].innerHTML === '&lt; &amp; &gt;');
+	});
+
+	it.skip('should correctly retrieve data-* attributes', () => {
+		const element = document.createElement('div');
+		element.setAttribute('data-test', 'testValue');
+
+		const value = element.dataset.test;
+		assert(value === 'testValue');
+	});
+
+	it('dataset2', () => {
+		const node = new Node('div', { 'data-example': 'test' });
+		assert(node.dataset.example === 'test')
+		node.dataset.example = 'new value';
+		assert(node.dataset.example === 'new value');
+		delete node.dataset.example;
+		assert(node.dataset.example === undefined);
+	})
+
+})
+
+describe('More adnvanced tests', () => {
+
+	it('Attributes parsing', () => {
+		const customHTML = '<div class="some class" data-value="A &quot;value&quot;" custom-attr=\'test\'></div>';
+		const parsedDiv = parseHTML(customHTML).querySelector('div');
+		assert(parsedDiv.getAttribute('class') === 'some class', 'Class attribute parsed correctly');
+		assert(parsedDiv.getAttribute('custom-attr') === 'test', 'Attribute with single quotes parsed');
+	});
+
+	it('Nested hierarchy check', () => {
+		const customHTML = '<div><span><a href="#">Link</a></span></div>';
+		const parsedDiv = parseHTML(customHTML).querySelector('div');
+		const parsedSpan = parsedDiv.querySelector('span');
+		const parsedA = parsedSpan.querySelector('a');
+
+		assert(parsedA.getAttribute('href') === '#', 'Anchor tag nested correctly');
+	});
+
+	it('Self-closing tags check', () => {
+		const customHTML = '<input type="text"/><br/><hr/>';
+		const parsedHTML = parseHTML(customHTML);
+		assert(parsedHTML.querySelectorAll('input').length === 1, 'Input tag parsed correctly');
+		assert(parsedHTML.querySelectorAll('br').length === 1, 'BR tag parsed correctly');
+		assert(parsedHTML.querySelectorAll('hr').length === 1, 'HR tag parsed correctly');
+	});
+
+	it('Edge cases', () => {
+		// Несколько открывающих тегов подряд
+		const erroneousHTML1 = '<div><div><div></div></div>';
+		const parsedHTML1 = parseHTML(erroneousHTML1);
+		assert(parsedHTML1.querySelectorAll('div').length === 3, 'Multiple opening tags handled');
+
+		// Несколько закрывающих тегов подряд
+		const erroneousHTML2 = '<div></div></div></div>';
+		const parsedHTML2 = parseHTML(erroneousHTML2);
+		assert(parsedHTML2.querySelectorAll('div').length === 1, 'Multiple closing tags handled');
+	});
+
+})
+
+describe('CDATA', () => {
+	it('basic test', () => {
+		const test1 = '<![CDATA[This is CDATA content]]>';
+		const root1 = parseHTML(test1);
+		assert(root1.childNodes[0].tagName === "#cdata-section", "Test 1: CDATA node not created");
+		assert(root1.childNodes[0].nodeValue === "This is CDATA content", "Test 1: CDATA content not correct");
+	})
+
+	it('nested CDATA', () => {
+		const test2 = '<div><![CDATA[Inside a div]]><p>Paragraph</p></div>';
+		const root2 = parseHTML(test2);
+		assert(root2.childNodes[0].tagName === "div", "Test 2: Parent div not created");
+		assert(root2.childNodes[0].childNodes[0].tagName === "#cdata-section", "Test 2: CDATA node not created inside div");
+		assert(root2.childNodes[0].childNodes[0].nodeValue === "Inside a div", "Test 2: CDATA content not correct inside div");
+		assert(root2.childNodes[0].childNodes[1].tagName === "p", "Test 2: Paragraph not created after CDATA");
+	})
+
+	it('multiple lines', () => {
+		const test3 = `
+<![CDATA[
+Multiple lines 
+inside this CDATA
+block.
+]]>`;
+		const root3 = parseHTML(test3);
+		assert(root3.childNodes[0].tagName === "#cdata-section", "Test 3: CDATA node not created");
+		assert(root3.childNodes[0].nodeValue.trim() === "Multiple lines \ninside this CDATA\nblock.", "Test 3: Multi-line CDATA content not correct");
+
+	})
+
+	it('inside html', () => {
+		const test4 = '<![CDATA[<span>This should be text</span>]]>';
+		const root4 = parseHTML(test4);
+		assert(root4.childNodes[0].tagName === "#cdata-section", "Test 4: CDATA node not created");
+		assert(root4.childNodes[0].nodeValue === "<span>This should be text</span>", "Test 4: HTML inside CDATA not treated as text");
+
+	})
+})
+
+describe('signle tags, script and style', () => {
+	it('script and style', () => {
+		const testStyleScript = `
+<style>
+    body { color: red; }
+    p > a { text-decoration: none; }
+</style>
+<script>
+    if (x < 5 && y > 3) {
+        console.log("This shouldn't be parsed as tags");
+    }
+</script>
+`;
+		const rootStyleScript = parseHTML(testStyleScript);
+		assert(rootStyleScript.childNodes[0].tagName === "style", "Test Style/Script 1: Style tag not created");
+		assert(rootStyleScript.childNodes[0].textContent.trim() === "body { color: red; }\n    p > a { text-decoration: none; }", "Test Style/Script 1: Style content not correct");
+		assert(rootStyleScript.childNodes[1].tagName === "script", "Test Style/Script 2: Script tag not created");
+		assert(rootStyleScript.childNodes[1].textContent.trim() === 'if (x < 5 && y > 3) {\n        console.log("This shouldn\'t be parsed as tags");\n    }', "Test Style/Script 2: Script content not correct");
+	})
+
+	it('meta and link tags', () => {
+		const testMetaLink = `
+<meta charset="UTF-8">
+<link rel="stylesheet" href="styles.css">
+`;
+		const rootMetaLink = parseHTML(testMetaLink);
+		assert(rootMetaLink.children[0].tagName === "meta", "Test Meta/Link 1: Meta tag not created");
+		assert(rootMetaLink.children[0].getAttribute("charset") === "UTF-8", "Test Meta/Link 1: Meta content not correct");
+		assert(rootMetaLink.children[1].tagName === "link", "Test Meta/Link 2: Link tag not created");
+		assert(rootMetaLink.children[1].getAttribute("rel") === "stylesheet", "Test Meta/Link 2: Link rel attribute not correct");
+		assert(rootMetaLink.children[1].getAttribute("href") === "styles.css", "Test Meta/Link 2: Link href attribute not correct");
+	})
+
+	it('broken html structure', () => {
+		const testUnmatchedClose = `<div>Some content</p></div>`;
+		const rootUnmatchedClose = parseHTML(testUnmatchedClose);
+		// Зависит от вашего решения обработки. Если вы решите исправлять такой HTML, тест может выглядеть так:
+		assert(rootUnmatchedClose.childNodes[0].tagName === "div", "Test Unmatched Close: Div tag not created");
+		assert(rootUnmatchedClose.childNodes[0].textContent.trim() === "Some content", "Test Unmatched Close: Div content not correct");
+	})
+
+	it('wrong open tags', () => {
+		const testUnmatchedOpen = `<div>Some content`;
+		const rootUnmatchedOpen = parseHTML(testUnmatchedOpen);
+		// Снова зависит от вашего решения. Если вы решите автоматически закрывать тег:
+		assert(rootUnmatchedOpen.childNodes[0].tagName === "div", "Test Unmatched Open: Div tag not created");
+		assert(rootUnmatchedOpen.childNodes[0].textContent.trim() === "Some content", "Test Unmatched Open: Div content not correct");
+	})
+})
+
+describe('js as content', () => {
+	const jsCode = 'console.log(`<div>hello</div>`)'
+	it('html inside onclick', () => {
+		const html = parseHTML(`<button onclick="${jsCode}">test</button>'`)
+		assert(html.childNodes[0].getAttribute('onclick') === jsCode)
+	})
+	it('html in script', () => {
+		const html = parseHTML(`<script>${jsCode}</script>`)
+		assert(html.childNodes[0].innerHTML === jsCode)
+	})
+})
+
+describe('Specific elements handling', () => {
+
+	it.skip('should correctly handle SVG elements', async () => {
+		document.body.insertAdjacentHTML('beforeend',/*html*/`<div id="svg">${svg}</div>`)
+		const svgElement = document.querySelector('#svg>svg')
+		const html = parseHTML(svg)
+		const svgParsed = html.querySelector('svg')
+
+		assert(svgParsed.tagName === svgElement.tagName)
+
+		assert(svgElement.getAttribute('version') === svgParsed.getAttribute('version'))
+		assert(svgElement.getAttribute('id') === svgParsed.getAttribute('id'))
+		assert(svgElement.getAttribute('width') === svgParsed.getAttribute('width'))
+		assert(svgElement.getAttribute('height') === svgParsed.getAttribute('height'))
+
+		assert(svgElement.querySelector('defs') !== null); // Проверка наличия элемента <defs>
+		assert(svgParsed.querySelector('defs') !== null)
+
+		const layer1Group = svgElement.querySelector('g[id="layer1"]');
+		const layer1GroupParsed = svgParsed.querySelector('g[id="layer1"]');
+
+		assert(layer1Group !== null); // Проверка наличия группы с id="layer1"
+		assert(layer1GroupParsed !== null); // Проверка наличия группы с id="layer1"
+
+		const paths = layer1Group.querySelectorAll('path');
+		const pathsParsed = layer1GroupParsed.querySelectorAll('path');
+		assert(paths.length >= 1); // Проверка, что есть хотя бы один элемент <path>
+		assert(pathsParsed.length >= 1); // Проверка, что есть хотя бы один элемент <path>
+	});
+
+	it('should correctly handle canvas', () => {
+		const canvas = /*html*/`<canvas id="myCanvas" width="300" height="150" style="border:1px solid grey"></canvas>`
+		const html = parseHTML(canvas)
+		const canvasElement = html.children[0]
+
+		assert(canvasElement.tagName === 'canvas');
+		assert(canvasElement.getAttribute('id') === 'myCanvas');
+		assert(canvasElement.getAttribute('width') === '300');
+		assert(canvasElement.getAttribute('height') === '150');
+		assert(canvasElement.style.border === '1px solid grey');
+	});
+
+	it('should handle namespaces correctly', () => {
+		const svgNamespace = 'http://www.w3.org/2000/svg';
+		const xmlNamespace = 'http://www.w3.org/XML/1998/namespace';
+
+		const svgHTML = /*html*/`<svg xmlns="${svgNamespace}" xmlns:xml="${xmlNamespace}"><circle cx="50" cy="50" r="10" stroke="black" stroke-width="2" fill="red" /></svg>`;
+		const html = parseHTML(svgHTML);
+		const svgElement = html.children[0]
+
+		assert(svgElement.tagName === 'svg');
+		assert(svgElement.getAttribute('xmlns') === svgNamespace);
+		assert(svgElement.getAttribute('xmlns:xml') === xmlNamespace);
+	});
+
+	it('should handle large amounts of data efficiently', () => {
+		const largeAmountOfDivs = /*html*/`<div>${new Array(1000).fill('<div class="test-div"></div>').join('')}</div>`;
+		let start = performance.now();
+		const rootElement = parseHTML(largeAmountOfDivs);
+		let end = performance.now();
+		time = end - start
+		assert(time < 200,`${time} ms`)
+
+		// 1. Проверка, что все элементы были добавлены
+		assert(rootElement.querySelectorAll('.test-div').length === 1000);
+
+		start = performance.now();
+		const randomDiv = rootElement.querySelector('.test-div');
+		randomDiv.setAttribute('id', 'randomDiv');
+		assert(randomDiv.getAttribute('id') === 'randomDiv');
+
+		end = performance.now();
+
+		time = end - start
+		assert(time < 200,`${time} ms`)
+	});
+
+	it('image data:', () => {
+		const src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
+		const img = /*html*/`<img src="${src}" alt="Red dot" />`
+		const rootElement = parseHTML(img);
+		assert(rootElement.children[0].getAttribute('src') === src)
+	})
+
+});
+
+describe.skip('Query API', () => {
+	beforeEach(() => {
+		parsedHTML = parseHTML('<div><p>Text</p></div>').children[0];
+	});
+
+	it('can select a node by type', () => {
+		const collection = parsedHTML.querySelectorAll('p')
+		expect(collection[0].innerHTML).equalTo('Text');
+	});
+
+	it('can select nested nodes', () => {
+		const nestedHTML = parseHTML('<div><span><a href="#">Link</a></span></div>');
+		const collection = nestedHTML.querySelectorAll('a');
+		expect(collection[0].tagName).equalTo('a');
+	});
+});

package/tests/query.test.js

@@ -0,0 +1,65 @@
+const { describe, it } = require('node:test')
+const assert = require('node:assert')
+const { Query } = require('../index')
+
+
+const q1 = 'html>body>div.tabs~.some[type $= "some"][test]>p+div>.some-id .tab-content~input[disabled] div.some'
+const s1 = Query.get(q1)[0]
+
+describe('query tests',() => {
+   it('Check target',() => {
+      const expected = 'div.some'
+      let {tag,classList} = s1
+      assert(`${tag}.${classList[0]}` === expected)
+   })
+   it('Check ancestors length',() => {
+      assert(s1.ancestors.length === 2)
+   })
+   it('Check prev group',() => {
+      const expected = s1.ancestors[0].group.split('+')[0]
+      assert(s1.ancestors[0].prev.group === expected)
+   })
+   it('Check parents length',() => {
+      assert(s1.ancestors[0].parents.length === 1)
+   })
+   it('Check prev any, prev and classList',() => {
+      assert(s1.ancestors[0].prev.prevAny.classList[0] === 'tabs')
+   })
+   it('Check attributes length',() => {
+      assert(s1.ancestors[0].prev.parents[0].attribs.length === 2)
+   })
+   it('Check attributes fn $',() => {
+      assert(s1.ancestors[0].prev.parents[0].attribs[0].check('test and some') === true)
+   })
+   it('Check attributes fn *=',() => {
+      assert(s1.ancestors[0].prev.parents[0].attribs[0].check('some') === true)
+   })
+   it('Check attributes fn *=',() => {
+      let s = Query.get('[test*="some value"]')[0]
+      assert(s.attribs[0].check('some value test') === true)
+   })
+   it('Check attributes fn ~= prase instead single word',() => {
+      let s = Query.get('[test~="some value"]')[0]
+      assert(s.attribs[0].check('some value test') === false)
+   })
+   it('Check attributes fn ~=',() => {
+      let s = Query.get('[test~="value"]')[0]
+      assert(s.attribs[0].check('some value test') === true)
+   })
+   it('Check attributes fn ^=',() => {
+      let s = Query.get('[test^="some"]')[0]
+      assert(s.attribs[0].check('some value test') === true)
+   })
+   it('Check attributes fn |= with few words',() => {
+      let s = Query.get('[test|="some value test"]')[0]
+      assert(s.attribs[0].check('some') === false)
+   })
+   it('Check attributes fn |=word',() => {
+      let s = Query.get('[test|="some"]')[0]
+      assert(s.attribs[0].check('some') === true)
+   })
+   it('Check attributes fn |=word-word',() => {
+      let s = Query.get('[test|="some"]')[0]
+      assert(s.attribs[0].check('some-value') === true)
+   })
+})

package/tests/single-node.test.js

@@ -0,0 +1,88 @@
+const { describe, it, beforeEach } = require('node:test');
+const assert = require('node:assert');
+const { SingleNode, Node } = require('../index');
+
+describe('SingleNode Class Tests', () => {
+   let singleNode;
+
+   beforeEach(() => {
+      singleNode = new SingleNode('meta', { name: "viewport", content: "width=device-width" });
+   });
+
+
+   it('querySelectorAll',() => {
+      assert.deepStrictEqual(singleNode.querySelectorAll('div'),[])
+
+   })
+   it('querySelector',() => {
+      assert.deepStrictEqual(singleNode.querySelector('div'),null)
+
+   })
+
+   it('Should correctly set attributes and generate outerHTML', () => {
+      assert.strictEqual(singleNode.outerHTML, '<meta name="viewport" content="width=device-width">', 'outerHTML does not match expected HTML');
+   });
+
+   it('Should return empty innerHTML', () => {
+      assert.strictEqual(singleNode.innerHTML, '', 'innerHTML should be empty for SingleNode');
+   });
+
+   it('Should ignore any set operations on innerHTML', () => {
+      assert.doesNotThrow(() => { singleNode.innerHTML = '<div></div>'; }, 'Setting innerHTML should not throw');
+      assert.strictEqual(singleNode.innerHTML, '', 'innerHTML should still be empty after set operation');
+   });
+
+   it('Should return null for query selectors', () => {
+      assert.strictEqual(singleNode.$('div'), null, '$ should always return null');
+      assert.deepStrictEqual(singleNode.$$('div'), [], '$$ should always return an empty array');
+   });
+
+   it('Should return empty array for getElementsByClassName', () => {
+      assert.deepStrictEqual(singleNode.getElementsByClassName('test'), [], 'getElementsByClassName should always return an empty array');
+   });
+
+   it('Should return empty array for getElementsByTagName', () => {
+      assert.deepStrictEqual(singleNode.getElementsByTagName('div'), [], 'getElementsByTagName should always return an empty array');
+   });
+
+   it('Should return null for getElementById', () => {
+      assert.strictEqual(singleNode.getElementById('id'), null, 'getElementById should always return null');
+   });
+
+   it('Should always return an empty array for children', () => {
+      assert.deepStrictEqual(singleNode.children, [], 'children should always return an empty array');
+   });
+
+   it('Should correctly redirect insert operations for SingleNode', () => {
+      const rootNode = new Node('div');
+      rootNode.appendChild(singleNode);
+      const commentNode = new Node('#comment', {}, rootNode);
+
+      singleNode.insertAdjacentElement('afterbegin', commentNode);
+      assert.strictEqual(rootNode.childNodes.includes(commentNode), true, 'commentNode should be redirected and inserted before singleNode');
+      singleNode.insertAdjacentElement('beforeend', commentNode);
+      assert.strictEqual(rootNode.childNodes.includes(commentNode), true, 'commentNode should be redirected and inserted after singleNode');
+   });
+
+   it('Should not allow appendChild operation', () => {
+      assert.doesNotThrow(() => { singleNode.appendChild(new Node('span')); }, 'appendChild should not throw');
+      assert.deepEqual(singleNode.childNodes, [], 'appendChild should have no effect');
+   });
+
+   it('Should always return empty string for textContent', () => {
+      assert.strictEqual(singleNode.textContent, '', 'textContent should always return an empty string');
+   });
+
+   it('Should ignore any set operations on textContent', () => {
+      assert.doesNotThrow(() => { singleNode.textContent = 'New content'; }, 'Setting textContent should not throw');
+      assert.strictEqual(singleNode.textContent, '', 'textContent should still be empty after set operation');
+   });
+
+   it('Should handle insertAdjacentHTML and insertAdjacentText with correct redirection', () => {
+      const rootNode = new Node('div');
+      rootNode.appendChild(singleNode);
+      singleNode.insertAdjacentHTML('afterbegin', '<p>Hello</p>');
+      singleNode.insertAdjacentText('beforeend', 'World');
+      assert.strictEqual(rootNode.childNodes.length, 3, 'rootNode should contain three child nodes due to redirection');
+   });
+});

package/tests/utils.js

@@ -35,3 +35,5 @@ class RandomSentenceGenerator {
 }
 
 const generator = new RandomSentenceGenerator()
+
+module.exports = generator