チュートリアル:アダプティブフォームのテスト

これは、「最初のアダプティブフォームを作成する」シリーズを構成するチュートリアルです。チュートリアル内のユースケースを理解して実際に操作できるように、このシリーズのチュートリアルを最初から順に学習することをお勧めします。

アダプティブフォームの準備が整ったら、エンドユーザーにアダプティブフォームを展開する前に、そのアダプティブフォームをテストすることが重要です。 すべてのフィールドを手動でテスト(機能テスト)したり、アダプティブフォームのテストを自動化したりできます。 複数のアダプティブフォームがある場合、すべてのアダプティブフォームのすべてのフィールドを手動でテストすると、負担の大きいタスクになります。

AEM Formsは、アダプティブフォームのテストを自動化するテストフレームワークCalvinを提供します。 このフレームワークを使用して、Web ブラウザーで直接 UI テストを記述して実行します。フレームワークは、テストを作成するためのJavaScript APIを提供します。 自動テストでは、アダプティブフォームの事前入力エクスペリエンス、アダプティブフォームの送信エクスペリエンス、式ルール、検証からの検証、遅延読み込み、UIインタラクションをテストできます。 このチュートリアルでは、アダプティブフォームで自動テストを作成し、実行する手順について説明します。 このチュートリアルを完了すると、次の操作を実行できるようになります。

手順1:テストスイートの作成

テストスイートには、テストケースが集まっています。 複数のテストスイートを設定できます。 フォームごとに個別のテストスイートを作成することをお勧めします。 テストスイートを作成するには:

  1. 管理者としてAEM Forms作成者インスタンスにログインします。 CRXDE Liteを開きます。 ブラウザーでAEMロゴ/ツール/一般/CRXDE Lite​をタップするか、https://localhost:4502/crx/de/index.jspURLを開いてCRXDE Liteを開くことができます。

  2. CRXDE Liteの/etc/clientlibsに移動します。 /etc/clientlibs サブフォルダーを右クリックして、作成ノードを作成​をクリックします。名前​フィールドに​WeRetailFormTestCases​と入力します。 タイプを​cq:ClientLibraryFolder​として選択し、「OK」をクリックします。 ノードを作成します。 WeRetailFormTestCasesの代わりに任意の名前を使用できます。

  3. <a0追加/>ノードに次のプロパティを追加し、「すべて保存」をタップします。WeRetailFormTestCases

    プロパティ 複数
    categories String Enabled
    • granite.testing.hobbes.tests
    • granite.testing.calvin.tests
    dependencies 文字列 有効
    • granite.testing.hobbes.testrunner
    • granite.testing.calvin
    • apps.testframework.all

    次に示すように、各プロパティが個別のボックスに追加されていることを確認します。

    dependencies

  4. WeRetailFormTestCases​ノードを右クリックし、作成/ファイルを作成​をクリックします。 「名前」フィールドにjs.txtと入力し、「OK」をクリックします。

  5. js.txtファイルを開いて編集し、次のコードを追加し、ファイルを保存します。

    #base=.
     init.js
    
  6. WeRetailFormTestCasesノードにファイルinit.jsを作成します。 ファイル追加の下のコードをタップし、「すべて保存」をタップします。

    (function(window, hobs) {
        'use strict';
        window.testsuites = window.testsuites || {};
      // Registering the test form suite to the sytem
      // If there are other forms, all registration should be done here
        window.testsuites.testForm3 = new hobs.TestSuite("We retail - Tests", {
            path: '/etc/clientlibs/WeRetailFormTestCases/init.js',
            register: true
        });
     // window.testsuites.testForm2 = new hobs.TestSuite("testForm2");
    }(window, window.hobs));
    

    上記のコードは、We retail - Tests​という名前のテストスイートを作成します。

  7. AEMテストUI(AEM > ツール > 操作 > テスト)を開きます。 UIにテストスイート​We retail - Tests​が表示されます。

    we-retail-test-suite

手順2:アダプティブフォームに値を事前入力するテストケースの作成

テストケースとは、特定の機能をテストする一連のアクションです。 例えば、フォームのすべてのフィールドに事前入力し、いくつかのフィールドを検証して、正しい値が入力されていることを確認します。

