spyne 0.24.0 → 0.26.0

package/src/tests/utils/safe-clone.test.js

@@ -0,0 +1,193 @@
+import { safeClone, safeCloneDeep, safeAugment, safeFilter, safeMap, safeReject } from '../../spyne/utils/safe-clone'
+import { SpyneAppProperties } from '../../spyne/utils/spyne-app-properties'
+import { ChannelPayload } from '../../spyne/channels/channel-payload-class'
+
+const PROXY_NAME = 'safeCloneTestProxy'
+
+// stub reviver: wraps the cloned target in a Proxy that answers a marker key
+const stubReviver = (target, proxyProps) => new Proxy(target, {
+  get(t, key) {
+    if (key === '__test__revived') {
+      return true
+    }
+    return t[key]
+  }
+})
+
+const makeProxyMarkedObj = (extraProps = {}) => ({
+  __proxy__proxyName: PROXY_NAME,
+  __proxy__isProxy: true,
+  __proxy__props: {},
+  headline: 'A Test Headline',
+  ...extraProps
+})
+
+describe('safeClone proxy revival', () => {
+  before(() => {
+    SpyneAppProperties.registerProxyReviver(PROXY_NAME, stubReviver)
+  })
+
+  describe('safeClone (existing behavior)', () => {
+    it('revives a root-level proxy object', () => {
+      const revived = safeClone(makeProxyMarkedObj())
+      expect(revived.__test__revived).to.be.true
+      expect(revived.headline).to.equal('A Test Headline')
+    })
+
+    it('deep-copies a plain object without mutating the source', () => {
+      const src = { a: { b: 1 } }
+      const copy = safeClone(src)
+      copy.a.b = 2
+      expect(src.a.b).to.equal(1)
+    })
+  })
+
+  describe('safeCloneDeep', () => {
+    it('revives a root-level proxy object', () => {
+      const revived = safeCloneDeep(makeProxyMarkedObj())
+      expect(revived.__test__revived).to.be.true
+    })
+
+    it('revives a proxy nested inside a plain wrapper', () => {
+      const wrapper = { pageData: { story: makeProxyMarkedObj() } }
+      const copy = safeCloneDeep(wrapper)
+      expect(copy.pageData.story.__test__revived).to.be.true
+      expect(copy.pageData.story.headline).to.equal('A Test Headline')
+    })
+
+    it('revives proxies inside arrays', () => {
+      const arr = [makeProxyMarkedObj(), { plain: true }]
+      const copy = safeCloneDeep(arr)
+      expect(copy[0].__test__revived).to.be.true
+      expect(copy[1].plain).to.be.true
+      expect(copy).to.not.equal(arr)
+    })
+
+    it('passes functions through by reference', () => {
+      const fn = () => 'curried'
+      const copy = safeCloneDeep({ curriedData: fn })
+      expect(copy.curriedData).to.equal(fn)
+    })
+
+    it('does not infinitely recurse on cycles', () => {
+      const obj = { name: 'cyclical' }
+      obj.self = obj
+      const copy = safeCloneDeep(obj)
+      expect(copy.name).to.equal('cyclical')
+    })
+
+    it('returns primitives as-is', () => {
+      expect(safeCloneDeep('str')).to.equal('str')
+      expect(safeCloneDeep(5)).to.equal(5)
+      expect(safeCloneDeep(null)).to.equal(null)
+    })
+
+    it('is reachable through safeClone(o, true)', () => {
+      const wrapper = { story: makeProxyMarkedObj() }
+      const copy = safeClone(wrapper, true)
+      expect(copy.story.__test__revived).to.be.true
+    })
+  })
+
+  describe('safeFilter / safeReject / safeMap', () => {
+    const makeProxyMarkedArr = () => {
+      const arr = [
+        { menu_label: 'a', headline: 'A' },
+        { menu_label: 'b', headline: 'B' },
+        { menu_label: 'c', headline: 'C' }
+      ]
+      arr.__proxy__proxyName = PROXY_NAME
+      arr.__proxy__isProxy = true
+      arr.__proxy__props = {}
+      return arr
+    }
+
+    it('safeFilter keeps element identity and re-wraps the array', () => {
+      const src = makeProxyMarkedArr()
+      const result = safeFilter(src, (o) => o.menu_label !== 'b')
+      expect(result.length).to.equal(2)
+      expect(result[0]).to.equal(src[0])          // element reference preserved
+      expect(result.__test__revived).to.be.true   // array-level identity re-wrapped
+    })
+
+    it('safeReject is the inverse of safeFilter', () => {
+      const src = makeProxyMarkedArr()
+      const result = safeReject(src, (o) => o.menu_label === 'b')
+      expect(result.length).to.equal(2)
+      expect(result.map(o => o.menu_label).join('')).to.equal('ac')
+      expect(result.__test__revived).to.be.true
+    })
+
+    it('safeMap gives callbacks writable copies of proxied elements', () => {
+      const src = [makeProxyMarkedObj()]
+      const result = safeMap(src, (el) => {
+        el.type = 'story'
+        return el
+      })
+      expect(result[0].type).to.equal('story')
+      expect(result[0].__test__revived).to.be.true  // revived copy
+      expect(src[0].type).to.equal(undefined)       // source untouched
+    })
+
+    it('safeMap passes plain elements by reference like native map', () => {
+      const plainEl = { plain: true }
+      const result = safeMap([plainEl], (el) => el)
+      expect(result[0]).to.equal(plainEl)
+    })
+
+    it('all three degrade to native behavior on plain arrays', () => {
+      const plain = [1, 2, 3]
+      expect(safeFilter(plain, n => n > 1)).to.deep.equal([2, 3])
+      expect(safeReject(plain, n => n > 1)).to.deep.equal([1])
+      expect(safeMap(plain, n => n * 2)).to.deep.equal([2, 4, 6])
+    })
+  })
+
+  describe('read-only payload facades (deepFreeze)', () => {
+    it('wraps proxy subtrees in a write-blocking facade instead of freezing', () => {
+      const proxyChild = makeProxyMarkedObj()
+      const payload = { plainKey: 1, story: proxyChild }
+      const frozen = ChannelPayload.deepFreeze(payload)
+
+      expect(Object.isFrozen(frozen)).to.be.true          // plain shell frozen
+      expect(frozen.story).to.not.equal(proxyChild)        // facade, not raw ref
+      expect(frozen.story.headline).to.equal('A Test Headline') // reads pass through
+
+      frozen.story.headline = 'MUTATED'                    // write silently blocked
+      expect(proxyChild.headline).to.equal('A Test Headline')
+      expect(frozen.story.headline).to.equal('A Test Headline')
+    })
+
+    it('reuses one facade per proxy across dispatches', () => {
+      const proxyChild = makeProxyMarkedObj()
+      const a = ChannelPayload.deepFreeze({ story: proxyChild })
+      const b = ChannelPayload.deepFreeze({ story: proxyChild })
+      expect(a.story).to.equal(b.story)
+    })
+
+    it('facade data still revives to a writable copy via safeCloneDeep', () => {
+      const payload = ChannelPayload.deepFreeze({ story: makeProxyMarkedObj() })
+      const writable = safeCloneDeep(payload)
+      writable.story.type = 'story'
+      expect(writable.story.type).to.equal('story')
+      expect(writable.story.__test__revived).to.be.true
+    })
+  })
+
+  describe('safeAugment', () => {
+    it('returns a writable revived copy carrying the extra props', () => {
+      const augmented = safeAugment(makeProxyMarkedObj(), { type: 'story', launchCode: 'hp3' })
+      expect(augmented.__test__revived).to.be.true
+      expect(augmented.type).to.equal('story')
+      expect(augmented.launchCode).to.equal('hp3')
+      expect(augmented.headline).to.equal('A Test Headline')
+    })
+
+    it('augments plain objects without mutating the source', () => {
+      const src = { a: 1 }
+      const augmented = safeAugment(src, { b: 2 })
+      expect(augmented.b).to.equal(2)
+      expect(src.b).to.equal(undefined)
+    })
+  })
+})

