文由ScriptEcho平臺提供技術(shù)支持

項目地址：傳送門

Vue 中使用 inMap 創(chuàng)建動態(tài)遮罩覆蓋物

應(yīng)用場景

在基于 Vue 構(gòu)建的地理信息系統(tǒng)應(yīng)用中，經(jīng)常需要在底圖上繪制動態(tài)的遮罩覆蓋物，以突出顯示特定區(qū)域或隱藏敏感信息。

基本功能

這段代碼利用 inMap 庫在 Vue 組件中創(chuàng)建了一個可自定義樣式的遮罩覆蓋物。該覆蓋物可根據(jù)提供的數(shù)據(jù)動態(tài)更新，并提供豐富的事件處理功能。

功能實現(xiàn)步驟及關(guān)鍵代碼分析

1. 加載必要的 JavaScript 庫

const loadJavascript=(jsUrl)=> {
  return new Promise((resolve, reject)=> {
    // ...
  })
}

onMounted(async ()=> {
let jsUrls=[
// ...
]
await Promise.all(jsUrls.map((js)=> loadJavascript(js)))
})

首先，需要加載 inMap 庫和相關(guān)的依賴庫。loadJavascript 函數(shù)使用 Promise 來異步加載 JavaScript 腳本，并提供回調(diào)函數(shù)來處理加載完成或失敗的情況。

2. 初始化 inMap 地圖

var inmap=new inMap.Map({
  id: 'allmap',
  // ...
})

創(chuàng)建 inMap 地圖實例，并指定容器 ID 和其他配置選項，如中心點和縮放級別。

3. 創(chuàng)建遮罩覆蓋物

var overlay=new inMap.MaskOverlay({
  style: {
    // ...
  },
  data: [],
  event: {
    // ...
  },
})

使用 MaskOverlay 構(gòu)造函數(shù)創(chuàng)建一個遮罩覆蓋物實例。style 屬性用于設(shè)置覆蓋物的樣式，包括背景色、邊框色、陰影顏色等。data 屬性用于指定覆蓋物的數(shù)據(jù)，可以是地理JSON 數(shù)據(jù)或自定義數(shù)據(jù)結(jié)構(gòu)。event 屬性用于注冊事件處理函數(shù)。

4. 添加覆蓋物到地圖

inmap.add(overlay)

將遮罩覆蓋物添加到地圖實例中，使其在底圖上顯示。

5. 監(jiān)聽覆蓋物事件

overlay.on('init', function () {
  // ...
})
overlay.on('setData', function () {
  // ...
})

注冊事件處理函數(shù)以響應(yīng)覆蓋物的初始化和數(shù)據(jù)更新事件。這些事件處理函數(shù)可以執(zhí)行自定義邏輯，如更新覆蓋物樣式或響應(yīng)用戶交互。

總結(jié)與展望

通過這段代碼，我們實現(xiàn)了在 Vue 組件中創(chuàng)建和管理動態(tài)遮罩覆蓋物的功能。它提供了豐富的自定義選項和事件處理能力，使開發(fā)者能夠靈活地創(chuàng)建復(fù)雜的地圖可視化效果。

未來，該功能可以進(jìn)一步拓展，例如：

• 支持多邊形、圓形等更多形狀的遮罩覆蓋物；
• 提供更精細(xì)的樣式控制，如漸變色、紋理填充等；
• 與其他地圖控件集成，如圖例、縮放控件等。
• 更多組件：
• 
  

獲取更多Echos

本文由ScriptEcho平臺提供技術(shù)支持

項目地址：傳送門

微信搜索ScriptEcho了解更多

unxiao Zou ,Chunrong Fang ,Zhenyu Chen ,Xiaofang Zhang,Zhihong Zhao

南京大學(xué)軟件新技術(shù)國家重點實驗室，南京，中國

蘇州大學(xué)計算機(jī)科學(xué)與技術(shù)學(xué)院，蘇州，中國

電子郵件：zychen@software.nju.edu.cn

摘要

測試準(zhǔn)則是軟件測試的一個基本課題，其對于評估和驅(qū)動測試方法非常重要。代碼覆蓋由于其易實現(xiàn)性和有效性在軟件測試中得到了廣泛的應(yīng)用。動態(tài) web 技術(shù)已經(jīng)被用來提高應(yīng)用程序的可用性及其用戶體驗。然而，它帶來了一些新的測試挑戰(zhàn)，因為動態(tài) web 應(yīng)用程序在客戶端和服務(wù)器端之間有更多的迭代，所以代碼覆蓋就很難捕獲這些復(fù)雜的迭代來進(jìn)行充分的測試。

本文提出了一種新的覆蓋準(zhǔn)則--hybrid 覆蓋。這是一種混合覆蓋準(zhǔn)則，它結(jié)合了語句覆蓋和 HTML 元素覆蓋，并同時覆蓋了客戶端和服務(wù)器端的特性。

1. 引言

Web 應(yīng)用程序已經(jīng)成為應(yīng)用最廣泛的軟件類型之一。AJAX（異步 JavaScript 和 XML 格式）作為 web2.0 核心的一項新技術(shù)，它極大地改變了 web 應(yīng)用程序的開發(fā)方式。

