w-component-vue 2.5.21 → 2.5.23

package/test/unit-createVnodeEmitter.test.mjs

@@ -0,0 +1,146 @@
+import assert from 'assert'
+import createVnodeEmitter from '../src/js/createVnodeEmitter.mjs'
+
+
+//createVnodeEmitter之契約測試: 以Vue 2之vnode形狀建立監聽物件, 驗證觸發對象、優先序、更新、作廢與錯誤寫法之警告
+//  Vue之監聽器(invoker)為函數, 其fns為使用端之處理函式; 觸發器須呼叫invoker本身(由invoker依序呼叫陣列並交Vue錯誤處理), 不可直接呼叫fns
+
+
+//mkInvoker, 仿Vue之invoker: 呼叫時記錄'invoker', 其fns被直接呼叫時記錄'fns'
+function mkInvoker(rec, tag) {
+    let invoker = function(data) {
+        rec.push(`${tag}:invoker:${data}`)
+    }
+    invoker.fns = function(data) {
+        rec.push(`${tag}:fns:${data}`)
+    }
+    return invoker
+}
+
+
+//captureWarn, 收集console.warn
+function captureWarn(fn) {
+    let ws = []
+    let ow = console.warn
+    console.warn = (...args) => {
+        ws.push(args.join(' '))
+    }
+    try {
+        fn()
+    }
+    finally {
+        console.warn = ow
+    }
+    return ws
+}
+
+
+describe(`createVnodeEmitter`, function() {
+
+    it(`should call the invoker itself with the data, not its fns`, function() {
+        let rec = []
+        let vnode = { data: { on: { domresize: mkInvoker(rec, 'el') } } }
+        let em = createVnodeEmitter(vnode, 'domresize', 'domresize')
+        em.emit(1)
+        assert.strict.deepStrictEqual(rec, ['el:invoker:1'])
+    })
+
+    it(`should call the custom listener of a component tag, even when it also has an other-name .native listener`, function() {
+        //元件vnode之data.on為.native監聽(Vue將nativeOn移入data.on), 自訂事件在componentOptions.listeners; 舊寫法先取data.on致此情形自訂事件永不呼叫
+        let rec = []
+        let vnode = {
+            componentOptions: { listeners: { domresize: mkInvoker(rec, 'custom') } },
+            data: { on: { click: mkInvoker(rec, 'click') } },
+        }
+        let em = createVnodeEmitter(vnode, 'domresize', 'domresize')
+        em.emit(2)
+        assert.strict.deepStrictEqual(rec, ['custom:invoker:2'])
+    })
+
+    it(`should call only the custom listener when a component tag has both the custom and the same-name .native listener`, function() {
+        let rec = []
+        let vnode = {
+            componentOptions: { listeners: { domresize: mkInvoker(rec, 'custom') } },
+            data: { on: { domresize: mkInvoker(rec, 'native') } },
+        }
+        let em = createVnodeEmitter(vnode, 'domresize', 'domresize')
+        em.emit(3)
+        assert.strict.deepStrictEqual(rec, ['custom:invoker:3'])
+    })
+
+    it(`should call the .native listener of a component tag when it has no custom listener`, function() {
+        let rec = []
+        let vnode = {
+            componentOptions: { listeners: {} },
+            data: { on: { domresize: mkInvoker(rec, 'native') } },
+        }
+        let em = createVnodeEmitter(vnode, 'domresize', 'domresize')
+        em.emit(4)
+        assert.strict.deepStrictEqual(rec, ['native:invoker:4'])
+    })
+
+    it(`should not throw when there is no listener or the listener is not a function`, function() {
+        let em1 = createVnodeEmitter({ data: {} }, 'domresize', 'domresize', { warn: false })
+        let em2 = createVnodeEmitter({ data: { on: { domresize: { fns: () => {} } } } }, 'domresize', 'domresize', { warn: false })
+        let em3 = createVnodeEmitter(null, 'domresize', 'domresize', { warn: false })
+        assert.doesNotThrow(() => {
+            em1.emit(5)
+            em2.emit(5)
+            em3.emit(5)
+        })
+    })
+
+    it(`should use the listeners of the new vnode after update, so listeners added, removed or renamed after binding are followed`, function() {
+        let rec = []
+        let em = createVnodeEmitter({ data: { on: {} } }, 'domresize', 'domresize')
+        em.emit('a')
+        em.update({ data: { on: { domresize: mkInvoker(rec, 'added') } } })
+        em.emit('b')
+        em.update({ data: { on: {} } })
+        em.emit('c')
+        em.update({ componentOptions: { listeners: { domresize: mkInvoker(rec, 'custom') } }, data: {} })
+        em.emit('d')
+        assert.strict.deepStrictEqual(rec, ['added:invoker:b', 'custom:invoker:d'])
+    })
+
+    it(`should not call after dispose, and ignore update after dispose`, function() {
+        let rec = []
+        let em = createVnodeEmitter({ data: { on: { domresize: mkInvoker(rec, 'el') } } }, 'domresize', 'domresize')
+        em.dispose()
+        em.emit(6)
+        em.update({ data: { on: { domresize: mkInvoker(rec, 'new') } } })
+        em.emit(7)
+        assert.strict.deepStrictEqual(rec, [])
+    })
+
+    it(`should warn once for each misbinding at binding`, function() {
+        let cases = [
+            [{ data: { on: { '~domresize': () => {} } } }, '不支援.once、.capture、.passive修飾字'],
+            [{ data: { on: { '!domresize': () => {} } } }, '不支援.once、.capture、.passive修飾字'],
+            [{ data: { on: { '&domresize': () => {} } } }, '不支援.once、.capture、.passive修飾字'],
+            [{ componentOptions: { listeners: { '~domresize': () => {} } }, data: {} }, '不支援.once、.capture、.passive修飾字'],
+            [{ data: { on: { domResize: () => {} } } }, '事件名須為@domresize, 目前為@domResize'],
+            [{ data: { on: { 'dom-resize': () => {} } } }, '事件名須為@domresize, 目前為@dom-resize'],
+            [{ data: { attrs: { domresize: 'h' } } }, 'domresize="h"為靜態屬性, 應為@domresize'],
+            [{ data: { nativeOn: { domresize: () => {} } } }, '元素上之@domresize.native無效, 應為@domresize'],
+        ]
+        for (let [vnode, msg] of cases) {
+            let ws = captureWarn(() => {
+                createVnodeEmitter(vnode, 'domresize', 'domresize')
+            })
+            assert.strict.deepStrictEqual(ws.length, 1, JSON.stringify(Object.keys(vnode.data)))
+            assert.ok(ws[0].startsWith('[v-domresize] '), ws[0])
+            assert.ok(ws[0].includes(msg), ws[0])
+        }
+    })
+
+    it(`should not warn for correct bindings, for .native on a component tag, or when opt.warn is false`, function() {
+        let ws = captureWarn(() => {
+            createVnodeEmitter({ data: { on: { domresize: () => {}, click: () => {} } } }, 'domresize', 'domresize')
+            createVnodeEmitter({ componentOptions: { listeners: { domresize: () => {} } }, data: { on: { domresize: () => {} }, nativeOn: { domresize: () => {} } } }, 'domresize', 'domresize')
+            createVnodeEmitter({ data: { on: { '~domresize': () => {} } } }, 'domresize', 'domresize', { warn: false })
+        })
+        assert.strict.deepStrictEqual(ws, [])
+    })
+
+})

