npm - als-document - Versions diffs - 0.6.11 → 0.7.0 - Mend

als-document 0.6.11 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

package/document.js +21 -10
package/document.mjs +804 -0
package/package.json +3 -6
package/readme.md +10 -3
package/test/{html1.js → data/html1.js} +1 -2
package/test/{html2.js → data/html2.js} +1 -1
package/test/front-test/html.html +5650 -0
package/test/front-test/html.js +3218 -0
package/test/front-test/test.html +18 -0
package/test/front-test/test.js +129 -0
package/test/test.html +17 -0
package/test/test.js +15 -19
package/test/tests/document-test.js +402 -0
package/test/tests/parser-test.js +99 -0
package/test/tests/query-test.js +71 -0
package/test/tests/selector-test.js +169 -0
package/test/utils/__dirname.js +6 -0
package/test/utils/als-simple-test/test.mjs +153 -0
package/test/utils/iframe.js +4 -0
package/document/document.js +0 -192
package/document/test.js +0 -678
package/document.min.js +0 -1
package/index.js +0 -6
package/parser/parser.js +0 -340
package/parser/test.js +0 -233
package/query/query.js +0 -147
package/query/readme.md +0 -134
package/query/test.js +0 -143
package/selector/selector.js +0 -126
package/selector/test.js +0 -410

package/test/front-test/test.html ADDED Viewed

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+   <meta charset="UTF-8">
+   <meta http-equiv="X-UA-Compatible" content="IE=edge">
+   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+   <script src="/node_modules/he/he.js"></script>
+   <title>Document</title>
+</head>
+<body>
+   <script type="module">
+      import test from './test.js'
+      window.test = test
+      // test()
+   </script>
+   <iframe src="html.html" frameborder="0" width="600" height="800" id="iframe" onload="test()"></iframe>
+</body>
+</html>

package/test/front-test/test.js ADDED Viewed