測試是保證軟件質(zhì)量的主要手段。對于不同的應(yīng)用程序（包括 web 應(yīng)用程序），有許多現(xiàn)有的測試方法。為了評估和驅(qū)動測試方法，我們引入了一些覆蓋標(biāo)準(zhǔn)來計算測試集使用的程序元素的百分比。

語句覆蓋（Statement coverage）是一種代碼覆蓋，由于其易于實現(xiàn)性及其以較小的開銷執(zhí)行被測程序的特性而得到廣泛應(yīng)用，但是語句覆蓋不足以支持 web2.0 的 web 應(yīng)用程序的豐富功能。

元素覆蓋（Element coverage），對于 web 應(yīng)用程序來說，標(biāo)準(zhǔn)的 HTML 元素是顯示內(nèi)容和接收用戶輸入事件的基本單元。然而，僅僅基于 HTML 元素的覆蓋標(biāo)準(zhǔn)有其自身的不足。

在本文中，我們提出了一種新的動態(tài) web 應(yīng)用程序的混合覆蓋。它結(jié)合語句覆蓋和元素覆蓋來表示測試集的服務(wù)器端和客戶端覆蓋條件，以此來驗證 web 應(yīng)用程序是否得到了充分的測試。web 爬蟲將創(chuàng)建 UI（user interface）結(jié)構(gòu)，收集測試集執(zhí)行的 HTML 元素和代碼點，并將其用于計算混合覆蓋率。

2. 混合覆蓋準(zhǔn)則

(1) HTML 元素

HTML 元素是 HTML 文檔的單個組件，而 HTML 文檔是 web 應(yīng)用程序前端內(nèi)容的基本塊。每個元素都可以有特定的屬性和內(nèi)容。HTML 元素有三種：Void 元素、原始文本元素和普通元素。

?Void 元素只有一個包含任何屬性的開始標(biāo)記。

?原始文本元素由以下內(nèi)容構(gòu)成：標(biāo)記元素開頭的開始標(biāo)記、一些文本內(nèi)容、 一種結(jié)束標(biāo)記。

?普通元素通常同時具有開始標(biāo)記和結(jié)束標(biāo)記以及其內(nèi)容。內(nèi)容可以是嵌套元素，也可以是元素和文本內(nèi)容的組合。

(2) 元素覆蓋

本文將 web 應(yīng)用的 UI 模型定義如下：

定義 1（web 前端狀態(tài)圖）：動態(tài) web 應(yīng)用程序 A 的 web 前端狀態(tài)圖 G 是一個三元組<i、V、E>，其中：

?i 是加載完成后的初始狀態(tài)（通常是 web 應(yīng)用的索引項）

?V 是一組狀態(tài)，表示 web 應(yīng)用程序 a 運(yùn)行時的 DOM tree 條件。

?E?V×V 是兩個頂點之間的一組有向邊。每個邊（v1，v2）只有在當(dāng)且僅當(dāng)通過在狀態(tài) v1 下對 HTML 元素執(zhí)行事件可以從 v1 到達(dá) v2 時的條件成立時才都存在。

在我們的方法中，集合是從 web UI 模型獲得的。它的定義如下：

?元素集 E 是一組 HTML 元素。

?每個元素 e∈E 在以下條件成立時存在，當(dāng)且僅當(dāng) G 至少存在一個狀態(tài) v∈V 時，v 的 DOM tree 結(jié)構(gòu)包含 e。

定義 2（元素覆蓋）：測試用例集 T 在這樣的條件下滿足元素覆蓋準(zhǔn)則

?當(dāng)且僅當(dāng)對于每個元素 e∈E，至少有一個測試用例 t∈T 使得 e 被 t 訪問，其中 e 表示被測試的應(yīng)用程序的元素集。

在定義中，元素被測試用例訪問意味著該元素在測試用例執(zhí)行期間在瀏覽器上顯示或接收事件。

(3) 混合覆蓋

混合覆蓋的關(guān)鍵思想是結(jié)合 web 應(yīng)用程序運(yùn)行時的客戶端和服務(wù)器端功能。服務(wù)器端特性可以表示為服務(wù)器腳本的代碼執(zhí)行條件。而客戶端特性則處于 JavaScript 執(zhí)行和 DOM tree 條件的混合狀態(tài)。DOM tree 條件可以由元素表示，JavaScript 執(zhí)行通常由元素事件觸發(fā)。服務(wù)器端和客戶端的交互也可以用訪問的元素來表示。

基于語句覆蓋和元素覆蓋，混合覆蓋可以定義如下：

定義 3（混合覆蓋）：一組測試用例在這樣的條件下滿足混合覆蓋準(zhǔn)則，當(dāng)且僅當(dāng)對于每個元素 e∈E，至少有一個測試用例 t∈T 使得 e 被 t 訪問，對于每個語句 s∈S，至少有一個測試用例 t∈T 使得 s 被 t 執(zhí)行，其中 E 表示元素集，S 表示被測應(yīng)用程序的語句集。

