Merge pull request #9522 from asirvadAbrahamVarghese/add-cypress-command-select-accordion-item

Add cypress command select accordion item

Author: jrafanie

cypress/e2e/ui/validate-select-accordion-item.cy.js

@@ -0,0 +1,50 @@
+/* eslint-disable no-undef */
+
+describe('Validate clickItem', () => {
+  beforeEach(() => {
+    cy.login();
+    cy.menu('Settings', 'Application Settings');
+  });
+
+  it('should fail when an invalid node label is passed', (done) => {
+    cy.accordion('Access Control');
+
+    cy.on('fail', (err) => {
+      expect(err.message).to.include('not found');
+      done();
+    });
+
+    cy.selectAccordionItem([
+      'ManageIQ Region: Region 0 [0]',
+      'Tenants',
+      'No Company', // This label does not exist
+    ]);
+  });
+
+  it('should support path arrays containing both exact strings and regex patterns', () => {
+    cy.accordion('Settings');
+    cy.selectAccordionItem([
+      /^ManageIQ Region/,
+      'Zones',
+      /^Zone: Default/,
+      'Server: EVM [1] (current)',
+    ]);
+  });
+
+  it('should not collapse already expanded node', () => {
+    cy.accordion('Settings');
+    cy.selectAccordionItem([
+      /^ManageIQ Region/,
+      'Zones',
+      /^Zone: Default/,
+      'Server: EVM [1] (current)',
+    ]);
+    // Above path is already expanded, so this should not collapse it
+    cy.selectAccordionItem([
+      /^ManageIQ Region/,
+      'Zones',
+      /^Zone: Default/,
+      'Server: EVM [1] (current)',
+    ]);
+  });
+});

cypress/support/commands/explorer.js

@@ -24,3 +24,93 @@ Cypress.Commands.add('accordionItem', (name) => {
 
   cy.get('.list-group-item').contains(name).click();
 });
+
+/**
+ * Selects an accordion item based on a path of labels.
+ * @param accordionPath: The path can be a mix of strings and regular expressions.
+ * For example, `[/^ManageIQ Region/, 'Zone', 'Server']`
+ * will expand the accordion until it finds the item with the label 'Server' under 'Zone' under 'ManageIQ Region'.
+ * If the path is not found, it will throw an error.
+ */
+Cypress.Commands.add('selectAccordionItem', (accordionPath) => {
+  cy.get('li.list-group-item').then(($items) => {
+    // Converting jQuery collection to an array for easier manipulation
+    const listItems = [...$items];
+
+    /**
+     * Function to recursively expand the accordion and click the target item.
+     * @param {number} accordionPathIndex: The current index in the accordionPath array.
+     * @param {number} searchStartIndex: The index in the listItems array to start searching from,
+     *                                   once the first label is matched, it is not required to start iterating from the beginning.
+     * @returns {void}
+     */
+    const expandAndClickPath = (accordionPathIndex, searchStartIndex) => {
+      const accordionLabel = accordionPath[accordionPathIndex];
+      const isClickableNode = accordionPathIndex === accordionPath.length - 1;
+
+      for (let i = searchStartIndex; i < listItems.length; i++) {
+        /* To remove */
+        Cypress.log({
+          name: 'selectAccordionItem',
+          message: `Loop index: ${i} & Searching for label: ${accordionLabel}`,
+        });
+
+        const liText = listItems[i].textContent.trim();
+        // Check if the current item matches the label
+        // Use either string match or regex match based on the type of accordionLabel
+        let isMatch = false;
+        if (typeof accordionLabel === 'string') {
+          isMatch = liText === accordionLabel;
+        } else if (accordionLabel instanceof RegExp) {
+          isMatch = accordionLabel.test(liText);
+        }
+
+        if (isMatch) {
+          /* To remove */
+          Cypress.log({
+            name: 'selectAccordionItem',
+            message: `Matched "${liText}" at index ${i}`,
+          });
+
+          // Wrap the current li element in a jQuery object to use jQuery methods
+          const currentLiElement = Cypress.$(listItems[i]);
+          // If it's the last label in the path, then that is the desired item to click
+          if (isClickableNode) {
+            // Click the node corresponding to the last label in the given path and terminate
+            cy.wrap(currentLiElement).click();
+            return;
+          }
+
+          const isExpandable =
+            currentLiElement.find('span.fa-angle-right').length > 0;
+
+          // If it's not the last label in the path, either expand the node
+          // or move to the next label in the given path
+          if (isExpandable) {
+            // Expand the node
+            cy.wrap(currentLiElement)
+              .find('span.fa-angle-right')
+              .click()
+              .then(() => {
+                // Recurse to the next label in the given path array and
+                // start iteration from the current index
+                expandAndClickPath(accordionPathIndex + 1, i + 1);
+              });
+          } else {
+            // If it's already expanded, continue to the next label
+            // start iteration from the current index
+            expandAndClickPath(accordionPathIndex + 1, i + 1);
+          }
+          // Exit the current function scope
+          return;
+        }
+      }
+      // If we reach here, it means the label was not found
+      throw new Error(`Accordion item: "${accordionLabel}" not found`);
+    };
+
+    // Start the recursive call from the first label in the given path
+    // and from the beginning of the accordion items in the panel
+    expandAndClickPath(0, 0);
+  });
+});