次の方法で共有


ページ モックを使用したテスト モジュール

この記事では、ページ モックを使用してモジュールをテストする方法について説明します。

一部のモジュールは、他のモジュールとやりとりするために構築されています。 ページ モックを使用して、ローカルの開発環境でそれらのモジュールを一緒にテストできます。

ページ モック ファイルは /src/pageMocks ディレクトリの下に格納されます。 ファイルは URL https://localhost:4000/page?mock=PAGE_MOCK を使用して読み込めます。PAGE_MOCK は、モックファイルのファイル名ですが、.json ファイル拡張子は付けることはできません。

新しいページ モックを作成する

新しいページ モックを作成するには、/src/pageMocks/campaign-page.json などの /src/pageMocks ディレクトリの下に空白の .json ファイルを作成します。

次の例では、ページに同じモジュールのインスタンスを 2 つ追加し、各インスタンスに異なるモック データを使用するページ モックを示しています。

{
    "exception": null,
    "pageRoot": {
        "id": "core-root_0",
        "typeName": "core-root",
        "modules": {
            "body": [
                {
                    "id": "default-page_0",
                    "typeName": "default-page",
                    "modules": {
                        "primary": [
                            {
                                "id": "ProductFeature__0",
                                "typeName": "product-feature",
                                "config": {
                                    "imageAlignment": "left",
                                    "buttonText": "Buy Now",
                                    "productIds": "68719490621"
                                }
                            },
                            {
                                "id": "ProductFeature__1",
                                "typeName": "product-feature",
                                "config": {
                                    "imageAlignment": "right",
                                    "productIds": "68719498121",
                                    "buttonText": "Buy Now"
                                }
                            }
                        ]
                    }
                }
            ]
        }
    },
    "renderingContext": {
        "gridSettings": {
            "xs": {
                "w": 767
            },
            "sm": {
                "w": 991
            },
            "md": {
                "w": 1199
            },
            "lg": {
                "w": 1599
            },
            "xl": {
                "w": 1600
            }
        },
        "staticContext": {
            "staticCdnUrl": "/_scnr/"
        },
        "locale": "en-us"
    },
    "statusCode": 200
}

各ページでは、"HTML ヘッド"、"本文の開始"、"本文"、および "本文の終了" というスロットでページ HTML 構造を制御するルート (上記の例では core-root) が定義されています。 次に、本文にはページ コンテナー モジュールが必要です。 この例では、default-page ページ コンテナーが使用されます。

モジュール セクションには、ページ内に含まれるモジュールが名前付きスロットで並べられています。 default-page ページ コンテナーにはプライマリという名前のスロットがあります。 このコンテナーは、内部に含まれるモジュールのレイアウトを処理します。 この例では、productFeature モジュールは 1 つの行に 2 回表示され、それぞれ config セクションで定義されたデータと共に表示されます。

前の例では、次の URL を使用してアクセスできます: https://localhost:4000/page?mock=campaign-page

コンテキスト モックを表示する

renderingContext ノードは、モジュールが this.props.context.request オブジェクトを通じてアクセスできる追加のモック データを提供します。 このデータには、ブートストラップ グリッド ブレークポイント、ロケール、およびユーザー コンテキストが含まれます。 詳細については、要求プロパティ オブジェクトを参照してください。

サインイン状態のシミュレーション

モジュールによっては、ユーザーが適切なアクションを実行する前に、ユーザーのサインイン状態を確認する必要があるロジックを持っている場合があります。 通常、モジュールは this.props.context.request.user オブジェクトから状態を取得します。 企業と顧客間 (B2C) へのサインインは開発環境でサポートされていないため、次の例に示すように、ユーザー ノードを使用してユーザー オブジェクトをモックできます。

{
    "exception": null,
    "pageRoot": {
        "id": "core-root_0",
        "typeName": "core-root",
        "modules": {
            "body": [
                {
                    "id": "default-page_0",
                    "typeName": "default-page",
                    "modules": {
                        "primary": [
                            {
                                "id": "ProductFeature__0",
                                "typeName": "product-feature",
                                "config": {
                                    "imageAlignment": "left",
                                    "buttonText": "Buy Now",
                                    "productIds": "68719490621"
                                }
                            }
                        ]
                    }
                }
            ]
        }
    },
    "renderingContext": {
        "gridSettings": {
            "xs": {
                "w": 767
            },
            "sm": {
                "w": 991
            },
            "md": {
                "w": 1199
            },
            "lg": {
                "w": 1599
            },
            "xl": {
                "w": 1600
            }
        },
        "staticContext": {
            "staticCdnUrl": "/_scnr/"
        },

        "user": {
            "token": "<TOKEN>",
            "isAuthenticated": true,
            "signInUrl": "https://dev.fabrikam.com/fedev/_msdyn365/signin",
            "signOutUrl": "https://dev.fabrikam.com/fedev/_msdyn365/signout",
            "signUpUrl": "https://dev.fabrikam.com/fedev/_msdyn365/signup",
            "editProfileUrl": "https://dev.fabrikam.com/fedev/_msdyn365/editprofile",
            "signinName": "<User Name>",
            "firstName": "<User First Name>",
            "lastName": "<User Last Name>",
            "tenantId": "",
            "customerAccountNumber": "<User Account Number(HQ)>",
            "name": "<User Name>",
            "emailAddress": "<User Email Address>"
        },
        "locale": "en-us"
    },
    "statusCode": 200
}

