als-document 0.5.1 → 0.6.0

package/document/test.js

@@ -0,0 +1,678 @@
+let Test = require('als-test')
+let Document = require('./document')
+const { notEqual, smaller, greater } = require('als-test')
+let {equal} = Test
+
+module.exports = new Test('Document tests',[
+   {
+      title:'Create $',
+      result: function({html1}){
+         this.vars.$ = new Document(html1)
+         this.vars.code1 = /*html*/`<div id="test-id"><span>test</span>Hello world<span>test 2</span></div>`
+         return 'Done'
+      },
+   },
+   {
+      title:'Check selector',
+      expected:14,
+      result: function({$}){
+         return $.$('div').index
+      },
+      action:equal
+   },
+   {title:'Insert tests'},
+   {
+      title:'insert before',
+      expected:'test-id',
+      result: function({$,code1}){
+         let div = $.$('div')
+         div.insert(code1,0)
+         return $.$('div').id
+      },
+      action:equal
+   },
+   {
+      title:'Check if new element, includes it\'s children',
+      expected:'Hello world',
+      result: function({$}){
+         return $.$('div').children[1].text
+      },
+      action:equal
+   },
+   {
+      title:'Check if new element, includes it\'s children',
+      expected:'test',
+      result: function({$}){
+         return $.$('div').children[0].innerHTML
+      },
+      action:equal
+   },
+   {
+      title:'Move existing element',
+      expected:'test-id',
+      result: function({$}){
+         let div = $.$('div')
+         let script = $.$('script')
+         script.insert(div,0)
+         return script.prev.id
+      },
+      action:equal
+   },
+   {
+      title:'Insert after',
+      expected:'test-id',
+      result: function({$}){
+         let div = $.$('div')
+         let script = $.$('script')
+         script.insert(div,3)
+         return script.next.id
+      },
+      action:equal
+   },
+   {
+      title:'Insert as first child',
+      expected:'script',
+      result: function({$}){
+         let script = $.$('script')
+         let div = $.$('div')
+         div.insert(script,1)
+         return div.children[0].tag
+      },
+      action:equal
+   },
+   {
+      title:'Insert as last child',
+      expected:'script',
+      result: function({$}){
+         let span = $.$('span')
+         let script = $.$('script')
+         span.insert(script,2)
+         return span.children[1].tag
+      },
+      action:equal
+   },
+   {
+      title:'setter before - number of parent children',
+      expected:function({$}) {
+         return $.$('.headers').children.length
+      },
+      result:function({$}) {
+         $.$('.headers>label').before = '<div id="test1">Test</div>'
+         return $.$('.headers').children.length
+      },
+      action:smaller
+   },
+   {
+      title:'setter before - index of element',
+      expected:function({$}) {
+         return $.$('.headers').index
+      },
+      result:function({$}) {
+         let el = $.$('.headers')
+         let next = el.next
+         el.before = next
+         return el.prev.index
+      },
+      action:equal
+   },
+   {
+      title:'setter after - number of parent children',
+      expected:function({$}) {
+         return $.$('.headers').children.length
+      },
+      result:function({$}) {
+         $.$('.headers>label').after = '<div id="test2">Test</div>'
+         return $.$('.headers').children.length
+      },
+      action:smaller
+   },
+   {
+      title:'setter after - index of element',
+      expected:function({$}) {
+         return $.$('.headers').endIndex+1
+      },
+      result:function({$}) {
+         let el = $.$('.headers')
+         let el2 = el.prev
+         el.after = el2
+         return el2.index + el2.elements.length
+      },
+      action:equal
+   },
+   {
+      title:'first - childIndex',
+      expected:0,
+      result:function({$}) {
+         let tabs = $.$('.tabs')
+         let child = tabs.children[1]
+         tabs.first = child
+         return child.childIndex
+      },
+      action:equal
+   },
+   {
+      title:'first - index',
+      expected:function({$}) {
+         return $.$('.tabs').children[0].index
+      },
+      result:function({$}) {
+         let tabs = $.$('.tabs')
+         let child = tabs.children[2]
+         tabs.first = child
+         return child.index
+      },
+      action:equal
+   },
+   {
+      title:'last - childIndex',
+      expected:function({$}){
+         let tabs = $.$('.tabs')
+         let last = tabs.children.length-1
+         return tabs.children[last].childIndex
+      },
+      result:function({$}) {
+         let tabs = $.$('.tabs')
+         let child = tabs.children[0]
+         tabs.last = child
+         return child.childIndex
+      },
+      action:equal
+   },
+   {
+      title:'last - index',
+      expected:function({$}) {
+         let tabs = $.$('.tabs')
+         let last = tabs.children.length-1
+         return tabs.children[last].index
+      },
+      result:function({$}) {
+         let tabs = $.$('.tabs')
+         let child = tabs.children[0]
+         let gap = child.elements.length
+         tabs.last = child
+         return child.index-gap
+      },
+      action:equal
+   },
+   {title:'Attributes action tests'},
+   {
+      title:'Get element\'s style property',
+      expected:'none',
+      result:function({$}){
+         return $.$('[style*="display"]').style.display
+      },
+      action:equal
+   },
+   {
+      title:'Change element\'s style property',
+      expected:'block',
+      result:function({$}){
+         let element = $.$('[style*="display"]')
+         element.style.display = 'block'
+         return element.style.display
+      },
+      action:equal
+   },
+   {
+      title:'Changins element\'s style, change attribs.style too',
+      expected:true,
+      result:function({$}){
+         let element = $.$('[style*="display"]')
+         element.style.display = 'flex'
+         return element.attribs.style.includes('flex')
+      },
+      action:equal
+   },
+   {
+      title:'Deleting element\'s style property',
+      expected:undefined,
+      result:function({$}){
+         let element = $.$('[style*="display"]')
+         delete element.style.display
+         return element.style.display
+      },
+      action:equal
+   },
+   {
+      title:'Deleting element\'s style, change attribs.style too',
+      expected:false,
+      result:function({$}){
+         let element = $.$('[style*="background-color"]')
+         delete element.style.backgroundColor
+         return element.attribs.style.includes('background-color')
+      },
+      action:equal
+   },
+   {title:'Classlist action tests'},
+   {
+      title:'add class',
+      expected:true,
+      result: function({$}){
+         let el = $.$('.tabs')
+         el.classList.add('super')
+         return el.classList.includes('super')
+      },
+      action:equal
+   },
+   {
+      title:'Adding class, changing attribs.class too',
+      expected:true,
+      result: function({$}){
+         let el = $.$('.tabs')
+         el.classList.add('puper')
+         return el.attribs.class.includes('puper')
+      },
+      action:equal
+   },
+   {
+      title:'remove class',
+      expected:function({$}) {
+         return $.$('.tabs').classList.includes('super')
+      },
+      result: function({$}){
+         let el = $.$('.tabs')
+         el.classList.remove('super')
+         return el.classList.includes('super')
+      },
+      action:notEqual
+   },
+   {
+      title:'Removing class, removing class in attribs.class too',
+      expected:function({$}) {
+         return $.$('.tabs').attribs.class.includes('puper')
+      },
+      result: function({$}){
+         let el = $.$('.tabs')
+         el.classList.remove('puper')
+         return el.attribs.class.includes('puper')
+      },
+      action:notEqual
+   },
+   {
+      title:'Test id getter',
+      expected:'test-id',
+      result:function({$}){
+         return $.$('[id]').id
+      },
+      action:equal
+   },
+   {
+      title:'Test id setter',
+      expected:'another-one',
+      result:function({$}){
+         $.$('[id]').id = 'another-one'
+         return $.$('[id]').id
+      },
+      action:equal
+   },
+   {title:'Test attributes'},
+   {
+      title:'Get attribute',
+      expected:function({$}) {
+         return $.$('input').attribs.type
+      },
+      result:function({$}){
+         return $.$('input').attr('type')
+      },
+      action:equal
+   },
+   {
+      title:'Set attribute',
+      expected:function({$}) {
+         return $.$('input').attribs.name
+      },
+      result:function({$}){
+         let input = $.$('input')
+         input.attr('name','name-changed')
+         return input.attr('name')
+      },
+      action:notEqual
+   },
+   {
+      title:'Remove attribute',
+      expected:function({$}) {
+         return Object.keys($.$('input').attribs).includes('checked')
+      },
+      result:function({$}){
+         let input = $.$('input')
+         input.attr('checked',null)
+         return Object.keys($.$('input').attribs).includes('checked')
+      },
+      action:notEqual
+   },
+   {
+      title:'Style not changable',
+      expected:function({$}) {
+         return $.$('[style]').attr('style')
+      },
+      result:function({$}){
+         $.$('[style]').attr('style','style has changed')
+         return $.$('[style]').attr('style')
+      },
+      action:equal
+   },
+   {
+      title:'Id not changable',
+      expected:function({$}) {
+         return $.$('[id]').attr('id')
+      },
+      result:function({$}){
+         $.$('[id]').attr('id','id has changed')
+         return $.$('[id]').attr('id')
+      },
+      action:equal
+   },
+   {
+      title:'Class not removable',
+      expected:function({$}) {
+         return $.$('[class]').attr('class')
+      },
+      result:function({$}){
+         $.$('[class]').attr('class',null)
+         return $.$('[class]').attr('class')
+      },
+      action:equal
+   },
+   {
+      title:'style not removable',
+      expected:function({$}) {
+         return $.$('[style]').attr('style')
+      },
+      result:function({$}){
+         $.$('[style]').attr('style',null)
+         return $.$('[style]').attr('style')
+      },
+      action:equal
+   },
+   {
+      title:'id not removable',
+      expected:function({$}) {
+         return $.$('[id]').attr('id')
+      },
+      result:function({$}){
+         $.$('[id]').attr('id',null)
+         return $.$('[id]').attr('id')
+      },
+      action:equal
+   },
+   {
+      title:'outerHTML changing then attribute changing',
+      expected:function({$}) {
+         return $.$('script').outerHTML.length
+      },
+      result:function({$}){
+         $.$('script').attr('src','some-test')
+         return $.$('script').outerHTML.length
+      },
+      action:notEqual
+   },
+   {
+      title:'remove element - children length',
+      expected:function({$}) {
+         return $.$('input').parent.children.length
+      },
+      result:function({$}) {
+         let el = $.$('input')
+         let parent = el.parent
+         el.remove()
+         return parent.children.length
+      },
+      action:greater
+   },
+   {
+      title:'remove element - parent elements change',
+      expected:function({$}) {
+         return $.$('input').parent.elements.length
+      },
+      result:function({$}) {
+         let el = $.$('input')
+         let count = el.elements.length
+         let parent = el.parent
+         el.remove()
+         return parent.elements.length+count
+      },
+      action:equal
+   },
+   {
+      title:'remove element - innerHTML changed',
+      expected:function({$}) {
+         return $.$('input').parent.innerHTML.length
+      },
+      result:function({$}) {
+         let el = $.$('input')
+         let parent = el.parent
+         el.remove()
+         return parent.innerHTML.length
+      },
+      action:greater
+   },
+   {
+      title:'Create $',
+      result: function({html2}){
+         this.vars.$ = new Document(html2)
+         return 'Done'
+      },
+   },
+   {
+      title:'Check selector',
+      expected:89,
+      result: function({$}){
+         return $.$('div').index
+      },
+      action:equal
+   },
+   {title:'Insert tests'},
+   {
+      title:'insert before',
+      expected:'test-id',
+      result: function({$,code1}){
+         let div = $.$('div')
+         div.insert(code1,0)
+         return $.$('div').id
+      },
+      action:equal
+   },
+   {
+      title:'Check if new element, includes it\'s children',
+      expected:'Hello world',
+      result: function({$}){
+         return $.$('div').children[1].text
+      },
+      action:equal
+   },
+   {
+      title:'Check if new element, includes it\'s children',
+      expected:'test',
+      result: function({$}){
+         return $.$('div').children[0].innerHTML
+      },
+      action:equal
+   },
+   {
+      title:'Move existing element',
+      expected:'test-id',
+      result: function({$}){
+         let div = $.$('div')
+         let script = $.$('script')
+         script.insert(div,0)
+         return script.prev.id
+      },
+      action:equal
+   },
+   {
+      title:'Insert after',
+      expected:'test-id',
+      result: function({$}){
+         let div = $.$('div')
+         let script = $.$('script')
+         script.insert(div,3)
+         return script.next.id
+      },
+      action:equal
+   },
+   {
+      title:'Insert as first child',
+      expected:'script',
+      result: function({$}){
+         let script = $.$('script')
+         let div = $.$('div')
+         div.insert(script,1)
+         return div.children[0].tag
+      },
+      action:equal
+   },
+   {
+      title:'Insert as last child',
+      expected:'script',
+      result: function({$}){
+         let span = $.$('span')
+         let script = $.$('script')
+         span.insert(script,2)
+         return span.children[1].tag
+      },
+      action:equal
+   },
+   {
+      title:'setter before - number of parent children',
+      expected:function({$}) {
+         return $.$('#container').children.length
+      },
+      result:function({$}) {
+         $.$('#container>#navbarDropMenu').before = '<div id="test1">Test</div>'
+         return $.$('#container').children.length
+      },
+      action:smaller
+   },
+   {
+      title:'setter before - index of element',
+      expected:function({$}) {
+         return $.$('#container').index
+      },
+      result:function({$}) {
+         let el = $.$('#container')
+         let next = el.next
+         el.before = next
+         return el.prev.index
+      },
+      action:equal
+   },
+   {
+      title:'setter after - number of parent children',
+      expected:function({$}) {
+         return $.$('#container').children.length
+      },
+      result:function({$}) {
+         $.$('#container>#navbarDropMenu').after = '<div id="test2">Test</div>'
+         return $.$('#container').children.length
+      },
+      action:smaller
+   },
+   {
+      title:'setter after - index of element',
+      expected:function({$}) {
+         return $.$('#container').endIndex+1
+      },
+      result:function({$}) {
+         let el = $.$('#container')
+         let el2 = el.prev
+         el.after = el2
+         return el2.index + el2.elements.length
+      },
+      action:equal
+   },
+   {
+      title:'first - childIndex',
+      expected:0,
+      result:function({$}) {
+         let tabs = $.$('#container')
+         let child = tabs.children[1]
+         tabs.first = child
+         return child.childIndex
+      },
+      action:equal
+   },
+   {
+      title:'first - index',
+      expected:function({$}) {
+         return $.$('#container').children[0].index
+      },
+      result:function({$}) {
+         let tabs = $.$('#container')
+         let child = tabs.children[2]
+         tabs.first = child
+         return child.index
+      },
+      action:equal
+   },
+   {
+      title:'last - childIndex',
+      expected:function({$}){
+         let tabs = $.$('#container')
+         let last = tabs.children.length-1
+         return tabs.children[last].childIndex
+      },
+      result:function({$}) {
+         let tabs = $.$('#container')
+         let child = tabs.children[0]
+         tabs.last = child
+         return child.childIndex
+      },
+      action:equal
+   },
+   {
+      title:'last - index',
+      expected:function({$}) {
+         let tabs = $.$('#container')
+         let last = tabs.children.length-1
+         return tabs.children[last].index
+      },
+      result:function({$}) {
+         let tabs = $.$('#container')
+         let last = tabs.children[tabs.children.length-1]
+         let child = tabs.children[0]
+         tabs.last = child
+         return child.index+child.elements.length-last.elements.length
+      },
+      action:equal
+   },
+   {
+      title:'remove element - children length',
+      expected:function({$}) {
+         return $.$('.w3-bar-item').parent.children.length
+      },
+      result:function({$}) {
+         let el = $.$('.w3-bar-item')
+         let parent = el.parent
+         el.remove()
+         return parent.children.length
+      },
+      action:greater
+   },
+   {
+      title:'remove element - parent elements change',
+      expected:function({$}) {
+         return $.$('.w3-bar-item').parent.elements.length
+      },
+      result:function({$}) {
+         let el = $.$('.w3-bar-item')
+         let count = el.elements.length
+         let parent = el.parent
+         el.remove()
+         return parent.elements.length+count
+      },
+      action:equal
+   },
+   {
+      title:'remove element - innerHTML changed',
+      expected:function({$}) {
+         return $.$('.w3-bar-item').parent.innerHTML.length
+      },
+      result:function({$}) {
+         let el = $.$('.w3-bar-item')
+         let parent = el.parent
+         el.remove()
+         return parent.innerHTML.length
+      },
+      action:greater
+   },
+])