Swaggerでyamlデータをもらった後に、モックの作成

Swagger.ymlを受け取った後に、APIのモックサーバーを作成するまでのメモを残します。

↓ こちらのサイトを参考にさせていただきました！

[開発効率を上げる！Swaggerで作るWEB APIモック](https://qiita.com/joooee0000/items/2d5935ec30ec73555eb2)


###①Swagger Editorの左エディタ画面に、swagger.ymlを載せる。

Swagger Editorはこちらから！ → [Swagger Editor](https://editor.swagger.io/)

デフォルトで黒いエディタにSwaggerの記述がしてありますので、出来あがったSwagger.ymlの内容をそのままコピペして貼り付けます。

私の場合、実案件のSwaggerで表示を試したかったので、
localhost用に少し記述を変えています。


###②ローカル環境用に`host`を`"localhost:3001"`、`basePath`を`"/"`に変更

下の画像の通りです！
`host`をlocalhostにしたり、basePathも変更必要だったので色々変更しました。

![1.png](https://qiita-image-store.s3.amazonaws.com/0/327745/335c9a75-1a05-0b54-d070-4d99c780cfb0.png)


###③「Generate Server」からサーバーを選んでエクスポート

左上ナビバーにある「Generate Server」をクリックして、エクスポートしたいタイプを選択した上でローカルにファイルを落とします。
私はjavascript以外全く無知なので笑、「nodejs-server」を選択しました。

![2.png](https://qiita-image-store.s3.amazonaws.com/0/327745/54de0dc4-2135-0aa6-5716-ba865d52173d.png)

「nodejs-server-server」フォルダを開くと、`./api/swagger.yaml`はエディタにコピペした記述と全く同じものが入っております！
「service」ディレクトリにある`AdminService.js`も、Swaggerに記述した通りのデータや、モックで返してくれるExampleデータまで入ってます！

###④ローカルに落としたSwaggerディレクトリで`$ yarn install` & `$ yarn start`

私はSwaggerのhostに`localhost:3001`と指定しましたので、
http://localhost:3001/docs/
を開くとSwagger Editorの右側に表示されていたようなドキュメントが確認できます。

![3.png](https://qiita-image-store.s3.amazonaws.com/0/327745/b80963dd-971f-3031-9023-14efdc614610.png)

![4.png](https://qiita-image-store.s3.amazonaws.com/0/327745/300bc396-4ffe-c19a-3b3c-aa08538fa7c9.png)

「Curl」内の記述をターミナルで叩くと、ちゃんとレスポンスされているのが確認できます。

```text
`curl -X GET --header 'Accept: application/json' --header 'Authorization: 1' 'http://localhost:3001/admin/client'`
```

###⑤下のようなエラーが出てしまっても大丈夫！`cors`ライブラリをインストールしましょう！

モックをローカルサーバーで作成出来たことだし、いざ非同期処理のテストをしてみよう！
と思い、下のように記述して動作を試してみました。

（試したかったアプリケーションがReactを使ってますので、axiosを使ってAPIを呼び出しています。）

下は抜粋です。


```javascript
import axios from 'axios'

export const handleFetchProjects = Id => async dispatch =>
  {
    const response = await axios.get(`http://localhost:3001/projects/${Id}`)
    dispatch(actions.fetchProjects(response.data, response.status))
  }
```

これでよしよし、と思いきや、以下のようなエラーが出て戸惑いました。。

```
Access to XMLHttpRequest at 'http://localhost:3001/admin/*****' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
```

エラーを解消すのに参考にさせて頂いたサイトがこちらです！

参考サイト
[Swaggerで自動生成したnodejs-serverにCORSを許可する方法](https://qiita.com/watanabeyt06-w/items/a164b1d31a0e156a2e68)

swaggerディレクトリで`cors`ライブラリをインストールし、参考サイト通りindex.jsに`cors`のimportと、`app.use(cors());`を該当箇所に記述してあげます。

- `$ npm install cors --save`
- `var cors = require('cors');`
- `app.use(cors());`

そして、自分の無知故に、jsの記述も違っていたようです。
headerも渡してあげる必要があったので、以下のように書き換えました。

```javascript
export const handleFetchProjects = Id => async dispatch =>
  {
    const response = await axios.get(`http://localhost:3001/projects/${Id}`, {
      headers: { Authorization: '1' }
    })
    dispatch(actions.fetchProjects(response.data, response.status))
  }
```

ローカル環境でSwagger-uiでモックできました！
特にjsonファイルに変換したり等の操作も必要なかったので、便利そうです。

###⑥レスポンスのデータを少し改造したい…！

仮のデータを返してくれるのは優秀なのですが、プルリク送ったら
「削除した日にちが`null`の時はカラで表示にして、日付が入っていたら表示させたい」と修正依頼がありました。
Exampleデータは１種類のデータをループさせているだけなので、２つ以上の比較ができません…！
なので、`./service/****.js`を直接いじります！
該当箇所を見つけるのは、ペーな私は時間が掛かってしまいましたが、以下のような記述が見つかるはずです。

```javascript
var examples = {};
examples['application/json'] = [ {
  ...
} ]
```

examplesのobjectを例えば100個にしてみたり、依頼の通り`null`と日付で何通りもダミーデータを作ってみたり、これでより良いモックになってくれました！


【終えて】
初めてswagger触ったので、これから色々触っていきます！
モックのツールはきっと他にもあるはず…！