als-document 0.1.1 → 0.5.0

package/selector/test.js

@@ -0,0 +1,410 @@
+let Test = require('als-test')
+// const HtmlSelector = require('./selector')
+const {HtmlSelector} = require('../build/document')
+let {equal,greater,smaller,$greater, $smaller} = Test
+
+module.exports = new Test('Selector tests',[
+   {
+      title:'Build $1 and $2',
+      result: function({html1,html2}){
+         this.vars.$1 = new HtmlSelector(html1)
+         this.vars.$2 = new HtmlSelector(html2)
+         let {$1,$2} = this.vars
+         if(typeof $1.$ == 'function' && typeof $2.$ == 'function')
+            return '$1 and $2 created'
+         else {
+            this.terminate = true
+            return 'Selector not created. Test terminated.'
+         }
+      },
+   },
+   {title:'Tests for selecting single element'},
+   {
+      title:'Get body tag from $1',
+      expected:'body',
+      result:function({$1}){
+         return $1.$('body').tag
+      },
+      action:equal
+   },
+   {
+      title:'Get body tag from $2',
+      expected:'body',
+      result:function({$2}){
+         return $2.$('body').tag
+      },
+      action:equal
+   },
+   {
+      title:'Get element by className from $1',
+      expected:true,
+      result:function({$1}){
+         return $1.$('.tabs').classList.includes('tabs')
+      },
+      action:equal
+   },
+   {
+      title:'Get element by className from $2',
+      expected:'https://www.w3schools.com',
+      result:function({$2}){
+         return $2.$('.w3-button').attribs.href
+      },
+      action:equal
+   },
+   {
+      title:'Get element by id from $1',
+      expected:'tab3',
+      result:function({$1}){
+         return $1.$('#tab3').id
+      },
+      action:equal
+   },
+   {
+      title:'Get element by id from $2',
+      expected:'runbtn',
+      result:function({$2}){
+         return $2.$('#runbtn').id
+      },
+      action:equal
+   },
+   {
+      title:'Get element by attribute from $1',
+      expected:'tab1',
+      result:function({$1}){
+         return $1.$('[name="css-tabs"][type="radio"][checked]').id
+      },
+      action:equal
+   },
+   {
+      title:'Get element by attribute from $2',
+      expected:'Save',
+      result:function({$2}){
+         return $2.$('[title="Save"]').attribs.title
+      },
+      action:equal
+   },
+   {
+      title:'Get element by attribute name $1',
+      expected:'none',
+      result:function({$1}){
+         return $1.$('[style]').style.display
+      },
+      action:equal
+   },
+   {
+      title:'Get element by attribute name $2',
+      expected:'trytopnav',
+      result:function({$2}){
+         return $2.$('[class]').attribs.class
+      },
+      action:equal
+   },
+   {title:'Check attributes for single'},
+   {
+      title:'Test includes - "*=" fro $1',
+      expected:'Tab 1',
+      result: function({$1}){
+         return $1.$('[class*="transition1"]').innerHTML
+      },
+      action:equal
+   },
+   {
+      title:'Test starts with - "^=" fro $1',
+      expected:'tab1 content',
+      result: function({$1}){
+         return $1.$('[class*="tab-content"]').innerHTML
+      },
+      action:equal
+   },
+   {
+      title:'Test ends with - "$=" fro $1',
+      expected:'tab1 content',
+      result: function({$1}){
+         return $1.$('[class*="p2 transition1"]').innerHTML
+      },
+      action:equal
+   },
+   {
+      title:'Test starts with word-  "|=" fro $1',
+      expected:'css-tabs',
+      result: function({$1}){
+         return $1.$('[name|="css"]').attribs.name
+      },
+      action:equal
+   },
+   {
+      title:'Test includes word  "~=" fro $1',
+      expected:true,
+      result: function({$1}){
+         return $1.$('[class~="bgc-smoke"]').classList.includes('bgc-smoke')
+      },
+      action:equal
+   },
+   {
+      title:'Test includes - "*=" fro $2',
+      expected:'w3schools.com Home',
+      result: function({$2}){
+         return $2.$('[title*=".com"]').attribs.title
+      },
+      action:equal
+   },
+   {
+      title:'Test starts with - "^=" fro $2',
+      expected:'w3-right w3-hide-small',
+      result: function({$2}){
+         return $2.$('[class^="w3-right"]').attribs.class
+      },
+      action:equal
+   },
+   {
+      title:'Test ends with - "$=" fro $2',
+      expected:'w3schools.com Home',
+      result: function({$2}){
+         return $2.$('[title$="Home"]').attribs.title
+      },
+      action:equal
+   },
+   {
+      title:'Test starts with word-  "|=" fro $2',
+      expected:'en-US',
+      result: function({$2}){
+         return $2.$('[lang|="en"]').attribs.lang
+      },
+      action:equal
+   },
+   {
+      title:'Test includes word  "~=" fro $2',
+      expected:'og:image:width',
+      result: function({$2}){
+         return $2.$('[property~="width"]').attribs.property
+      },
+      action:equal
+   },
+   {title:'Few selectors test for single'},
+   {
+      title:'tag and attribute $1',
+      expected:'tab1',
+      result:async function({$1}){
+         return $1.$('input[checked]').id
+      },
+      action:equal
+   },
+   {
+      title:'parent tag and attribute $1',
+      expected:'tab1',
+      result:async function({$1}){
+         return $1.$('div.tabs>input[checked]').id
+      },
+      action:equal
+   },
+   {
+      title:'parent and next $1',
+      expected:'tab2',
+      result:async function({$1}){
+         return $1.$('div.tabs>input[checked]+input').id
+      },
+      action:equal
+   },
+   {
+      title:'ancestor $1',
+      expected:true,
+      result:async function({$1}){
+         return $1.$('body [onclick*="Hello world"]').attribs.onclick.includes('this.innerHTML')
+      },
+      action:equal
+   },
+   {
+      title:'ancestor, parent and (~) $1',
+      expected:'tab3',
+      result:async function({$1}){
+         return $1.$('[checked]~#tab3').id
+      },
+      action:equal
+   },
+   {
+      title:'inner',
+      expected:'tab1 content',
+      result:async function({$1}){
+         return $1.$('[inner*="content"]').innerHTML
+      },
+      action:equal
+   },
+   {
+      title:'tag and attribute $2',
+      expected:'runbtn',
+      result:async function({$2}){
+         return $2.$('button[onclick]').id
+      },
+      action:equal
+   },
+   {
+      title:'parent tag and attribute $2',
+      expected:'×',
+      result:async function({$2}){
+         return $2.$('#container>div>span[title="Close Menu"]').innerHTML
+      },
+      action:equal
+   },
+   {
+      title:'parent and next $2',
+      expected:'w3-bar-block',
+      result:async function({$2}){
+         return $2.$('#container>div>span[title="Close Menu"]+div').attribs.class
+      },
+      action:equal
+   },
+   {
+      title:'ancestor $2',
+      expected:'Change Orientation',
+      result:async function({$2}){
+         return $2.$('#container a span').innerHTML
+      },
+      action:equal
+   },
+   {
+      title:'ancestor, parent and (~) $2',
+      expected:'Change Orientation',
+      result:async function({$2}){
+         return $2.$('#container a>i~span').innerHTML
+      },
+      action:equal
+   },
+   {
+      title:'inner',
+      expected:'Privacy policy',
+      result:async function({$2}){
+         return $2.$('[inner*="Privacy"]').innerHTML
+      },
+      action:equal
+   },
+   {title:'Select collection'},
+   {
+      title:'Select few elements (input) $1',
+      expected:3,
+      result:async function({$1}){
+         return $1.$$('input').length
+      },
+      action:equal
+   },
+   {
+      title:'Select few elements ([inner*=test]) $1',
+      expected:3,
+      result:async function({$1}){
+         return $1.$$('[inner*=test]').length
+      },
+      action:equal
+   },
+   {
+      title:'Select few elements (.transition1) $1',
+      expected:6,
+      result:async function({$1}){
+         return $1.$$('.transition1').length
+      },
+      action:equal
+   },
+   {
+      title:'Select few elements (div>.transition1) $1',
+      expected:3,
+      result:async function({$1}){
+         return $1.$$('div>.transition1').length
+      },
+      action:equal
+   },
+   {
+      title:'Select few elements (.col5>input[checked][name^=css][type]) $1',
+      expected:1,
+      result:async function({$1}){
+         return $1.$$('.col5>input[checked][name^=css][type]').length
+      },
+      action:equal
+   },
+   {
+      title:'Select few elements (.col5 label[for^="tab"]) $1',
+      expected:3,
+      result:async function({$1}){
+         return $1.$$('.col5 label[for^="tab"]').length
+      },
+      action:equal
+   },
+   {
+      title:'Select few elements (.w3-button) $2',
+      expected:12,
+      result:async function({$2}){
+         return $2.$$('.w3-button').length
+      },
+      action:equal
+   },
+   {
+      title:'Select few elements (.w3-button) $2',
+      expected:1,
+      result:async function({$2}){
+         return $2.$$('.w3-button>img').length
+      },
+      action:equal
+   },
+   {
+      title:'Select few elements (.w3-button>img+span) $2',
+      expected:'Go to Spaces',
+      result:async function({$2}){
+         return $2.$$('.w3-button>img+span')[0].innerHTML
+      },
+      action:equal
+   },
+   {
+      title:'Select few elements (#container div) $2',
+      expected:30,
+      result:async function({$2}){
+         return $2.$$('#container div').length
+      },
+      action:equal
+   },
+   {
+      title:'Select few elements (#container div) $2',
+      expected:4,
+      result:async function({$2}){
+         return $2.$$('#container>div').length
+      },
+      action:equal
+   },
+   {title:'Few selectors'},
+   {
+      title:'Select few elements (.col5 label[for^="tab"],input[checked]) $1',
+      expected:4,
+      result:async function({$1}){
+         return $1.$$('.col5 label[for^="tab"],input[checked]').length
+      },
+      action:equal
+   },
+   {
+      title:'Select few elements ([style],[onclick]) $1',
+      expected:7,
+      result:async function({$1}){
+         return $1.$$('[style],[onclick],[name]').length
+      },
+      action:equal
+   },
+   {
+      title:'Select few elements (#container a[title]) $2',
+      expected:4,
+      result:async function({$2}){
+         return $2.$$('#container a[title]').length
+      },
+      action:equal
+   },
+   {
+      title:'Select few elements (div,span) $2',
+      expected:165,
+      result:async function({$2}){
+         return $2.$$('div,span').length
+      },
+      action:equal
+   },
+   {
+      title:'Select few elements (meta[property^="og"],meta[content^="width"]) $2',
+      expected:8,
+      result:async function({$2}){
+         return $2.$$('meta[property^="og"],meta[content^="width"]').length
+      },
+      action:equal
+   },
+])