@@ -0,0 +1,129 @@
+import accessIFrameContent from '../utils/iframe.js'
+import { Document } from '../../document.mjs'
+import SimpleTest from '../utils/als-simple-test/test.mjs'
+import html from './html.js'
+let iframe = accessIFrameContent('iframe')
+let {describe,it,beforeEach,runTests,expect,delay} = SimpleTest
+// import he from 'he';
+export default function() {
+   // let html = iframe.documentElement.outerHTML
+   let $ = new Document(html)
+   // console.log(iframe.documentElement.outerHTML)
+   describe('Comparing DOM from document and Document', () => {
+      describe('Simple tests', () => {
+         it('Parsing h1',() => {
+            let h1 = iframe.querySelector('h1')
+            let $h1 = $.$('h1')
+            let inner = $h1.innerHTML.replace(/&[#]?(?:[a-z0-9]+|x[a-f0-9]+);/g,str => {
+               return he.decode(str)
+            })
+            expect(h1.innerHTML).equalTo(inner)
+         })
+         it('Check number of elements',() => {
+            let as = iframe.querySelectorAll('a[href]')
+            let $as = $.$$('a[href]')
+            expect(as.length).equalTo($as.length)
+         })
+         it('Check attributes',() => {
+            let inputs = iframe.querySelectorAll('input[type=hidden]')
+            let $inputs = $.$$('input[type=hidden]')
+            expect(inputs.length).equalTo($inputs.length)
+         })
+         it('Check attributes of a specific element', () => {
+            let img = iframe.querySelector('img');
+            let $img = $.$('img');
+            let src = img.getAttribute('src');
+            let alt = img.getAttribute('alt');
+            expect($img.attr('src')).equalTo(src);
+            expect($img.attr('alt')).equalTo(alt);
+         });
+         it('Check presence and value of "rel" attribute in link elements', () => {
+            let links = Array.from(iframe.querySelectorAll('link[rel]'));
+            links = links.filter(link => link.getAttribute('rel') !== 'preload')
+            let $links = $.$$('link[rel]');
+            expect(links.length).equalTo($links.length);
+            links.forEach((link, index) => {
+               let rel = link.getAttribute('rel');
+               expect($links[index].attr('rel')).equalTo(rel);
+            });
+         });
+         it('Check presence and value of "rel" attribute in link elements', () => {
+            let links = Array.from(iframe.querySelectorAll('link[rel]'));
+            links = links.filter(link => link.getAttribute('rel') !== 'preload')
+            let $links = $.$$('link[rel]');
+            expect(links.length).equalTo($links.length);
+            links.forEach((link, index) => {
+               let rel = link.getAttribute('rel');
+               expect($links[index].attr('rel')).equalTo(rel);
+            });
+         });
+      })
+      describe('Complex tests', () => {
+         it('Check correct handling of sibling selectors', () => {
+            let siblingElements = Array.from(iframe.querySelectorAll('h2 + p'));
+            let $siblingElements = $.$$('h2 + p');
+            expect(siblingElements.length).equalTo($siblingElements.length);
+            siblingElements.forEach((siblingElement, index) => {
+               let prevSiblingId = siblingElement.previousElementSibling.getAttribute('id');
+               let $prevSiblingId = $siblingElements[index].prev().attr('id');
+               expect(prevSiblingId).equalTo($prevSiblingId);
+            });
+         });
+         it('Check correct handling of attribute selectors with different conditions', () => {
+            let complexAttributeSelectors = Array.from(iframe.querySelectorAll('a[href^="http"][target="_blank"]'));
+            let $complexAttributeSelectors = $.$$('a[href^="http"][target="_blank"]');
+            expect(complexAttributeSelectors.length).equalTo($complexAttributeSelectors.length);
+            complexAttributeSelectors.forEach((complexAttributeSelector, index) => {
+               let href = complexAttributeSelector.getAttribute('href');
+               let $href = $complexAttributeSelectors[index].attr('href');
+               expect(href).equalTo($href);
+            });
+         });
+         it('Check correct handling of nested elements', () => {
+            let nestedDivs = Array.from(iframe.querySelectorAll('div > div'));
+            let $nestedDivs = $.$$('div > div');
+            expect(nestedDivs.length).equalTo($nestedDivs.length-1);
+            nestedDivs.forEach((nestedDiv, index) => {
+               let $nestedDiv = $nestedDivs[index]
+               let parentId = nestedDiv.parentElement.getAttribute('id');
+               let $parentId = $nestedDiv.parent.id;
+               expect(nestedDiv.attributes.length).equalTo(Object.keys(($nestedDiv.attribs)).length);
+               expect(parentId).equalTo($parentId);
+            });
+         });
+         it('Check correct handling of :nth-child pseudo-class', () => {
+            let elements = Array.from(iframe.querySelectorAll('ul li'));
+            let $elements = $.$$('ul li');
+            expect(elements.length).equalTo($elements.length);
+            elements.forEach((evenLiElement, index) => {
+               let liText = evenLiElement.textContent.trim();
+               let $liText = $elements[index].innerText.trim();
+               while(/\s\s/.test(liText)) {
+                  liText = liText.replace(/\n|\s\s/g,' ')
+               }
+               while(/\s\s/.test($liText)) {
+                  $liText = $liText.replace(/\n|\s\s/g,' ')
+               }
+               $liText = $liText.replace(/&[#]?(?:[a-z0-9]+|x[a-f0-9]+);/g,str => {
+                  return he.decode(str)
+               })
+               if(liText !== $liText) console.log({liText,$liText})
+               expect(liText).equalTo($liText);
+            });
+         });
+      })
+   })
+   runTests()
+}

package/test/test.html ADDED Viewed

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+   <meta charset="UTF-8">
+   <meta http-equiv="X-UA-Compatible" content="IE=edge">
+   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+   <!-- <script src="/node_modules/als-document/document.js"></script> -->
+   <script type="module">
+      import test from './test.js'
+      test()
+   </script>
+   <title>Document</title>
+</head>
+<body>
+</body>
+</html>

package/test/test.js CHANGED Viewed

@@ -1,19 +1,15 @@
-let html1 = require('./html1')
-let html2 = require('./html2')
-let Test = require('als-test')
-let parser = require('../parser/test')
-let query = require('../query/test')
-let selector = require('../selector/test')
-let document = require('../document/test')
-async function run() {
-   await Test.run('Document tests',[
-      parser,
-      query,
-      selector,
-      document
-   ],{html1,html2})
-   Test.summary()
-}
-run()
+import SimpleTest from './utils/als-simple-test/test.mjs'
+import documentTest from './tests/document-test.js'
+import parserTest from './tests/parser-test.js'
+import queryTest from './tests/query-test.js'
+import selectorTest from './tests/selector-test.js'
+SimpleTest.showFullError=true
+export default function() {
+   documentTest()
+   parserTest()
+   queryTest()
+   selectorTest()
+   SimpleTest.runTests()
+   // console.log(SimpleTest.failed.length,SimpleTest.errors.length)
+   // console.log(SimpleTest.results)
+}

