Первоначально опубликовано на https://snyk.io/blog/how-to-mock-api-server-javascript/

Автоматически находите и устраняйте уязвимости в вашем коде, открытом исходном коде и контейнерах. Зарегистрируйтесь бесплатно на https://snyk.co/medium

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

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

В этой статье вы узнаете больше о фиктивных API-серверах, инструментах, которые можно использовать для создания фиктивных API, о том, как вы можете использовать их для ускорения разработки и тестирования, а также о том, как настроить простой фиктивный сервер.

Что такое фиктивный API-сервер?

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

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

Мок-серверы API можно использовать в различных сценариях, включая следующие:

  • Разработка: серверы фиктивных API временно устраняют зависимость между внешними и внутренними командами, позволяя им работать, разрабатывать и тестировать свои компоненты независимо друг от друга.
  • Тестирование. Серверы фиктивных API облегчают тестирование, важнейшую часть разработки программного обеспечения, позволяя команде внешнего интерфейса тестировать свои функции, не дожидаясь, пока команда внутреннего интерфейса разработает полнофункциональный API. Мок-серверы API также предотвращают загрязнение реального API тестовыми данными, поскольку все тестовые вызовы выполняются на фиктивном сервере API, а не на реальном.
  • Внешние компоненты: серверы Mock API также помогают имитировать внешние зависимости при использовании таких инструментов, как Storybook, для демонстрации функций внешнего интерфейса.

Лучшие практики для фиктивных API

При создании фиктивного API-сервера следует помнить о следующих рекомендациях:

  • Фиктивное API должно поддерживать ту же схему и интерфейсы, что и реальное API. Это делает ответы более реалистичными.
  • Если вашему приложению требуются внешние зависимости, ваш фиктивный API также должен имитировать эти зависимости.
  • Имитация API должна поддерживать переадресацию запросов. Это гарантирует, что вы сможете постепенно переходить от фиктивных ответов к реальным ответам, когда настоящий API будет разработан.
  • Имитационный API должен уметь имитировать непредвиденные ошибки, низкую производительность и недопустимые действия пользователя. Эта практика гарантирует, что ваши приложения смогут правильно обрабатывать эти сценарии.

Инструменты имитации API

Существует множество инструментов, которые могут помочь в создании серверов Mock API. Некоторые из них включают:

  • Mock Service Worker (MSW): Mock Service Worker — это библиотека имитации API, которая использует Service Worker API. Этот API позволяет MSW перехватывать фактические запросы и возвращать фиктивные ответы, выступая в качестве прокси-сервера. Перехват запросов происходит на сетевом уровне, что гарантирует, что ваше приложение не будет знать, что ответы исходят от фиктивного API.
  • Postman: Postman — это платформа для создания, использования, тестирования и документирования API. Postman также позволяет пользователям создавать фиктивные серверы API, которые возвращают сохраненные фиктивные данные. Postman возвращает фиктивные ответы, сопоставляя конфигурацию запроса с сохраненными примерами, и отвечает данными, которые наиболее точно соответствуют конфигурации. Postman предлагает интерактивный графический интерфейс, который делает настройку фиктивного сервера Postman относительно простой.
  • Mirage JS: Mirage JS — это библиотека имитации API, которая позволяет вам создавать и тестировать приложение JavaScript, не завися от каких-либо серверных служб. Mirage JS упрощает создание динамических сценариев, делая ваш фиктивный API более реалистичным. Благодаря способности создавать динамические сценарии и базе данных в памяти Mirage JS обеспечивает наибольшую гибкость для создания фиктивных серверов API.

Создание фиктивного API-сервера с помощью Mirage JS

В этом разделе вы узнаете, как создать простой фиктивный API-сервер с помощью Mirage JS.

ПРЕДПОСЫЛКИ

Прежде чем начать, вам необходимо иметь следующее:

  • В вашей системе установлен Node.js версии 16 или выше.
  • IDE на ваш выбор.
  • Базовые знания React.js.

Чтобы продолжить работу в редакторе, начните с клонирования репозитория GitHub руководства.

НАСТРОЙКА МАТЕРИАЛЬНОГО СЕРВЕРА

Выполните следующие команды на своем терминале, чтобы установить необходимые зависимости и запустить сервер разработки:

npm install
npm run start

