glass-easel 0.1.0

package/tests/legacy/generics.test.js

@@ -0,0 +1,176 @@
+/* eslint-disable */
+
+const { tmpl, domBackend, shadowBackend } = require('../base/env')
+const glassEasel = require('../../src')
+
+const componentSpace = new glassEasel.ComponentSpace()
+componentSpace.updateComponentOptions({
+  writeFieldsToNode: true,
+})
+componentSpace.defineComponent({
+  is: '',
+})
+
+const regElem = (config) => {
+  const { template, ...c } = config
+  if (template) c.template = tmpl(template)
+  return componentSpace.defineComponent(c)
+}
+
+const createElem = (is, backend) => {
+  const def = componentSpace.getComponent(is)
+  return glassEasel.Component.createWithContext(is || 'test', def, backend || domBackend)
+}
+
+describe('Generics, using and write-only', function(){
+
+  beforeAll(function(){
+    regElem({
+      is: 'generics-common',
+      options: {
+        writeOnly: true
+      },
+      template: '<span />'
+    })
+    regElem({
+      is: 'generics-common-cross-domain',
+      options: {
+        domain: 'XXX'
+      },
+      template: '<span />'
+    })
+  })
+
+  describe('Component using', function(){
+
+    it('should support using', function(){
+      var compA = regElem({
+        is: 'generics-using-a',
+        properties: {
+          propA: String
+        },
+        template: '<span></span>'
+      })
+      regElem({
+        is: 'generics-using-b',
+        using: {
+          'a-a': 'generics-using-a',
+          'a-b': compA
+        },
+        template: '<a-a></a-a><a-b></a-b>'
+      })
+      var elem = createElem('generics-using-b')
+      expect(elem.shadowRoot.childNodes[0].is).toStrictEqual('generics-using-a')
+      expect(elem.shadowRoot.childNodes[0].$$.tagName).toStrictEqual('A-A')
+      expect(elem.shadowRoot.childNodes[0].propA).toStrictEqual('')
+      expect(elem.shadowRoot.childNodes[0].shadowRoot.childNodes[0].is).toStrictEqual('span')
+      expect(elem.shadowRoot.childNodes[1].is).toStrictEqual('generics-using-a')
+      expect(elem.shadowRoot.childNodes[1].$$.tagName).toStrictEqual('A-B')
+      expect(elem.shadowRoot.childNodes[1].propA).toStrictEqual('')
+      var child1 = elem.shadowRoot.createComponent('a-a')
+      var child2 = elem.shadowRoot.createComponent('a-b')
+      expect(child1.is).toStrictEqual('generics-using-a')
+      expect(child1.$$.tagName).toStrictEqual('A-A')
+      expect(child2.is).toStrictEqual('generics-using-a')
+      expect(child2.$$.tagName).toStrictEqual('A-B')
+    })
+
+  })
+
+  describe('Component generics', function(){
+
+    it('should be able to declare generics', function(){
+      regElem({
+        is: 'generics-declare-inner',
+        generics: {
+          'g-a': '',
+          'g-b': {
+            default: 'generics-common'
+          },
+        },
+        template: '<g-a></g-a><g-b></g-b>'
+      })
+      regElem({
+        is: 'generics-declare-outer',
+        using: {
+          'g-common': 'generics-common'
+        },
+        template: '<generics-declare-inner generic:g-a="generics-common" />'
+      })
+      var elem = createElem('generics-declare-outer')
+      expect(elem.is).toStrictEqual('generics-declare-outer')
+      expect(elem.shadowRoot.childNodes[0].is).toStrictEqual('generics-declare-inner')
+      expect(elem.shadowRoot.childNodes[0].$$.tagName).toStrictEqual('GENERICS-DECLARE-INNER')
+      expect(elem.shadowRoot.childNodes[0].shadowRoot.childNodes[0].is).toStrictEqual('generics-common')
+      expect(elem.shadowRoot.childNodes[0].shadowRoot.childNodes[0].$$.tagName).toStrictEqual('G-A')
+      expect(elem.shadowRoot.childNodes[0].shadowRoot.childNodes[1].is).toStrictEqual('generics-common')
+      expect(elem.shadowRoot.childNodes[0].shadowRoot.childNodes[1].$$.tagName).toStrictEqual('G-B')
+    })
+
+    it('should be able to pass generics', function(){
+      regElem({
+        is: 'generics-passing-a',
+        generics: {
+          'g-a': ''
+        },
+        template: '<g-a id="x"></g-a>'
+      })
+      regElem({
+        is: 'generics-passing-b',
+        generics: {
+          'g-b': ''
+        },
+        using: {
+          'c-a': 'generics-passing-a'
+        },
+        template: '<c-a generic:g-a="g-b" id="x" />'
+      })
+      regElem({
+        is: 'generics-passing-c',
+        using: {
+          'c-common': 'generics-common',
+          'c-b': 'generics-passing-b'
+        },
+        template: '<c-b generic:g-b="c-common" id="x" />'
+      })
+      var elem = createElem('generics-passing-c')
+      expect(elem.is).toStrictEqual('generics-passing-c')
+      expect(elem.$.x.is).toStrictEqual('generics-passing-b')
+      expect(elem.$.x.$.x.is).toStrictEqual('generics-passing-a')
+      expect(elem.$.x.$.x.$.x.is).toStrictEqual('generics-common')
+      expect(elem.$.x.$.x.$.x.$$.tagName).toStrictEqual('G-A')
+    })
+
+    it('should be able to pass a cross domain component', function(){
+      regElem({
+        is: 'generics-cross-domain-inner',
+        options: {
+          domain: 'XXX'
+        },
+        generics: {
+          'g-a': ''
+        },
+        template: '<g-a></g-a>'
+      })
+      regElem({
+        is: 'generics-cross-domain-outer',
+        using: {
+          'x-domain': 'generics-cross-domain-inner'
+        },
+        template: '<x-domain generic:g-a="generics-common-cross-domain" /> <x-domain generic:g-a="generics-common" />'
+      })
+      var elem = createElem('generics-cross-domain-outer')
+      expect(elem.is).toStrictEqual('generics-cross-domain-outer')
+      expect(elem.shadowRoot.childNodes[0].is).toStrictEqual('generics-cross-domain-inner')
+      expect(elem.shadowRoot.childNodes[0].$$.tagName).toStrictEqual('X-DOMAIN')
+      expect(elem.shadowRoot.childNodes[0].shadowRoot.childNodes[0].is).toStrictEqual('generics-common-cross-domain')
+      expect(elem.shadowRoot.childNodes[0].shadowRoot.childNodes[0].$$.tagName).toStrictEqual('G-A')
+      expect(elem.shadowRoot.childNodes[1].is).toStrictEqual('generics-cross-domain-inner')
+      expect(elem.shadowRoot.childNodes[1].$$.tagName).toStrictEqual('X-DOMAIN')
+      expect(elem.shadowRoot.childNodes[1].shadowRoot.childNodes[0].is).toStrictEqual('generics-common')
+      expect(elem.shadowRoot.childNodes[1].shadowRoot.childNodes[0].$$.tagName).toStrictEqual('G-A')
+    })
+
+  })
+
+})

