Refactored form tester page hooks to support post-hooks

src/applications/disability-benefits/2346/tests/MDOT.cypress.spec.js

@@ -23,10 +23,12 @@ const testConfig = createTestConfig(
     },
 
     pageHooks: {
-      introduction: () => {
-        cy.findAllByText(/order/i, { selector: 'button' })
-          .first()
-          .click();
+      introduction: ({ afterHook }) => {
+        afterHook(() => {
+          cy.findAllByText(/order/i, { selector: 'button' })
+            .first()
+            .click();
+        });
       },
       address: () => {
         cy.get('@testKey').then(testKey => {
@@ -41,7 +43,6 @@ const testConfig = createTestConfig(
             cy.findByLabelText(/International Postal Code/i).type('T7N');
             cy.findByText(/Save temporary address/i).click();
             cy.findByLabelText(/Re-enter email address/i).type('vet@vet.com');
-            cy.findByText(/Continue/i).click();
           } else {
             cy.findByText('Edit permanent address', {
               selector: 'button',
@@ -51,7 +52,6 @@ const testConfig = createTestConfig(
             cy.findByLabelText(/International Postal Code/i).type('T7N');
             cy.findByText(/Save permanent address/i).click();
             cy.findByLabelText(/Re-enter email address/i).type('vet@vet.com');
-            cy.findByText(/Continue/i).click();
           }
         });
       },
@@ -67,7 +67,6 @@ const testConfig = createTestConfig(
             cy.get('#3').click();
             cy.get('#5').click();
           }
-          cy.findByText(/Continue/i, { selector: 'button' }).click();
         });
       },
     },

src/applications/disability-benefits/996/tests/hlr.cypress.spec.js

@@ -19,11 +19,13 @@ const testConfig = createTestConfig(
     },
 
     pageHooks: {
-      introduction: () => {
-        // Hit the start button
-        cy.findAllByText(/start/i, { selector: 'button' })
-          .first()
-          .click();
+      introduction: ({ afterHook }) => {
+        afterHook(() => {
+          // Hit the start button
+          cy.findAllByText(/start/i, { selector: 'button' })
+            .first()
+            .click();
+        });
       },
     },
 

src/applications/disability-benefits/all-claims/tests/all-claims.cypress.spec.js

@@ -15,9 +15,9 @@ const testConfig = createTestConfig(
     dataSets: [
       'full-781-781a-8940-test.json',
       'maximal-test',
-      // 'maximal-bdd-test',
+      'maximal-bdd-test',
       'minimal-test',
-      // 'minimal-bdd-test',
+      'minimal-bdd-test',
       'newOnly-test',
       'secondary-new-test.json',
       'upload-781-781a-8940-test.json',
@@ -29,14 +29,16 @@ const testConfig = createTestConfig(
     },
 
     pageHooks: {
-      introduction: () => {
-        cy.axeCheck();
-        // Hit the start button
-        cy.findAllByText(/start/i, { selector: 'button' })
-          .first()
-          .click();
-
-        cy.axeCheck();
+      introduction: ({ afterHook }) => {
+        afterHook(() => {
+          // Hit the start button
+          cy.findAllByText(/start/i, { selector: 'button' })
+            .first()
+            .click();
+        });
+      },
+
+      'veteran-information': () => {
         // Click past the ITF message
         cy.findByText(/continue/i, { selector: 'button' }).click();
       },
@@ -54,13 +56,10 @@ const testConfig = createTestConfig(
             cy.get('input[name$="_dateRange_toYear"]')
               .clear()
               .type(date[0]);
-            cy.get('.additional-info-button[aria-expanded="false"]').click();
             cy.get('input[name$="_separationLocation"]')
               .type(data.serviceInformation.separationLocation)
               .blur();
           }
-          cy.axeCheck();
-          cy.findByText(/continue/i, { selector: 'button' }).click();
         });
       },
 
@@ -71,8 +70,6 @@ const testConfig = createTestConfig(
               cy.get(`input[name="root_ratedDisabilities_${index}"]`).click();
             }
           });
-          cy.axeCheck();
-          cy.findByText(/continue/i, { selector: 'button' }).click();
         });
       },
 
@@ -87,8 +84,6 @@ const testConfig = createTestConfig(
             cy.fillPage();
             cy.findByText(/save/i, { selector: 'button' }).click();
           }
-          cy.axeCheck();
-          cy.findByText(/continue/i, { selector: 'button' }).click();
         });
       },
     },
