als-document 0.11.0 → 1.0.0-alpha

package/tests/parser.js

@@ -0,0 +1,351 @@
+describe('HTML Parser', () => {
+    let parsedHTML;
+
+    beforeEach(() => {
+        parsedHTML = parseHTML('<div><p>Text</p></div>').children[0];
+    });
+
+    describe('parseHTML', () => {
+        it('returns an instance of Node', () => {
+            expect(parsedHTML).instanceof(Node);
+        });
+
+        it('correctly sets node type', () => {
+            expect(parsedHTML.tagName).equalTo('div');
+        });
+
+        it('correctly sets child nodes', () => {
+            expect(parsedHTML.children.length).equalTo(1);
+            expect(parsedHTML.children[0].tagName).equalTo('p');
+        });
+
+        it('correctly parses nested HTML', () => {
+            const nestedHTML = parseHTML('<div><span><a href="#">Link</a></span></div>');
+            expect(nestedHTML.children[0].children[0].children[0].tagName).equalTo('a');
+        });
+
+        it('correctly parses text nodes', () => {
+            expect(parsedHTML.children[0].innerHTML).equalTo('Text');
+        });
+    });
+
+});
+
+describe('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');
+    });
+});
+
+describe('Advanced tests', () => {
+    it('handles empty HTML correctly', () => {
+        const result = parseHTML('');
+        expect(result.children.length).equalTo(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)`)
+        expect(result).instanceof(Node); // 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
+        expect(result.children[0].children[0].tagName).equalTo('p');
+    });
+
+    it('handles attributes without values', () => {
+        const result = parseHTML('<input disabled>');
+        expect(result.children[0].attributes.disabled).defined();
+    });
+
+    it('ignores comments', () => {
+        const result = parseHTML('<!-- this is a comment --><div></div>');
+        expect(result.children.length).equalTo(1);
+        expect(result.children[0].tagName).equalTo('div');
+    });
+
+    it('correctly parses script content', () => {
+        const result = parseHTML('<script>let x = 5;<\/script>');
+        expect(result.children[0].innerHTML).equalTo('let x = 5;');
+    });
+
+    it('parses special entities correctly', () => {
+        const result = parseHTML('<p>&lt; &amp; &gt;</p>');
+        expect(result.children[0].innerHTML).equalTo('&lt; &amp; &gt;');
+    });
+
+    it('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.childNodes[0].tagName === "meta", "Test Meta/Link 1: Meta tag not created");
+        assert(rootMetaLink.childNodes[0].getAttribute("charset") === "UTF-8", "Test Meta/Link 1: Meta content not correct");
+        assert(rootMetaLink.childNodes[1].tagName === "link", "Test Meta/Link 2: Link tag not created");
+        assert(rootMetaLink.childNodes[1].getAttribute("rel") === "stylesheet", "Test Meta/Link 2: Link rel attribute not correct");
+        assert(rootMetaLink.childNodes[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('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');
+        expect(paths.length).atLeast(1); // Проверка, что есть хотя бы один элемент <path>
+        expect(pathsParsed.length).atLeast(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]
+        
+        expect(canvasElement.tagName).equalTo('canvas');
+        expect(canvasElement.getAttribute('id')).equalTo('myCanvas');
+        expect(canvasElement.getAttribute('width')).equalTo('300');
+        expect(canvasElement.getAttribute('height')).equalTo('150');
+        expect(canvasElement.style.border).equalTo('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]
+    
+        expect(svgElement.tagName).equalTo('svg');
+        expect(svgElement.getAttribute('xmlns')).equalTo(svgNamespace);
+        expect(svgElement.getAttribute('xmlns:xml')).equalTo(xmlNamespace);
+    });
+    
+
+    it('should handle large amounts of data efficiently', () => {
+        const largeAmountOfDivs = /*html*/`<div>${new Array(10000).fill('<div class="test-div"></div>').join('')}</div>`;
+        let start = performance.now();
+        const rootElement = parseHTML(largeAmountOfDivs);
+        let end = performance.now();
+        time = end-start
+        expect(time).is(`${time} ms`).below(200);
+
+        // 1. Проверка, что все элементы были добавлены
+        expect(rootElement.querySelectorAll('.test-div').length).equalTo(10000);
+    
+        start = performance.now();
+        const randomDiv = rootElement.querySelector('.test-div');
+        randomDiv.setAttribute('id', 'randomDiv');
+        expect(randomDiv.getAttribute('id')).equalTo('randomDiv');
+    
+        end = performance.now();
+    
+        time = end-start
+        expect(time).is(`${time} ms`).below(200);
+    });
+    
+    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);
+        expect(rootElement.children[0].getAttribute('src')).equalTo(src)
+    })
+
+});

package/tests/query.js

@@ -0,0 +1,66 @@
+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
+      expect(`${tag}.${classList[0]}`).equalTo(expected)
+   })
+   it('Check ancestors length',() => {
+      expect(s1.ancestors.length).equalTo(2)
+   })
+   it('Check prev group',() => {
+      const expected = s1.ancestors[0].group.split('+')[0]
+      expect(s1.ancestors[0].prev.group).equalTo(expected)
+   })
+   it('Check parents length',() => {
+      expect(s1.ancestors[0].parents.length).equalTo(1)
+   })
+   it('Check prev any, prev and classList',() => {
+      expect(s1.ancestors[0].prev.prevAny.classList[0]).equalTo('tabs')
+   })
+   it('Check attributes length',() => {
+      expect(s1.ancestors[0].prev.parents[0].attribs.length).equalTo(2)
+   })
+   it('Check attributes fn $',() => {
+      expect(s1.ancestors[0].prev.parents[0].attribs[0].check('test and some')).equalTo(true)
+   })
+   it('Check attributes fn *=',() => {
+      expect(s1.ancestors[0].prev.parents[0].attribs[0].check('some'))
+      .equalTo(true)
+   })
+   it('Check attributes fn *=',() => {
+      let s = Query.get('[test*="some value"]')[0]
+      expect(s.attribs[0].check('some value test')).equalTo(true)
+   })
+   it('Check attributes fn ~= prase instead single word',() => {
+      let s = Query.get('[test~="some value"]')[0]
+      expect(s.attribs[0].check('some value test')).equalTo(false)
+   })
+   it('Check attributes fn ~=',() => {
+      let s = Query.get('[test~="value"]')[0]
+      expect(s.attribs[0].check('some value test'))
+      .equalTo(true)
+   })
+   it('Check attributes fn ^=',() => {
+      let s = Query.get('[test^="some"]')[0]
+      expect(s.attribs[0].check('some value test'))
+      .equalTo(true)
+   })
+   it('Check attributes fn |= with few words',() => {
+      let s = Query.get('[test|="some value test"]')[0]
+      expect(s.attribs[0].check('some'))
+      .equalTo(false)
+   })
+   it('Check attributes fn |=word',() => {
+      let s = Query.get('[test|="some"]')[0]
+      expect(s.attribs[0].check('some'))
+      .equalTo(true)
+   })
+   it('Check attributes fn |=word-word',() => {
+      let s = Query.get('[test|="some"]')[0]
+      expect(s.attribs[0].check('some-value'))
+      .equalTo(true)
+   })
+})

package/tests/utils.js

@@ -0,0 +1,37 @@
+function createIframe(htmlContent) {
+    const iframe = document.createElement('iframe');
+    return new Promise((resolve,reject) => {
+        iframe.onload = function() {
+            const iframeDocument = iframe.contentDocument;
+            iframeDocument.childNodes[0].innerHTML = htmlContent
+            // iframeDocument.body.insertAdjacentHTML('afterbegin',htmlContent)
+            resolve(iframeDocument)
+        }
+        document.body.appendChild(iframe);
+    })
+}
+
+class RandomSentenceGenerator {
+    constructor() {
+        this.subjects = ["The cat", "A monkey", "A child", "The robot", "The alien", "My friend"];
+        this.verbs = ["jumps", "runs", "flies", "dances", "sings", "reads"];
+        this.objects = ["on the bed", "in the garden", "above the clouds", "in the spaceship", "with a book", "under the tree"];
+        this.adverbs = ["quickly", "happily", "sadly", "gracefully", "lazily", "silently"];
+    }
+
+    getRandomItem(arr) {
+        const randomIndex = Math.floor(Math.random() * arr.length);
+        return arr[randomIndex];
+    }
+
+    generate() {
+        const subject = this.getRandomItem(this.subjects);
+        const verb = this.getRandomItem(this.verbs);
+        const object = this.getRandomItem(this.objects);
+        const adverb = this.getRandomItem(this.adverbs);
+
+        return `${subject} ${verb} ${object} ${adverb}.`;
+    }
+}
+
+const generator = new RandomSentenceGenerator()