package/tests/legacy/mutation_observer.test.js

@@ -0,0 +1,210 @@
+/* eslint-disable */
+
+const { tmpl, domBackend } = require('../base/env')
+const glassEasel = require('../../src')
+
+const componentSpace = new glassEasel.ComponentSpace()
+componentSpace.updateComponentOptions({
+  writeFieldsToNode: true,
+})
+componentSpace.defineComponent({
+  is: '',
+})
+
+const regElem = (config) => {
+  const { template, ...c } = config
+  if (template) c.template = tmpl(template)
+  return componentSpace.defineComponent(c)
+}
+
+const createElem = (is, backend) => {
+  const def = componentSpace.getComponent(is)
+  return glassEasel.Component.createWithContext(is || 'test', def, backend || domBackend)
+}
+
+describe('Observer', function(){
+  var root = null
+
+  beforeAll(function(){
+    regElem({
+      is: 'observer-a',
+      template: '<slot></slot>',
+      properties: {
+        a: {
+          type: String,
+          public: true
+        },
+        b: {
+          type: Number,
+          public: true
+        }
+      }
+    })
+  })
+
+  it('should create an observer', function(){
+    var elem = createElem('observer-a')
+    var observer = glassEasel.Observer.create(function(){
+      throw(new Error())
+    })
+    expect(observer).toBeInstanceOf(glassEasel.MutationObserver)
+    observer.observe(elem)
+    elem.a = 'TEST'
+    elem.appendChild(createElem('observer-a'))
+  })
+
+  it('should be able to observe different types of changes', function(){
+    var parent = createElem('observer-a')
+    var elem = parent.shadowRoot.createComponent('observer-a')
+    var child = parent.shadowRoot.createTextNode('text')
+    var eventsLeft = 4
+    var cb = function(e){
+      expect(this).toBe(elem)
+      if(eventsLeft === 4) {
+        expect(e.type).toBe('properties')
+        expect(e.target).toBe(elem)
+        expect(e.propertyName).toBe('a')
+      } else if(eventsLeft === 3) {
+        expect(e.type).toBe('childList')
+        expect(e.target).toBe(elem)
+        expect(e.addedNodes[0]).toBe(child)
+      } else if(eventsLeft === 1) {
+        expect(e.type).toBe('childList')
+        expect(e.target).toBe(elem)
+        expect(e.removedNodes[0]).toBe(child)
+      } else if(eventsLeft === 2) {
+        expect(e.type).toBe('characterData')
+        expect(e.target).toBe(child)
+      }
+      eventsLeft--
+    }
+    elem.b = 1
+    elem.appendChild(child)
+    elem.removeChild(child)
+    var observer = glassEasel.MutationObserver.create(cb)
+    observer.observe(elem, {properties: true, childList: true})
+    child.textContent = 'old'
+    var observer2 = glassEasel.MutationObserver.create(cb)
+    observer2.observe(elem, {characterData: true, subtree: true})
+    elem.a = 'a'
+    elem.appendChild(child)
+    child.textContent = 'new'
+    elem.removeChild(child)
+    expect(eventsLeft).toBe(0)
+  })
+
+  it('should be able to observe core property changes', function(){
+    var elem = createElem('observer-a')
+    var expectPropertyNameList = ['id', 'slot', 'class', 'class', 'class', 'class', 'style']
+    var observer = glassEasel.MutationObserver.create(function(e){
+      expect(this).toBe(e.target)
+      expect(e.type).toBe('properties')
+      expect(e.target).toBe(elem)
+      expect(e.attributeName).toBe(expectPropertyNameList.shift())
+    })
+    observer.observe(elem, {properties: true})
+    elem.id = 'a'
+    elem.slot = 'b'
+    elem.class = 'c'
+    elem.classList.toggle('c')
+    elem.classList.toggle('c')
+    elem.classList.toggle('c', true)
+    elem.classList.toggle('d', false)
+    elem.classList.toggle('d', true)
+    elem.style = 'd'
+    expect(expectPropertyNameList.length).toBe(0)
+  })
+
+  it('should be able to disconnect', function(){
+    var elem = createElem('observer-a')
+    var eventsLeft = 1
+    var observer = glassEasel.MutationObserver.create(function(){
+      eventsLeft--
+    })
+    elem.a = 1
+    observer.observe(elem, {properties: true})
+    elem.a = 2
+    observer.disconnect()
+    elem.a = 3
+    expect(eventsLeft).toBe(0)
+  })
+
+  it('should allow subtree observers', function(){
+    var parent = createElem('observer-a')
+    var elem1 = parent.shadowRoot.createComponent('observer-a')
+    var elem2 = parent.shadowRoot.createComponent('observer-a')
+    var elem3 = parent.shadowRoot.createComponent('observer-a')
+    var elem4 = parent.shadowRoot.createTextNode('')
+    var eventsLeft = 4
+    var observer = glassEasel.MutationObserver.create(function(e){
+      expect(this).toBe(elem1)
+      if(eventsLeft === 2) {
+        expect(e.type).toBe('characterData')
+        expect(e.target).toBeInstanceOf(glassEasel.TextNode)
+        expect(e.target.textContent).toBe('3')
+      } else {
+        expect(e.type).toBe('properties')
+        expect(e.target).toBeInstanceOf(glassEasel.Element)
+        expect(e.propertyName).toBe('a')
+        expect(e.target.a <= 4).toBe(true)
+      }
+      eventsLeft--
+    })
+    expect(glassEasel.Element.hasSubtreeMutationObservers(elem1)).toBe(false)
+    observer.observe(elem1, {properties: true, characterData: true, subtree: true})
+    elem1.a = 1
+    elem1.appendChild(elem2)
+    elem3.appendChild(elem4)
+    elem1.insertBefore(elem3, elem2)
+    elem2.a = 2
+    elem2.appendChild(elem3)
+    elem4.textContent = 3
+    expect(glassEasel.Element.hasSubtreeMutationObservers(elem1)).toBe(true)
+    expect(glassEasel.Element.hasSubtreeMutationObservers(elem2)).toBe(true)
+    expect(glassEasel.Element.hasSubtreeMutationObservers(elem3)).toBe(true)
+    elem1.replaceChild(elem3, elem2)
+    expect(glassEasel.Element.hasSubtreeMutationObservers(elem2)).toBe(false)
+    expect(glassEasel.Element.hasSubtreeMutationObservers(elem3)).toBe(true)
+    elem1.removeChild(elem3)
+    expect(glassEasel.Element.hasSubtreeMutationObservers(elem3)).toBe(false)
+    elem1.a = 4
+    elem2.a = 5
+    elem3.a = 6
+    expect(eventsLeft).toBe(0)
+  })
+
+  it('should allow attach status observers', function(){
+    var elem1 = createElem('observer-a')
+    var elem2 = createElem('observer-a')
+    var eventsLeft = 4
+    var observer1 = glassEasel.MutationObserver.create(function(e){
+      expect(this).toBe(elem1)
+      expect(e.type).toBe('attachStatus')
+      expect(e.target).toBe(elem1)
+      if(eventsLeft > 2) {
+        expect(e.status).toBe('attached')
+      } else {
+        expect(e.status).toBe('detached')
+      }
+      eventsLeft--
+    })
+    var observer2 = glassEasel.MutationObserver.create(function(e){
+      expect(this).toBe(elem2)
+      expect(e.type).toBe('attachStatus')
+      expect(e.target).toBe(elem2)
+      if(eventsLeft > 2) {
+        expect(e.status).toBe('attached')
+      } else {
+        expect(e.status).toBe('detached')
+      }
+      eventsLeft--
+    })
+    observer1.observe(elem1, {attachStatus: true, subtree: true})
+    observer2.observe(elem2, {attachStatus: true})
+    elem1.appendChild(elem2)
+    glassEasel.Element.pretendAttached(elem1)
+    glassEasel.Element.pretendDetached(elem1)
+    expect(eventsLeft).toBe(0)
+  })
+
+})