package/test/unit-domResize.test.mjs

@@ -0,0 +1,296 @@
+import assert from 'assert'
+import domResize from '../src/js/domResize.mjs'
+
+
+//v-domresize指令之契約測試: 以真的指令與真的wsemi domDetect(ResizeObserver模式)驅動, 只把瀏覽器替換為假環境
+//  假ResizeObserver只記錄觀察對象, 由測試呼叫fireRO觸發回呼; 假元素之尺寸由測試直接設定
+//  瀏覽器本身之語義(開始觀察必回報、行內元素不回報等)非本檔所能驗證, 已另以真瀏覽器實測
+
+
+let sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
+
+
+class Ele {
+    constructor(w, h) {
+        this.nodeType = 1
+        this.isConnected = true
+        this.attrs = {}
+        this.size(w, h)
+    }
+
+    size(w, h) {
+        this.offsetWidth = w
+        this.offsetHeight = h
+        this.clientWidth = w
+        this.clientHeight = h
+    }
+
+    setAttribute(k, v) {
+        this.attrs[k] = String(v)
+    }
+
+    getAttribute(k) {
+        return (k in this.attrs) ? this.attrs[k] : null
+    }
+}
+
+
+//mkEnv, 建立假window與document並覆蓋全域; RO與MO皆為可手動觸發之假物件
+function mkEnv() {
+    let env = { ros: [], mos: [], listeners: [] }
+
+    class RO {
+        constructor(cb) {
+            this.cb = cb
+            this.targets = new Set()
+            env.ros.push(this)
+        }
+
+        observe(t) {
+            this.targets.add(t)
+        }
+
+        unobserve(t) {
+            this.targets.delete(t)
+        }
+
+        disconnect() {
+            this.targets.clear()
+        }
+    }
+
+    class MO {
+        constructor(cb) {
+            this.cb = cb
+            env.mos.push(this)
+        }
+
+        observe() {}
+
+        disconnect() {}
+    }
+
+    globalThis.window = {
+        innerWidth: 1200,
+        innerHeight: 800,
+        ResizeObserver: RO,
+        MutationObserver: MO,
+        addEventListener: (type, fn) => {
+            env.listeners.push({ type, fn })
+        },
+        removeEventListener: (type, fn) => {
+            env.listeners = env.listeners.filter((l) => !(l.type === type && l.fn === fn))
+        },
+        getComputedStyle: () => ({ display: 'block' }),
+    }
+    globalThis.document = { documentElement: {} }
+
+    //fireRO, 瀏覽器回報ele之尺寸變化; 真瀏覽器於同一次變化會回報border-box與content-box兩個觀察器
+    env.fireRO = (ele) => {
+        for (let ro of env.ros) {
+            if (ro.targets.has(ele)) {
+                ro.cb([{ target: ele }], ro)
+            }
+        }
+    }
+
+    //resizeWindow, 視窗resize事件(元素尺寸不變)
+    env.resizeWindow = () => {
+        for (let l of env.listeners.slice()) {
+            if (l.type === 'resize') {
+                l.fn({ type: 'resize' })
+            }
+        }
+    }
+
+    return env
+}
+
+
+//mkBinding, 以Vue 2之vnode形狀建立綁定(監聽器為Vue建立之invoker, 即函數), 記錄指令轉發之domresize事件
+function mkBinding(env, ele, value) {
+    let d = domResize()
+    let rec = []
+    let vnode = { data: { on: { domresize: (msg) => rec.push(msg) } } }
+    d.bind(ele, { value }, vnode)
+    return { d, rec, vnode }
+}
+
+
+describe(`domResize`, function() {
+
+    after(function() {
+        delete globalThis.window
+        delete globalThis.document
+    })
+
+    it(`should forward dom events with their size and direction`, async function() {
+        let env = mkEnv()
+        let el = new Ele(300, 40)
+        let b = mkBinding(env, el)
+        env.fireRO(el)
+        await sleep(10)
+        el.size(200, 40)
+        env.fireRO(el)
+        await sleep(10)
+        assert.strict.deepStrictEqual(b.rec.map((m) => [m.from, m.snew.offsetWidth, m.smode.width]), [['dom', 300, 'larger'], ['dom', 200, 'smaller']])
+        b.d.unbind(el)
+    })
+
+    it(`should carry no direction on window events, even after a change within the tolerance`, async function() {
+        //元素變化未超過容許誤差(如拖曳分隔條之最後1px)時不發dom事件; 其後之視窗事件不代表元素尺寸變化, 不得帶出該方向,
+        //  否則依smode判斷變寬或變窄之使用端(WDrawer之autoSwitchTo*)會於不改尺寸之視窗resize時誤切換(wsemi 1.9.4有此問題, 1.9.5修正)
+        let env = mkEnv()
+        let el = new Ele(720, 400)
+        let b = mkBinding(env, el)
+        env.fireRO(el)
+        await sleep(10)
+        el.size(721, 400)
+        env.fireRO(el)
+        await sleep(10)
+        env.resizeWindow()
+        let w = b.rec.filter((m) => m.from === 'window')
+        assert.strict.deepStrictEqual(w.length, 1)
+        assert.strict.deepStrictEqual(w[0].smode, { width: '', height: '' })
+        assert.strict.deepStrictEqual([w[0].snew.offsetWidth, w[0].snew.offsetHeight], [721, 400])
+        b.d.unbind(el)
+    })
+
+    it(`should carry no direction on window events after a narrowing within the tolerance`, async function() {
+        let env = mkEnv()
+        let el = new Ele(482, 400)
+        let b = mkBinding(env, el)
+        env.fireRO(el)
+        await sleep(10)
+        el.size(481, 400)
+        env.fireRO(el)
+        await sleep(10)
+        env.resizeWindow()
+        let w = b.rec.filter((m) => m.from === 'window')
+        assert.strict.deepStrictEqual(w.map((m) => m.smode), [{ width: '', height: '' }])
+        b.d.unbind(el)
+    })
+
+    it(`should carry no direction for an axis within the tolerance when the other axis triggers a dom event`, async function() {
+        //寬先+1px(未超過容許誤差, 不發dom事件), 之後高+40px觸發dom事件: 該事件之寬方向須為空,
+        //  否則全高之抽屜遇視窗高度變化時, WDrawer之autoSwitchTo*會依殘餘之寬方向誤切換(wsemi 1.9.4有此問題, 1.9.5修正)
+        let env = mkEnv()
+        let el = new Ele(720, 400)
+        let b = mkBinding(env, el)
+        env.fireRO(el)
+        await sleep(10)
+        el.size(721, 400)
+        env.fireRO(el)
+        await sleep(10)
+        el.size(721, 440)
+        env.fireRO(el)
+        await sleep(10)
+        assert.strict.deepStrictEqual(b.rec.map((m) => [m.from, m.snew.offsetWidth, m.snew.offsetHeight, m.smode.width, m.smode.height]), [['dom', 720, 400, 'larger', 'larger'], ['dom', 721, 440, '', 'larger']])
+        b.d.unbind(el)
+    })
+
+    it(`should carry the current window size on window events`, async function() {
+        //視窗事件之snew.windowWidth須為事件當下之視窗寬, 否則元素尺寸未變時一直帶著上次量測時之視窗寬, 使用端依視窗寬判斷版面會用到過期值
+        let env = mkEnv()
+        let el = new Ele(300, 40)
+        let b = mkBinding(env, el)
+        env.fireRO(el)
+        await sleep(10)
+        globalThis.window.innerWidth = 420
+        env.resizeWindow()
+        globalThis.window.innerWidth = 1200
+        env.resizeWindow()
+        let w = b.rec.filter((m) => m.from === 'window')
+        assert.strict.deepStrictEqual(w.map((m) => m.snew.windowWidth), [420, 1200])
+        b.d.unbind(el)
+    })
+
+    it(`should stop forwarding after unbind`, async function() {
+        let env = mkEnv()
+        let el = new Ele(300, 40)
+        let b = mkBinding(env, el)
+        env.fireRO(el)
+        await sleep(10)
+        let n = b.rec.length
+        b.d.unbind(el)
+        el.size(400, 40)
+        env.fireRO(el)
+        env.resizeWindow()
+        await sleep(10)
+        assert.strict.deepStrictEqual([n, b.rec.length, env.listeners.length], [1, 1, 0])
+    })
+
+    it(`should do nothing but warn when the element has no domresize listener`, async function() {
+        //使用端漏寫@而成靜態屬性domresize="domresize"(WPanelScale曾如此)時, 指令收不到處理器, 不得拋錯, 並於綁定時警告
+        let env = mkEnv()
+        let el = new Ele(300, 40)
+        let d = domResize()
+        let ws = []
+        let ow = console.warn
+        console.warn = (...args) => {
+            ws.push(args.join(' '))
+        }
+        try {
+            d.bind(el, {}, { data: { attrs: { domresize: 'domresize' } } })
+        }
+        finally {
+            console.warn = ow
+        }
+        assert.doesNotThrow(() => {
+            env.fireRO(el)
+            env.resizeWindow()
+        })
+        await sleep(10)
+        d.unbind(el)
+        assert.strict.deepStrictEqual(ws, ['[v-domresize] domresize="domresize"為靜態屬性, 應為@domresize'])
+    })
+
+    it(`should not forward window events when event is resize`, async function() {
+        let env = mkEnv()
+        let el = new Ele(300, 40)
+        let b = mkBinding(env, el, { event: 'resize' })
+        env.fireRO(el)
+        await sleep(10)
+        env.resizeWindow()
+        el.size(200, 40)
+        env.fireRO(el)
+        await sleep(10)
+        assert.strict.deepStrictEqual(b.rec.map((m) => [m.snew.offsetWidth, m.smode.width]), [[300, 'larger'], [200, 'smaller']])
+        b.d.unbind(el, {}, b.vnode)
+    })
+
+    it(`should create no observer while disabled, and start detecting when enabled after a re-render`, async function() {
+        let env = mkEnv()
+        let el = new Ele(300, 40)
+        let b = mkBinding(env, el, false)
+        env.resizeWindow()
+        let n0 = [env.ros.length, env.listeners.length, b.rec.length]
+        b.d.componentUpdated(el, { value: true }, b.vnode)
+        env.fireRO(el)
+        await sleep(10)
+        assert.strict.deepStrictEqual([n0, env.ros.length, b.rec.map((m) => m.snew.offsetWidth)], [[0, 0, 0], 2, [300]])
+        b.d.unbind(el, {}, b.vnode)
+        assert.strict.deepStrictEqual(env.listeners.length, 0)
+    })
+
+    it(`should compare again with getBase after refreshKey changes, but not on a plain re-render`, async function() {
+        //getBase回傳使用端目前套用之寬度; 使用端寬度因尺寸以外之原因改變(如固定寬度被取消)時, 以refreshKey要求重新比較
+        let env = mkEnv()
+        let el = new Ele(300, 40)
+        let applied = 300
+        let value = (rk) => ({ event: 'resize', getBase: () => ({ width: applied, height: null }), refreshKey: rk })
+        let b = mkBinding(env, el, value(0))
+        env.fireRO(el)
+        await sleep(10)
+        let n0 = b.rec.length
+        applied = 0
+        b.d.componentUpdated(el, { value: value(0) }, b.vnode)
+        await sleep(10)
+        let n1 = b.rec.length
+        b.d.componentUpdated(el, { value: value(1) }, b.vnode)
+        await sleep(10)
+        assert.strict.deepStrictEqual([n0, n1, b.rec.map((m) => m.snew.offsetWidth)], [0, 0, [300]])
+        b.d.unbind(el, {}, b.vnode)
+    })
+
+})

