The front-end mocks the interface data practice

preface

More and more companies are separating the front end from the back end to support a set of interfaces for the Web, ios, and Android, greatly improving the efficiency of development. But at the same time, it also brings the problem that the front-end UI depends on the back-end data. Before the back-end interface is developed, the front-end needs to simulate the interface data according to the specification defined by the interface. This seems to be a simple problem, but in fact it can be a headache during the development process.

Past practice

There are two methods based on front-end and back-end. Front-end mostly writes a set of simulated data according to the back-end interface definition in the business code, and there are also XHR interception based on MockJS. The back-end is mostly the first to write a set of test data interface, provide front-end call, such as interface development is completed, in the switch over. Either way, the following problems are inevitable:

1. For code that affects the business, it is common to see the following code, which annotates the original code logic and changes it to test simulation data

   getUserData = (uid) =>{
    //return axios.get('/api/user/' + uid);
    return new Promise((resolve, reject)=> {
      setTimeout(()=>{
        return resolve({
          data: {
            errcode: 0,
            data: {
              uid: 1,
              username: 'tom'}}})}, 100)})}Copy the code

2. The data structure of the back-end interface is changed, and the field name is added or modified, so it cannot be timely fed back to the front-end developer and the update lags behind.

3. It is not easy to simulate complex situations, such as interface response times, and generate all kinds of simulated data, such as email, mobile phone numbers, and so on

   {
    email: '[email protected]',
    phone: '18000803800'
   }Copy the code

4. In the actual development process, we need to simulate not only the NORMAL UI, but also the UI when the data is wrong and the data is empty.

Where does the front-end interface Mock practice go

We developed the YApi platform to manage the simulation of our front-end interface data. Only the front and back ends need to maintain the response data defined in the YApi platform to generate the required simulation data. The following code is the defined generated data template:

{
    "errcode": 0."errmsg": "@string"."data": {
        "type":"@ pick (1, 2, 3)"."list|1-10": [{
            "uid": "@id"."username": "@name"}}}]Copy the code

The following simulated data can be generated:

{
  "errcode": 0."errmsg": "^ *! SF)R"."data": {
    "type": 2."list": [{"uid": "370000200707276255"."username": "Ruth Clark"
      },
      {
        "uid": "650000200211185728"."username": "Anthony Martin"
      },
      {
        "uid": "370000199201143855"."username": "Laura Rodriguez"
      },
      {
        "uid": "610000198704072775"."username": "Anthony Perez"}}}]Copy the code

Method of use

The interface preview page shows mock addresses that can be used to retrieve randomly generated data through direct calls or server proxies without affecting the business logic code

Senior Mock

Basic Mock tools already cover most of the requirements, but some complex scenarios are impossible to implement. For example, when I make a data list page, I need to test the UI performance of a field at various lengths and when the data is empty. YApi provides the ability to expect and custom scripts to help front-end developers simulate various scenarios.

Mock Custom scripts

Custom scripts can customize the returned data according to the request parameters, cookie information, and JS scripts. It is recommended to generate different test data based on cookies, so that different simulated data can be obtained by controlling the browser cookie value.

if(cookie._type == 'error'){ delay = 1000; // Custom response time header['Content-Type'] = 'application/json'; // Make a custom Header mockJson. Errcode = 400; }if(cookie._type == 'empty'){ httpCode = 400; Mockjson.data.list = []; }Copy the code

The Mock expectations

The expectation is that different HTTP codes, HTTP headers, and JSON data will be returned based on different request parameters, IP, and the Mock expectation is mainly used for automated testing of UI and back-end interface.

Afterword.

YApi has been widely used in Qunar. Since its launch, according to statistics, there have been tens of thousands of Mock requests every week and many colleagues have praised it. In order to enable YApi to serve more friends and make YApi better, Now open source to github.com/ymfe/yapi welcome everyone to use and put forward valuable comments.