ファンタラクティブのエンジニアの 太田 です。
OpenAPIスキーマで定義したレスポンスに対するexampleをmswとstorybookでも使用してAPIスキーマで想定したレスポンスをStorybookで確認できるようにする試みについて紹介します。
やりたいこと
OpenAPIスキーマで定義したexamplesを参照してmswでAPIモックを定義、定義したAPIモックをstorybookで使用
嬉しいこと
APIで想定したレスポンスに対してフロントの挙動をStorybook上で確認できるのでAPIとフロントの認識のずれが改善されます。
エラーの表示や、権限によるUIの出し分けなど大変な確認を、APIスキーマで定義した内容を網羅する形でStorybook上で確認できます。
逆にAPIスキーマに定義されていないものはStoryを作らないので、確認するべきものはすべてAPIスキーマで定義しましょうということになります。
実装
※ 大雑把なコードでたぶん動きませんので参考までに
OpenAPIスキーマを定義する
今回はexamplesが重要なのでexamplesをしっかり定義しましょう。
openapi-examples-validator などのツールを使用してスキーマとexamplesの乖離がないことを確認するとよいかもしれません。
定義したexamplesをTypeScriptで参照できるようにするため、swagger-cliを使用してjsonに変換します。[1]
swagger-cli -r -t json -o ./openapi.json bundle ./openapi.yml
MSWを定義する
OpenAPIのexamplesを参照し、エンドポイント毎にモックを作ります。
Storybookを定義する
定義したMSWのハンドラーを使用し、storyを作成します。
あとがき
Storybookでやれることが増えてきていてすごいなーと思いつつ、Story作るのなかなか大変ですね。
ページやAPIを呼ぶコンポーネントはAPIスキーマで定義したexamplesの関するStory、その他のコンポーネントで最大文字数などUIに関するstoryを作成するくらいがしっくりきています。
-
jsonに変換しつつ$refをすべて展開したいのでyaml-loaderは使用せずswagger-cliを使用したjsonへの変換を好んでやっています ↩︎
ユーザーファーストなサービスを伴に考えながらつくる、デザインとエンジニアリングの会社です。エンジニア積極採用中です！hrmos.co/pages/funteractive/jobs
Discussion