教學課程：測試最適化表單

本教學課程是建立第一個最適化表單系列中的步驟。 建議您依序依序依序執行系列，以了解、執行和示範完整的教學課程使用案例。

最適化表單準備就緒後，請務必先測試您的最適化，再將其轉出給一般使用者。 您可以手動測試（功能測試）每個欄位，或自動測試最適化表單。 當您有多個最適化表單時，手動測試所有最適化表單的每個欄位將是一項艱巨的任務。

AEM Forms提供測試框架Calvin，以自動測試最適化表單。 使用框架時，直接在Web瀏覽器中編寫並運行UI測試。 架構提供JavaScript API以用於建立測試。 自動化測試可讓您測試最適化表單的預填體驗、提交最適化表單的體驗、運算式規則、驗證、延遲載入和UI互動。 本教學課程會逐步引導您完成在最適化表單上建立和執行自動化測試的步驟。 在本教學課程結束時，您將能夠：

• 為最適化表單建立測試套裝
• 為最適化表單建立測試
• 執行為最適化表單建立的測試套裝和測試

步驟1:建立測試套裝

測試套裝包含測試案例的集合。 您可以有多個測試套裝。 建議為每個表單分別設定一個測試套裝。 若要建立測試套裝：

1. 以管理員身分登入AEM Forms製作執行個體。 開啟CRXDE Lite。 您可以點選「AEM標誌> 工具 > 一般 > CRXDE Lite」，或在瀏覽器中開啟https://localhost:4502/crx/de/index.jsp URL以開啟CRXDE Lite。

2. 導覽至CRXDE Lite中的/etc/clientlibs。 按一下右鍵/etc/clientlibs子資料夾，然後按一下​Create > Create Node。 在​Name​欄位中，鍵入​WeRetailFormTestCases。 選擇類型為​cq:ClientLibraryFolder，然後按一下​確定。 它會建立一個節點。 您可以使用任何名稱來取代WeRetailFormTestCases。

3. 將以下屬性添加到WeRetailFormTestCases節點，然後點選​Save ALL。

   屬性	類型	多	值
   類別	字串	已啟用	granite.testing.hobbes.tests granite.testing.calvin.tests
   相依性	字串	已啟用	granite.testing.hobbes.testrunner granite.testing.calvin apps.testframework.all

   請確定每個屬性都新增至個別方塊，如下所示：

   

4. 按一下右鍵​WeRetailFormTestCases​節點，按一下​Create > Create File。 在​Name​欄位中，鍵入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 Testing UI(AEM > Tools > Operations > Testing)。 UI中列出測試套裝 — We retail - Tests -。

   

步驟2:建立測試案例以在最適化表單中預填值

測試案例是測試特定功能的一組動作。 例如，預填表單的所有欄位，並驗證幾個欄位，以確保輸入正確的值。

動作是適用性表單上的特定活動，例如按一下按鈕。 若要建立測試案例和動作，以驗證每個最適化表單欄位的使用者輸入：

1. 在CRXDE lite中，導覽至/content/forms/af/create-first-adaptive-form資料夾。 以滑鼠右鍵按一下​create-first-adaptive-form​資料夾節點，然後按一下​Create> Create File。 在​Name​欄位中，鍵入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子資料夾，然後按一下​Create Create Node。

   在​名稱​欄位中，鍵入WeRetailFormTests。 選擇類型cq:ClientLibraryFolder，然後按一下​確定。

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:在套裝或個別測試案例中執行所有測試

一個測試套裝可以有多個測試案例。 您可以一次或個別執行測試套裝中的所有測試案例。 當您執行測試時，圖示會指出結果：

• 勾選記號圖示表示通過的測試：
• 「X」圖示表示測試失敗：

1. 導覽至AEM圖示> Tools> Operations> Testing

2. 要運行測試套裝的所有測試，請執行以下操作：

   1. 在「測試」面板中，點選「We retail - Tests(1)」。 它套裝會展開並顯示測試清單。

   2. 點選​執行測試​按鈕。 測試執行時，螢幕右側的空白區域會以最適化表單取代。

      

3. 若要從測試套裝執行單一測試：

   1. 在「測試」面板中，點選​We retail - Tests(1)。 它套裝會展開並顯示測試清單。
   2. 點選​預填測試​並點選​執行測試​按鈕。 測試執行時，螢幕右側的空白區域會以最適化表單取代。

4. 點選測試名稱「預填測試」 ，以檢閱測試案例的結果。 它會開啟Result面板。 點選Result面板中的測試案例名稱，以檢視測試的所有詳細資訊。

   

現在最適化表單已可供發佈。