diff --git a/packages/utils/src/CypressUtils/PaginationUtils.js b/packages/utils/src/CypressUtils/PaginationUtils.js index b6e87bcc8..5f15e239f 100644 --- a/packages/utils/src/CypressUtils/PaginationUtils.js +++ b/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 }; diff --git a/packages/utils/src/CypressUtils/TableUtils.js b/packages/utils/src/CypressUtils/TableUtils.js index 13f9fcab0..44b01e6b2 100644 --- a/packages/utils/src/CypressUtils/TableUtils.js +++ b/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`); + } +}; diff --git a/packages/utils/src/CypressUtils/selectors.js b/packages/utils/src/CypressUtils/selectors.js index 82eb47634..585227f31 100644 --- a/packages/utils/src/CypressUtils/selectors.js +++ b/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';