定義中的狀態(tài)集包含被測應(yīng)用程序的服務(wù)器端腳本的所有語句。

3. 方法

我們實現(xiàn)了一個框架來獲取測試用例的元素覆蓋率。并使用 Crawljax 作為被測 web 應(yīng)用程序的模型生成工具，因為據(jù)我們所知，它是目前唯一支持基于 AJAX 的 web 站點的可用工具。

在上一步得到了 web 前端模型之后，該框架使用 web UI 模型和在自動化測試運(yùn)行環(huán)境中收集的測試數(shù)據(jù)來計算測試套件的覆蓋率。為了收集測試數(shù)據(jù)，框架在 web 應(yīng)用程序的測試套件中運(yùn)行測試用例，并在執(zhí)行測試用例中的每個測試命令后從瀏覽器的 DOM tree 中收集數(shù)據(jù)。

在之前收集的數(shù)據(jù)用于識別 web UI 模型中訪問的 HTML 元素并計算元素覆蓋率。對于語句覆蓋，我們使用了用于 PHP 和 phpunit3 的 Xdebug2 擴(kuò)展的組合。工具鏈可以生成包含語句覆蓋信息的測試報告。混合覆蓋率可以很容易地用元素覆蓋率和語句覆蓋率信息來計算。

4. 實驗

實驗的目的是從測試池中選取一部分具有較高故障檢測能力的測試用例。測試用例優(yōu)先排序的選擇策略通常基于覆蓋率指標(biāo)。因此，我們通過比較通過基于不同的覆蓋的策略來選擇的測試用例集的故障檢測能力來評估不同覆蓋準(zhǔn)則的有用性。

(1) 實驗項目

我們選擇了兩個 PHP web 應(yīng)用程序 schoolmate4 和 timeclock 5 作為我們的項目程序，表 1 顯示了這些主題的一些信息。

我們招募了一個由高年級本科生和研究生組成的團(tuán)隊來為學(xué)科項目創(chuàng)建測試用例。

(2) 實驗過程

我們首先初始化測試池。所選測試用例的初始集為空，并且在該過程的每一輪中從測試工具中選擇 0 或 1 個測試用例。對于每個選擇，該過程遍歷測試工具中未選擇的測試用例并計算適應(yīng)度值作為每個候選測試用例的選擇度量。選擇適應(yīng)度值最大的候選測試用例。如果存在多個具有相同最大適應(yīng)度值的合格候選測試，則從中隨機(jī)抽取一個測試用例。如果選定測試的覆蓋率達(dá)到最大覆蓋率（即測試池的覆蓋率），則清除覆蓋數(shù)據(jù)并繼續(xù)該過程。如果滿足結(jié)束條件，程序?qū)⒔Y(jié)束。

我們設(shè)置了一個所選測試用例的最大數(shù)量。如果選擇了足夠的測試用例，或者檢測到了所有的 bug，那么該過程將結(jié)束。實驗過程如圖 1 所示。

(3) 選擇策略

我們實驗的關(guān)鍵是適應(yīng)度函數(shù)。適應(yīng)度函數(shù)是基于覆蓋的。同時還考慮了測試用例的執(zhí)行成本。候選測試用例對所選測試用例集的覆蓋貢獻(xiàn)可以通過附加覆蓋集（ACS）來度量，它包含在候選測試用例 t 的覆蓋集（CS（t））中的覆蓋點，而不是在所選測試用例集 t 的覆蓋信息（CS（Cover Info（T））的覆蓋集中的覆蓋點。附加覆蓋集可以通過公式 ACS（t，Cover Info（T））=CS（t）? CS（Cover Info（T））。因為覆蓋信息可能在實驗過程中被清除，所以我們用 CS（Cover Info（T））代替 CS（T）。測試用例的執(zhí)行成本由初始化測試用例的成本加上在測試用例中執(zhí)行測試命令的成本來衡量，一般適應(yīng)度公式定義如下：

Fitness(t, T)=

(4) 結(jié)果分析

一個有效的策略可以用少量的測試用例來檢測大量的故障。我們用每個試驗項目和選擇策略組合而成的錯誤檢測率來衡量這個特征。圖 2 和圖 3 顯示了三種策略在兩個試驗項目（同學(xué)和時鐘）上的錯誤檢測率。

從圖中可以看出，基于混合覆蓋的策略比基于語句覆蓋和基于元素覆蓋的策略能夠檢測到更多的 bug。

(5) 有效性威脅

外部威脅：我們試驗項目的數(shù)量。

內(nèi)部威脅：我們?yōu)樵馗采w率計算創(chuàng)建的 web UI 模型的不完整性。

5. 結(jié)論

本文提出了一種新的 web 應(yīng)用測試覆蓋準(zhǔn)則。元素覆蓋用于度量測試用例訪問的 HTML 元素集。基于這種元素覆蓋和傳統(tǒng)的語句覆蓋，我們提出了一種混合覆蓋來覆蓋客戶端和服務(wù)器端的特性。實驗還評估了混合覆蓋準(zhǔn)則的有效性。