Merge pull request #9653 from asirvadAbrahamVarghese/enhance-expect-alerts-command

Enhance expect alerts command

Author: jrafanie

cypress/README.md

@@ -103,4 +103,6 @@ ManageIQ implements the following cypress extensions:
 * `cy.expect_search_box()` - check if searchbox is present on the screen.
 * `cy.expect_text(element, text)` - check if the text in the element found by doing cy.get on the element String matches the provided text. `element`: String for the Cypress selector to get a specific element on the screen. `text`: String for the text that should be found within the selected element.
 * `cy.expect_flash(flashType, containsText)` - command to validate flash messages. `flashType` is the type of flash. It is recommended to use values from `flashClassMap`.`containsText` is the optional text that the flash-message should contain. e.g. `expect_flash(flashClassMap.warning, 'cancelled');`
-* `cy.expect_browser_confirm_with_text({ confirmTriggerFn, containsText, proceed })` - command to validate browser confirm alerts. `confirmTriggerFn` is the function that triggers the confirm dialog. This function **must return a Cypress.Chainable**, like `cy.get(...).click()` so that Cypress can properly wait and chain .then() afterward. `containsText` is the optional text that the confirm alert should contain. `proceed` is the flag to determine whether to proceed with the confirm (true = OK, false = Cancel). e.g. `cy.expect_browser_confirm_with_text({containsText: 'sure to proceed?', proceed: true, confirmTriggerFn: () => { return cy.get('[data-testid="delete"]').click()}});`, `cy.expect_browser_confirm_with_text({ confirmTriggerFn: () => cy.contains('deleted').click()});`
+* `cy.expect_browser_confirm_with_text({ confirmTriggerFn, containsText, proceed })` - command to validate browser confirm alerts. `confirmTriggerFn` is the function that triggers the confirm dialog. This function **must return a Cypress.Chainable**, like `cy.get(...).click()` so that Cypress can properly wait and chain .then() afterward. `containsText` is the optional text that the confirm alert should contain. `proceed` is the flag to determine whether to proceed with the confirm (true = OK, false = Cancel). e.g. `cy.expect_browser_confirm_with_text({containsText: 'sure to proceed?', proceed: true, confirmTriggerFn: () => { return cy.get('[data-testid="delete"]').click()}});`, `cy.expect_browser_confirm_with_text({ confirmTriggerFn: () => cy.contains('deleted').click()});`
+* `cy.expect_modal({ modalHeaderText, modalContentExpectedTexts, targetFooterButtonText })` - command to validate and interact with modal dialogs. Verifies the modal content and clicks a specified button in the modal footer. `modalHeaderText` is the optional text to verify in the modal header (case insensitive). `modalContentExpectedTexts` is an optional array of text strings that should be present in the modal content (case insensitive). `targetFooterButtonText` is the text of the button in the modal footer to click (required). e.g. `cy.expect_modal({ modalHeaderText: 'Confirmation', modalContentExpectedTexts: ['you want to continue?'], targetFooterButtonText: 'Confirm' });`, `cy.expect_modal({ modalContentExpectedTexts: ['cannot be undone.', 'data will be permanently deleted.'], targetFooterButtonText: 'Cancel' });`, `cy.expect_modal({ targetFooterButtonText: 'OK' });`
+* `cy.expect_inline_field_errors({ containsText })` - command to validate inline field error messages. `containsText` is the text that the error message should contain (required). e.g. `cy.expect_inline_field_errors({ containsText: 'blank' });`, `cy.expect_inline_field_errors({ containsText: 'taken' });`

cypress/support/assertions/expect_alerts.js

@@ -78,3 +78,91 @@ Cypress.Commands.add(
     });
   }
 );
+
+/**
+ * Custom Cypress command to validate and interact with modal dialogs.
+ * This command verifies the modal content and clicks a specified button in the modal footer.
+ *
+ * @param {Object} options - Options for the command.
+ * @param {string} [options.modalHeaderText] - Optional text to verify in the modal header.
+ * @param {string[]} [options.modalContentExpectedTexts] - Optional array of text strings that should be present in the modal content.
+ * @param {string} options.targetFooterButtonText - Text of the button in the modal footer to click (required).
+ *
+ * @example
+ * // Verify a confirmation modal and click "Confirm"
+ * cy.expect_modal({
+ *   modalHeaderText: 'Confirmation',
+ *   modalContentExpectedTexts: ['Are you sure you want to proceed?'],
+ *   targetFooterButtonText: 'Confirm'
+ * });
+ *
+ * @example
+ * // Verify a modal with multiple content texts and click "Cancel"
+ * cy.expect_modal({
+ *   modalHeaderText: 'Warning',
+ *   modalContentExpectedTexts: [
+ *     'action cannot be undone',
+ *     'data will be permanently deleted'
+ *   ],
+ *   targetFooterButtonText: 'Cancel'
+ * });
+ *
+ * @example
+ * // Just click "OK" in a modal without verifying content
+ * cy.expect_modal({
+ *   targetFooterButtonText: 'OK'
+ * });
+ */
+Cypress.Commands.add(
+  'expect_modal',
+  ({
+    modalHeaderText,
+    modalContentExpectedTexts = [],
+    targetFooterButtonText,
+  }) => {
+    if (!targetFooterButtonText) {
+      cy.logAndThrowError(
+        'targetFooterButtonText must be provided to identify the button that dismisses the modal'
+      );
+    }
+
+    if (modalHeaderText) {
+      cy.get('.bx--modal-container .bx--modal-header').should((header) => {
+        const headerText = header.text().toLowerCase();
+        expect(headerText).to.include(modalHeaderText.toLowerCase());
+      });
+    }
+
+    if (modalContentExpectedTexts && modalContentExpectedTexts.length) {
+      modalContentExpectedTexts.forEach((text) => {
+        cy.get('.bx--modal-container .bx--modal-content').should((content) => {
+          const contentText = content.text().toLowerCase();
+          expect(contentText).to.include(text.toLowerCase());
+        });
+      });
+    }
+
+    return cy
+      .contains(
+        '.bx--modal-container .bx--modal-footer button',
+        targetFooterButtonText
+      )
+      .click();
+  }
+);
+
+/**
+ * Custom Cypress command to validate inline field error messages.
+ * @param {Object} options - Options for the command.
+ * @param {string} options.containsText - Text that the error message should contain. This parameter is required.
+ * @returns {Cypress.Chainable} - The error message element if found, or an assertion failure.
+ * @example
+ * cy.expect_inline_field_errors({ containsText: 'blank' });
+ * cy.expect_inline_field_errors({ containsText: 'taken' });
+ */
+Cypress.Commands.add('expect_inline_field_errors', ({ containsText }) => {
+  if (!containsText) {
+    cy.logAndThrowError('containsText is required');
+  }
+  return cy.contains('#name-error-msg', containsText);
+});