@@ -152,6 +147,8 @@ const testConfig = createTestConfig(
         });
       });
     },
+
+    skip: ['maximal-bdd-test', 'minimal-bdd-test'],
   },
   manifest,
   formConfig,

src/applications/hca/tests/hca.cypress.spec.js

@@ -13,10 +13,12 @@ const testConfig = createTestConfig(
     fixtures: { data: path.join(__dirname, 'schema') },
 
     pageHooks: {
-      introduction: () => {
-        cy.findAllByText(/start.+without signing in/i, { selector: 'button' })
-          .first()
-          .click();
+      introduction: ({ afterHook }) => {
+        afterHook(() => {
+          cy.findAllByText(/start.+without signing in/i, { selector: 'button' })
+            .first()
+            .click();
+        });
       },
 
       'id-form': () => {
@@ -34,8 +36,6 @@ const testConfig = createTestConfig(
           cy.findByLabelText(/social security/i).type(
             data.veteranSocialSecurityNumber,
           );
-
-          cy.findAllByText(/continue/i, { selector: 'button' }).click();
         });
       },
     },

src/platform/testing/e2e/cypress/support/form-tester/README.md

@@ -273,19 +273,62 @@ pageHooks: {
 },
 ```
 
-There are various use cases for this setting, but a couple of common ones are:
+The functions **all have access to a context object as a first argument**, which currently provides two things:
 
-1. Special or non-standard pages in the form, like the introduction, where the automatic form filling doesn't work or apply. Virtually every form will have an introduction page, which will require a page hook to proceed.
+1. `pathname`: a convenient reference to the full pathname that got matched for this page hook.
+
+2. `afterHook`: a helper function that takes a function and uses it to **override the usual end-of-page behavior**.
+
+   Typically, the standard flow for processing a page follows these steps:
+
+   1. Run an initial axe check.
+   2. Run the page hook if the page has one.
+   3. Autofill if no hook ran and if the page is not review or confirmation.
+   4. Expand any accordions and run the end-of-page aXe check.
+   5. Run the post hook.
+
+   The default "post hook" for a page is to just click the 'Continue' button to proceed to the next page. For the review page, the post hook checks the privacy agreement box if there is one and then submits the form.
+
+
+   The function passed to `afterHook` will override what is normally run for that post hook in step 5. It can be considered an override that does the job of **moving from the current page to the next**. If the page follows the default post hook behavior, this helper is not needed at all.
+
+   The **most common usage for the after hook** would be to pass a function that simply clicks the appropriate button to proceed to the next page.
+   - This is useful if the that button does not match the standard button in the default post hook (e.g., the text doesn't say 'Continue').
+   - This is practically **mandatory for the introduction page**, where the flow to start a form can vary between forms.
+   - Note that the second aXe check is still guaranteed to run before this override.
+
+   ##### Examples for using the after hook
+
    ```js
    pageHooks: {
-     introduction: () => {
-       cy.findAllByText(/get started/i)
-         .first()
-         .click();
-     },
+    introduction: ({ afterHook }) => {
+      afterHook(() => {
+        cy.findByText(/begin/i, { selector: 'button' })
+          .first()
+          .click();
+      });
+    },
+
+    'some-other-page': ({ afterHook, pathname }) => {
+      // Do whatever you need to in the "main body" of the hook,
+      // which replaces the default autofilling behavior.
+      cy.log(`Look, I'm on ${pathname}!`);
+
+      afterHook(() => {
+        cy.findByText(/next/i, { selector: 'button' })
+          .first()
+          .click();
+      });
+    },
    },
    ```
 
+##### Common usage for page hooks
+
+There are various use cases for the `pageHooks` setting, but a couple of common ones are:
+
+1. Special or non-standard pages in the form, like the introduction, where the automatic form filling doesn't work or apply. Virtually every form will have an introduction page, which will require a page hook to proceed. See the `afterHooks` section above for an example.
+
 2. "Prepping" a page, as in performing any necessary interactions to get the page in the desired state, before invoking the usual automatic filling.
 
    `cy.fillPage` is a custom command bundled with the form tester that performs the automatic form filling on the current page. This is the same command that's used in the form tester's default handling of a page. It does not include interactions with any "continue" buttons to proceed to the next page.
@@ -295,9 +338,6 @@ There are various use cases for this setting, but a couple of common ones are:
      '/some-form-app-url/some-page': () => {
        cy.get('.expand-button').click();
        cy.fillPage();
-       cy.findAllByTest(/continue/i)
-         .first()
-         .click();
      },
    },
    ```