Merge pull request #9530 from asirvadAbrahamVarghese/fix-toolbar-cypress-command

Fixed toolbar to throw error on wrong option

Author: jrafanie

cypress/README.md

@@ -54,7 +54,11 @@ ManageIQ implements the following cypress extensions:
 ##### toolbar
 
 * `cy.toolbarItems(toolbarButton)` - returns an array of objects {text: String, disabled: Boolean} for the toolbar dropdown buttons for when a toolbar button is clicked. `toolbarButton` is the string for the text of the toolbar button that you want to click on.
-* `cy.toolbar(toolbarButton, dropdownButton)` - click on the toolbar button specified by the user. Can also then click on a specified dropdown button as well. `toolbarButton` is the string for the text of the toolbar button that you want to click on. `dropdownButton` is the string for the text of the toolbar dropdown button that you want to click on. s
+* `cy.toolbar(toolbarButton, toolbarOption)` - click on the toolbar button specified by the user. Can also then click on a specified dropdown button as well. `toolbarButton` is the string for the text of the toolbar button that you want to click on. `toolbarOption` is the string for the text of the toolbar dropdown option that you want to click on.
+
+##### custom_logging_commands
+
+* `cy.logAndThrowError(messageToLog, messageToThrow)` - Logs a custom error message to Cypress log and then throws an error. `messageToLog` is the message to display in the Cypress command log. `messageToThrow` is the optional error message to throw, defaults to `messageToLog`. e.g. `cy.logAndThrowError('This is the logged message', 'This is the thrown error message');`, `cy.logAndThrowError('This is the message that gets logged and thrown');`
 
 #### Assertions
 

cypress/support/commands/custom_logging_commands.js

@@ -0,0 +1,19 @@
+/* eslint-disable no-undef */
+
+/**
+ * Logs a custom error message to Cypress log and then throws an error.
+ *
+ * @param {string} messageToLog - The message to display in the Cypress command log.
+ * @param {string} [messageToThrow] - Optional error message to throw, defaults to messageToLog
+ *
+ * Usage:
+ * cy.logAndThrowError('This is the logged message', 'This is the thrown error message');
+ */
+Cypress.Commands.add('logAndThrowError', (messageToLog, messageToThrow) => {
+  Cypress.log({
+    name: 'error',
+    displayName: '❗ CypressError:',
+    message: messageToLog,
+  });
+  throw new Error(messageToThrow || messageToLog);
+});

cypress/support/commands/toolbar.js

@@ -1,36 +1,42 @@
 /* eslint-disable no-undef */
 
 // toolbarButton: String for the text of the toolbar button to click.
-// dropdownButton: String for the text of the dropdown button to click after the toolbar dropdown is opened.
-Cypress.Commands.add('toolbar', (toolbarButton, dropdownButton = '') => {
-  cy.get('#toolbar').get('button').then((toolbarButtons) => {
-    const nums = [...Array(toolbarButtons.length).keys()];
-    nums.forEach((index) => {
-      const button = toolbarButtons[index].children[0];
-      if (button && button.innerText && button.innerText.includes(toolbarButton)) {
-        button.click();
-        return;
+// toolbarOption: String for the text of the dropdown button to click after the toolbar dropdown is opened.
+Cypress.Commands.add('toolbar', (toolbarButton, toolbarOption = '') => {
+  const clickToolbarButton = cy
+    .get('#toolbar')
+    .find('button')
+    .then((buttons) => {
+      const targetToolbarButton = [...buttons].find(
+        (btn) => btn.innerText.trim() === toolbarButton
+      );
+
+      if (!targetToolbarButton) {
+        cy.logAndThrowError(`Toolbar button: "${toolbarButton}" was not found`);
       }
+      return cy.wrap(targetToolbarButton).click();
     });
-  });
 
-  if (dropdownButton) {
-    return cy.get('.bx--overflow-menu-options').then((dropdownButtons) => {
-      const buttons = dropdownButtons.children();
-      for (let index = 0; index < buttons.length; index++) {
-        const button = buttons[index];
-        if (
-          button &&
-          button.innerText &&
-          button.innerText.includes(dropdownButton)
-        ) {
-          return cy.wrap(button.children[0]).click();
+  // If toolbarOption is provided, wait for toolbar to open,
+  // then look for the given toolbar option
+  if (toolbarOption) {
+    return clickToolbarButton.then(() => {
+      return cy.get('.bx--overflow-menu-options li').then((toolbarOptions) => {
+        const targetToolbarOption = [...toolbarOptions].find(
+          (option) => option.innerText.trim() === toolbarOption
+        );
+
+        if (!targetToolbarOption) {
+          cy.logAndThrowError(`"${toolbarOption}" option was not found in the "${toolbarButton}" toolbar`);
         }
-      }
-      return cy.wrap(null);
+        // returning the cypress chainable to the top of the command scope
+        return cy.wrap(targetToolbarOption).click();
+      });
     });
   }
-  return cy.wrap(null);
+
+  // else, just return the toolbar button click chain
+  return clickToolbarButton;
 });
 
 // toolbarButton: String for the text of the toolbar button to click.

cypress/support/e2e.js

@@ -40,20 +40,21 @@
 // ***********************************************************
 
 // Commands
-import './commands/explorer.js'
-import './commands/gtl.js'
-import './commands/login.js'
-import './commands/menu.js'
-import './commands/stub_notifications.js'
-import './commands/toolbar.js'
-import './commands/throttle_response.js'
+import './commands/custom_logging_commands.js';
+import './commands/explorer.js';
+import './commands/gtl.js';
+import './commands/login.js';
+import './commands/menu.js';
+import './commands/stub_notifications.js';
+import './commands/throttle_response.js';
+import './commands/toolbar.js';
 
 // Assertions
-import './assertions/expect_rates_table.js';
-import './assertions/expect_search_box.js'
-import './assertions/expect_title.js'
-import './assertions/expect_text.js'
 import './assertions/expect_alerts.js';
+import './assertions/expect_rates_table.js';
+import './assertions/expect_search_box.js';
+import './assertions/expect_text.js';
+import './assertions/expect_title.js';
 
 // This is needed to prevent Cypress tests from failing due to uncaught errors:
 // Undefined errors are occuring on every initial page load of Manage IQ