測試平臺系列(84) 支援複製其他前置條件

米洛丶發表於2021-11-29

大家好~我是米洛！

我正在從0到1打造一個開源的介面測試平臺, 也在編寫一套與之對應的完整教程，希望大家多多支援。

歡迎關注我的公眾號測試開發坑貨，獲取最新文章教程!

回顧

前文我們支援了Redis這種前置條件，但其實有個特別不友好的地方:

如果前置條件比較接近，我甚至於不能複製它們。

如果能像前置case一樣，選擇一個去快速複製，所以說這樣是十分不友好的。

那這一節我們就來實現它。

效果圖

老規矩，先放上效果圖:

不同的前置條件資料會篩選出不同型別的資料

思路

其實要支援這個操作，對於後端來說還是比較簡單的。

好在我們的後端的Constructor有個type欄位，用於區分前置條件的型別。所以我們只需要安排一個查詢介面:

根據型別查詢出前置條件的明細，然後選擇後，前端用表單的方式帶入進來，即可複製整個前置條件。

後端先行

編寫查詢介面，展示它屬於哪一個case，並且給出前置條件的細節。

前端呢，則是已經確定好了TreeSelect元件，所以後端採用2層的資料格式:

[
  {
  "title": "用例",
  "key": "caseid",
  "children": [
    {
      "title": "資料構造器A",
      "key":
      "constructor_id"
    }
  ]}
]

那我們就造起來吧~

  • 編寫思路

    我不打算用join(從一開始我就貫徹了自己這個思想，我更喜歡用2次查詢，自己拼接資料的方式，其實是join用的不好)

    我們優先查出對應型別的前置條件，接著就能拿到所有case_id了，再用case_id去查出case的資訊，豈不美哉？

    只是難點在於怎麼組成這個樹，但其實這個樹只有2層，我們要做的就是先組裝children，最後拼parent。

    這裡我們就要用到defaultdict了。

    1. 查出符合條件的前置條件，並根據case_id為key，前置條件為value的方式，存放到defaultdict
    2. 根據defaultdict的keys查出case_id對應的case名稱，遍歷之，拼湊parent，並把defaultdict裡面的value放到children欄位。

    來看看程式碼:

    @staticmethod
    async def get_case_and_constructor(constructor_type: int):
        # 最終返回結果樹
        ans = list()
        async with async_session() as session:
            # 此處存放case_id => 前置條件的對映
            constructors = defaultdict(list)
            # 根據傳入的前置條件型別，找出所有前置條件, 型別一致，共享開關開啟，並未被刪除
            query = await session.execute(
                select(Constructor).where(
                    Constructor.type == constructor_type,
                    Constructor.public == True,
                    Constructor.deleted_at == None))
            # 並把這些前置條件放到constructors裡面
            for q in query.scalars().all():
                constructors[q.case_id].append({
                    "title": q.name,
                    "key": f"{q.id}",
                    "isLeaf": True,
                    # 這裡是為了拿到具體的程式碼，因為樹一般只有name和id，我們這還需要其他資料
                    "constructor_json": q.constructor_json,
                })

            # 二次查詢，查出有前置條件的case
            query = await session.execute(
                select(TestCase).where(TestCase.id.in_(constructors.keys()), TestCase.deleted_at == None))
            # 構造樹，要知道children已經構建好了，就在constructors裡面
            for q in query.scalars().all():
                # 把用例id放入cs_list，這裡就不用原生join了
                ans.append({
                    "title": q.name,
                    "key": f"case_{q.id}",
                    "disabled": True,
                    "children": constructors[q.id]
                })
        return ans

註釋寫的非常詳細，每一步都交代的很清楚。

接著是介面部分，就不需要多說了:

# 獲取所有資料構造器
@router.get("/constructor/list")
async def list_case_and_constructor(constructor_type: int):
    try:
        ans = await ConstructorDao.get_case_and_constructor(constructor_type)
        return PityResponse.success(ans)
    except Exception as e:
        return PityResponse.failed(str(e))

前端適配

其實前端適配很簡單，加一個元件，並且在元件選中值的時候更新表單的值就可以了。

oh shit~~

寫到這裡我才發現我居然寫過類似的程式碼，難受= =

用的方法還是如出一轍

果然人會在同一個地方倒下，不過我覺得之前寫的，沒有對前置條件進行分類，所以我得改造改造，或者說這次寫的當做v2介面使用。

不得不說，前端的改動比想象中還大一點。仔細比對了這個介面，發現它的邏輯是:

  1. 找到對應的前置條件id
  2. 查詢前置條件的資料，進行替換

但之前的介面只針對case型別，所以很雞肋。

我們目前把它做了一個船新版本來適配我們所有的型別:

import {Col, Row, TreeSelect} from "antd";
import {connect} from 'umi';
import {useEffect} from "react";

const CopyTreeSelect = ({construct, dispatch}) => {

  const {constructorData, searchConstructor, constructorType} = construct;


  const save = (data) => {
    dispatch({
      type: 'construct/save',
      payload: data,
    })
  }

  const getConstructorData = () => {
    dispatch({
      type: 'construct/getConstructorTree',
      payload: {
        constructor_type: constructorType
      }
    })
  }

  useEffect(() => {
    getConstructorData();
  }, [constructorType])

  return (
    <Row style={{marginTop: 24, marginBottom: 24}}>
      <Col span={3}/>
      <Col span={18}>
        <Row>
          <Col span={4}/>
          <Col span={20}>
            <TreeSelect
              allowClear
              showSearch
              style={{width: '100%'}}
              value={searchConstructor}
              filterTreeNode={(inputValue, treeNode) => {
                return treeNode.title.toLowerCase().indexOf(inputValue.toLowerCase()) > -1
              }}
              dropdownStyle={{maxHeight: 600, overflow: 'auto'}}
              treeData={constructorData}
              placeholder="通過搜尋構造條件，可以快速複製引數哦！"
              treeDefaultExpandAll
              onChange={(e) => {
                save({searchConstructor: e})
                if (e !== undefined) {
                  dispatch({
                    type: 'construct/getConstructorData',
                    payload: {id: e.split("_")[1]}
                  })
                } else {
                  dispatch({
                    type: 'construct/save',
                    payload: {testCaseConstructorData: {type: constructorType, public: true, enable: true}},
                  })
                }
              }}
            />
          </Col>
        </Row>

      </Col>
      <Col span={3}/>
    </Row>

  )
}

export default connect(({loading, construct}) => ({loading, construct}))(CopyTreeSelect);

把這個元件單獨抽出，成為一個copy元件。並在前置條件型別變化的時候，自動更換資料來源。

頁面上再進行一些微調，就ok了。說實話這塊有點臃腫，由於我自己都看不下去，所以我先放過自己，也放過大家。

下一節我們小試牛刀，編寫一個簡單的測試報告郵件通知功能。（其實說簡單也不簡單，如果要設計到樣式，還挺麻煩）

相關文章