Merge pull request #9654 from asirvadAbrahamVarghese/add-dual-list-commands

Add dual list commands

Author: jrafanie

cypress/README.md

@@ -76,6 +76,10 @@ ManageIQ implements the following cypress extensions:
 
 * `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');`
 
+##### dual_list_commands
+
+* `cy.dualListAction({ actionType, optionsToSelect })` - performs actions on a dual-list component (components with two lists where items can be moved between them). `actionType` is the type of action to perform, use values from DUAL_LIST_ACTION_TYPE: 'add' (move selected items from left to right), 'remove' (move selected items from right to left), 'add-all' (move all items from left to right), or 'remove-all' (move all items from right to left). `optionsToSelect` is an array of option texts to select (required for 'add' and 'remove' actions, not needed for 'add-all' and 'remove-all'). e.g. `cy.dualListAction({ actionType: DUAL_LIST_ACTION_TYPE.ADD, optionsToSelect: ['Option 1', 'Option 2'] });`, `cy.dualListAction({ actionType: DUAL_LIST_ACTION_TYPE.REMOVE, optionsToSelect: ['Option 3'] });`, `cy.dualListAction({ actionType: DUAL_LIST_ACTION_TYPE.ADD_ALL });`, `cy.dualListAction({ actionType: DUAL_LIST_ACTION_TYPE.REMOVE_ALL });`
+
 ##### element_selectors
 
 * `cy.getFormFooterButtonByTypeWithText({ buttonType, buttonText })` - retrieves form footer button by its name and type. `buttonText` is the name or text content of the button. `buttonType` is the HTML button type (e.g., 'button', 'submit', 'reset'). Defaults to 'button'. e.g. `cy.getFormFooterButtonByType({buttonType: 'Reset', buttonText: 'reset'});`, `cy.getFormFooterButtonByTypeWithText({buttonText: 'Cancel'});`

cypress/support/commands/constants/command_constants.js

@@ -33,3 +33,13 @@ export const BUTTON_CONFIG_KEYS = {
 };
 
 /* ========================================================== */
+
+/**
+ * Constant for dual-list component action types
+ */
+export const DUAL_LIST_ACTION_TYPE = {
+  ADD: 'add',
+  REMOVE: 'remove',
+  ADD_ALL: 'add-all',
+  REMOVE_ALL: 'remove-all',
+};

cypress/support/commands/dual_list_commands.js

@@ -0,0 +1,99 @@
+/* eslint-disable no-undef */
+/**
+ * @fileoverview
+ * This file contains Cypress commands for interacting with dual-list components.
+ * A dual-list component consists of two lists where items can be moved between them
+ * using add/remove buttons.
+ */
+import { DUAL_LIST_ACTION_TYPE } from './constants/command_constants';
+
+// CSS selectors for dual-list component elements
+const DUAL_LIST_BODY_SELECTOR =
+  'fieldset.bx--fieldset .bx--structured-list-tbody';
+const DUAL_LIST_OPTION_ROW_SELECTOR = '.bx--structured-list-row';
+
+/**
+ * Command to perform actions on a dual list component.
+ * This command allows you to:
+ * - Add selected items from the left list to the right list
+ * - Remove selected items from the right list to the left list
+ * - Add all items from the left list to the right list
+ * - Remove all items from the right list to the left list
+ *
+ * @param {Object} options - Parameters for the action
+ * @param {string} options.actionType - Type of action to perform. Use values from DUAL_LIST_ACTION_TYPE:
+ *   - DUAL_LIST_ACTION_TYPE.ADD: Move selected items from left to right
+ *   - DUAL_LIST_ACTION_TYPE.REMOVE: Move selected items from right to left
+ *   - DUAL_LIST_ACTION_TYPE.ADD_ALL: Move all items from left to right
+ *   - DUAL_LIST_ACTION_TYPE.REMOVE_ALL: Move all items from right to left
+ * @param {Array<string>} [options.optionsToSelect] - Array of option texts to select
+ *   (required for 'add' and 'remove' actions, not needed for 'add-all' and 'remove-all')
+ *
+ * @example
+ * // Add specific items from left to right
+ * cy.dualListAction({
+ *   actionType: DUAL_LIST_ACTION_TYPE.ADD,
+ *   optionsToSelect: ['Option 1', 'Option 2']
+ * });
+ *
+ * @example
+ * // Remove specific items from right to left
+ * cy.dualListAction({
+ *   actionType: DUAL_LIST_ACTION_TYPE.REMOVE,
+ *   optionsToSelect: ['Option 3']
+ * });
+ *
+ * @example
+ * // Add all items from left to right
+ * cy.dualListAction({
+ *   actionType: DUAL_LIST_ACTION_TYPE.ADD_ALL
+ * });
+ *
+ * @example
+ * // Remove all items from right to left
+ * cy.dualListAction({
+ *   actionType: DUAL_LIST_ACTION_TYPE.REMOVE_ALL
+ * });
+ */
+Cypress.Commands.add('dualListAction', ({ actionType, optionsToSelect }) => {
+  if (!actionType) {
+    cy.logAndThrowError('actionType is required');
+  }
+
+  const validActionTypes = Object.values(DUAL_LIST_ACTION_TYPE);
+  if (!validActionTypes.includes(actionType)) {
+    cy.logAndThrowError(
+      `Action type "${actionType}" not supported. Valid action types are: ${validActionTypes.join(
+        ', '
+      )}`
+    );
+  }
+
+  const isActionTypeAddAll = actionType === DUAL_LIST_ACTION_TYPE.ADD_ALL;
+  if (isActionTypeAddAll || actionType === DUAL_LIST_ACTION_TYPE.REMOVE_ALL) {
+    const targetButtonId = isActionTypeAddAll
+      ? '#move-all-right'
+      : '#move-all-left';
+
+    return cy.get(targetButtonId).click();
+  }
+
+  const isActionTypeAdd = actionType === DUAL_LIST_ACTION_TYPE.ADD;
+  if (isActionTypeAdd || actionType === DUAL_LIST_ACTION_TYPE.REMOVE) {
+    if (!optionsToSelect || !optionsToSelect.length) {
+      cy.logAndThrowError(
+        'optionsToSelect array is required for add and remove actions'
+      );
+    }
+
+    const targetListIndex = isActionTypeAdd ? 'first' : 'last';
+    const targetButtonId = isActionTypeAdd ? '#move-right' : '#move-left';
+    optionsToSelect.forEach((option) => {
+      cy.get(DUAL_LIST_BODY_SELECTOR)
+        [targetListIndex]()
+        .contains(DUAL_LIST_OPTION_ROW_SELECTOR, option)
+        .click();
+    });
+    cy.get(targetButtonId).click();
+  }
+});

cypress/support/e2e.js

@@ -42,6 +42,7 @@
 // Commands
 import './commands/api_commands.js';
 import './commands/custom_logging_commands.js';
+import './commands/dual_list_commands.js';
 import './commands/element_selectors.js';
 import './commands/explorer.js';
 import './commands/form_elements_validation_commands.js';