LoginSignup
1
0
@ipppppei

QiitaのAPIを題材にInsomniaを使ってみる

Posted at

前回、「Insomniaの3つのモードを触ってみる」という記事を書いたが、サンプルが最初からある程度作り込まれていたので、なぞってる感が強かった。
また、コンテナ環境が必要だったので人によってはハードルが高かったかもしれない。
今回はQiitaのAPIを題材にして、コンテナ不要、API仕様も作るところから確認して、ゼロベースで使い始めた場合どんな感じになるかを確認してみる。
なお前提として、Insomniaが既にインストール済みであるものとする。

プロジェクトの作成からAPI仕様の作成まで

Insomniaを立ち上げて、左サイドバーのPROJECTSの+を押して新規プロジェクトを作成する。
ここではQiitaAPIという名前にし、Localに保存する設定で作成した。
1710130897014.png

次にNew Documentをクリックしてドキュメントを作成する。
Create New Design Documentというダイアログが表示されるので、デフォルトのmy-spec.yamlのままCreateをクリックして空のSpecを作成する。

次にOpenAPIの仕様に従ってSpecを作成する。
（ただ、OpenAPIの仕様に関してはQiitaのOpenAPIのタグにまとまったいい感じの記事がいくつかあるので、仕様書をガッツリ読むよりはこちらをかい摘んで理解した方が学習効率は良さそう）
QiitaのAPIの仕様はここにまとまっている。
ここでは記事の取得（/api/v2/items, /api/v2/items/:item_id）と認証中のユーザー情報取得（/api/v2/items/authenticated_user）を実装してみる。
試しに書いてみたAPI仕様のYAMLが以下となる。

my-spec.yaml
openapi: 3.1.0
info:
  contact:
    name: hoge
  version: 0.1.0
  title: Qiita API
  description: | 
    Testing with Qiita API 
servers: 
  - url: https://qiita.com/api/v2
    description: Qiita API Endpoint  

security:
- Bearer: []

tags:
- name: qiita
  description: Qiita API
  externalDocs:
    url: https://qiita.com/api/v2/docs

paths:
  /items:
    get:
      description: Get items
      summary: Get items from Qiita
      tags: ["qiita"]
      operationId: "getitems"
      responses:
        "200":
          description: Succeeded to get items 
  /items/{item_id}:
    get:
      description: Get specific item
      summary: Get specific item from Qiita
      tags: ["qiita"]
      operationId: "getitemsid"
      responses:
        "200":
          description: Succeeded to get items 
      parameters:
      - name: item_id
        in: path
        required: true
        description: The transaction id.
        schema:
          $ref: "#/components/schemas/item_id"
  /authenticated_user:
    get:
      description: Get user info
      summary: Get user info from Qiita
      tags: ["qiita"]
      operationId: "getuserinfo"
      responses:
        "200":
          description: Succeeded to get user info 

components:
  schemas:
    item_id:
      type: "string"
      description: "Item ID"    
      example: "cc33db7772886b9d0946"
  securitySchemes:
    Bearer:
      type: http
      scheme: bearer
      description: Credentials or access token for API

問題なければ、以下のような感じで表示される。
1710134721819.png

下にNo lint problemと表示されれば記載については問題ない。
また、右の仕様の画面でGETのところから実際にAPIを発行することが出来る。
なお、認証に関しては設定していない場合、以下のように401が返ってくる。
1710134954152.png
認証部分はBearer（トークンによる認証）にしているので、トークンを取得してInsomnia上で設定しないと200にならない。
トークンはQiitaのアカウントがあればここから発行できる。
トークン発行後、InsomniaのAPI仕様の画面の上部にあるAuthorizeをクリックし、出てくるダイアログにトークンを貼り付けてAuthorizeをクリックすると認証した状態になる。（ダイアログは自動で閉じないのでCloseをクリックして閉じる）
その状態で再度実行すれば成功するようになる。
1710135245902.png

Collectionによる動作確認

先ほどまでの手順で動作確認は出来たが、以下のようなことが出来なかった。

  • item_idを変えての動作確認
  • 認証トークンの保持

ここではInsomniaのCollectionという機能を利用してよく投げるAPIのセットを定義する。
Collectionは自動生成機能があるので、まずこれを使ってベースとなるCollectionを作成する。
SPECの右のギアマークをクリックし、Generate collectionをクリックする。
1710135822368.png

すると、作成したリクエストごとに雛形が作成される。
ただ、可変部が_.base_urlや_.item_idといった名前で変数化されており、このままでは利用できない。
1710135943887.png

これらは環境変数として定義できるため、それぞれ定義する。
Generate collectionでCollectionを作成すると、自動的に環境変数の箱が定義されるので、そこに追加する。
左上のBase environmentの横のギアマークをクリックする。
1710137337361.png

環境変数の一覧が表示されるが、ここでOpenAPI env qiita.comというのがShared（他のプロジェクトメンバーと共有される）な環境変数として用意されていることがわかる。
これがGenerate collectionで追加された環境変数である。
この中の、scheme, base_path, hostは全環境で共通化できるのでコピーしてBase Environment（全Collectionで共通の環境変数）に記載する。
またbase_urlはそれらの環境変数で定義できるため、環境変数を使って定義する。

Base Environment
{
	"scheme": "https",
	"base_path": "/api/v2",
	"host": "qiita.com",
	"base_url": "{{ _.scheme }}://{{ _.host }}{{ _.base_path }}",
}

なお、{{...}}の部分は._と入力すると候補が出てくるので、こういう書き方をしなくてもインタラクティブに入力することも出来る。
また、トークンは共有しない方がいいので、Privateな環境変数を別で作成する。
Base Environmentの右横の+をクリックし、Privateな環境変数の箱を作成し、myenvとリネームする。
中には以下のようにトークンとitem_idを定義する。

{
	"bearerToken": "567xxxxxxxxxxxxxxxxxx",
	"item_id": "bf1a1aa9f2a609864e7e"
}

これでmyenvを選択してGET _.base_url/authenticated_userにアクセスするリクエストを投げると以下のように200を取得することが出来る。
1710138610456.png

テストの作成

最後にテストを作成する。上部のSPEC COLLECTION TESTSの並びからTESTSをクリックし、画面遷移後にNew test suiteをクリックするとテストスイートが作成できるので、Qiita Test Suiteという名前にリネームする。
テストスイート作成後、+ New test をクリックするとテストの雛形が作成される。

1710204883870.png
Select a requestをクリックすると、Collection内のリクエストが選べるので、テスト対象を指定する。
ここではCollection内のリクエストそれぞれに対応する3つのテストを用意する。

1710204955957.png

テストを実行すると、おそらく全て問題なくPassするはずだ。
1710205010270.png

試しに環境変数myenv内のbearerTokenを不正なものに書き換えて実行する。
1710205094705.png

失敗した。
なお、失敗した要因を確認したい場合はデバッグウィンドウを表示させるとよい。
View->Toggle DevToolsをクリックすると、右にChromeのデバッグウィンドウが表示される。
1710206132353.png

console.log()を使うとConsoleのところに任意の文字列を出したりすることが出来る。
expect()の前にconsole.log()でresponseの中身を除くようコードを変更する。

const response1 = await insomnia.send();
console.log(response1);
expect(response1.status).to.equal(200);

実行した結果がこちら。
1710206394655.png

401の詳細が確認できた。

ということで、Insomniaを気軽に触って体験してみたい人は、とりあえずInsomniaをインストールして、身近なAPIを題材に触ってみると良いと思う。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0