package/test/unit-parseDetectValue.test.mjs

@@ -0,0 +1,94 @@
+import assert from 'assert'
+import parseDetectValue from '../src/js/parseDetectValue.mjs'
+
+
+//parseDetectValue之契約測試: 偵測類指令值之啟停、設定、可用鍵、正規化與重建判斷用之快照
+
+
+let spec = {
+    keys: ['event', 'refreshKey', 'tolerancePixel', 'sync', 'attributeFilter', 'getBase'],
+    refreshKey: 'refreshKey',
+}
+
+
+describe(`parseDetectValue`, function() {
+
+    it(`should enable with default settings when no value or true is given`, function() {
+        for (let v of [undefined, true]) {
+            let p = parseDetectValue(v, spec)
+            assert.strict.deepStrictEqual([p.enabled, p.cfg, p.funs, p.snap, p.rkey, p.warns], [true, {}, [], { vals: {}, funs: [] }, undefined, []])
+        }
+    })
+
+    it(`should disable for false and null`, function() {
+        for (let v of [false, null]) {
+            let p = parseDetectValue(v, spec)
+            assert.strict.deepStrictEqual([p.enabled, p.snap, p.warns], [false, null, []])
+        }
+    })
+
+    it(`should treat other types as no value and warn`, function() {
+        for (let [v, t] of [['yes', 'string'], [1, 'number'], [[1], 'array'], [() => {}, 'function']]) {
+            let p = parseDetectValue(v, spec)
+            assert.strict.deepStrictEqual([p.enabled, p.cfg], [true, {}])
+            assert.strict.deepStrictEqual(p.warns, [`指令值須為true、false、null或物件, 目前為${t}, 視同未給(啟用並使用預設設定)`])
+        }
+    })
+
+    it(`should keep only usable keys and warn about the others`, function() {
+        let p = parseDetectValue({ sync: true, tolerance: 2, extra: {} }, spec)
+        assert.strict.deepStrictEqual(p.cfg, { sync: true })
+        assert.strict.deepStrictEqual(p.warns, ['設定鍵tolerance、extra不適用而不採用, 可用之鍵為event、refreshKey、tolerancePixel、sync、attributeFilter、getBase'])
+    })
+
+    it(`should give equal snapshots for new objects with equal contents, including arrays and NaN`, function() {
+        let a = parseDetectValue({ tolerancePixel: NaN, attributeFilter: ['class'], getBase: () => 1 }, spec)
+        let b = parseDetectValue({ tolerancePixel: NaN, attributeFilter: ['class'], getBase: () => 2 }, spec)
+        assert.strict.deepStrictEqual(a.snap, b.snap)
+        assert.strict.deepStrictEqual(a.funs, ['getBase'])
+    })
+
+    it(`should give different snapshots when a value or the presence of a function changes`, function() {
+        let a = parseDetectValue({ attributeFilter: ['class'] }, spec)
+        let b = parseDetectValue({ attributeFilter: ['class', 'style'] }, spec)
+        let c = parseDetectValue({ attributeFilter: ['class'], getBase: () => 1 }, spec)
+        assert.notDeepStrictEqual(a.snap, b.snap)
+        assert.notDeepStrictEqual(a.snap, c.snap)
+    })
+
+    it(`should copy values into the snapshot, so an in-place change of the value is detected`, function() {
+        let value = { attributeFilter: ['class'] }
+        let a = parseDetectValue(value, spec)
+        value.attributeFilter.push('style')
+        let b = parseDetectValue(value, spec)
+        assert.notDeepStrictEqual(a.snap, b.snap)
+    })
+
+    it(`should return the refresh key apart from settings and snapshot`, function() {
+        let a = parseDetectValue({ sync: true, refreshKey: { k: 1 } }, spec)
+        let b = parseDetectValue({ sync: true, refreshKey: { k: 2 } }, spec)
+        assert.strict.deepStrictEqual([a.cfg, a.rkey], [{ sync: true }, { k: 1 }])
+        assert.strict.deepStrictEqual(a.snap, b.snap)
+        assert.notDeepStrictEqual(a.rkey, b.rkey)
+    })
+
+    it(`should not throw for circular values`, function() {
+        let o = { k: 1 }
+        o.self = o
+        let p = parseDetectValue({ attributeFilter: o }, spec)
+        assert.strict.deepStrictEqual(p.snap.vals.attributeFilter.self.k, 1)
+    })
+
+    it(`should apply normalize with whether an object was given, and collect its warnings`, function() {
+        let calls = []
+        let normalize = (cfg, { given }) => {
+            calls.push(given)
+            return { cfg: { ...cfg, event: 'resizeWithWindow' }, warns: given ? ['w'] : [] }
+        }
+        let p1 = parseDetectValue(undefined, { ...spec, normalize })
+        let p2 = parseDetectValue({}, { ...spec, normalize })
+        assert.strict.deepStrictEqual(calls, [false, true])
+        assert.strict.deepStrictEqual([p1.cfg, p1.warns, p2.warns], [{ event: 'resizeWithWindow' }, [], ['w']])
+    })
+
+})