w-component-vue 2.5.22 → 2.5.24

package/test/tools/e2e-entry-hiddenMeasure.mjs

@@ -0,0 +1,198 @@
+import Vue from 'vue'
+import WDynamicList from '../../src/components/WDynamicList.vue'
+import WTree from '../../src/components/WTree.vue'
+import WTextarea from '../../src/components/WTextarea.vue'
+import WListExpand from '../../src/components/WListExpand.vue'
+
+
+//e2e-entry-hiddenMeasure: 「隱藏期間之操作, 顯示後之結果須與可見時操作一致」之真瀏覽器測試頁
+//  每個情境將元件置於可隱藏(display:none)之容器內, 以頁面上之按鈕操作(縮窄、改值、換資料、展開、隱藏、顯示)
+//  window.mountCase(name, opt)掛載情境(opt.hidden為初始即隱藏), window.geom()回傳使用者所見之版面(元件外框、內容超出其框之元素之捲動總高、元件內各元素之相對位置與尺寸)供比對
+
+
+Vue.config.productionTip = false
+Vue.config.devtools = false
+
+
+//genText, 長短不一之文字, 寬度改變時換行數不同而列高不同
+function genText(i) {
+    let words = []
+    let n = 3 + ((i * 7) % 23)
+    for (let k = 0; k < n; k++) {
+        words.push(`w${i}-${k}`)
+    }
+    return words.join(' ')
+}
+
+let rows1 = []
+let rows2 = []
+for (let i = 0; i < 60; i++) {
+    rows1.push(`${i + 1}: ${genText(i)}`)
+    rows2.push(`${i + 1}: ${genText(i + 11)} ${genText(i + 5)}`)
+}
+
+let treeItems = []
+for (let i = 0; i < 12; i++) {
+    let children = []
+    for (let j = 0; j < 4; j++) {
+        children.push({ id: `${i}-${j}`, text: genText(i * 4 + j) })
+    }
+    treeItems.push({ id: `${i}`, text: genText(i + 30), children })
+}
+
+let expandItems = []
+for (let i = 0; i < 6; i++) {
+    expandItems.push({ text: `item${i + 1}`, dsp: genText(i + 40) + ' ' + genText(i + 50) })
+}
+
+
+//ctrl, 共用之控制列: 縮窄容器、隱藏(display:none)、顯示
+let ctrl = `<div>
+    <button @click="wid=260">縮窄</button>
+    <button @click="hide=true">隱藏</button>
+    <button @click="hide=false">顯示</button>
+</div>`
+
+
+let cases = {
+
+    'dynamiclist': {
+        template: `<div>${ctrl}
+            <button @click="rows=rows2">換資料</button>
+            <button @click="show=false">關閉顯示</button>
+            <button @click="show=true">開啟顯示</button>
+            <button @click="changeThenHide">換資料並隱藏</button>
+            <div :style="(hide?'display:none;':'')+'width:'+wid+'px;'">
+                <w-dynamic-list class="target" :rows="rows" :viewHeightMax="300" :show="show">
+                    <template v-slot="props">
+                        <div style="padding:4px 8px; font-size:13px; line-height:18px; word-break:break-word;">{{props.row}}</div>
+                    </template>
+                </w-dynamic-list>
+            </div>
+        </div>`,
+        data: () => ({ rows: rows1, show: true }),
+        methods: {
+            changeThenHide() {
+                //換資料後立即隱藏(如更新後隨即關閉面板), 隱藏落在列表刷新之量測等待期間
+                this.rows = rows2
+                setTimeout(() => {
+                    this.hide = true
+                }, 1)
+            },
+        },
+    },
+
+    'tree': {
+        template: `<div>${ctrl}
+            <button @click="items=items2">換資料</button>
+            <div :style="(hide?'display:none;':'')+'width:'+wid+'px;'">
+                <w-tree class="target" :data="items" :viewHeightMax="300" :defaultDisplayLevel="2"></w-tree>
+            </div>
+        </div>`,
+        data: () => ({ items: treeItems, items2: treeItems.slice().reverse() }),
+    },
+
+    'textarea': {
+        template: `<div>${ctrl}
+            <button @click="text=text+' '+more">改值</button>
+            <div :style="(hide?'display:none;':'')+'width:'+wid+'px;'">
+                <w-textarea class="target" v-model="text"></w-textarea>
+            </div>
+        </div>`,
+        data: () => ({ text: genText(3), more: genText(9) + ' ' + genText(15) }),
+    },
+
+    'listexpand': {
+        template: `<div>${ctrl}
+            <button @click="active=items[1]">展開第2項</button>
+            <div :style="(hide?'display:none;':'')+'width:'+wid+'px;'">
+                <w-list-expand class="target" style="height:500px;" :items="items" :itemActive.sync="active"></w-list-expand>
+            </div>
+        </div>`,
+        data: () => ({ items: expandItems, active: null }),
+    },
+
+}
+
+
+//geom, 使用者所見之版面: 元件外框, 內容超出其框之元素(捲動區或被裁切者)之捲動總高, 元件內可見元素相對元件之位置與尺寸
+//  可見元素為未被元件內任何裁切祖先(overflow非visible)完全裁掉者: 虛擬列表於捲動區視窗外預先渲染之列數隨刷新時序而異(使用者看不到), 不列入比對; 其總高由捲動總高比對
+window.geom = () => {
+    let root = document.querySelector('.target')
+    if (!root) {
+        return null
+    }
+    let rb = root.getBoundingClientRect()
+    let rd = (v) => Math.round(v * 10) / 10
+    let isClipped = (el, r) => {
+        let p = el.parentElement
+        while (p && p !== root.parentElement) {
+            let cs = window.getComputedStyle(p)
+            if (cs.overflowX !== 'visible' || cs.overflowY !== 'visible') {
+                let c = p.getBoundingClientRect()
+                if (!(r.bottom > c.top && r.top < c.bottom && r.right > c.left && r.left < c.right)) {
+                    return true
+                }
+            }
+            p = p.parentElement
+        }
+        return false
+    }
+    let els = []
+    let overflows = []
+    let shells = []
+    for (let el of root.querySelectorAll('*')) {
+        let r = el.getBoundingClientRect()
+        if (el.scrollHeight > el.clientHeight + 1 && el.clientHeight > 0) {
+            overflows.push([el.tagName, el.className && typeof el.className === 'string' ? el.className : '', el.scrollHeight, el.clientHeight])
+        }
+        //shells, 捲動區殼層(overflow-y為scroll且高於60px, 排除原生捲軸寬度偵測區)之捲動總高與可視高, 不含容許1px之誤差
+        if (window.getComputedStyle(el).overflowY === 'scroll' && el.offsetHeight > 60) {
+            shells.push([el.scrollHeight, el.clientHeight])
+        }
+        if (r.width === 0 && r.height === 0) {
+            continue
+        }
+        if (isClipped(el, r)) {
+            continue
+        }
+        els.push([el.tagName, rd(r.left - rb.left), rd(r.top - rb.top), rd(r.width), rd(r.height)])
+    }
+    return {
+        box: [rd(rb.width), rd(rb.height)],
+        overflows,
+        shells,
+        els,
+    }
+}
+
+
+//mountCase
+window.mountCase = (name, opt = {}) => {
+    let def = cases[name]
+    if (!def) {
+        throw new Error(`invalid case: ${name}`)
+    }
+    let host = document.createElement('div')
+    document.body.appendChild(host)
+    let data = def.data
+    let vm = new Vue({
+        ...def,
+        components: {
+            WDynamicList,
+            WTree,
+            WTextarea,
+            WListExpand,
+        },
+        data: function() {
+            return {
+                wid: 360,
+                hide: opt.hidden === true,
+                rows2,
+                ...(data ? data.call(this) : {}),
+            }
+        },
+    })
+    vm.$mount(host)
+    return true
+}

