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

[アーティクル]
03/08/2023

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

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

ページモックファイルは /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 サーバーから返されるトークンをシミュレートするには、次の手順に従います。

作業している eコマースサイトページを読み込み、サインインするか新しいアカウントを作成します。
Web ブラウザーのデバッグツールを開きます。たとえば、Google Chrome または Microsoft Edge を使用している場合は、F12 キーを選択して開発者ツールを開くことができます。
コンソールウィンドウを開き、___initialData___.requestContext.user と入力してオブジェクトを確認します。 (ユーザー情報は、___initialData___.requestContext.user グローバル JavaScript 変数で使用できます。)
テストする必要があるモジュールをページモックに追加します。

ページモックの 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>"
},

Web ブラウザーのデバッグツールから取得したユーザー情報 (トークン、signinName、firstName、lastName、 customerAccountNumber、名前、および 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 ファイル拡張子を付けることはできません。

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