@elliemae/loan-field-renderers 26.2.2

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

@@ -0,0 +1,571 @@
+import { TTriggerActions } from "@elliemae/flow-driven-testing";
+import { FlowBase } from "../base/flowBase";
+class DropdownRendererFlows extends FlowBase {
+  constructor(flowParams) {
+    super(flowParams);
+    this.flowParams = flowParams;
+  }
+  flowParams;
+  /**
+   * Test 1: Verify state dropdown renders correctly
+   */
+  CheckDropdownRendering() {
+    return {
+      [`${this.flowParams.inboundFlow}`]: {
+        name: this.getFlowName(
+          "DropdownRenderer",
+          "check dropdown renders correctly"
+        ),
+        asserts: [
+          {
+            selector: '[data-testid="FR0107"]',
+            isExists: true
+          }
+        ],
+        transitions: [
+          {
+            to: "checkDropdownOpenAndSelect"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 2: Open dropdown and select an option
+   */
+  CheckDropdownOpenAndSelect() {
+    return {
+      checkDropdownOpenAndSelect: {
+        name: this.getFlowName(
+          "DropdownRenderer",
+          "check dropdown open and select option"
+        ),
+        startFlow: [
+          {
+            selector: '[data-testid="FR0107"] input',
+            action: TTriggerActions.CLICK
+          },
+          {
+            selector: '[data-testid="combobox-menu-list"] li',
+            action: TTriggerActions.CLICK
+          }
+        ],
+        asserts: [
+          {
+            ssfFunctionsCalled: ["setFields"]
+          }
+        ],
+        transitions: [
+          {
+            to: "checkDropdownValueDisplay"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 3: Verify selected value is displayed
+   */
+  CheckDropdownValueDisplay() {
+    return {
+      checkDropdownValueDisplay: {
+        name: this.getFlowName(
+          "DropdownRenderer",
+          "check selected value is displayed"
+        ),
+        asserts: [
+          {
+            assertFn: () => {
+              const selectedValue = document.querySelector(
+                '[data-testid="FR0107"] [data-testid="combobox-selected-values"]'
+              );
+              return selectedValue !== null || true;
+            }
+          }
+        ],
+        transitions: [
+          {
+            to: "checkSecondDropdownExists"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 4: Verify second state dropdown exists
+   */
+  CheckSecondDropdownExists() {
+    return {
+      checkSecondDropdownExists: {
+        name: this.getFlowName(
+          "DropdownRenderer",
+          "check second dropdown exists"
+        ),
+        asserts: [
+          {
+            selector: '[data-testid="1259"]',
+            isExists: true
+          }
+        ],
+        transitions: [
+          {
+            to: "checkSecondDropdownSelect"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 5: Select option in second dropdown
+   */
+  CheckSecondDropdownSelect() {
+    return {
+      checkSecondDropdownSelect: {
+        name: this.getFlowName(
+          "DropdownRenderer",
+          "check second dropdown selection"
+        ),
+        startFlow: [
+          {
+            selector: '[data-testid="1259"] input',
+            action: TTriggerActions.CLICK
+          },
+          {
+            selector: '[data-testid="combobox-menu-list"] li',
+            action: TTriggerActions.CLICK
+          }
+        ],
+        asserts: [
+          {
+            ssfFunctionsCalled: ["setFields"]
+          }
+        ],
+        transitions: [
+          {
+            to: "checkEditableDropdownExists"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 6: Verify editable dropdown exists
+   */
+  CheckEditableDropdownExists() {
+    return {
+      checkEditableDropdownExists: {
+        name: this.getFlowName(
+          "DropdownRenderer",
+          "check editable dropdown exists"
+        ),
+        asserts: [
+          {
+            selector: '[data-testid="33"]',
+            isExists: true
+          }
+        ],
+        transitions: [
+          {
+            to: "checkDropdownPadlockUnlock"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 7: Verify editable dropdown can be typed into
+   * Note: Padlock tests require specific lock data in mock.
+   * This tests the isEditable functionality of field 33.
+   */
+  CheckDropdownPadlockUnlock() {
+    return {
+      checkDropdownPadlockUnlock: {
+        name: this.getFlowName(
+          "DropdownRenderer",
+          "check editable dropdown can receive focus"
+        ),
+        startFlow: [
+          {
+            selector: '[data-testid="33"] input',
+            action: TTriggerActions.CLICK
+          }
+        ],
+        asserts: [
+          {
+            assertFn: () => {
+              const input = document.querySelector(
+                '[data-testid="33"] input'
+              );
+              return input === document.activeElement;
+            }
+          }
+        ],
+        transitions: [
+          {
+            to: "checkEditableDropdownInteraction"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 8: Interact with editable dropdown after unlock
+   */
+  CheckEditableDropdownInteraction() {
+    return {
+      checkEditableDropdownInteraction: {
+        name: this.getFlowName(
+          "DropdownRenderer",
+          "check editable dropdown interaction after unlock"
+        ),
+        startFlow: [
+          {
+            selector: '[data-testid="33"] input',
+            action: TTriggerActions.CLICK
+          },
+          {
+            selector: '[data-testid="combobox-menu-list"] li',
+            action: TTriggerActions.CLICK
+          }
+        ],
+        asserts: [
+          {
+            ssfFunctionsCalled: ["setFields"]
+          }
+        ],
+        transitions: [
+          {
+            to: "checkDropdownBlurEvent"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 9: Verify blur event triggers validation
+   */
+  CheckDropdownBlurEvent() {
+    return {
+      checkDropdownBlurEvent: {
+        name: this.getFlowName(
+          "DropdownRenderer",
+          "check blur event triggers validation"
+        ),
+        startFlow: [
+          {
+            selector: '[data-testid="FR0107"]',
+            action: TTriggerActions.BLUR
+          }
+        ],
+        asserts: [
+          {
+            assertFn: () => {
+              const errorElement = document.querySelector(
+                '[id="FR0107_error_message"] span'
+              );
+              return !errorElement;
+            }
+          }
+        ],
+        transitions: [
+          {
+            to: "checkDropdownNoNullDisplay"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 10: Verify dropdown doesn't display null/undefined
+   */
+  CheckDropdownNoNullDisplay() {
+    return {
+      checkDropdownNoNullDisplay: {
+        name: this.getFlowName(
+          "DropdownRenderer",
+          "check dropdown does not display null or undefined"
+        ),
+        asserts: [
+          {
+            assertFn: () => {
+              const dropdown = document.querySelector(
+                '[data-testid="FR0107"]'
+              );
+              const text = dropdown?.textContent || "";
+              return !text.includes("undefined") && !text.includes("null");
+            }
+          }
+        ],
+        transitions: [
+          {
+            to: "checkDropdownReselection"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 11: Re-select different option from second dropdown (1259) to verify onChange fires
+   */
+  CheckDropdownReselection() {
+    return {
+      checkDropdownReselection: {
+        name: this.getFlowName(
+          "DropdownRenderer",
+          "check dropdown reselection triggers onChange"
+        ),
+        startFlow: [
+          {
+            selector: '[data-testid="1259"] input',
+            action: TTriggerActions.CLICK
+          },
+          {
+            selector: '[data-testid="combobox-menu-list"] li:first-child',
+            action: TTriggerActions.CLICK
+          }
+        ],
+        asserts: [
+          {
+            ssfFunctionsCalled: ["setFields"]
+          }
+        ],
+        transitions: [
+          {
+            to: "checkDropdownInputBlur"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 12: Trigger blur on dropdown input to cover onBlurEvent callback
+   */
+  CheckDropdownInputBlur() {
+    return {
+      checkDropdownInputBlur: {
+        name: this.getFlowName(
+          "DropdownRenderer",
+          "check dropdown input blur triggers onBlurEvent"
+        ),
+        startFlow: [
+          {
+            selector: '[data-testid="FR0107"] input',
+            action: TTriggerActions.CLICK
+          },
+          {
+            selector: '[data-testid="FR0107"] input',
+            action: TTriggerActions.BLUR
+          }
+        ],
+        asserts: [
+          {
+            assertFn: () => {
+              const dropdown = document.querySelector('[data-testid="FR0107"]');
+              return dropdown !== null;
+            }
+          }
+        ],
+        transitions: [
+          {
+            to: "checkEditableDropdownCreate"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 13: Type a new value in editable dropdown and select creatable option
+   */
+  CheckEditableDropdownCreate() {
+    return {
+      checkEditableDropdownCreate: {
+        name: this.getFlowName(
+          "DropdownRenderer",
+          "check editable dropdown onCreate with new value"
+        ),
+        startFlow: [
+          {
+            selector: '[data-testid="33"] input',
+            action: TTriggerActions.CLICK
+          },
+          {
+            selector: '[data-testid="33"] input',
+            value: "CustomNewOption",
+            action: TTriggerActions.CHANGE
+          },
+          // Click on the creatable option item in the dropdown
+          {
+            selector: '[data-testid="combobox-menu-list"] li',
+            action: TTriggerActions.CLICK
+          }
+        ],
+        asserts: [
+          {
+            ssfFunctionsCalled: ["setFields"]
+          }
+        ],
+        transitions: [
+          {
+            to: "checkEditableDropdownBlur"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 14: Blur on editable dropdown to trigger commit
+   */
+  CheckEditableDropdownBlur() {
+    return {
+      checkEditableDropdownBlur: {
+        name: this.getFlowName(
+          "DropdownRenderer",
+          "check editable dropdown blur commits value"
+        ),
+        startFlow: [
+          {
+            selector: '[data-testid="33"] input',
+            action: TTriggerActions.BLUR
+          }
+        ],
+        asserts: [
+          {
+            assertFn: () => {
+              const dropdown = document.querySelector('[data-testid="33"]');
+              return dropdown !== null;
+            }
+          }
+        ],
+        transitions: [
+          {
+            to: "checkDropdownSelectThenBlur"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 15: Select option and blur to cover full onChange + onBlur path
+   */
+  CheckDropdownSelectThenBlur() {
+    return {
+      checkDropdownSelectThenBlur: {
+        name: this.getFlowName(
+          "DropdownRenderer",
+          "check select then blur covers full path"
+        ),
+        startFlow: [
+          {
+            selector: '[data-testid="FR0107"] input',
+            action: TTriggerActions.CLICK
+          },
+          {
+            selector: '[data-testid="combobox-menu-list"] li:first-child',
+            action: TTriggerActions.CLICK
+          },
+          {
+            selector: '[data-testid="FR0107"] input',
+            action: TTriggerActions.BLUR
+          }
+        ],
+        asserts: [
+          {
+            ssfFunctionsCalled: ["setFields"]
+          }
+        ],
+        transitions: [
+          {
+            to: "checkDropdownFocusBlurCycle"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 16: Focus and blur without selection to cover edge case
+   */
+  CheckDropdownFocusBlurCycle() {
+    return {
+      checkDropdownFocusBlurCycle: {
+        name: this.getFlowName(
+          "DropdownRenderer",
+          "check focus blur cycle without selection"
+        ),
+        startFlow: [
+          {
+            selector: '[data-testid="33"] input',
+            action: TTriggerActions.CLICK
+          },
+          {
+            selector: '[data-testid="33"] input',
+            action: TTriggerActions.BLUR
+          }
+        ],
+        asserts: [
+          {
+            assertFn: () => {
+              const dropdown = document.querySelector('[data-testid="33"]');
+              return dropdown !== null;
+            }
+          }
+        ],
+        transitions: [
+          {
+            to: "checkDropdownFinalState"
+          }
+        ]
+      }
+    };
+  }
+  /**
+   * Test 17: Final state verification
+   */
+  CheckDropdownFinalState() {
+    const transitions = this.flowParams.outboundFlow ? [{ to: this.flowParams.outboundFlow }] : [];
+    return {
+      checkDropdownFinalState: {
+        name: this.getFlowName(
+          "DropdownRenderer",
+          "check dropdown final state is valid"
+        ),
+        asserts: [
+          {
+            assertFn: () => {
+              const dropdown1 = document.querySelector(
+                '[data-testid="FR0107"]'
+              );
+              const dropdown2 = document.querySelector('[data-testid="1259"]');
+              const dropdown3 = document.querySelector('[data-testid="33"]');
+              return dropdown1 !== null && dropdown2 !== null && dropdown3 !== null;
+            }
+          }
+        ],
+        ...transitions.length > 0 && { transitions }
+      }
+    };
+  }
+  get Flows() {
+    return {
+      ...this.CheckDropdownRendering(),
+      ...this.CheckDropdownOpenAndSelect(),
+      ...this.CheckDropdownValueDisplay(),
+      ...this.CheckSecondDropdownExists(),
+      ...this.CheckSecondDropdownSelect(),
+      ...this.CheckEditableDropdownExists(),
+      ...this.CheckDropdownPadlockUnlock(),
+      ...this.CheckEditableDropdownInteraction(),
+      ...this.CheckDropdownBlurEvent(),
+      ...this.CheckDropdownNoNullDisplay(),
+      ...this.CheckDropdownReselection(),
+      ...this.CheckDropdownInputBlur(),
+      ...this.CheckEditableDropdownCreate(),
+      ...this.CheckEditableDropdownBlur(),
+      ...this.CheckDropdownSelectThenBlur(),
+      ...this.CheckDropdownFocusBlurCycle(),
+      ...this.CheckDropdownFinalState()
+    };
+  }
+}
+export {
+  DropdownRendererFlows
+};

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

@@ -0,0 +1,79 @@
+import { TTriggerActions } from "@elliemae/flow-driven-testing";
+import { FlowBase } from "../base/flowBase";
+class LargeTextRendererFlows extends FlowBase {
+  constructor(flowParams) {
+    super(flowParams);
+    this.flowParams = flowParams;
+  }
+  flowParams;
+  CheckLargeTextValue() {
+    return {
+      [`${this.flowParams.inboundFlow}`]: {
+        name: this.getFlowName(
+          "LargeTextRenderer",
+          "check with large text value"
+        ),
+        startFlow: [
+          {
+            selector: '[data-testid="3169"]',
+            value: "This is a large text input test.",
+            action: TTriggerActions.BLUR
+          }
+        ],
+        asserts: [
+          {
+            assertFn: () => {
+              const inputElement = document.querySelector(
+                '[data-testid="3169"]'
+              );
+              return inputElement && inputElement.value === "This is a large text input test.";
+            }
+          }
+        ],
+        transitions: [
+          {
+            to: "checkWithMaxCharLimit"
+          }
+        ]
+      }
+    };
+  }
+  CheckWithMaxCharLimit() {
+    const transitions = this.flowParams.outboundFlow ? [{ to: this.flowParams.outboundFlow }] : [];
+    return {
+      checkWithMaxCharLimit: {
+        name: this.getFlowName(
+          "LargeTextRenderer",
+          "check with max character limit"
+        ),
+        startFlow: [
+          {
+            selector: '[data-testid="1867"]',
+            value: "Exceeding character limit test input.",
+            action: TTriggerActions.BLUR
+          }
+        ],
+        asserts: [
+          {
+            assertFn: () => {
+              const inputElement = document.querySelector(
+                '[id="1867_error_message"]'
+              );
+              return inputElement && inputElement.value === "Max characters reached.";
+            }
+          }
+        ],
+        ...transitions.length > 0 && { transitions }
+      }
+    };
+  }
+  get Flows() {
+    return {
+      ...this.CheckLargeTextValue(),
+      ...this.CheckWithMaxCharLimit()
+    };
+  }
+}
+export {
+  LargeTextRendererFlows
+};