package/test/tools/e2e-entry-hover.mjs

@@ -0,0 +1,171 @@
+import Vue from 'vue'
+import { mdiContentSave } from '@mdi/js'
+import WButtonCircle from '../../src/components/WButtonCircle.vue'
+import WDialog from '../../src/components/WDialog.vue'
+import WTreeIconToggle from '../../src/components/WTreeIconToggle.vue'
+
+
+//e2e-entry-hover: e2e-hover.test.mjs之測試頁, 以window.mountCase(cfg)掛載單一情境
+//  cfg.cmp: 'cir'(WButtonCircle, 提示文字Save changes)、'dlg'(WDialog標題列儲存鈕, 提示文字Save)、'toggle'(WTreeIconToggle)
+//  cfg.mode(cir、dlg): 'pu-first'(promiseUnlock, 點擊處理第一行resolve)、'pu-late'(promiseUnlock, 延後resolve)、
+//                      'loading-prop'(無promiseUnlock, 父層切換loading)、'editable'(父層切換editable)
+//  cfg.overlay: 是否顯示全頁遮罩(模擬載入遮罩或訊息框, 內有OK按鈕可關閉); pu-first、pu-late於點擊處理同一輪顯示, loading-prop、editable於延後結束時同一輪顯示
+//  cfg.editable(toggle): 圓鈕是否可編輯; 點擊時切換圓鈕朝向(元件因而重繪)
+//  點擊次數顯示於#clicks
+
+
+function findVm(vm, pred) {
+    if (!vm) {
+        return null
+    }
+    if (pred(vm)) {
+        return vm
+    }
+    for (let c of vm.$children) {
+        let r = findVm(c, pred)
+        if (r) {
+            return r
+        }
+    }
+    return null
+}
+
+
+window.mountCase = function(cfg) {
+    let el = document.createElement('div')
+    document.body.appendChild(el)
+    window.vm = new Vue({
+        components: {
+            WButtonCircle,
+            WDialog,
+            WTreeIconToggle,
+        },
+        data: {
+            cfg,
+            icon: mdiContentSave,
+            loading: false,
+            editable: true,
+            show: true,
+            dir: 'right',
+            overlay: false,
+            clicks: 0,
+        },
+        computed: {
+            pu: function() {
+                return this.cfg.mode === 'pu-first' || this.cfg.mode === 'pu-late'
+            },
+        },
+        template: `
+            <div>
+                <div style="padding:150px 0 0 200px;">
+                    <WButtonCircle v-if="cfg.cmp==='cir'" :icon="icon" :tooltip="'Save changes'" :promiseUnlock="pu" :loading="loading" :editable="editable" @click="onClick"></WButtonCircle>
+                    <WTreeIconToggle v-if="cfg.cmp==='toggle'" :dir="dir" :editable="cfg.editable" @click="onToggle"></WTreeIconToggle>
+                </div>
+                <WDialog v-if="cfg.cmp==='dlg'" :show.sync="show" :title="'Dialog'" @click-save="onClick">
+                    <template v-slot:content>
+                        <div style="height:120px;">content</div>
+                    </template>
+                </WDialog>
+                <div id="clicks" style="position:fixed; left:10px; bottom:10px;">{{clicks}}</div>
+                <div v-if="overlay" style="position:fixed; left:0; top:0; right:0; bottom:0; z-index:2500; background:rgba(0,0,0,0.3); display:flex; align-items:center; justify-content:center;">
+                    <button style="padding:10px 30px;" @click="overlay=false">OK</button>
+                </div>
+            </div>
+        `,
+        methods: {
+            onClick: function(msg) {
+                let vo = this
+                let cfg = vo.cfg
+                vo.clicks++
+                if (cfg.mode === 'pu-first') {
+                    msg.pm.resolve()
+                    if (cfg.overlay) {
+                        vo.overlay = true
+                    }
+                }
+                else if (cfg.mode === 'pu-late') {
+                    if (cfg.overlay) {
+                        vo.overlay = true
+                    }
+                    setTimeout(() => {
+                        msg.pm.resolve()
+                    }, 400)
+                }
+                else if (cfg.mode === 'loading-prop') {
+                    vo.loading = true
+                    setTimeout(() => {
+                        vo.loading = false
+                        if (cfg.overlay) {
+                            vo.overlay = true
+                        }
+                    }, 400)
+                }
+                else if (cfg.mode === 'editable') {
+                    vo.editable = false
+                    setTimeout(() => {
+                        vo.editable = true
+                        if (cfg.overlay) {
+                            vo.overlay = true
+                        }
+                    }, 400)
+                }
+            },
+            onToggle: function() {
+                let vo = this
+                vo.clicks++
+                vo.dir = vo.dir === 'right' ? 'bottom' : 'right'
+            },
+        },
+    }).$mount(el)
+}
+
+
+//getHoverLayer, 取按鈕層(WButtonCircle內帶tabindex之按鈕容器), dlg取WDialog標題列之儲存鈕
+function getHoverLayer() {
+    let vm = window.vm
+    let btn = findVm(vm, (v) => v.$props && v.$props.promiseUnlock !== undefined && v.$props.icon !== undefined && (vm.cfg.cmp !== 'dlg' || v.$props.tooltip === 'Save'))
+    return btn.$el.querySelector('[tabindex="0"] [tabindex="0"]')
+}
+
+
+//buttonState, 按鈕層之矩形、背景色、圖示中心之命中元素是否為按鈕層與其游標樣式、載入圖示是否顯示
+window.buttonState = function() {
+    let layer = getHoverLayer()
+    let r = layer.getBoundingClientRect()
+    let svg = layer.querySelector('svg')
+    let rs = svg ? svg.getBoundingClientRect() : r
+    let x = rs.left + rs.width / 2
+    let y = rs.top + rs.height / 2
+    let hit = document.elementFromPoint(x, y)
+    let loading = layer.querySelector('[cmp="loading"]')
+    return {
+        x,
+        y,
+        w: Math.round(r.width),
+        h: Math.round(r.height),
+        bg: getComputedStyle(layer).backgroundColor,
+        hitIsLayer: hit === layer,
+        cursor: hit ? getComputedStyle(hit).cursor : '',
+        loadingShown: !!loading && getComputedStyle(loading).display !== 'none',
+    }
+}
+
+
+//toggleState, 圓鈕之背景色、圓鈕中心之命中元素是否在圓鈕內與其游標樣式、禁用符號之斜線數
+window.toggleState = function() {
+    let circle = document.querySelector('.circle')
+    let r = circle.getBoundingClientRect()
+    let x = r.left + r.width / 2
+    let y = r.top + r.height / 2
+    let hit = document.elementFromPoint(x, y)
+    let root = circle.closest('[tabindex="0"]')
+    let strikes = [...root.querySelectorAll('div')].filter((d) => (d.getAttribute('style') || '').includes('border-top:2px solid') || (d.style.borderTopWidth === '2px'))
+    return {
+        x,
+        y,
+        bg: getComputedStyle(circle).backgroundColor,
+        hitInCircle: circle.contains(hit),
+        cursor: hit ? getComputedStyle(hit).cursor : '',
+        strikes: strikes.length,
+    }
+}

