モックに関するドキュメントを拡充する

[KentaHizume]

概要

現在、サンプルアプリケーションへのモックの導入方法および、活用方法に関するドキュメントが存在しない。
Consumer にはViteのサーバーオプションを用いたモックが実装されており、
AdminにはMock Service Workerを用いたモックが実装される予定なので、これらについて解説する。

完了条件

• サブissueがすべて完了すること

[KentaHizume]

vue-routerの動的ルートを使っているコンポーネントは、
下記のように準備してからマウントする必要がある。

https://test-utils.vuejs.org/guide/advanced/vue-router.html#Using-a-real-router-with-Composition-API

    router.push({ name: 'catalog/items/edit', params: { itemId: 1 } });
    await router.isReady()
    const wrapper = mount(ItemsEditView, {
      global: { plugins: [pinia, router, customErrorHandler] }});

[KentaHizume]

AzureADB2Cサンプルに導入を試すことで、
npm run mock で起動してワーカーの起動を確認するまでの手順は下記で問題ないことを確認した。

モックモードの設定 {#top}

Mock Service Worker を用います。

本章で登場するフォルダーとファイルは以下の通りです。

<workspace-name>
├ public/
│ └ mockServiceWorker.js -- ワーカースクリプト
│ mock/
│ ├ data/ ----------------- データの置き場
│ ├ handlers/ ------------- ハンドラーの置き場
│ ├ browser.ts ------------ ブラウザー用のサーバーを起動するためのスクリプト
│ └ handlers.ts ------------ ハンドラーを集約するためのファイル
├ src/
│ └ generated/
│   └ api-client/ --------- openapi-generator で自動生成したコード
│ └ main.ts --------------- アプリケーションのエントリーポイント
├ .env.mock --------------- モックモードの環境設定ファイル
├ package.json ------------ ワークスペースのメタデータ、依存関係、スクリプトなどを定義するファイル
└ vite.config.ts ---------- Vite の設定ファイル

Vite の設定 {#vite-settings}

    "mock": "vite --mode mock",

.env.mock を作成します。

VITE_XXX_YYY=

サーバーが起動できることを確認します。
API コールの部分ではエラーが出力されます。

npm run mock

Mock Service Worker の設定 {#msw-settings}

ターミナルを開き、対象プロジェクトのワークスペースフォルダーで以下のコマンドを実行します。

npm install msw

続けて以下のコマンドを実行し、初期設定をします。

npx msw init ./public --save

mockServiceWorker.js が作成されます。
package.json に正しいフォルダーが指定されていることを確認してください。

mockServiceWorker.js はバージョン管理対象にしてください。

  "msw": {
    "workerDirectory": [
      "public"
    ]
  },

browser.ts を作成します。

import { setupWorker } from 'msw/browser';
import { handlers } from './handler';

export const worker = setupWorker(...handlers);

handlers.tsを作成します。
ハンドラーの実装は別途行うため、現時点では空で構いません。

export const handlers = []; // 後で実装します。

アプリケーションのエントリーポイントで、
モックモードで起動した場合に Mock Service Worker を立ち上げるように設定します。
エントリーポイントで下記のように設定してください。

async function enableMocking(): Promise<ServiceWorkerRegistration | undefined> {
  const { worker } = await import('../mock/browser');
  return worker.start({
    onUnhandledRequest: 'bypass',
  });
}

if (import.meta.env.MODE === 'mock') {
  try {
    await enableMocking();
  } catch (error) {
    console.error('モック用のワーカープロセスの起動に失敗しました。', error);
  }
}

const app = createApp(App);

再度下記のコマンドで Vite のサーバーを立ち上げ、ワーカープロセスが起動していることを確認します。
開発者ツールに [MSW] Mocking enabled. のメッセージが表示されていれば、設定は成功です。

npm run mock

ハンドラーの実装 {#implement-handler}