実際のデータまたは Commerce サーバーから返されるトークンをシミュレートする必要がある場合は、次の手順に従います。

ユーザー情報は、___initialData___.requestContext.user グローバル JavaScript 変数で使用できます。 Web ブラウザの開発者 (F12) ツールを開いてユーザーがサインインしている間は、___initialData___.requestContext.user と入力することでコンソール ウィンドウを開いてオブジェクトを確認できます。

実際のデータまたは Commerce サーバーから返されるトークンをシミュレートするには、次の手順に従います。

  1. 作業している eコマース サイト ページを読み込み、サインインするか新しいアカウントを作成します。

  2. Web ブラウザーのデバッグ ツールを開きます。 たとえば、Google Chrome または Microsoft Edge を使用している場合は、F12 キーを選択して開発者ツールを開くことができます。

  3. コンソール ウィンドウを開き、___initialData___.requestContext.user と入力してオブジェクトを確認します。 (ユーザー情報は、___initialData___.requestContext.user グローバル JavaScript 変数で使用できます。)

  4. テストする必要があるモジュールをページ モックに追加します。

  5. ページ モックの renderingContext セクションで、次の userContext セクションを追加します。

    "userContext": {
        "token": "<TOKEN>",
        "isAuthenticated": true,
        "signInUrl": "https://dev.fabrikam.com/fedev/_msdyn365/signin",
        "signOutUrl": "https://dev.fabrikam.com/fedev/_msdyn365/signout",
        "signUpUrl": "https://dev.fabrikam.com/fedev/_msdyn365/signup",
        "editProfileUrl": "https://dev.fabrikam.com/fedev/_msdyn365/editprofile",
        "signinName": "<User Name>",
        "firstName": "<User First Name>",
        "lastName": "<User Last Name>",
        "tenantId": "",
        "customerAccountNumber": "<User Account Number(HQ)>",
        "name": "<User Name>",
        "emailAddress": "<User Email Address>"
    },
    
  6. Web ブラウザーのデバッグ ツールから取得したユーザー情報 (トークンsigninNamefirstNamelastNamecustomerAccountNumber名前、および emailAddress) を更新します。

これで、ユーザー情報は React コンポーネントの this.props.context.request.user オブジェクト内から取得できるようになります。

運用 eコマース ページから動的なページ モックを作成する

ライブの eコマース サイト ページを反映する動的なページ モックを作成し、ローカルでモジュール対話をテストすることができます。 たとえば、これらのページ モックは、必要に応じてサインイン状態や他のページのコンテキスト プロパティをモックできます。 そのため、アカウント ページやウィッシュリスト ページなどのページや、注文チェックアウトフローなどの相互作用をローカルでテストする際に役立ちます。

ライブ eコマース ページの未加工 JSON 構造を保存する

任意のライブ e Commerce ページの未加工 JavaScript Object Notation (JSON) 構造をキャプチャして保存し、ページ モックとして使用できます。 キャプチャする eコマース サイト ページを開き、サインイン状態が必要な場合はサインインします。 次に、クエリ文字列パラメーター ?item=nodeserviceproxy:true ページ URL に追加してから、ページを再読み込みし、未加工ページ コンテキストの JSON を取得します。

メモ

この操作を実行するには、運用サイトへの安全な Azure Active Directory (Azure AD) アクセス許可が必要で、まだサインインしていない場合はサインインするように求められる場合があります。 Commerce サイト ビルダーへのサインインに使用する同じ Azure AD アカウントを使用します。

次に、開発環境で、src/pageMocks ディレクトリの下で新しいページ モック JSON ファイルを作成します。 キャプチャおよび保存操作から取得した JSON ファイルに貼り付けます。

JSON ファイルの構造には、次の例のセクションと似たセクションがあるはずです。 これらのセクションには、ページの一連モジュールを定義する pageRoot セクションと、サインイン ユーザー情報用のユーザー コンテキストを含む renderingContext セクションが含まれる必要があります。

{
    "exception": null,
    "pageRoot": {
        "id": "core-root_0",
        "typeName": "core-root",
        "modules": {
        }
    },
    "renderingContext": {
    …
        "user": {
        ...
        }
    },
    "statusCode": 200
    …
}

ページ モックをローカルでテストするには、yarn start コマンドを使用して、Node サーバーを起動させます。 URL フォーマット https://localhost:4000/page?mock=PAGE_MOCK を使用してページ モックにアクセスします。PAGE_MOCK は、モックファイルのファイル名ですが、.json ファイル拡張子を付けることはできません。

必要に応じてページ モックを変更できます。

追加リソース

新しいモジュールの作成

モジュール ライブラリ モジュールの複製

モジュール構成フィールドの追加

モジュールのプレビューとデバッグ

モジュール モックを使用してモジュールのテスト

コンテナー モジュール

レイアウト コンテナー モジュールの作成

ページ コンテナー モジュールの作成

モジュールのローカライズ