Вы должны увидеть вращающийся виджет и никаких функций в приложении. Это связано с тем, что ваше приложение пытается получить данные из API, который не готов. Чтобы ускорить процесс разработки, вы создадите фиктивный сервер.

В вашем каталоге src создайте файл с именем mock.js и добавьте следующий блок кода:

//mock.js
import { createServer } from "miragejs";
 
const createMockServer = function () {
 let server = createServer();
 
 return server;
};
 
export default createMockServer;

В блоке кода выше вы импортировали createServer из miragejs. Эта функция запускает сервер Mirage с заданным объектом конфигурации. Объект конфигурации может содержать такую ​​информацию, как различные маршруты, которые будет обрабатывать ваш сервер, макет базы данных в памяти и пространство имен.

Функция createMockServer отвечает за создание и возврат экземпляра.

СОЗДАНИЕ ИМИТАЦИОННОЙ БАЗЫ ДАННЫХ В ПАМЯТИ

Далее вы создадите простую фиктивную базу данных, используя слой данных Mirage для хранения и возврата данных.

Обновите файл mock.js, чтобы он соответствовал блоку кода ниже:

//mock.js
import { createServer, Model } from "miragejs";
 
const createMockServer = function () {
 let server = createServer({
   models: {
     todos: Model
   },
 });
 
 return server;
};
 
export default createMockServer;

В исправленном блоке кода вы также импортируете Model, базовое определение для Модели Mirage, из miragejs.

Затем вы передали createServer объект конфигурации в качестве аргумента. Внутри объекта конфигурации для свойства models установлено значение object, а внутри объекта свойства models для свойства todos установлено значение model. Это укажет Mirage создать пустую коллекцию todos в своей базе данных в памяти.

ЗАПОЛНЕНИЕ БАЗЫ ДАННЫХ В ПАМЯТИ

Затем вы вручную добавите некоторые данные в базу данных в памяти, используя хук seeds. Хук seeds позволяет вам заполнить Mirage некоторыми начальными данными, чтобы у вашего фиктивного API были данные для рендеринга при первом запуске приложения.

Чтобы заполнить вашу базу данных некоторыми начальными данными, добавьте следующий блок кода под свойством models в вашем объекте конфигурации createServer:

//mock.js
   seeds(server) {
    server.create("todo", {
      id: 1,
      title: "Reach out to a friend",
      completed: true,
    });
 
    server.create("todo", {
      id: 2,
      title: "Make breakfast",
      completed: true,
    });
 
    server.create("todo", {
      id: 3,
      title: "Text John Doe",
      completed: false,
    });
  },

В приведенном выше блоке кода вы добавили хук seeds в свой объект конфигурации. Хук seeds принимает экземпляр сервера в качестве аргумента.

Затем вы добавили некоторые данные в свою базу данных в памяти, вызвав метод create на экземпляре сервера. Метод create принимает два аргумента: имя в единственном числе (например, «todos» становится «todo») коллекции, в которую вы хотите сохранить данные, и данные, которые вы хотите сохранить.

ОПРЕДЕЛЕНИЕ ОБРАБОТЧИКОВ МАШИННЫХ МАРШРУТОВ

Далее вам нужно определить обработчики маршрутов с помощью хука routes. Хук routes позволяет указать обработчики маршрутов для каждого доступного пути и HTTP-запроса.

Добавьте следующий блок кода в объект конфигурации createServer непосредственно под хуком seeds, чтобы добавить обработчики маршрутов для вызовов API:

routes() {
    this.namespace = "api/todos";
 
    this.get("/", (schema, request) => {
      return schema.todos.all().models
    });
  },

В приведенном выше блоке кода вы использовали хук routes для определения глобального пространства имен для всех обработчиков маршрутов (api/todos), чтобы вам не приходилось повторять его в каждом обработчике маршрутов.

Затем вы определили обработчик маршрута GET с методом get, который принимает путь и обратный вызов. В обратном вызове приложению предоставляется доступ к аргументу schema, который используется для доступа к вашей базе данных в памяти, и аргументу request, который обеспечивает доступ к телу запроса.

Наконец, вы вернули все todo в базу данных в памяти, вызвав метод all для schema.todos. Вы можете получить доступ к модели в памяти, связав ее имя с аргументом schema. Метод all возвращает объект Collection с двумя свойствами, modelName и models.

