Первоначально опубликовано на 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.
ПРЕДПОСЫЛКИ
Прежде чем начать, вам необходимо иметь следующее:
Чтобы продолжить работу в редакторе, начните с клонирования репозитория 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