Практика интерфейсных данных имитации интерфейса (макет)

API

предисловие

Все больше и больше компаний полностью разделяют внешний и внутренний интерфейс, чтобы иметь возможность поддерживать набор внутренних интерфейсов для использования в Интернете, iOS, Android, что значительно повышает эффективность разработки. Но в то же время это также создает проблему, связанную с тем, что внешний интерфейс зависит от внутренних данных.Прежде чем будет разработан внутренний интерфейс, внешний интерфейс должен смоделировать данные интерфейса в соответствии со спецификацией интерфейса. определение интерфейса. Эта проблема кажется простой, но на самом деле она будет головной болью в процессе разработки.

прошлая практика

Существует два подхода, основанных на внешнем и внутреннем интерфейсе.Большая часть внешнего интерфейса основана на определении интерфейса внутреннего интерфейса в бизнес-коде, и записывается набор смоделированных данных.Есть также методы на основе mockjs путем перехвата xhr. Большая часть серверной части заключается в том, чтобы сначала написать набор интерфейсов тестовых данных, предоставить их для внешних вызовов и переключиться после завершения разработки интерфейса. В любом случае неизбежны следующие проблемы:

  1. Для кода, который влияет на бизнес, вы часто можете увидеть следующий код, аннотировать логику исходного кода и изменить его на смоделированные данные теста.

    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)
 })
}

  2. Изменилась структура данных внутреннего интерфейса, были добавлены поля и изменены имена полей, которые не могут быть вовремя возвращены фронтенд-разработчикам, и обновление отстает.

  3. Непросто моделировать сложные ситуации, такие как время отклика интерфейса, и генерировать различные моделируемые данные, такие как почтовые ящики, номера мобильных телефонов и т.д.

    {
 email: 'abc@163.com',
 phone: '18000803800'
}

  4. В реальном процессе разработки нам нужно не только смоделировать пользовательский интерфейс в нормальных условиях, но также необходимо смоделировать пользовательский интерфейс, когда данные неверны, а данные пусты.

Куда пойти интерфейс интерфейса Mock практический

мы разработалиПлатформа ЯПиЧтобы управлять моделированием данных нашего внешнего интерфейса, нам нужны только внешний и внутренний интерфейс для поддержки данных ответа, определенных на платформе YApi, для генерации необходимых данных моделирования.Следующий код является определенным шаблоном сгенерированных данных:

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

Могут быть сгенерированы следующие данные моделирования:

{
  "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"
      }
    ]
  }
}

инструкции

Мок-адрес можно увидеть на странице предварительного просмотра интерфейса, а случайно сгенерированные данные можно получить путем прямого вызова или прокси-сервера, не затрагивая код бизнес-логики.

image
image

Расширенный макет

Базовые инструменты Mock уже могут удовлетворить большинство потребностей, но некоторые сложные сценарии не могут быть реализованы. Например: когда я создаю страницу со списком данных, мне нужно проверить производительность пользовательского интерфейса для поля различной длины и производительность пользовательского интерфейса, когда данные пусты. YApi предоставляет ожидания и пользовательские сценарии, чтобы помочь разработчикам внешнего интерфейса моделировать различные сценарии.

Макет пользовательского сценария

Пользовательский сценарий может настраивать возвращаемые данные в соответствии с параметрами запроса, информацией о файлах cookie и использовать сценарий js для настройки возвращаемых данных.Рекомендуется генерировать различные тестовые данные на основе файлов cookie, чтобы можно было получить различные данные моделирования, контролируя значение файла cookie браузера.

if(cookie._type == 'error'){
    delay = 1000; //自定义响应时间
    header['Content-Type'] = 'application/json';//自定义 Header
    mockJson.errcode = 400;
}

if(cookie._type == 'empty'){
    httpCode = 400; //自定义 http 状态码
    mockJson.data.list = [];
}

Ложные ожидания

Ожидается, что разные HTTP-коды, заголовки HTTP и данные JSON должны быть возвращены в соответствии с разными параметрами запроса и IP-адресами.Ожидается, что Mock будет в основном использоваться для тестирования автоматизации пользовательского интерфейса и тестирования автоматизации внутреннего интерфейса.

image
image

постскриптум

YApi широко используется в Qunar.С момента его запуска, согласно статистике, каждую неделю поступают десятки тысяч фиктивных запросов, которые были высоко оценены многими коллегами.Чтобы позволить YApi обслуживать больше мелких партнеров и сделать YApi лучше Хорошо, теперь он открыт дляgithub.com/ymfe/yapi
Добро пожаловать, чтобы использовать и сделать ценные комментарии.

Категории