Свойство modelName — это имя вашей модели, а свойство models — это массив, содержащий ваши заполненные данные.

Определите обработчик маршрута POST, добавив следующий код в хук routes:

this.post("/new", (schema, request) => {
       let attrs = JSON.parse(request.requestBody);
       attrs.completed = false;
 
       return schema.todos.create(attrs);
   });

В приведенной выше функции обратного вызова вы получаете и анализируете тело запроса из объекта запроса. Затем вы устанавливаете для свойства Completed значение false, потому что по умолчанию новые задачи не должны быть завершены. Mirage автоматически присваивает уникальный id каждой новой задаче, увеличивая id последней задачи, которая изначально была помещена в базу данных в памяти. Наконец, вы использовали метод «создать», чтобы добавить новую задачу в базу данных.

Затем определите обработчик маршрута PATCH, добавив следующий код в ваш хук routes:

this.patch("/:id", (schema, request) => {
       let newAttrs = JSON.parse(request.requestBody);
       let { id } = request.params;
       let todo = schema.todos.find(id);
       return todo.update(newAttrs);
   });

В приведенной выше функции обратного вызова вы извлекаете и анализируете тело запроса из объекта запроса. Затем вы деструктурируете свойство id из объекта params, прикрепленного к телу запроса. Используя метод find, вы запрашиваете в оперативной базе данных задачу с соответствующим id. Наконец, используя метод update, вы обновляете todo.

Определите обработчик маршрута DELETE, добавив следующий код в ваш хук routes:

this.delete("/:id", (schema, request) => {
       let { id } = request.params;
       return schema.todos.find(id).destroy();
   });

В этой функции вы деструктурировали свойство id из объекта params, прикрепленного к телу запроса. Затем, используя метод find, вы запросили в базе данных в памяти задачу с соответствующим id и вызвали метод destroy, чтобы удалить ее из базы данных в памяти.

Готовый фиктивный сервер должен выглядеть так:

import { createServer, Model } from "miragejs";
 
const createMockServer = function () {
 let server = createServer({
   models: {
     todos: Model,
   },
 
   seeds(server) {
     server.create("todo", {
       id: 1,
       title: "Reach out to a friend",
       completed: true,
     });
 
     server.create("todo", {
       id: 2,
       title: "Make breakfast",
       completed: true,
     });
 
     server.create("todo", {
       id: 3,
       title: "Text John Doe",
       completed: false,
     });
   },
 
   routes() {
     this.namespace = "api/todos";
 
     this.get("/", (schema, request) => {
       return schema.todos.all().models;
     });
 
     this.post("/new", (schema, request) => {
       let attrs = JSON.parse(request.requestBody);
       attrs.completed = false;
 
       return schema.todos.create(attrs);
     });
 
     this.patch("/:id", (schema, request) => {
       let newAttrs = JSON.parse(request.requestBody);
       let id = request.params.id;
       let todo = schema.todos.find(id);
       return todo.update(newAttrs);
     });
 
     this.delete("/:id", (schema, request) => {
       let id = request.params.id;
       return schema.todos.find(id).destroy();
     });
   },
 });
 
 return server;
};
 
export default createMockServer;

Наконец, импортируйте функцию createMockServer в файл App.js и запустите фиктивный сервер, вызвав функцию createMockServer в файле App.js.

Например:

//app.js
import createMockServer from "./mock";
 
createMockServer();

Если вы откроете свое приложение React, вы увидите, что приложение списка дел отображает заполненные данные из вашего фиктивного API.

Теперь вы можете протестировать свое приложение для работы с задачами так же, как и с реальным бэкэнд-API.

Завершение фиктивных API-серверов

В этой статье вы узнали о фиктивных API-серверах, их актуальности, передовых методах их создания и инструментах, которые могут помочь вам в их создании. Вы также узнали, как создать простой фиктивный API-сервер с помощью Mirage JS.

Включение фиктивных API-серверов в ваш процесс разработки ускорит вашу разработку и позволит вам работать независимо, что приведет к улучшению рабочего процесса.

Первоначально опубликовано на https://snyk.io/blog/how-to-mock-api-server-javascript/ Автоматический поиск и устранение уязвимостей в вашем коде, открытом исходном коде и контейнерах. Зарегистрируйтесь бесплатно на https://snyk.co/medium