package/test/tests/document-test.js ADDED Viewed

@@ -0,0 +1,402 @@
+import { Document } from '../../document.mjs'
+import SimpleTest from '../utils/als-simple-test/test.mjs'
+let {describe,it,beforeEach,runTests,expect,delay} = SimpleTest
+import html1 from '../data/html1.js'
+import html2 from '../data/html2.js'
+export default function () {
+   describe('Document tests',() => {
+      let $ = new Document(html1)
+      let $2 = new Document(html2)
+      let code1 = /*html*/`<div id="test-id"><span>test</span>Hello world<span>test 2</span></div>`
+      describe('Insert tests',() => {
+         it('Check selector',() => {
+            expect($.$('div').index).equalTo(14)
+         })
+         it('insert before',() => {
+            let div = $.$('div')
+            div.insert(code1,0)
+            expect($.$('div').id).equalTo('test-id')
+         })
+         it('Check if new element, includes it\'s children',() => {
+            expect($.$('div').children[1].text).equalTo('Hello world')
+         })
+         it('Check if new element, includes it\'s children',() => {
+            expect($.$('div').children[0].innerHTML).equalTo('test')
+         })
+         it('Move existing element',() => {
+            let div = $.$('div')
+            let script = $.$('script')
+            script.insert(div,0)
+            expect(script.prev.id).equalTo('test-id')
+         })
+         it('Insert after',() => {
+            let div = $.$('div')
+            let script = $.$('script')
+            script.insert(div,3)
+            expect(script.next.id).equalTo('test-id')
+         })
+         it('Insert as first child',() => {
+            let script = $.$('script')
+            let div = $.$('div')
+            div.insert(script,1)
+            expect(div.children[0].tag).equalTo('script')
+         })
+         it('Insert as last child',() => {
+            let span = $.$('span')
+            let script = $.$('script')
+            span.insert(script,2)
+            expect(span.children[1].tag).equalTo('script')
+         })
+         it('setter before - number of parent children',() => {
+            let childrenLength = $.$('.headers').children.length
+            $.$('.headers>label').before = '<div id="test1">Test</div>'
+            expect($.$('.headers').children.length).above(childrenLength)
+         })
+         it('setter before - index of element',() => {
+            let el = $.$('.headers')
+            let index = el.index
+            let next = el.next
+            el.before = next
+            expect(el.prev.index).equalTo(index)
+         })
+         it('setter after - number of parent children',() => {
+            let parentsChildrenN = $.$('.headers').children.length
+            $.$('.headers>label').after = '<div id="test2">Test</div>'
+            expect($.$('.headers').children.length).above(parentsChildrenN)
+         })
+         it('setter after - index of element',() => {
+            let index = $.$('.headers').endIndex+1
+            let el = $.$('.headers')
+            let el2 = el.prev
+            el.after = el2
+            expect(el2.index + el2.elements.length).equalTo(index)
+         })
+         it('first - childIndex',() => {
+            let tabs = $.$('.tabs')
+            let child = tabs.children[1]
+            tabs.first = child
+            expect(child.childIndex).equalTo(0)
+         })
+         it('first - index',() => {
+            let index = $.$('.tabs').children[0].index
+            let tabs = $.$('.tabs')
+            let child = tabs.children[2]
+            tabs.first = child
+            expect(child.index).equalTo(index)
+         })
+         it('last - childIndex',() => {
+            let tabs = $.$('.tabs')
+            let last = tabs.children.length-1
+            let lastChildIndex =  tabs.children[last].childIndex
+            let child = tabs.children[0]
+            tabs.last = child
+            expect(child.childIndex).equalTo(lastChildIndex)
+         })
+         it('last - index',() => {
+            let tabs = $.$('.tabs')
+            let last = tabs.children.length-1
+            let expected =  tabs.children[last].index
+            let child = tabs.children[0]
+            let gap = child.elements.length
+            tabs.last = child
+            expect(child.index-gap).equalTo(expected)
+         })
+      })
+      describe('Attributes action tests',() => {
+         it('Get element\'s style property',() => {
+            expect($.$('[style*="display"]').style.display).equalTo('none')
+         })
+         it('Change element\'s style property',() => {
+            let element = $.$('[style*="display"]')
+            element.style.display = 'block'
+            expect(element.style.display).equalTo('block')
+         })
+         it('Changins element\'s style, change attribs.style too',() => {
+            let element = $.$('[style*="display"]')
+            element.style.display = 'flex'
+            expect(element.attribs.style).includes('flex')
+         })
+         it('Deleting element\'s style property',() => {
+            let element = $.$('[style*="display"]')
+            delete element.style.display
+            expect(element.style.display).isNot().defined()
+         })
+         it('Deleting element\'s style, change attribs.style too',() => {
+            let element = $.$('[style*="background-color"]')
+            delete element.style.backgroundColor
+            expect(element.attribs.style).isNot().includes('background-color')
+         })
+      })
+      describe('Classlist action tests',() => {
+         it('add class',() => {
+            let el = $.$('.tabs')
+            el.classList.add('super')
+            expect(el.classList).includes('super')
+         })
+         it('Adding class, changing attribs.class too',() => {
+            let el = $.$('.tabs')
+            el.classList.add('puper')
+            expect(el.attribs.class).includes('puper')
+         })
+         it('remove class',() => {
+            let el = $.$('.tabs')
+            el.classList.remove('super')
+            expect(el.classList).isNot().includes('super')
+         })
+         it('Removing class, removing class in attribs.class too',() => {
+            let el = $.$('.tabs')
+            el.classList.remove('puper')
+            expect(el.attribs.class).isNot().includes('puper')
+         })
+         it('Test id getter',() => {
+            expect($.$('[id]').id).equalTo('test-id')
+         })
+         it('Test id setter',() => {
+            $.$('[id]').id = 'another-one'
+            expect($.$('[id]').id).equalTo('another-one')
+         })
+      })
+      describe('Test attributes',() => {
+         it('Get attribute',() => {
+            expect($.$('input').attribs.type).equalTo($.$('input').attr('type'))
+         })
+         it('Set attribute',() => {
+            let before = $.$('input').attribs.name
+            let input = $.$('input')
+            input.attr('name','name-changed')
+            expect(input.attr('name')).isNot().equalTo(before)
+         })
+         it('Remove attribute',() => {
+            let before = Object.keys($.$('input').attribs).includes('checked')
+            let input = $.$('input')
+            input.attr('checked',null)
+            expect(Object.keys($.$('input').attribs).includes('checked')).isNot().equalTo(before)
+         })
+         it('Style not changable',() => {
+            let before = $.$('[style]').attr('style')
+            $.$('[style]').attr('style','style has changed')
+            expect($.$('[style]').attr('style')).equalTo(before)
+         })
+         it('Id not changable',() => {
+            let before = $.$('[id]').attr('id')
+            $.$('[id]').attr('id','id has changed')
+            expect($.$('[id]').attr('id')).equalTo(before)
+         })
+         it('Class not removable',() => {
+            let expected = $.$('[class]').attr('class')
+            $.$('[class]').attr('class',null)
+            expect($.$('[class]').attr('class')).equalTo(expected)
+         })
+         it('style not removable',() => {
+            let expected = $.$('[style]').attr('style')
+            $.$('[style]').attr('style',null)
+            expect($.$('[style]').attr('style')).equalTo(expected)
+         })
+         it('id not removable',() => {
+            let expected = $.$('[id]').attr('id')
+            $.$('[id]').attr('id',null)
+            expect($.$('[id]').attr('id')).equalTo(expected)
+         })
+         it('outerHTML changing then attribute changing',() => {
+            let expected = $.$('script').outerHTML.length
+            $.$('script').attr('src','some-test')
+            expect($.$('script').outerHTML.length).isNot().equalTo(expected)
+         })
+         it('remove element - children length',() => {
+            let expected = $.$('input').parent.children.length
+            let el = $.$('input')
+            let parent = el.parent
+            el.remove()
+            expect(parent.children.length).below(expected)
+         })
+         it('remove element - parent elements change',() => {
+            let expected = $.$('input').parent.elements.length
+            let el = $.$('input')
+            let count = el.elements.length
+            let parent = el.parent
+            el.remove()
+            expect(parent.elements.length+count).equalTo(expected)
+         })
+         it('remove element - innerHTML changed',() => {
+            let expected = $.$('input').parent.innerHTML.length
+            let el = $.$('input')
+            let parent = el.parent
+            el.remove()
+            expect(parent.innerHTML.length).below(expected)
+         })
+         it('Check selector',() => {
+            expect($2.$('div').index).equalTo(89)
+         })
+      })
+      describe('Insert tests',() => {
+         it('insert before',() => {
+            let div = $2.$('div')
+            div.insert(code1,0)
+            expect($2.$('div').id).equalTo('test-id')
+         })
+         it('Check if new element, includes it\'s children',() => {
+            expect($2.$('div').children[1].text).equalTo('Hello world')
+         })
+         it('Check if new element, includes it\'s children',() => {
+            expect($2.$('div').children[0].innerHTML).equalTo('test')
+         })
+         it('Move existing element',() => {
+            let div = $2.$('div')
+            let script = $2.$('script')
+            script.insert(div,0)
+            expect(script.prev.id).equalTo('test-id')
+         })
+         it('Insert after',() => {
+            let div = $2.$('div')
+            let script = $2.$('script')
+            script.insert(div,3)
+            expect(script.next.id).equalTo('test-id')
+         })
+         it('Insert as first child',() => {
+            let script = $2.$('script')
+            let div = $2.$('div')
+            div.insert(script,1)
+            expect(div.children[0].tag).equalTo('script')
+         })
+         it('Insert as last child',() => {
+            let span = $2.$('span')
+            let script = $2.$('script')
+            span.insert(script,2)
+            expect(span.children[1].tag).equalTo('script')
+         })
+         it('setter before - number of parent children',() => {
+            const expected = $2.$('#container').children.length
+            $2.$('#container>#navbarDropMenu').before = '<div id="test1">Test</div>'
+            expect($2.$('#container').children.length).above(expected)
+         })
+         it('setter before - index of element',() => {
+            const expected = $2.$('#container').index
+            let el = $2.$('#container')
+            let next = el.next
+            el.before = next
+            expect(el.prev.index).equalTo(expected)
+         })
+         it('setter after - number of parent children',() => {
+            const expected = $2.$('#container').children.length
+            $2.$('#container>#navbarDropMenu').after = '<div id="test2">Test</div>'
+            expect($2.$('#container').children.length).above(expected)
+         })
+         it('setter after - index of element',() => {
+            const expected = $2.$('#container').endIndex+1
+            let el = $2.$('#container')
+            let el2 = el.prev
+            el.after = el2
+            expect(el2.index + el2.elements.length).equalTo(expected)
+         })
+         it('first - childIndex',() => {
+            let tabs = $2.$('#container')
+            let child = tabs.children[1]
+            tabs.first = child
+            expect(child.childIndex).equalTo(0)
+         })
+         it('first - index',() => {
+            const expected = $2.$('#container').children[0].index
+            let tabs = $2.$('#container')
+            let child = tabs.children[2]
+            tabs.first = child
+            expect(child.index).equalTo(expected)
+         })
+         it('last - childIndex',() => {
+            let tabs = $2.$('#container')
+            let last = tabs.children.length-1
+            const expected = tabs.children[last].childIndex
+            let child = tabs.children[0]
+            tabs.last = child
+            expect(child.childIndex).equalTo(expected)
+         })
+         it('last - index',() => {
+            let tabs = $2.$('#container')
+            let last = tabs.children.length-1
+            const expected = tabs.children[last].index
+            last = tabs.children[tabs.children.length-1]
+            let child = tabs.children[0]
+            tabs.last = child
+            expect(child.index+child.elements.length-last.elements.length).equalTo(expected)
+         })
+         it('remove element - children length',() => {
+            const expected = $2.$('.w3-bar-item').parent.children.length
+            let el = $2.$('.w3-bar-item')
+            let parent = el.parent
+            el.remove()
+            expect(parent.children.length).below(expected)
+         })
+         it('remove element - parent elements change',() => {
+            const expected = $2.$('.w3-bar-item').parent.elements.length
+            let el = $2.$('.w3-bar-item')
+            let count = el.elements.length
+            let parent = el.parent
+            el.remove()
+            expect(parent.elements.length+count).equalTo(expected)
+         })
+         it('remove element - innerHTML changed',() => {
+            const expected = $2.$('.w3-bar-item').parent.innerHTML.length
+            let el = $2.$('.w3-bar-item')
+            let parent = el.parent
+            el.remove()
+            expect(parent.innerHTML.length).below(expected)
+         })
+      })
+   })
+}