package/src/tests/utils/security.test.js

@@ -1,6 +1,6 @@
 const { expect } = require('chai')
 import { SpyneApp, SpyneAppProperties } from '../../spyne/spyne'
-import sanitizeData, { sanitizeAttribute } from '../../spyne/utils/sanitize-data'
+import sanitizeData, { sanitizeAttribute, allowCustomElements } from '../../spyne/utils/sanitize-data'
 import sanitizeHTML from '../../spyne/utils/sanitize-html'
 import { DomElement } from '../../spyne/views/dom-element'
 import { DomElementTemplate } from '../../spyne/views/dom-element-template'
@@ -268,6 +268,158 @@ describe('sanitization security', () => {
     })
   })
 
+  describe('anchor policy', () => {
+    it('should keep target in app mode and force noopener on _blank', () => {
+      const clean = sanitizeData('<a href="https://example.com" target="_blank">x</a>', { mode: 'app' })
+
+      expect(clean).to.include('target="_blank"')
+      expect(clean).to.include('noopener')
+      expect(clean).to.include('noreferrer')
+    })
+
+    it('should preserve existing rel values when forcing noopener', () => {
+      const clean = sanitizeData('<a href="https://example.com" target="_blank" rel="external">x</a>', { mode: 'richtext' })
+
+      expect(clean).to.include('external')
+      expect(clean).to.include('noopener')
+    })
+
+    it('should keep named-window targets and force noopener on them', () => {
+      // target="blank" (no underscore) is a legal named browsing context
+      // and the most common real-world form; it carries the same opener
+      // risk as _blank and gets the same mitigation.
+      const clean = sanitizeData('<a href="https://rxjs.dev/api/index/function/fromEvent" target="blank">fromEvent</a>', { mode: 'app' })
+
+      expect(clean).to.include('target="blank"')
+      expect(clean).to.include('noopener')
+      expect(clean).to.include('noreferrer')
+    })
+
+    it('should not add noopener to same-context targets', () => {
+      const clean = sanitizeData('<a href="https://example.com" target="_self">x</a>', { mode: 'app' })
+
+      expect(clean).to.include('target="_self"')
+      expect(clean).to.not.include('noopener')
+    })
+
+    it('should remove target from anchors without an href', () => {
+      const clean = sanitizeData('<a target="_blank">x</a>', { mode: 'app' })
+
+      expect(clean).to.not.include('target=')
+    })
+
+    it('should strip target everywhere with allowTarget false', () => {
+      const clean = sanitizeData('<a href="https://example.com" target="_blank">x</a>', {
+        mode: 'richtext',
+        anchors: { allowTarget: false }
+      })
+
+      expect(clean).to.not.include('target=')
+    })
+
+    it('should enforce allowedDomains on cross-origin hrefs', () => {
+      const opts = { mode: 'app', anchors: { allowedDomains: ['https://github.com'] } }
+
+      const allowed = sanitizeData('<a href="https://github.com/spynejs">x</a>', opts)
+      const blocked = sanitizeData('<a href="https://evil.example.com/page">x</a>', opts)
+
+      expect(allowed).to.include('href="https://github.com/spynejs"')
+      expect(blocked).to.not.include('href=')
+    })
+
+    it('should always allow same-origin, relative, mailto and tel hrefs despite allowedDomains', () => {
+      const opts = { mode: 'app', anchors: { allowedDomains: ['https://github.com'] } }
+
+      expect(sanitizeData('<a href="/local/page">x</a>', opts)).to.include('href="/local/page"')
+      expect(sanitizeData('<a href="mailto:a@b.com">x</a>', opts)).to.include('href="mailto:a@b.com"')
+      expect(sanitizeData('<a href="tel:+15551234567">x</a>', opts)).to.include('href="tel:+15551234567"')
+    })
+
+    it('should apply the anchor policy on the DomElement attribute channel', () => {
+      const el = new DomElement({
+        tagName: 'a',
+        attributes: { href: 'https://example.com', target: '_blank' }
+      }).render()
+
+      expect(el.getAttribute('target')).to.equal('_blank')
+      expect(el.getAttribute('rel')).to.include('noopener')
+    })
+
+    it('should keep named-window targets with noopener on the DomElement attribute channel', () => {
+      const el = new DomElement({
+        tagName: 'a',
+        attributes: { href: 'https://example.com', target: 'blank' }
+      }).render()
+
+      expect(el.getAttribute('target')).to.equal('blank')
+      expect(el.getAttribute('rel')).to.include('noopener')
+    })
+  })
+
+  describe('CMS wrappers and custom elements', () => {
+    const cmsMarkup = '<spyne-cms-item data-cms-id="post.title" data-cms-key="title">' +
+      '<spyne-cms-item-hitbox></spyne-cms-item-hitbox>' +
+      '<spyne-cms-item-text>Hello</spyne-cms-item-text>' +
+      '</spyne-cms-item>'
+
+    it('should keep spyne-* CMS wrappers and data-cms attributes in app mode', () => {
+      const clean = sanitizeData(cmsMarkup, { mode: 'app' })
+
+      expect(clean).to.include('<spyne-cms-item')
+      expect(clean).to.include('data-cms-key="title"')
+      expect(clean).to.include('<spyne-cms-item-hitbox')
+      expect(clean).to.include('<spyne-cms-item-text>Hello</spyne-cms-item-text>')
+    })
+
+    it('should keep spyne-* CMS wrappers in richtext mode', () => {
+      const clean = sanitizeData(cmsMarkup, { mode: 'richtext' })
+
+      expect(clean).to.include('<spyne-cms-item')
+      expect(clean).to.include('data-cms-id="post.title"')
+    })
+
+    it('should keep spyne-* CMS wrappers at the template layer', () => {
+      const clean = String(sanitizeHTML(cmsMarkup))
+
+      expect(clean).to.include('<spyne-cms-item')
+      expect(clean).to.include('<spyne-cms-item-text>Hello</spyne-cms-item-text>')
+    })
+
+    it('should still sanitize content inside CMS wrappers', () => {
+      const dirty = '<spyne-cms-item data-cms-key="body">' +
+        '<spyne-cms-item-text><script>bad()</script><b>ok</b></spyne-cms-item-text>' +
+        '</spyne-cms-item>'
+      const clean = sanitizeData(dirty, { mode: 'app' })
+
+      expect(clean).to.include('<spyne-cms-item')
+      expect(clean).to.not.include('<script')
+      expect(clean).to.include('<b>ok</b>')
+    })
+
+    it('should not allow event-handler attributes on CMS wrappers', () => {
+      const dirty = '<spyne-cms-item onclick="evil()" data-cms-key="x">y</spyne-cms-item>'
+      const clean = sanitizeData(dirty, { mode: 'app' })
+
+      expect(clean).to.include('<spyne-cms-item')
+      expect(clean).to.not.include('onclick')
+    })
+
+    it('should admit elements registered via allowCustomElements', () => {
+      allowCustomElements(['my-widget'])
+      const clean = sanitizeData('<my-widget data-config="a">w</my-widget>', { mode: 'app' })
+
+      expect(clean).to.include('<my-widget')
+      expect(clean).to.include('data-config="a"')
+    })
+
+    it('should reject invalid custom element names', () => {
+      allowCustomElements(['script', 'iframe', 'div'])
+      const clean = sanitizeData('<script>bad()</script>', { mode: 'app' })
+
+      expect(clean).to.not.include('<script')
+    })
+  })
+
   describe('DomElementTemplate output', () => {
     it('should sanitize renderToString output', () => {
       const tmpl = new DomElementTemplate('<b>{{word}}</b><script>bad()</script>', { word: 'hello' })

package/src/tests/views/dom-el-selectors.test.js

@@ -41,14 +41,14 @@ describe('Dom Item Selector', () => {
     const el = document.querySelector('ul#my-list')
     const el$ =   ViewStreamSelector('ul#my-list')
     const liList = el$('li')
-    expect(liList.el.length).to.eq(5)
+    expect(liList.els.length).to.eq(5)
   })
   it('should add class to li', () => {
     const el = document.querySelector('ul#my-list')
     const el$ =   ViewStreamSelector('ul#my-list')
     const liList = el$('li')
     liList.addClass('foo')
-    const hasFooClassBool = liList.el[0].classList.contains('foo')
+    const hasFooClassBool = liList.els[0].classList.contains('foo')
     expect(hasFooClassBool).to.eq(true)
   })
 
@@ -57,7 +57,7 @@ describe('Dom Item Selector', () => {
     const el$ =   ViewStreamSelector('ul#my-list')
     const liList = el$('li')
     liList.removeClass('has-svg')
-    const hasSvgClassBool = liList.el[0].classList.contains('has-svg')
+    const hasSvgClassBool = liList.els[0].classList.contains('has-svg')
     expect(hasSvgClassBool).to.eq(false)
   })
 
@@ -66,8 +66,8 @@ describe('Dom Item Selector', () => {
     const el$ =   ViewStreamSelector('ul#my-list')
     const liList = el$('li')
     liList.setClass('foo bar')
-    // console.log('liList ',liList.el[0].className)
-    const isFooBarClassBool = liList.el[0].className === 'foo bar'
+    // console.log('liList ',liList.els[0].className)
+    const isFooBarClassBool = liList.els[0].className === 'foo bar'
     expect(isFooBarClassBool).to.eq(true)
   })
 
@@ -76,7 +76,7 @@ describe('Dom Item Selector', () => {
     const el$ =   ViewStreamSelector('ul#my-list')
     const liList = el$('li')
     liList.inlineCss = 'background:orange;'
-    const backgroundSetBool = liList.el[0].style.getPropertyValue('background') === 'orange'
+    const backgroundSetBool = liList.els[0].style.getPropertyValue('background') === 'orange'
     expect(backgroundSetBool).to.eq(true)
   })
 
@@ -85,7 +85,7 @@ describe('Dom Item Selector', () => {
     const el$ =   ViewStreamSelector('ul#my-list')
     const liList = el$('li')
     liList.toggleClass('foo', true)
-    const hasFooClassBool = liList.el[0].classList.contains('foo')
+    const hasFooClassBool = liList.els[0].classList.contains('foo')
     expect(hasFooClassBool).to.eq(true)
   })
 

package/src/tests/views/view-stream-selector.test.js

@@ -0,0 +1,178 @@
+const { expect } = require('chai')
+import { ViewStreamSelector } from '../../spyne/views/view-stream-selector'
+
+describe('ViewStreamSelector', () => {
+  let container
+
+  const el$ = (sel) => ViewStreamSelector(container, sel)
+
+  beforeEach(() => {
+    container = document.createElement('div')
+    container.innerHTML =
+      '<ul>' +
+      '<li class="item">A</li>' +
+      '<li class="item">A</li>' +
+      '<li class="item special">C</li>' +
+      '</ul>' +
+      '<p class="solo">only</p>'
+    document.body.appendChild(container)
+  })
+
+  afterEach(() => {
+    container.remove()
+  })
+
+  describe('el (always a single element)', () => {
+    it('should return the element for a single match', () => {
+      const el = el$('.solo').el
+      expect(el.nodeType).to.equal(1)
+      expect(el.textContent).to.equal('only')
+    })
+
+    it('should return the first element for multiple matches', () => {
+      const el = el$('.item').el
+      expect(el.nodeType).to.equal(1)
+      expect(el.textContent).to.equal('A')
+    })
+
+    it('should return null for no matches, mirroring querySelector', () => {
+      expect(el$('.nope').el).to.equal(null)
+    })
+
+    it('should support direct element methods on multi-match selectors', () => {
+      el$('.item').el.setAttribute('data-first', 'true')
+      const items = container.querySelectorAll('.item')
+      expect(items[0].dataset.first).to.equal('true')
+      expect(items[1].dataset.first).to.be.undefined
+    })
+  })
+
+  describe('els (always an Array)', () => {
+    it('should return an Array for multiple matches', () => {
+      const els = el$('.item').els
+      expect(Array.isArray(els)).to.be.true
+      expect(els).to.have.length(3)
+    })
+
+    it('should return a single-item Array for one match', () => {
+      const els = el$('.solo').els
+      expect(Array.isArray(els)).to.be.true
+      expect(els).to.have.length(1)
+    })
+
+    it('should return an empty Array for no matches', () => {
+      const els = el$('.nope').els
+      expect(Array.isArray(els)).to.be.true
+      expect(els).to.have.length(0)
+    })
+
+    it('should support Array methods directly', () => {
+      const texts = el$('.item').els.map(el => el.textContent)
+      expect(texts).to.deep.equal(['A', 'A', 'C'])
+    })
+
+    it('should keep arr as an equivalent legacy alias', () => {
+      expect(el$('.item').arr).to.deep.equal(el$('.item').els)
+      expect(Array.isArray(el$('.item').arr)).to.be.true
+    })
+  })
+
+  describe('length and len', () => {
+    it('should return the match count from length', () => {
+      expect(el$('.item').length).to.equal(3)
+      expect(el$('.solo').length).to.equal(1)
+      expect(el$('.nope').length).to.equal(0)
+    })
+
+    it('should keep len in agreement with length', () => {
+      expect(el$('.item').len).to.equal(el$('.item').length)
+    })
+  })
+
+  describe('chainability', () => {
+    it('should chain class mutators', () => {
+      el$('.item').addClass('x').toggleClass('y', true).removeClass('x')
+
+      const item = container.querySelector('.item')
+      expect(item.classList.contains('y')).to.be.true
+      expect(item.classList.contains('x')).to.be.false
+    })
+
+    it('should return the selector from mutators', () => {
+      const s = el$('.item')
+      expect(s.addClass('z')).to.equal(s)
+      expect(s.toggleClass('z')).to.equal(s)
+      expect(s.setClass('q')).to.equal(s)
+      expect(s.setActiveItem('active', '.special')).to.equal(s)
+    })
+  })
+
+  describe('appendChild', () => {
+    it('should append to the first element on a multi-match selector', () => {
+      const span = document.createElement('span')
+      span.className = 'appended'
+
+      el$('.item').appendChild(span)
+
+      const items = container.querySelectorAll('.item')
+      expect(items[0].querySelector('.appended')).to.not.be.null
+      expect(items[1].querySelector('.appended')).to.be.null
+    })
+
+    it('should warn and not throw on a non-matching selector', () => {
+      expect(() => el$('.nope').appendChild(document.createElement('b'))).to.not.throw()
+    })
+  })
+
+  describe('setActiveItem', () => {
+    it('should activate only the exact matching node', () => {
+      el$('.item').setActiveItem('active', '.special')
+
+      const items = container.querySelectorAll('.item')
+      expect(items[0].classList.contains('active')).to.be.false
+      expect(items[1].classList.contains('active')).to.be.false
+      expect(items[2].classList.contains('active')).to.be.true
+    })
+
+    it('should use identity, not deep equality, for duplicate siblings', () => {
+      const items = container.querySelectorAll('.item')
+
+      // items[0] and items[1] are identical markup; only the exact node activates
+      el$('.item').setActiveItem('active', items[1])
+
+      expect(items[0].classList.contains('active')).to.be.false
+      expect(items[1].classList.contains('active')).to.be.true
+    })
+  })
+
+  describe('elLegacy (undocumented pre-0.24 el contract)', () => {
+    it('should return a single element for a single match', () => {
+      expect(el$('.solo').elLegacy.nodeType).to.equal(1)
+    })
+
+    it('should return a NodeList for multiple matches', () => {
+      const el = el$('.item').elLegacy
+      expect(el.length).to.equal(3)
+      expect(el.nodeType).to.be.undefined
+    })
+
+    it('should return an empty list for no matches', () => {
+      expect(el$('.nope').elLegacy.length).to.equal(0)
+    })
+  })
+
+  describe('removed legacy members', () => {
+    it('should no longer define setActiveItem2, element, exist, nodeList, or getNodeListArray', () => {
+      const s = el$('.item')
+      expect(s.setActiveItem2).to.be.undefined
+      expect(s.element).to.be.undefined
+      expect(s.exist).to.be.undefined
+      expect(s.nodeList).to.be.undefined
+      expect(s.getNodeListArray).to.be.undefined
+    })
+
+    it('should keep unmount as a callable no-op for legacy apps', () => {
+      expect(() => el$('.item').unmount()).to.not.throw()
+    })
+  })
+})