review

In the last section, we wrote a form to add use cases and successfully added some use cases, but when we clicked the corresponding use cases in the Tree, the right Card still did not show the data, so today we will complete the information.

episode

In fact, I tried to record a video on Tuesday night, because I thought it could save time. After a lecture, I also wrote part of the code and didn’t need to output the corresponding text, which was very convenient. But it turned out to be just so-so, so the video died. In the first trial lecture, I summarized the following questions:

  1. No copy back, simply say is improvisation, where to play, no rules! So there will be a period of confusion in the middle, and I don’t know what to say. There’s going to be a part of the problem.
  2. Headset quality. Because the device is very cheap and uses the microphone of headset, there will be a lot of current sound. Although we have adjusted it a little before recording, we found that the video was full of current sound after recording.
  3. I didn’t grasp the time very well. I spoke for an hour accidentally. It was supposed to be 40-45 minutes, a series episode.
  4. Recording video, there is no text support, for the reader who is not convenient to watch the video is very uncomfortable. If accompanied by text /PPT, then the author will spend more time.

So the bottom line is let’s do another episode tonight and see what happens!

Modify project interface

As we mentioned earlier, our fields may not be complete, and if we need to follow up the microservice project, it is important to execute the test case for the corresponding service when the service is released. Therefore, we need to define an APP field for project for the smooth development of continuous integration.

  • Add the app field in models/project.py

  • Modify the new/edit Project method

  • Adjust the interface

App fields were added to both edit and new project interfaces. Since the code changes were relatively small, the github submission records were taken as screenshots for easy comparison.

Write functions related to query use case information

  • Write an interface to get use case information based on the use case ID

    Add query_test_case method to app/ DAO /test_case/ testCasedao.py.

It is simple to query the corresponding use case according to the ID.

  • write/testcase/queryinterface

Check whether case_id is transmitted and a number before querying the corresponding data.

Writing the front end

There are not many changes in the front end, we need to show the use case information, we go to the Ant Design website to find the Description component.

You can see this list of presentations, which basically meets our requirements. First look at the finished product:

Although the style is not very good, but to make do with first, after all, our function first.

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='Use Case Details' bordered size='small'>
          <Descriptions.Item label='Use Case Name'><a>{data.name}</a></Descriptions.Item>
          <Descriptions.Item label='Use Case Directory'>{data.catalogue}</Descriptions.Item>
          <Descriptions.Item label='Use Case Priority'>{<Tag
            color={CONFIG.CASE_TAG[data.priority]}>{data.priority}</Tag>}</Descriptions.Item>
          <Descriptions.Item label='Request Type'>{CONFIG.REQUEST_TYPE[data.request_type]}</Descriptions.Item>
          <Descriptions.Item label='Request mode'>
            {data.request_method}
          </Descriptions.Item>
          <Descriptions.Item label='Use case State'>{<Badge {. CONFIG.CASE_BADGE[data.status]} / >}</Descriptions.Item>
          <Descriptions.Item label='Use Case Tag' span={2}>{
            <div style={{ textAlign: 'center' }}>
              {data.tag ? data.tag.split(',').map(v => <Tag style={{ marginRight: 4 }} color='blue'>{v}</Tag>) : 'no'}</div>
          }</Descriptions.Item>
          <Descriptions.Item
            label='Founder'>{userMap[data.create_user] ! == undefined ? userMap[data.create_user].name : 'loading... '}</Descriptions.Item>
          <Descriptions.Item
            label='Update person'>{userMap[data.update_user] ! == undefined ? userMap[data.update_user].name : 'loading... '}</Descriptions.Item>
          <Descriptions.Item label='Creation time'>{data.created_at}</Descriptions.Item>
          <Descriptions.Item label='Update Time'>{data.updated_at}</Descriptions.Item>
          <Descriptions.Item label='the request url' span={3}>
            <a href={data.url}>{data.url}</a>
          </Descriptions.Item>
          <Descriptions.Item label='request Headers' span={3}>
            <pre>{data.request_header}</pre>
          </Descriptions.Item>
          <Descriptions.Item label='request body' span={3}>
            <pre>{data.body}</pre>
          </Descriptions.Item>
        </Descriptions>
      </Col>
    </Row>
  );

}

Copy the code

Explain the code:

  • useEffect

CaseId is controlled by the parent component. If it is null, no operation is performed. If it changes and is not null, it means that the user is switching the left use case, so we need to get the use case information again. That is, call the/testCase /query interface based on caseId.

  • Component part

    Basically, I took the demo of ANTD official website and modified it. There were no major changes.

Next up

This section doesn’t have much to say, but just renders the use-case data, similar to jMeter’s pre/post operations, which will be explained later. Let’s implement a basic single-interface test for now.

Front-end repository: github.com/wuranxu/pit…

Backend repository: github.com/wuranxu/pit…