В течение прошлого года я работал с ng-apimock, сервером-имитатором ответов JSON с веб-интерфейсом (показанным выше), который позволяет вам выбрать ответ (сценарий) для конечной точки.
Начиная с последнего обновления (1.4.7), вы можете использовать его как для конечных точек REST, так и для GraphQL! 🔥
Что такое макеты на основе сценария?
Вы определяете один или несколько ответов (сценариев) для конечной точки (например, /api/projects. Ответ описывается как сценарий (например: allProjects, emptyList, 1project). Когда эта конечная точка вызывается, она возвращает выбранный сценарий: вы получаете Ответ в формате JSON с выбранными вами данными! 🎉
Пример пожалуйста
Скажем, вы разрабатываете новый компонент, табличное представление с некоторыми проектами. Но конечная точка api еще не готова ... Лентяй, тебе нужно подождать, пока api будет готов ...? Больше нет!
Вы определяете файл конечной точки:
Сверху вниз выражение определяет конечную точку, которую будет вызывать интерфейс, в данном случае /projects. Он использует метод GET. Определите уникальное имя, чтобы легко идентифицировать эту конечную точку в веб-интерфейсе (см. Ниже).
Затем определите ответы (сценарии):
- вернуть все проекты (
default) - пустой список.
Ответ allProjects определяется в отдельном file, и это как раз тот ответ, который вы получите от API.
Ответ emptyList возвращает пустой массив (определенный с помощью встроенного объекта ответа data).
Также можно определить delay для каждого ответа, чтобы вы могли проверить, вращаются ли ваши счетчики во время запроса. 😉
Итак, по умолчанию вы получаете список со всеми данными проекта. Хороший! 💪
Компонент работает… Верно? Ну а что будет, если проектов еще нет? Будете ли вы отображать только таблицу с заголовками и без строк? 🤔 Или вы хотите необычное сообщение типа Привет, пока нет проектов. «Создать одну »? 😎
Затем вам, возможно, придется удалить данные из базы данных, обслуживаемой api. И затем вам нужно вставить их снова. 😡😡 И конечная точка создания проекта еще не реализована 😡😡😡… Или настройте свой код, чтобы он возвращал пустой массив… 🤬
Нет! Вы просто выбираете emptyList сценарий в конечной точке getProjects в веб-интерфейсе. 😀
Когда настоящая конечная точка api будет готова, вы установите для сценария значение passThrough, чтобы он попал в фактический api.🤩
Хорошо, звучит хорошо! Дай мне это хорошее !!!
Запустить npm install ng-apimock -D (сохранить как devDependency).
Прочтите инструкцию по установке здесь: https://github.com/mdasberg/ng-apimock
Хотя этот ng-apimock был создан для интеграции с Protractor, вам не нужно его использовать. Кроме того, название «ng» намекает на использование только Angular, но это не так! Я использую его как для React, так и для Angular.
Бонусные подсказки
Для настройки файлов определения конечных точек и создания фиктивных данных требуется некоторое время. Но хорошая новость заключается в том, что вы можете использовать эти макетные файлы и для других целей, например:
- интеграционные тесты (я использую для этого cypress.io, попробуйте! Лучшая альтернатива Protractor / selenium)
- Компоненты сборника рассказов, отображающие фиктивные данные!
- понимание API и данных для других разработчиков
- разработчики и / или тестировщики могут легко проверить, как компонент / приложение реагирует на различные типы сценариев, такие как ошибки (
statuscodes, например, 401, 404, 500), пустые списки, списки с разбивкой на страницы и т. д.
Поддержка Mocking Easy GraphQL
Если вы не знаете, что такое GraphQL, имхо, это лучшая альтернатива REST. REST 2.0, как его называют некоторые. Узнайте больше на https://www.howtographql.com/
В то время как конечные точки REST имеют большое количество инструментов, инструменты GraphQL (особенно для имитации различных ответов) не так распространены (пока). Однако с ng-apimock вы также можете использовать его для конечных точек GraphQL. Вы просто устанавливаете конечную точку (выражение) на /graphql и добавляете новое body выражение сопоставления (регулярное выражение):
В этом случае query projects будет соответствовать телу вашего внешнего запроса. Вы можете смешивать и сопоставлять конечные точки REST и GraphQL в одном инструменте! Счастливые дни! 🎉
Большое спасибо Мише Дасберг (https://github.com/mdasberg) и участникам за создание этого замечательного инструмента! Пришло время узнать об этом большему количеству людей, так что расскажите об этом! Спасибо!
