微信搜尋【大奇測試開】，關注這個堅持分享測試開發乾貨的傢伙。
繼續測試開發實戰系列的分享，本篇是對提測平臺的提測功能的編輯功能進行實現，主要重點是服務端更新介面中郵件內容標註邏輯實現，和對前端上篇新增需求的基礎進行適配改造。
TPMServer
提測詳細查詢介面
根據提測ID，對資料表 request 和 apps 做聯合表查詢，返回需要詳細資訊，此介面用於前端跳轉編輯提測頁面的資料回填。
# testmanager.py
@test_manager.route("/api/test/info", methods=['GET'])
def getTestInfo():
test_id = request.args.get('id')
resp_success = format.resp_format_success
resp_failed = format.resp_format_failed
if not test_id:
resp_failed.message = '提測ID不能為空'
return resp_failed
connection = pool.connection()
with connection.cursor() as cursor:
# 查詢產品資訊表-按更新時間新舊排序
sql = "SELECT A.id as appId, A.appId as appName, R.id,R.title,R.developer,R.tester,R.CcMail,R.version,R.type,R.scope,R.gitCode,R.wiki,R.more FROM request as R , apps as A where R.appId = A.id AND R.isDel=0 AND R.id={}".format(test_id)
cursor.execute(sql)
data = cursor.fetchall()
if len(data) == 1:
resp_success['data'] = data[0]
return resp_success
提測修改介面
提測更新介面，這裡沒有像之前一樣放在一個方法裡進行處理，主要原因有個特殊邏輯處理，將介面程式碼分開使得結構能夠更清晰，這個特殊處理邏輯就需要對比下哪些是更改的內容，然後如果在勾選了傳送的的選項下，能夠將其標明下，這樣才使得修改通知郵件有意義。這裡邏輯上大致為：
1. 更改資料前先查詢暫存一個變數中A
2. 進行資料庫更新，同時有變數B
3. 如果勾選了發郵件，傳送內容欄位值進行AB對比，不同則進行背景高亮或者前後標註處理，程式碼中採用的是標記 A.某內容 變更為：B.某內容
@test_manager.route("/api/test/update", methods=['POST'])
def updateReqeust():
# 獲取傳遞的資料，並轉換成JSON
body = request.get_data()
body = json.loads(body)
# 定義預設返回體
resp_success = format.resp_format_success
resp_failed = format.resp_format_failed
if 'appId' not in body:
resp_failed['message'] = 'appId 提測應用不能為空'
return resp_failed
elif 'tester' not in body:
resp_failed['message'] = 'tester 測試人員不能為空'
return resp_failed
elif 'developer' not in body:
resp_failed['message'] = 'developer 提測人不能為空'
return resp_failed
elif 'title' not in body:
resp_failed['message'] = 'title提測標題不能為空'
return resp_failed
# 使用連線池連結資料庫
connection = pool.connection()
with connection:
with connection.cursor() as cursor:
sql = "SELECT A.appId as appId, A.note as appName, R.id,R.title,R.developer,R.tester,R.CcMail,R.version,R.type,R.scope,R.gitCode,R.wiki,R.more FROM request as R , apps as A where R.appId = A.id AND R.isDel=0 AND R.id={}".format(
body['id'])
cursor.execute(sql)
data = cursor.fetchall()
if len(data) == 1:
old_test_info = data[0]
else:
print('原有資料請求查詢異常！')
# 如果傳的值有ID，那麼進行修改操作，否則為新增資料
with connection.cursor() as cursor:
# 拼接修改語句，由於應用名不可修改，不需要做重複校驗appId
sqlUpdate = "UPDATE request SET title=%s,appId=%s,developer=%s,tester=%s,CcMail=%s,version=%s,`type`=%s," \
"scope=%s,gitCode=%s,wiki=%s,`more`=%s,updateUser=%s,`updateDate`= NOW() WHERE id=%s"
cursor.execute(sqlUpdate, (
body["title"], body["appId"], body["developer"], body['tester'], body["CcMail"], body["version"],
body["type"], body["scope"], body["gitCode"], body["wiki"], body["more"], body["updateUser"],
body["id"]))
# 提交執行儲存更新資料
connection.commit()
if 'isEmail' in body and body['isEmail'] == 'true':
# 新建成功傳送Email
if body['type'] == 1:
rquest_type = '功能測試'
elif body['type'] == 2:
rquest_type = '效能測試'
elif body['type'] == 3:
rquest_type = '安全測試'
receivers = body["tester"].split(',') + body["developer"].split(',')
if not body["CcMail"] is None:
receivers = receivers + body["CcMail"].split(',')
subject = '【提測】' + body['title']
contents = []
contents.append('<strong>[提測應用]</strong>')
if old_test_info and old_test_info['appName'] != body['appName']:
contents.append(old_test_info['appName'] + '變更為:' + body['appName'])
else:
contents.append(body['appName'])
contents.append('<strong>[提測人]</strong>')
if old_test_info and old_test_info['developer'] != body['developer']:
contents.append(old_test_info['developer'] + '變更為:' + body['developer'])
else:
contents.append(body['developer'])
contents.append('<strong>[提測版本]</strong>')
if old_test_info and old_test_info['version'] != body['version']:
contents.append(old_test_info['version'] + '變更為:' + body['version'])
else:
contents.append(body['developer'])
contents.append('<strong>[測試內容]</strong>')
if old_test_info and old_test_info['scope'] != body['scope']:
contents.append(old_test_info['scope'] + '變更為:' + body['scope'])
else:
contents.append(body['scope'])
contents.append('<strong>[相關文件]</strong>')
if old_test_info and old_test_info['wiki'] != body['wiki']:
contents.append(old_test_info['wiki'] + '變更為:' + body['wiki'])
else:
contents.append(body['wiki'])
contents.append('<strong>[補充資訊]</strong>')
if old_test_info and old_test_info['more'] != body['more']:
contents.append(old_test_info['more'] + '變更為:' + body['more'])
else:
contents.append(body['more'])
reuslt = sendEmail(receivers, subject,contents)
if reuslt:
sendOk = 1
else:
sendOk = 2
with connection.cursor() as cursor:
# 更新Emai是否傳送成功1-成功 2-失敗
updateEmail = "UPDATE request SET sendEmail=%s, updateUser=%s,`updateDate`= NOW() WHERE id=%s"
cursor.execute(updateEmail, (sendOk, body["updateUser"], body['id']))
# 提交修改郵件是否傳送成功
connection.commit()
else:
print('不傳送郵件！')
return resp_success
以上是本次功能用到的兩個介面，測試請自行使用postman等工具進行驗證。
TPMWeb
定義請求介面
首先先定義好後端的介面請求，只需接著上次分享中的test.js中新增兩個請求
編輯帶參跳轉與獲取
在提測列表頁面中增加點選事件並實現方法，方法中這次採用URL帶引數的方式，如果還不瞭解Vue $router 跳轉的幾種方式，請參考之前這篇 測試開發【提測平臺】13遠端搜尋和路由$route使用實現新建提測需求，跳轉除了動作引數值賦予“UPDATE”，另外還需要而外給選擇編輯資料的ID，用於跳轉後的再查詢，當然也可以通過param隱式的將一行資料傳遞過去，但這裡不太建議。
對於commit頁面不使用從上一頁拿整行的資料，主要是考慮到這個頁面有可能會做重新整理瀏覽器操作，如果是隱式資料就會丟失，而URL中的引數不會，可以再次被取到，大家可以嘗試下區別。這裡需要對原有action和新引數id判斷獲取值，並對提測資訊進行查詢初始化。
提測詳細回填處理
getTestInfo的程式碼邏輯是實現查詢並將所需要的欄位值繫結 requestForm，另外這段程式碼還需要做兩個特殊的處理，需要特別注意下:
1. 應用的ID遠端搜尋下拉框繫結需要程式碼觸發下查詢，使用者Label - value的回填
2. 延遲200～300秒在繫結appId，要不在跳轉的頁面的時候會有個小問題，就是先顯示appId，再顯示appName的一個過程，具體現象大家可以將setTimeout這個註釋掉，直接this.requestForm.appId = data.appId 做個對比。
getTestInfo() {
apiTestInfo(this.testId).then(response => {
const data = response.data
this.requestForm.id = data.id
this.requestForm.title = data.title
this.requestForm.developer = data.developer
this.requestForm.tester = data.tester
this.requestForm.CcMail = data.CcMail
this.requestForm.version = data.version
this.requestForm.type = data.type
this.requestForm.scope = data.scope
this.requestForm.gitCode = data.gitCode
this.requestForm.wiki = data.wiki
this.requestForm.more = data.more
this.requestForm.appName = data.appName
this.requestForm.isEmail = false
this.remoteMethod(data.appName)
// this.requestForm.appId = data.appId
setTimeout(() => {
this.requestForm.appId = data.appId
}, 300)
})
}
頁面支援修改改造
template部分為了支援修改功能的實現，需要如圖三處的變更或者新增
1. 根據跳轉動作顯示對應的標題
2. 判斷是更改的操作，顯示ID資訊，狀態不可更改
3. 增加修改按鈕，用v-if判斷動作，也可直接使用一個button，對文字描述做判斷，例如
<el-button type="primary" @click="onSubmit">{{testAction=='ADD'?'立即新增':'修改提測'}}</el-button>
修改資料提交
提測編輯頁面最後一個改造就是對資料的提交部分，同ADD邏輯，僅改了下請求API。
聯調測試
程式碼編寫完成還是要做個系統的測試來進行功能的驗證
CASE-1: 新建一個提測，驗證新增功能是否受新的修改功能影響；
CASE-2: 修改剛剛建立的提測，檢查資料查詢回填，尤其是是服務應用顯示是否正常，修改部分欄位值，提交修改；
CASE-3: 檢查郵件是否都有正常收到，修改郵件是否按預期內容進行了標註。
文末留個優化小作業，對於郵件的傳送內容你能否用之前講解的HTML模版知識進行格式上的優化呢，讓內容更好看一些。
【程式碼更新】
-
地址：https://github.com/mrzcode/TestProjectManagement
-
TAG：TPMShare15
堅持原創，堅持實踐，堅持乾貨，如果你覺得有用，請點選推薦，也歡迎關注我部落格園和微信公眾號。