feat(CypressUtils): Align selectors, functions with PF5 (#1968)

This makes the cypress utilities consistent with the PF5 upgrades. Mainly selectors are affected, but so do the helping functions that use them.

packages/utils/src/CypressUtils/PaginationUtils.js

@@ -1,5 +1,5 @@
 /* global cy */
-import { DROPDOWN_ITEM, DROPDOWN_TOGGLE, PAGINATION_MENU, TOOLBAR } from './selectors';
+import { MENU_ITEM, MENU_TOGGLE, PAGINATION, PAGINATION_TOP } from './selectors';
 
 const DEFAULT_ROW_COUNT = 20;
 const PAGINATION_VALUES = [10, 20, 50, 100];
@@ -29,7 +29,7 @@ export function itemsPerPage(totalLength, pageSize = DEFAULT_ROW_COUNT) {
  * @param {number} n - the length of fixtures array e.g. the amount of items overall.
  */
 export function checkPaginationTotal(n) {
-  return cy.get('.pf-v5-c-options-menu__toggle-text').find('b').eq(1).should('have.text', n);
+  return cy.get(PAGINATION).should('contain.text', `of ${n}`);
 }
 
 /**
@@ -38,11 +38,9 @@ export function checkPaginationTotal(n) {
  * @param {array} expectedValues - array of strings with pagination values
  */
 export function checkPaginationValues(expectedValues) {
-  cy.get(TOOLBAR).find(PAGINATION_MENU).find(DROPDOWN_TOGGLE).click();
-  cy.get(TOOLBAR)
-    .find(PAGINATION_MENU)
-    .find('ul[class=pf-v5-c-options-menu__menu]')
-    .find('li')
+  cy.get(PAGINATION_TOP).find(MENU_TOGGLE).click();
+  cy.get(PAGINATION_TOP)
+    .find(MENU_ITEM)
     .each(($el, index) => {
       cy.wrap($el).should('have.text', `${expectedValues[index]} per page`);
     });
@@ -61,14 +59,8 @@ export function checkPaginationValues(expectedValues) {
  *  });
  */
 export function changePagination(paginationValue) {
-  cy.get(TOOLBAR).find(PAGINATION_MENU).find(DROPDOWN_TOGGLE).click();
-  return cy
-    .get(TOOLBAR)
-    .find(PAGINATION_MENU)
-    .find('ul[class=pf-v5-c-options-menu__menu]')
-    .find(DROPDOWN_ITEM)
-    .contains(`${paginationValue}`)
-    .click();
+  cy.get(PAGINATION_TOP).find(MENU_TOGGLE).click();
+  return cy.get(PAGINATION_TOP).find(MENU_ITEM).contains(`${paginationValue}`).click();
 }
 
 export { DEFAULT_ROW_COUNT, PAGINATION_VALUES, SORTING_ORDERS };

packages/utils/src/CypressUtils/TableUtils.js

@@ -1,9 +1,6 @@
 /* global cy, Cypress */
 import _ from 'lodash';
-
-import { ROW, TABLE, TBODY, TITLE } from './selectors';
-import { findElementByOuiaId } from './CustomCommands';
-findElementByOuiaId();
+import { EMPTY_STATE, EMPTY_STATE_ICON, EMPTY_STATE_TITLE, TABLE, TABLE_ROW, TABLE_ROW_CHECKBOX } from './selectors';
 
 /**
  * - Check the table column headers to be equal to provided array of objects.
@@ -26,10 +23,9 @@ export function checkTableHeaders(expectedHeaders) {
  * - Check if the table setting of "rows shown" is equal to the passed number parameter.
  * @typedef {Object} checkRowCounts
  * @param {number} n - number of rows
- * @param {boolean} isSelectableTable - selectable table option
  */
-export function checkRowCounts(n, isSelectableTable = false) {
-  return isSelectableTable ? cy.get('table').find(TBODY).should('have.length', n) : cy.get('table').find(TBODY).find(ROW).should('have.length', n);
+export function checkRowCounts(n) {
+  cy.get('table').find(TABLE_ROW).should('have.length', n);
 }
 /**
  * - Checks the URL for the name of the column which sorting is "active".
@@ -60,10 +56,22 @@ export function checkEmptyState(title, checkIcon = false) {
   cy.get(TABLE)
     // @ts-ignore
     // NEED TO FIX type error here
-    .ouiaId('empty-state')
+    .find(EMPTY_STATE)
     .should('have.length', 1)
     .within(() => {
-      cy.get('.pf-v5-c-empty-state__icon').should('have.length', checkIcon ? 1 : 0);
-      cy.get(`h5${TITLE}`).should('have.text', title);
+      cy.get(EMPTY_STATE_ICON).should('have.length', checkIcon ? 1 : 0);
+      cy.get(EMPTY_STATE_TITLE).should('have.text', title);
     });
 }
+
+export const selectRowN = (number) => {
+  cy.get(TABLE_ROW_CHECKBOX).eq(number).click();
+};
+
+export const checkSelectedNumber = (number, selector = '#toggle-checkbox') => {
+  if (number === 0) {
+    cy.get(selector).should('not.exist');
+  } else {
+    cy.get(selector).should('have.text', `${number} selected`);
+  }
+};

packages/utils/src/CypressUtils/selectors.js

@@ -1,45 +1,51 @@
-const TOOLBAR = 'div[id="ins-primary-data-toolbar"]';
-const CHIP_GROUP = 'div[data-ouia-component-type="PF5/ChipGroup"]';
-const CHIP = '[data-ouia-component-type="PF5/Chip"]';
-const ROW = '[data-ouia-component-type="PF5/TableRow"]:not([class~="pf-v5-c-table__expandable-row"])';
-const PAGINATION = 'div[data-ouia-component-type="PF5/Pagination"]';
-const PAGINATION_MENU = 'div[data-ouia-component-type="PF5/PaginationOptionsMenu"]';
-const DROPDOWN = '[data-ouia-component-type="PF5/Dropdown"]';
-const MODAL = '[data-ouia-component-type="PF5/ModalContent"]';
-const CHECKBOX = '[data-ouia-component-type="PF5/Checkbox"]';
-const TEXT_INPUT = '[data-ouia-component-type="PF5/TextInput"]';
-const DROPDOWN_TOGGLE = '[data-ouia-component-type="PF5/DropdownToggle"]';
-const DROPDOWN_ITEM = '[data-ouia-component-type="PF5/DropdownItem"]';
-const TBODY = 'tbody[role=rowgroup]';
-const TOOLBAR_FILTER = '.ins-c-primary-toolbar__filter';
-const TABLE = 'table';
-const TABLE_HEADER = 'thead';
-const ROWS_TOGGLER = `${TABLE_HEADER} .pf-v5-c-table__toggle`;
-const TITLE = '[data-ouia-component-type="PF5/Title"]';
-const ouiaId = (id) => `[data-ouia-component-id="${id}"]`;
-const FILTERS_DROPDOWN = 'ul[class=pf-v5-c-dropdown__menu]';
-const FILTER_TOGGLE = 'button[class=pf-v5-c-select__toggle]';
+export const ouiaId = (id) => `[data-ouia-component-id="${id}"]`;
 
-export {
-  ouiaId,
-  TOOLBAR,
-  CHIP_GROUP,
-  CHIP,
-  ROW,
-  PAGINATION,
-  PAGINATION_MENU,
-  DROPDOWN,
-  MODAL,
-  CHECKBOX,
-  TEXT_INPUT,
-  DROPDOWN_TOGGLE,
-  DROPDOWN_ITEM,
-  TBODY,
-  TOOLBAR_FILTER,
-  TABLE,
-  TABLE_HEADER,
-  ROWS_TOGGLER,
-  TITLE,
-  FILTERS_DROPDOWN,
-  FILTER_TOGGLE,
-};
+/** PF5 OUIA */
+export const BUTTON = '[data-ouia-component-type="PF5/Button"]';
+export const DROPDOWN = '[data-ouia-component-type="PF5/Dropdown"]';
+export const DROPDOWN_TOGGLE = '[data-ouia-component-type="PF5/DropdownToggle"]';
+export const DROPDOWN_ITEM = '[data-ouia-component-type="PF5/DropdownItem"]';
+export const CHIP = '[data-ouia-component-type="PF5/Chip"]';
+export const CHIP_GROUP = 'div[data-ouia-component-type="PF5/ChipGroup"]';
+export const MENU = '[data-ouia-component-type="PF5/Menu"]';
+export const MENU_TOGGLE_CHECKBOX = '[data-ouia-component-type="PF5/MenuToggleCheckbox"]';
+export const MODAL_CONTENT = '[data-ouia-component-type="PF5/ModalContent"]';
+export const CHECKBOX = '[data-ouia-component-type="PF5/Checkbox"]';
+export const TITLE = '[data-ouia-component-type="PF5/Title"]';
+export const PAGINATION = '[data-ouia-component-type="PF5/Pagination"]';
+export const TEXT_INPUT = '[data-ouia-component-type="PF5/TextInput"]';
+export const TOOLBAR = '[data-ouia-component-type="PF5/Toolbar"]';
+export const TABLE = '[data-ouia-component-type="PF5/Table"]';
+export const TABLE_HEADER = 'thead [data-ouia-component-type="PF5/TableRow"]';
+export const TABLE_ROW = 'tbody [data-ouia-component-type="PF5/TableRow"]';
+export const TABLE_ROW_CHECKBOX = 'tbody [data-ouia-component-type="PF5/TableRow"] input';
+export const EMPTY_STATE = '[data-ouia-component-type="PF4/EmptyState"]';
+export const CARD = '[data-ouia-component-type="PF5/Card"]';
+export const BREADCRUMB = '[data-ouia-component-type="PF5/Breadcrumb"]';
+export const TAB_CONTENT = '[data-ouia-component-type="PF5/TabContent"]';
+export const TAB_BUTTON = '[data-ouia-component-type="PF5/TabButton"]';
+export const ALERT = '[data-ouia-component-type="PF5/Alert"]';
+
+/** PF5 classes */
+export const MENU_TOGGLE = '.pf-v5-c-menu-toggle';
+export const MENU_LIST = '.pf-v5-c-menu__list';
+export const MENU_TOGGLE_TEXT = '.pf-v5-c-menu-toggle__text';
+export const MENU_ITEM = '.pf-v5-c-menu__list-item';
+export const SELECT_MENU_ITEM = '.pf-v5-c-select__menu-item';
+export const PAGINATION_TOP = `${PAGINATION}:not(.pf-m-bottom)`;
+export const PAGINATION_BOTTOM = `${PAGINATION}.pf-m-bottom`;
+export const EMPTY_STATE_TITLE = '.pf-v5-c-empty-state__title';
+export const EMPTY_STATE_ICON = '.pf-v5-c-empty-state__icon';
+export const CARD_TITLE = '.pf-v5-c-card__title';
+
+/** PF5 aria */
+export const PAGINATION_NEXT = 'button[aria-label="Go to next page"]';
+export const PAGINATION_PREV = 'button[aria-label="Go to previous page"]';
+export const PAGINATION_LAST = 'button[aria-label="Go to last page"]';
+export const PAGINATION_FIRST = 'button[aria-label="Go to first page"]';
+export const PAGINATION_CURRENT = '[aria-label="Current page"]';
+
+/** FEC, other */
+export const PRIMARY_TOOLBAR = '[data-ouia-component-id="PrimaryToolbar"]';
+export const PRIMARY_TOOLBAR_ACTIONS = '.ins-c-primary-toolbar__actions';
+export const CONDITIONAL_FILTER = '.ins-c-conditional-filter__group';