package/test/html1.js

@@ -0,0 +1,50 @@
+let html1 = /*html*/`
+<!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">
+    <title>Document</title>
+</head>
+<body>
+   <script>console.log('test')</script>
+   <div onclick="console.log('hello world')" 
+      style="display:none; background-color:red; border:1px sold black;border-radius:5px;">
+         Some test
+   </div>
+   <div>
+        Some test1
+        <div>
+            one more inside
+            <div onclick="this.innerHTML = '<div>Hello world</div>'"></div>
+            <!-- <div>commented element</div> -->
+        </div>
+    </div>
+    <div class="tabs col5 bgc-white b-light-dark b1" style="width:300px">
+        <input type="radio" id="tab1" name="css-tabs" checked>
+        <input type="radio" id="tab2" name="css-tabs">
+        <input type="radio" id="tab3" name="css-tabs">
+     
+        <span class="headers">
+           <label class="btn p2 b-light-dark b1 transition1 bgc-smoke" for="tab1">Tab 1</label>
+           <label class="btn p2 b-light-dark b1 transition1 bgc-smoke" for="tab2">Tab 2</label>
+           <label class="btn p2 b-light-dark b1 transition1 bgc-smoke" for="tab3">Tab 3</label>
+        </span>
+     
+        <div class="tab-content p2 transition1">
+           tab1 content
+        </div>
+        <div class="tab-content p2 transition1">
+           tab2 content
+        </div>
+        <div class="tab-content p2 transition1">
+           tab3 content
+        </div>
+     </div>
+     
+</body>
+</html>
+`
+
+try {module.exports = html1} catch{}