package/test/tools/e2e-setup.mjs

@@ -0,0 +1,125 @@
+import fs from 'fs'
+import path from 'path'
+import { createRequire } from 'module'
+import launchChromium from 'w-package-tools-e2e/src/launchChromium.mjs'
+
+
+//e2e-setup: 真瀏覽器測試之共用層, 以專案根目錄為cwd執行(npm test)
+//  測試頁由webpack打包: 入口為test/tools/e2e-entry-*.mjs, 直接import src之指令與元件(.vue以@vue/vue-loader-v15編譯), 產物落test/_tmp/<名稱>/, 測後刪除
+//  webpack與loader為@vue/cli-service之相依, 自其所在位置解析, 不依賴安裝時是否提升至根目錄; 根目錄之vue-loader為Vue 3用之17, 不可使用
+//  頁面以setContent載入空白頁再注入bundle, 不需啟動伺服器
+
+
+let projRoot = path.resolve('.')
+let reqRoot = createRequire(path.join(projRoot, 'package.json'))
+let reqCli = createRequire(reqRoot.resolve('@vue/cli-service/package.json'))
+
+
+//bundleEntry, 打包入口檔, 回傳bundle之絕對路徑
+async function bundleEntry(name, entry) {
+    let webpack = reqCli('webpack')
+    let { VueLoaderPlugin } = reqCli('@vue/vue-loader-v15')
+    let outDir = path.join(projRoot, 'test', '_tmp', name)
+    fs.rmSync(outDir, { recursive: true, force: true })
+    let compiler = webpack({
+        mode: 'development',
+        devtool: false,
+        context: projRoot,
+        entry: path.resolve(projRoot, entry),
+        output: {
+            path: outDir,
+            filename: 'bundle.js',
+        },
+        resolve: {
+            alias: {
+                vue$: reqRoot.resolve('vue/dist/vue.esm.js'), //含模板編譯器, 測試頁以template撰寫; 元件(.vue)內之import 'vue'亦指向同一份
+            },
+            modules: [path.join(projRoot, 'node_modules')],
+        },
+        module: {
+            rules: [
+                {
+                    test: /\.m?js$/,
+                    resolve: {
+                        fullySpecified: false, //src內有省略副檔名之深層引用(如@popperjs/core/lib/modifiers/computeStyles), .mjs預設須完整指定
+                    },
+                },
+                {
+                    test: /\.vue$/,
+                    loader: reqCli.resolve('@vue/vue-loader-v15'),
+                },
+                {
+                    test: /\.css$/,
+                    use: [reqCli.resolve('vue-style-loader'), reqCli.resolve('css-loader')],
+                },
+            ],
+        },
+        plugins: [new VueLoaderPlugin()],
+        performance: {
+            hints: false,
+        },
+    })
+    let stats = await new Promise((resolve, reject) => {
+        compiler.run((err, st) => {
+            compiler.close(() => {})
+            if (err) {
+                reject(err)
+                return
+            }
+            resolve(st)
+        })
+    })
+    let info = stats.toJson({ all: false, errors: true })
+    if (info.errors.length > 0) {
+        throw new Error(`bundle ${name} failed: ${info.errors.map((e) => e.message).join('\n').slice(0, 2000)}`)
+    }
+    return path.join(outDir, 'bundle.js')
+}
+
+
+//removeBundle, 刪除打包產物; test/_tmp已空時一併刪除(平行執行之其他檔尚在使用時保留)
+function removeBundle(name) {
+    let dir = path.join(projRoot, 'test', '_tmp')
+    fs.rmSync(path.join(dir, name), { recursive: true, force: true })
+    try {
+        fs.rmdirSync(dir)
+    }
+    catch (err) {}
+}
+
+
+//launchBrowser, 全專案唯一launchChromium出口
+async function launchBrowser() {
+    //launchChromium, 缺Playwright指定版本之瀏覽器時首次啟動自動下載(與本機同版), 由w-package-tools-e2e提供
+    return await launchChromium({ headless: true })
+}
+
+
+//openPage, 開新頁面並載入bundle; 收集console.warn、console.error、pageerror供斷言
+async function openPage(browser, bundle, opt = {}) {
+    let ctx = await browser.newContext({ viewport: opt.viewport || { width: 800, height: 600 } })
+    let page = await ctx.newPage()
+    let logs = { warn: [], error: [], pageerror: [] }
+    page.on('console', (m) => {
+        if (m.type() === 'warning') {
+            logs.warn.push(m.text())
+        }
+        else if (m.type() === 'error') {
+            logs.error.push(m.text())
+        }
+    })
+    page.on('pageerror', (e) => {
+        logs.pageerror.push(String(e && e.message))
+    })
+    await page.setContent('<!DOCTYPE html><html><head><meta charset="utf-8"></head><body style="margin:0;"></body></html>')
+    await page.addScriptTag({ path: bundle })
+    return { ctx, page, logs }
+}
+
+
+export {
+    bundleEntry,
+    removeBundle,
+    launchBrowser,
+    openPage
+}