@elliemae/loan-field-renderers 26.2.2

package/dist/esm/tests/flows/dateRendererFlows.js

@@ -0,0 +1,850 @@
+import { TTriggerActions } from "@elliemae/flow-driven-testing";
+import { FlowBase } from "../base/flowBase";
+class DateRendererFlows extends FlowBase {
+  constructor(flowParams) {
+    super(flowParams);
+    this.flowParams = flowParams;
+  }
+  flowParams;
+  /**
+   * Test 1: Verify date field renders correctly
+   */
+  CheckDateRendering() {
+    return {
+      [`${this.flowParams.inboundFlow}`]: {
+        name: this.getFlowName(
+          "DateRenderer",
+          "check date field renders correctly"
+        ),
+        asserts: [
+          {
+            selector: '[data-testid="748"]',
+            isExists: true
+          }
+        ],
+        transitions: [
+          {
+            to: "checkDateInputValue"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 2: Enter a date value and verify it persists
+   */
+  CheckDateInputValue() {
+    return {
+      checkDateInputValue: {
+        name: this.getFlowName(
+          "DateRenderer",
+          "check date input value persists"
+        ),
+        startFlow: [
+          {
+            selector: '[data-testid="748"] input',
+            value: "01/15/2026",
+            action: TTriggerActions.BLUR
+          }
+        ],
+        asserts: [
+          {
+            ssfFunctionsCalled: ["setFields"]
+          },
+          {
+            assertFn: () => {
+              const inputElement = document.querySelector(
+                '[data-testid="748"] input'
+              );
+              return inputElement && inputElement.value === "01/15/2026";
+            }
+          }
+        ],
+        transitions: [
+          {
+            to: "checkDateOnBlur"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 3: Verify onBlur triggers SSF setFields
+   */
+  CheckDateOnBlur() {
+    return {
+      checkDateOnBlur: {
+        name: this.getFlowName(
+          "DateRenderer",
+          "check onBlur callback triggers"
+        ),
+        startFlow: [
+          {
+            selector: '[data-testid="748"] input',
+            value: "06/30/2025",
+            action: TTriggerActions.BLUR
+          }
+        ],
+        asserts: [
+          {
+            ssfFunctionsCalled: ["setFields"]
+          },
+          {
+            assertFn: () => {
+              const inputElement = document.querySelector(
+                '[data-testid="748"] input'
+              );
+              return inputElement && inputElement.value === "06/30/2025";
+            }
+          }
+        ],
+        transitions: [
+          {
+            to: "checkDateEmptyValue"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 4: Verify empty date value handling
+   */
+  CheckDateEmptyValue() {
+    return {
+      checkDateEmptyValue: {
+        name: this.getFlowName("DateRenderer", "check empty date handling"),
+        startFlow: [
+          {
+            selector: '[data-testid="748"] input',
+            value: "",
+            action: TTriggerActions.BLUR
+          }
+        ],
+        asserts: [
+          {
+            ssfFunctionsCalled: ["setFields"]
+          },
+          {
+            assertFn: () => {
+              const inputElement = document.querySelector(
+                '[data-testid="748"] input'
+              );
+              return inputElement && inputElement.value === "";
+            }
+          }
+        ],
+        transitions: [
+          {
+            to: "checkSecondDateField"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 5: Verify second date field exists and works
+   */
+  CheckSecondDateField() {
+    return {
+      checkSecondDateField: {
+        name: this.getFlowName("DateRenderer", "check second date field"),
+        asserts: [
+          {
+            selector: '[data-testid="763"]',
+            isExists: true
+          }
+        ],
+        transitions: [
+          {
+            to: "checkSecondDateValue"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 6: Enter value in second date field
+   */
+  CheckSecondDateValue() {
+    return {
+      checkSecondDateValue: {
+        name: this.getFlowName(
+          "DateRenderer",
+          "check second date field value entry"
+        ),
+        startFlow: [
+          {
+            selector: '[data-testid="763"] input',
+            value: "11/15/2025",
+            action: TTriggerActions.BLUR
+          }
+        ],
+        asserts: [
+          {
+            ssfFunctionsCalled: ["setFields"]
+          },
+          {
+            assertFn: () => {
+              const inputElement = document.querySelector(
+                '[data-testid="763"] input'
+              );
+              return inputElement && inputElement.value === "11/15/2025";
+            }
+          }
+        ],
+        transitions: [
+          {
+            to: "checkDateClearValue"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 7: Verify date field can be cleared
+   */
+  CheckDateClearValue() {
+    return {
+      checkDateClearValue: {
+        name: this.getFlowName("DateRenderer", "check date clear value"),
+        startFlow: [
+          {
+            selector: '[data-testid="763"] input',
+            value: "",
+            action: TTriggerActions.BLUR
+          }
+        ],
+        asserts: [
+          {
+            ssfFunctionsCalled: ["setFields"]
+          },
+          {
+            assertFn: () => {
+              const inputElement = document.querySelector(
+                '[data-testid="763"] input'
+              );
+              return inputElement && inputElement.value === "";
+            }
+          }
+        ],
+        transitions: [
+          {
+            to: "checkDateMultipleChanges"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 8: Multiple date value changes - use individual inputs to trigger onDateChange
+   */
+  CheckDateMultipleChanges() {
+    return {
+      checkDateMultipleChanges: {
+        name: this.getFlowName(
+          "DateRenderer",
+          "check multiple date value changes"
+        ),
+        startFlow: [
+          {
+            selector: '[data-testid="748"] [data-testid="ds-controlled-date-time-picker-month-input"]',
+            value: "03",
+            action: TTriggerActions.CHANGE
+          },
+          {
+            selector: '[data-testid="748"] [data-testid="ds-controlled-date-time-picker-day-input"]',
+            value: "15",
+            action: TTriggerActions.CHANGE
+          },
+          {
+            selector: '[data-testid="748"] [data-testid="ds-controlled-date-time-picker-year-input"]',
+            value: "2025",
+            action: TTriggerActions.BLUR
+          }
+        ],
+        asserts: [
+          {
+            assertFn: () => {
+              const inputElement = document.querySelector(
+                '[data-testid="748"] input'
+              );
+              return inputElement !== null;
+            }
+          }
+        ],
+        transitions: [
+          {
+            to: "checkDateFinalState"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 9: Final state verification
+   */
+  CheckDateFinalState() {
+    return {
+      checkDateFinalState: {
+        name: this.getFlowName(
+          "DateRenderer",
+          "check date fields final state is valid"
+        ),
+        asserts: [
+          {
+            assertFn: () => {
+              const date1 = document.querySelector('[data-testid="748"]');
+              const date2 = document.querySelector('[data-testid="763"]');
+              return date1 !== null && date2 !== null;
+            }
+          }
+        ],
+        transitions: [
+          {
+            to: "checkInvalidDateResetsField"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 10: Invalid/partial date input resets field and sends null to SSF
+   */
+  CheckInvalidDateResetsField() {
+    return {
+      checkInvalidDateResetsField: {
+        name: this.getFlowName(
+          "DateRenderer",
+          "check invalid/partial date resets field and sends null"
+        ),
+        startFlow: [
+          {
+            selector: '[data-testid="748"] input',
+            value: "13/45/2026",
+            // Invalid date (month 13, day 45)
+            action: TTriggerActions.BLUR
+          }
+        ],
+        asserts: [
+          {
+            ssfFunctionsCalled: ["setFields"]
+          },
+          {
+            assertFn: () => {
+              const inputElement = document.querySelector(
+                '[data-testid="748"] input'
+              );
+              return inputElement && inputElement.value === "";
+            }
+          }
+        ],
+        transitions: [
+          {
+            to: "checkPartialDateResetsField"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 11: Partial date input resets field
+   */
+  CheckPartialDateResetsField() {
+    return {
+      checkPartialDateResetsField: {
+        name: this.getFlowName(
+          "DateRenderer",
+          "check partial date input resets field"
+        ),
+        startFlow: [
+          {
+            selector: '[data-testid="748"] input',
+            value: "01/15",
+            // Partial date (missing year)
+            action: TTriggerActions.BLUR
+          }
+        ],
+        asserts: [
+          {
+            ssfFunctionsCalled: ["setFields"]
+          },
+          {
+            assertFn: () => {
+              const inputElement = document.querySelector(
+                '[data-testid="748"] input'
+              );
+              return inputElement && inputElement.value === "";
+            }
+          }
+        ],
+        transitions: [
+          {
+            to: "checkInvalidDateNoErrorMessage"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 12: Invalid date input does not show validation error message
+   */
+  CheckInvalidDateNoErrorMessage() {
+    return {
+      checkInvalidDateNoErrorMessage: {
+        name: this.getFlowName(
+          "DateRenderer",
+          "check invalid date does not show error message"
+        ),
+        startFlow: [
+          {
+            selector: '[data-testid="763"] input',
+            value: "abc/de/fghi",
+            // Completely invalid date
+            action: TTriggerActions.BLUR
+          }
+        ],
+        asserts: [
+          {
+            ssfFunctionsCalled: ["setFields"]
+          },
+          {
+            assertFn: () => {
+              const inputElement = document.querySelector(
+                '[data-testid="763"] input'
+              );
+              if (!inputElement || inputElement.value !== "") {
+                return false;
+              }
+              const fieldWrapper = document.querySelector(
+                '[data-testid="763"]'
+              );
+              const hasErrorState = fieldWrapper?.querySelector('[class*="error"]') || inputElement.getAttribute("aria-invalid") === "true";
+              return !hasErrorState;
+            }
+          }
+        ],
+        transitions: [
+          {
+            to: "checkDateFormatOptionDefault"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 13: Date format option - default MM/DD/YYYY format
+   */
+  CheckDateFormatOptionDefault() {
+    return {
+      checkDateFormatOptionDefault: {
+        name: this.getFlowName(
+          "DateRenderer",
+          "check default date format MM/DD/YYYY"
+        ),
+        startFlow: [
+          {
+            selector: '[data-testid="748"] input',
+            value: "12/25/2025",
+            action: TTriggerActions.BLUR
+          }
+        ],
+        asserts: [
+          {
+            ssfFunctionsCalled: ["setFields"]
+          },
+          {
+            assertFn: () => {
+              const inputElement = document.querySelector(
+                '[data-testid="748"] input'
+              );
+              const value = inputElement?.value || "";
+              const mmddyyyyPattern = /^\d{2}\/\d{2}\/\d{4}$/;
+              return mmddyyyyPattern.test(value);
+            }
+          }
+        ],
+        transitions: [
+          {
+            to: "checkValidDateAfterInvalid"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 14: Valid date entry after invalid - ensures field recovers correctly
+   */
+  CheckValidDateAfterInvalid() {
+    return {
+      checkValidDateAfterInvalid: {
+        name: this.getFlowName(
+          "DateRenderer",
+          "check valid date entry after invalid recovers field"
+        ),
+        startFlow: [
+          {
+            selector: '[data-testid="763"] input',
+            value: "invalid",
+            action: TTriggerActions.BLUR
+          },
+          {
+            selector: '[data-testid="763"] input',
+            value: "07/04/2025",
+            action: TTriggerActions.BLUR
+          }
+        ],
+        asserts: [
+          {
+            ssfFunctionsCalled: ["setFields"]
+          },
+          {
+            assertFn: () => {
+              const inputElement = document.querySelector(
+                '[data-testid="763"] input'
+              );
+              return inputElement && inputElement.value === "07/04/2025";
+            }
+          }
+        ],
+        transitions: [
+          {
+            to: "checkDateFinalStateComplete"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 15: Final complete state verification
+   */
+  CheckDateFinalStateComplete() {
+    return {
+      checkDateFinalStateComplete: {
+        name: this.getFlowName(
+          "DateRenderer",
+          "check all date scenarios completed successfully"
+        ),
+        asserts: [
+          {
+            assertFn: () => {
+              const date1 = document.querySelector('[data-testid="748"]');
+              const date2 = document.querySelector('[data-testid="763"]');
+              return date1 !== null && date2 !== null;
+            }
+          }
+        ],
+        transitions: [
+          {
+            to: "checkDisabledDateField"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 16: Disabled date field - input should be blocked
+   */
+  CheckDisabledDateField() {
+    return {
+      checkDisabledDateField: {
+        name: this.getFlowName(
+          "DateRenderer",
+          "check disabled date field blocks input"
+        ),
+        asserts: [
+          {
+            selector: '[data-testid="762"]',
+            isExists: true
+          },
+          {
+            assertFn: () => {
+              const inputElement = document.querySelector(
+                '[data-testid="762"] input'
+              );
+              return inputElement && inputElement.disabled === true;
+            }
+          }
+        ],
+        transitions: [
+          {
+            to: "checkDisabledDateNoUpdate"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 17: Disabled date field - blur should not trigger update
+   */
+  CheckDisabledDateNoUpdate() {
+    return {
+      checkDisabledDateNoUpdate: {
+        name: this.getFlowName(
+          "DateRenderer",
+          "check disabled date field blur does not update"
+        ),
+        startFlow: [
+          {
+            selector: '[data-testid="762"] input',
+            value: "05/05/2025",
+            action: TTriggerActions.BLUR
+          }
+        ],
+        asserts: [
+          {
+            assertFn: () => {
+              const inputElement = document.querySelector(
+                '[data-testid="762"] input'
+              );
+              return inputElement && inputElement.value === "";
+            }
+          }
+        ],
+        transitions: [
+          {
+            to: "checkAutoFieldSetFalse"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 18: autoFieldSet=false - onBlur fires but SSF setFields skipped
+   */
+  CheckAutoFieldSetFalse() {
+    return {
+      checkAutoFieldSetFalse: {
+        name: this.getFlowName(
+          "DateRenderer",
+          "check autoFieldSet=false skips SSF call"
+        ),
+        asserts: [
+          {
+            selector: '[data-testid="761"]',
+            isExists: true
+          }
+        ],
+        transitions: [
+          {
+            to: "checkAutoFieldSetFalseBlur"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 19: autoFieldSet=false - valid date entry with manual handling
+   */
+  CheckAutoFieldSetFalseBlur() {
+    return {
+      checkAutoFieldSetFalseBlur: {
+        name: this.getFlowName(
+          "DateRenderer",
+          "check autoFieldSet=false blur with valid date"
+        ),
+        startFlow: [
+          {
+            selector: '[data-testid="761"] input',
+            value: "09/15/2025",
+            action: TTriggerActions.BLUR
+          }
+        ],
+        asserts: [
+          {
+            assertFn: () => {
+              const inputElement = document.querySelector(
+                '[data-testid="761"] input'
+              );
+              return inputElement && inputElement.value === "09/15/2025";
+            }
+          }
+        ],
+        transitions: [
+          {
+            to: "checkOnDateChangeEvent"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 20: onDateChange event - value changes via individual date inputs
+   */
+  CheckOnDateChangeEvent() {
+    return {
+      checkOnDateChangeEvent: {
+        name: this.getFlowName(
+          "DateRenderer",
+          "check onDateChange event fires on input change"
+        ),
+        startFlow: [
+          {
+            selector: '[data-testid="763"] [data-testid="ds-controlled-date-time-picker-month-input"]',
+            value: "08",
+            action: TTriggerActions.CHANGE
+          },
+          {
+            selector: '[data-testid="763"] [data-testid="ds-controlled-date-time-picker-day-input"]',
+            value: "20",
+            action: TTriggerActions.CHANGE
+          },
+          {
+            selector: '[data-testid="763"] [data-testid="ds-controlled-date-time-picker-year-input"]',
+            value: "2026",
+            action: TTriggerActions.CHANGE
+          }
+        ],
+        asserts: [
+          {
+            assertFn: () => {
+              const field = document.querySelector('[data-testid="763"]');
+              return field !== null;
+            }
+          }
+        ],
+        transitions: [
+          {
+            to: "checkDateChangeWithoutOnChange"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 21: Date change without onChange callback (field 763 has no onChange)
+   */
+  CheckDateChangeWithoutOnChange() {
+    return {
+      checkDateChangeWithoutOnChange: {
+        name: this.getFlowName(
+          "DateRenderer",
+          "check date change without onChange callback"
+        ),
+        startFlow: [
+          {
+            selector: '[data-testid="763"] input',
+            value: "10/31/2025",
+            action: TTriggerActions.BLUR
+          }
+        ],
+        asserts: [
+          {
+            ssfFunctionsCalled: ["setFields"]
+          },
+          {
+            assertFn: () => {
+              const inputElement = document.querySelector(
+                '[data-testid="763"] input'
+              );
+              return inputElement && inputElement.value === "10/31/2025";
+            }
+          }
+        ],
+        transitions: [
+          {
+            to: "checkDateWithOnChangeCallback"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 22: Date change with onChange callback (field 748 has onChange)
+   */
+  CheckDateWithOnChangeCallback() {
+    return {
+      checkDateWithOnChangeCallback: {
+        name: this.getFlowName(
+          "DateRenderer",
+          "check date change with onChange callback fires"
+        ),
+        startFlow: [
+          {
+            selector: '[data-testid="748"] [data-testid="ds-controlled-date-time-picker-month-input"]',
+            value: "04",
+            action: TTriggerActions.CHANGE
+          },
+          {
+            selector: '[data-testid="748"] [data-testid="ds-controlled-date-time-picker-day-input"]',
+            value: "01",
+            action: TTriggerActions.CHANGE
+          },
+          {
+            selector: '[data-testid="748"] [data-testid="ds-controlled-date-time-picker-year-input"]',
+            value: "2025",
+            action: TTriggerActions.CHANGE
+          }
+        ],
+        asserts: [
+          {
+            assertFn: () => {
+              const field = document.querySelector('[data-testid="748"]');
+              return field !== null;
+            }
+          }
+        ],
+        transitions: [
+          {
+            to: "checkAllDateFieldsFinalState"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 23: All date fields final state verification
+   */
+  CheckAllDateFieldsFinalState() {
+    const transitions = this.flowParams.outboundFlow ? [{ to: this.flowParams.outboundFlow }] : [];
+    return {
+      checkAllDateFieldsFinalState: {
+        name: this.getFlowName(
+          "DateRenderer",
+          "check all date fields exist in final state"
+        ),
+        asserts: [
+          {
+            assertFn: () => {
+              const date748 = document.querySelector('[data-testid="748"]');
+              const date763 = document.querySelector('[data-testid="763"]');
+              const date762 = document.querySelector('[data-testid="762"]');
+              const date761 = document.querySelector('[data-testid="761"]');
+              return date748 !== null && date763 !== null && date762 !== null && date761 !== null;
+            }
+          }
+        ],
+        ...transitions.length > 0 && { transitions }
+      }
+    };
+  }
+  get Flows() {
+    return {
+      ...this.CheckDateRendering(),
+      ...this.CheckDateInputValue(),
+      ...this.CheckDateOnBlur(),
+      ...this.CheckDateEmptyValue(),
+      ...this.CheckSecondDateField(),
+      ...this.CheckSecondDateValue(),
+      ...this.CheckDateClearValue(),
+      ...this.CheckDateMultipleChanges(),
+      ...this.CheckDateFinalState(),
+      ...this.CheckInvalidDateResetsField(),
+      ...this.CheckPartialDateResetsField(),
+      ...this.CheckInvalidDateNoErrorMessage(),
+      ...this.CheckDateFormatOptionDefault(),
+      ...this.CheckValidDateAfterInvalid(),
+      ...this.CheckDateFinalStateComplete(),
+      ...this.CheckDisabledDateField(),
+      ...this.CheckDisabledDateNoUpdate(),
+      ...this.CheckAutoFieldSetFalse(),
+      ...this.CheckAutoFieldSetFalseBlur(),
+      ...this.CheckOnDateChangeEvent(),
+      ...this.CheckDateChangeWithoutOnChange(),
+      ...this.CheckDateWithOnChangeCallback(),
+      ...this.CheckAllDateFieldsFinalState()
+    };
+  }
+}
+export {
+  DateRendererFlows
+};