アクションとは、ボタンのクリックなど、アダプティブフォーム上の特定のアクティビティを指します。 各アダプティブフォームフィールドのユーザー入力を検証するテストケースとアクションを作成するには:

  1. CRXDE liteで、/content/forms/af/create-first-adaptive-formフォルダーに移動します。 create-first-adaptive-form​フォルダーノードを右クリックし、作成ファイルを作成​をクリックします。 「名前」フィールドにprefill.xmlと入力し、「OK」をクリックします。 次のコードを ファイルに追加します。

    <?xml version="1.0" encoding="UTF-8"?><afData>
      <afUnboundData>
        <data>
          <customer_ID>371767</customer_ID>
          <customer_Name>John Jacobs</customer_Name>
          <customer_Shipping_Address>1657 1657 Riverside Drive Redding</customer_Shipping_Address>
          <customer_State>California</customer_State>
          <customer_ZIPCode>096001</customer_ZIPCode>
         </data>
      </afUnboundData>
      <afBoundData>
        <data xmlns:xfa="https://www.xfa.org/schema/xfa-data/1.0/"/>
      </afBoundData>
    </afData>
    
  2. /etc/clientlibs に移動します。/etc/clientlibsサブフォルダーを右クリックし、作成ノードを作成​をクリックします。

    名前​フィールドにWeRetailFormTestsと入力します。 タイプをcq:ClientLibraryFolderとして選択し、「OK」をクリックします。

  3. 追加​WeRetailFormTests​ノードに対する次のプロパティです。

    プロパティ 複数
    カテゴリ 文字列 有効
    • granite.testing.hobbes.tests
    • granite.testing.hobbes.tests.testForm
    依存関係 文字列 有効
    • granite.testing.calvin.tests
  4. WeRetailFormTests​ノードにファイルjs.txtを作成します。 ファイル追加に次の情報が追加されます。

    #base=.
    prefillTest.js
    

    すべて保存」をクリックします。

  5. WeRetailFormTests​ノードにファイルprefillTest.jsを作成します。 追加次のコードをファイルに追加します。 コードはテストケースを作成します。 テストケースでは、フォームのすべてのフィールドに事前入力し、一部のフィールドを検証して、正しい値が入力されていることを確認します。

    (function (window, hobs) {
        'use strict';
    
        var ts = new hobs.TestSuite("Prefill Test", {
            path: '/etc/clientlibs/WeRetailFormTests/prefillTest.js',
            register: false
        })
    
        .addTestCase(new hobs.TestCase("Prefill Test")
            // navigate to the testForm which is to be test
            .navigateTo("/content/forms/af/create-first-adaptive-form/shipping-address-add-update-form.html?wcmmode=disabled&dataRef=crx:///content/forms/af/create-first-adaptive-form/prefill.xml")
            // check if adaptive form is loaded
            .asserts.isTrue(function () {
                return calvin.isFormLoaded()
            })
            .asserts.isTrue(function () {
                return calvin.model("customer_ID").value == 371767;
            })
            .asserts.isTrue(function () {
                return calvin.model("customer_ZIPCode").value == 96001;
            })
        );
    
        // register the test suite with testForm
        window.testsuites.testForm3.add(ts);
    
    }(window, window.hobs));
    

    テストケースが作成され、実行できる状態になります。 テストケースを作成して、計算スクリプトの実行の確認、パターンの検証、アダプティブフォームの送信エクスペリエンスの検証など、アダプティブフォームの様々な要素を検証できます。 アダプティブフォームの様々な側面のテストについて詳しくは、「アダプティブフォームのテストの自動化」を参照してください。

手順3:スイートまたは個々のテストケースですべてのテストを実行

テストスイートには複数のテストケースを含めることができます。 テストスイート内のすべてのテストケースは、一度に実行することも、個別に実行することもできます。 テストを実行すると、アイコンに結果が示されます。

  • チェックマークのアイコンは、テストに合格したことを示します。save_icon
  • 「X」アイコンは、失敗したテストを示します。閉じる —icon
  1. AEMアイコン/ツール操作 テスト​に移動します。

  2. テストスイートのすべてのテストを実行するには:

    1. テストパネルで、We retail - Tests (1)​をタップします。 スイートが展開され、テストのリストが表示されます。

    2. テストを実行」ボタンをタップします。 画面の右側の空白の領域は、テストの実行時にアダプティブフォームに置き換えられます。

      全試験の

  3. テストスイートから1つのテストを実行するには:

    1. テストパネルで、We retail - Tests (1)​をタップします。 スイートが展開され、テストのリストが表示されます。
    2. 事前入力テスト」をタップし、「テストを実行」ボタンをタップします。 画面の右側の空白の領域は、テストの実行時にアダプティブフォームに置き換えられます。
  4. テスト名「Prefill test」をタップして、テストケースの結果を確認します。 結果パネルが開きます。 結果パネルでテストケースの名前をタップし、テストのすべての詳細を表示します。

    レビュー結果

これでアダプティブフォームの発行準備が整いました。

このページ