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

[アーティクル]
07/31/2024

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

通常、モジュールはデータアクションおよびコンフィギュレーションフィールドからデータを取得し、そのデータに基づいて表示する HTML を作成します。ローカル開発環境で実行する場合、モジュールはデータ (Commerce Scale Unit データなど) に直接アクセスできない可能性があるため、モジュールモックデータファイルを使用してテストできます。これらのファイルは、Web ブラウザーを通じてローカルで実行される際にモジュールの表示に使うデータを設定するために使用されます。

モジュールモックファイル

モジュールモックのデータファイルは、/src/<MODULE_NAME>/mocks ディレクトリの下に格納されます。既定のモックファイルは <MODULE_NAME>.json ファイルを使用しますが、その他のファイルも追加できます。 Web ブラウザーでテストする際に異なるモジュールモックデータファイルを指定するには、モジュール名にコロン (:) およびモックファイル名 (.json ファイル名拡張子なしで) のコンマ区切り一覧を追加します。

たとえば、mockTest1.json という名前でモジュール モック ディレクトリに追加されたモジュールモックデータファイルに関しては、URL http://localhost:4000/modules?type=product-feature:mockTest1 を使用します。この例では、モック名は mockTest1 で、URL に使用されます。

モックコンフィギュレーションおよびデータフィールド

モジュールのコンフィギュレーションフィールドをモックするには、モック .json ファイルのコンフィギュレーション セクションの下にコンフィギュレーション名を付けます。モジュールのデータフィールドをモックするには、モック .json ファイルのデータ セクションの下にデータ名を付けます。

次の例は、コンフィギュレーションされたモジュールモック .json ファイルを示します。

{
    "id": "R1Module1",
    "config": {
        "imageAlignment": "left",
    },
    "data": {
        "actionResponse": {
            "text": "Sample Action Response"
        }
    },
    "typeName": "product-feature"
}

例

次の例では、さまざまなコンフィギュレーション定義を含むモジュールコンフィギュレーションファイルと、対応するモックファイルを示します。

モジュール定義ファイルのサンプル:

{
    "$type": "contentModule",
    "friendlyName": "Product Feature",
    "name": "product-feature",
    "description": "Feature module used to highlight a product.",
    "categories": [
        "storytelling"
    ],
    "tags": [
        ""
    ],
    "dataActions": {
    },
    "config": {
        "imageAlignment": {
            "friendlyName": "Image Alignment",
            "description": "Sets the desired alignment of the image, either left or right on the text.",
            "type": "string",
            "enum": {
                "left": "Left",
                "right": "Right"
            },
            "default": "left",
            "scope": "module",
            "group": "Layout Properties"
        },
        "productTitle": {
            "type": "string",
            "friendlyName": "Product Title",
            "description": "Product placement title"
        },
        "productDetails": {
            "type": "richText",
            "friendlyName": "Product Details",
            "description": "Rich text representing the featured product details"
        },
        "productImage": {
            "type": "image",
            "friendlyName": "Product Image",
            "description": "Image representing the featured product"
        },
        "buttonText": {
            "type": "string",
            "friendlyName": "Button Text",
            "description": "Text to show on the call to action button"
        },
        "productIds": {
            "friendlyName": "Product ID",
            "description": "Provide a Product Id that the module will display",
            "type": "string",
            "scope": "module",
            "group": "Content Properties"
        }
    },
    "resources": {
        "resourceKey": {
            "comment": "resource description",
            "value": "resource value"
        }
    }
}

サンプルモックファイル:

{
    "id": "R1Module1",
    "config": {
        "imageAlignment": "left",
        "productTitle": "Retro Horn Rimmed Keyhole Nose Bridge Round Sunglasses",
        "productDetails": "High-quality and pioneered with the perfect blend of timeless classic and modern technology with hint of old school glamor.",
        "productImage": {
            "src": "https://bit.ly/33cMGxr",
            "altText": "Retro Horn Rimmed Keyhole Nose Bridge Round Sunglasses"
        },
        "buttonText": "Buy Now",
        "productIds": "68719498121"
    },
    "data": {
        "actionResponse": {
            "text": "Sample Action Response"
        }
    },
    "typeName": "product-feature"
}