回顧

上一節我們編寫了新增用例的表單，並且成功添加了一些用例，但是我們在Tree裡面點選對應的用例，右側Card還是沒有顯示資料，所以今天我們就來把這塊資訊補全。

插曲

其實週二晚上，筆者嘗試了一下錄製視訊的方式，因為我覺得這樣節約時間，講完一節課呢，我也寫了一部分程式碼了，也不用去輸出對應的文字，十分便利。但發現效果很一般，所以視訊就夭折了。第一次試講呢，總結了以下幾個問題:

1. 沒有背稿子，簡單的說就是即興發揮，指哪打哪，毫無章法！所以中途會遇到迷茫期，不知道該說啥子了。就會有一部分卡頓的情況出現。
2. 耳麥質量。因為裝置很廉價，用的是頭戴式耳機的麥克風，所以會出現很大的電流聲，雖然錄製之前稍微除錯過，但是錄完了發現視訊充滿了電流聲。
3. 時間把握的不太好，一不小心就講了1個小時。本來是打算40-45分鐘吧，一集連續劇的時間。
4. 錄視訊的話，就沒有文字支撐了，對於不方便看視訊的讀者很難受。如果配上文字/PPT，那麼筆者就更花時間了。

所以其實結論是今晚再來一集，看看效果吧！

改造project介面

之前我們說過了，我們的欄位不一定全，如果後續我們需要跟進微服務專案的話，那麼在服務釋出的時候執行對應服務的測試用例，就是一件很重要的事情。所以我們需要給project定義一個app欄位，為了後面的持續整合工作的順利展開。

• 在models/project.py新增app欄位

• 修改新增/編輯project方法

• 調整介面

在編輯和新增專案介面都添加了app

編寫查詢用例資訊相關功能

• 編寫根據用例id獲取用例資訊的介面

  在檔案app/dao/test_case/TestCaseDao.py新增query_test_case方法。

比較簡單，根據id查詢對應的用例即可。

• 編寫/testcase/query介面

先判斷case_id是否有傳並且是否是數字，再去查詢對應的資料。

編寫前端部分

前端部分的內容這次改動並不多，我們需要展示用例資訊，我們去ant design官網 找到Description元件。

可以看到這個展示列表，基本上符合我們的要求。先看看成品:

雖然樣式不是很好看，但是先湊合用，畢竟咱們功能先行。

import React, { useEffect, useState } from 'react';
import { queryTestCase } from '@/services/testcase';
import auth from '@/utils/auth';
import { Badge, Col, Descriptions, Row, Tag } from 'antd';
import { CONFIG } from '@/consts/config';

export default ({ caseId, userMap }) => {
  const [data, setData] = useState({ status: 1, tag: '' });

  useEffect(async () => {
    if (caseId === null) {
      return;
    }
    const res = await queryTestCase({ caseId: caseId });
    if (auth.response(res)) {
      setData(res.data);
    }
  }, [caseId]);

  return (
    <Row gutter={[8, 8]}>
      <Col span={24}>
        <Descriptions title='用例詳情' bordered size='small'>
          <Descriptions.Item label='用例名稱'><a>{data.name}</a></Descriptions.Item>
          <Descriptions.Item label='用例目錄'>{data.catalogue}</Descriptions.Item>
          <Descriptions.Item label='用例優先順序'>{<Tag
            color={CONFIG.CASE_TAG[data.priority]}>{data.priority}</Tag>}</Descriptions.Item>
          <Descriptions.Item label='請求型別'>{CONFIG.REQUEST_TYPE[data.request_type]}</Descriptions.Item>
          <Descriptions.Item label='請求方式'>
            {data.request_method}
          </Descriptions.Item>
          <Descriptions.Item label='用例狀態'>{<Badge {...CONFIG.CASE_BADGE[data.status]} />}</Descriptions.Item>
          <Descriptions.Item label='用例標籤' span={2}>{
            <div style={{ textAlign: 'center' }}>
              {data.tag ? data.tag.split(',').map(v => <Tag style={{ marginRight: 4 }} color='blue'>{v}</Tag>): '無'}
            </div>
          }</Descriptions.Item>
          <Descriptions.Item
            label='建立人'>{userMap[data.create_user] !== undefined ? userMap[data.create_user].name : 'loading...'}</Descriptions.Item>
          <Descriptions.Item
            label='更新人'>{userMap[data.update_user] !== undefined ? userMap[data.update_user].name : 'loading...'}</Descriptions.Item>
          <Descriptions.Item label='建立時間'>{data.created_at}</Descriptions.Item>
          <Descriptions.Item label='更新時間'>{data.updated_at}</Descriptions.Item>
          <Descriptions.Item label='請求url' span={3}>
            <a href={data.url}>{data.url}</a>
          </Descriptions.Item>
          <Descriptions.Item label='請求Headers' span={3}>
            <pre>{data.request_header}</pre>
          </Descriptions.Item>
          <Descriptions.Item label='請求body' span={3}>
            <pre>{data.body}</pre>
          </Descriptions.Item>
        </Descriptions>
      </Col>
    </Row>
  );

}

解釋一下程式碼:

• useEffect

caseId通過父元件控制，如果為null則不進行任何操作。如果發生改變，且不為null的情況下，則說明使用者在切換左側用例，所以我們需要重新獲取用例資訊。也就是根據caseId呼叫/testcase/query介面。

• Component部分

  基本上是把antd官網的demo拿過來修改了一下，沒有太大的改動。

下期預告

這節沒有太多內容，只是把用例資料渲染了出來，類似於jmeter的前置/後置操作，後面也會陸續展開。我們暫且先實現一個最基礎的單介面測試。

前端程式碼倉庫: https://github.com/wuranxu/pityWeb

後端程式碼倉庫: https://github.com/wuranxu/pity