Текущие инструменты взаимодействия с разработчиками значительно уменьшают связь требований к интерфейсу и серверной части, начиная с их тестовых наборов и заканчивая симуляцией e2e.
К сборнику рассказов прилагается шедевр по фронтенд-разработке, позволяющий расширить границы взаимодействия приложений.
Недавно я создал пример приложения, включающего потребление API, и один из вопросов, который нам нужно обдумать, заключается в том, как постоянно потреблять ресурсы, которых у нас нет в наличии, такие как платежные шлюзы, например, когда некоторые из них имеют только производственную среду.
Я выбираю Ionic Framework, чтобы ускорить разработку пользовательского интерфейса с помощью базовых компонентов, в том числе для создания хорошего дизайна с известным шаблоном. Итак, давайте закодируем:
Если у вас не установлен Ionic CLI, выполните эту команду установки
npm install -g @ionic/cli
Итак, введите ionic start, выбрав тип проекта reactjs, и дождитесь завершения процесса.
Давайте установим сборник рассказов в наш проект, используя основные принципы работы с Официальными документами.
И давайте создадим наши первые файлы Stories, важные для создания декоратора провайдера, чтобы позволить Ionic совместно использовать базовые файлы стилей. PS. мы можем организовать этот импорт лучше, но это не является текущей целью
Не беспокойтесь об этом образе файла, я поделюсь репозиторием в конце поста.
Давайте добавим внешний ресурс API с хуками
npm i axios — сохранить
И давайте создадим наш файл хуков
Давайте расширим сборник рассказов, добавив насмешливую библиотеку, чтобы переопределить потребление API и создать пользовательский интерфейс независимо от того, что они вызывают.
npm i storybook-addon-manual-mocks — save-dev
и добавьте на .storybook/main.ts аддон
«storybook-addon-manual-mocks»,
И давайте создадим папку __mocks__ в папке хуков, чтобы переопределить их реализацию.
Мы создали сон, чтобы эмулировать поведение загрузки API.
А при запуске команды yarn storybook
Теперь у компонента есть фиктивный вызов API. Это простой пример, но он показывает хорошие возможности этого инструмента. Надеюсь, поможет!
Вы можете проверить образец репозитория здесь
