diff --git a/.travis.yml b/.travis.yml index 65d0dbb9d..5bcb31bf9 100644 --- a/.travis.yml +++ b/.travis.yml @@ -11,7 +11,7 @@ jobs: - stage: Lint script: npm run lint && commitlint-travis - stage: Test - script: npm run test + script: npm run test && npm run test:ct after_success: npm run coverage - stage: Tag if: (fork = false) AND (branch = master) diff --git a/cypress/support/utils.js b/cypress/support/utils.js index 98c84574d..307007d1a 100644 --- a/cypress/support/utils.js +++ b/cypress/support/utils.js @@ -1,19 +1,9 @@ -/* eslint-disable rulesdir/disallow-fec-relative-imports */ -import { ROW } from '@redhat-cloud-services/frontend-components-utilities'; - export const ORDER_TO_URL = { ascending: 'ASC', descending: 'DESC', }; -export const selectRowN = (number) => { - cy.get(ROW).eq(number).find('.pf-v5-c-table__check').click(); -}; - -export const checkSelectedNumber = ( - number, - selector = '#toggle-checkbox-text' -) => { +export const checkSelectedNumber = (number, selector = '#toggle-checkbox') => { if (number === 0) { cy.get(selector).should('not.exist'); } else { diff --git a/package-lock.json b/package-lock.json index 8ad20a5da..1eebe185c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,7 @@ "@patternfly/react-table": "^5.1.2", "@redhat-cloud-services/frontend-components": "^4.2.3", "@redhat-cloud-services/frontend-components-notifications": "^4.1.0", - "@redhat-cloud-services/frontend-components-utilities": "^4.0.2", + "@redhat-cloud-services/frontend-components-utilities": "^4.0.4", "@redhat-cloud-services/host-inventory-client": "1.2.13", "@unleash/proxy-client-react": "^3.5.0", "awesome-debounce-promise": "^2.1.0", @@ -5860,9 +5860,9 @@ } }, "node_modules/@redhat-cloud-services/frontend-components-utilities": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/@redhat-cloud-services/frontend-components-utilities/-/frontend-components-utilities-4.0.2.tgz", - "integrity": "sha512-LUAaJwpi8EmyrNrGum53HcSpO0rrwvXkdEmaXjfooRlvVtLz8twsjaiM2jFfqWXbZMq43gQufn/wy8nquRoq6w==", + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/@redhat-cloud-services/frontend-components-utilities/-/frontend-components-utilities-4.0.4.tgz", + "integrity": "sha512-46bIIwp64LZ401dj3ZznQ3ENuGcanwjqgtyH4ft1jlY7Vo9I/Lc3s+xrl1xpfSRUuqN51JkDpfoojRtUeXULnQ==", "dependencies": { "@redhat-cloud-services/types": "^0.0.24", "@sentry/browser": "^5.30.0", diff --git a/package.json b/package.json index 1f06ebc17..15ec24b9b 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "@patternfly/react-table": "^5.1.2", "@redhat-cloud-services/frontend-components": "^4.2.3", "@redhat-cloud-services/frontend-components-notifications": "^4.1.0", - "@redhat-cloud-services/frontend-components-utilities": "^4.0.2", + "@redhat-cloud-services/frontend-components-utilities": "^4.0.4", "@redhat-cloud-services/host-inventory-client": "1.2.13", "@unleash/proxy-client-react": "^3.5.0", "awesome-debounce-promise": "^2.1.0", diff --git a/src/Utilities/hooks/useBulkSelectConfig.js b/src/Utilities/hooks/useBulkSelectConfig.js index 5edc6c487..019a17a71 100644 --- a/src/Utilities/hooks/useBulkSelectConfig.js +++ b/src/Utilities/hooks/useBulkSelectConfig.js @@ -92,7 +92,7 @@ export const useBulkSelectConfig = ( onSelectRows(0, value); }, toggleProps: { - 'data-ouia-component-type': 'bulk-select-toggle-button', + 'data-ouia-component-id': 'bulk-select-toggle-button', children: isBulkLoading ? ( [ diff --git a/src/components/GroupSystems/GroupSystems.cy.js b/src/components/GroupSystems/GroupSystems.cy.js index 07bd346a9..2721b226c 100644 --- a/src/components/GroupSystems/GroupSystems.cy.js +++ b/src/components/GroupSystems/GroupSystems.cy.js @@ -2,37 +2,38 @@ import { CHIP, CHIP_GROUP, - DROPDOWN, + CONDITIONAL_FILTER, DROPDOWN_ITEM, - DROPDOWN_TOGGLE, - MODAL, + MENU_ITEM, + MENU_TOGGLE, + MENU_TOGGLE_CHECKBOX, + MODAL_CONTENT, PAGINATION_VALUES, - ROW, + PRIMARY_TOOLBAR, + PRIMARY_TOOLBAR_ACTIONS, SORTING_ORDERS, + TABLE_ROW, + TABLE_ROW_CHECKBOX, TEXT_INPUT, - TOOLBAR, - TOOLBAR_FILTER, changePagination, checkEmptyState, checkPaginationTotal, checkPaginationValues, + checkSelectedNumber as checkSelectedNumberFec, checkTableHeaders, hasChip, + selectRowN, } from '@redhat-cloud-services/frontend-components-utilities'; +import _, { cloneDeep } from 'lodash'; +import fixtures from '../../../cypress/fixtures/hosts.json'; import { featureFlagsInterceptors, groupsInterceptors, hostsInterceptors, systemProfileInterceptors, } from '../../../cypress/support/interceptors'; +import { ORDER_TO_URL } from '../../../cypress/support/utils'; import GroupSystems from './GroupSystems'; -import fixtures from '../../../cypress/fixtures/hosts.json'; -import { - ORDER_TO_URL, - checkSelectedNumber as checkSelectedNumber_, - selectRowN, -} from '../../../cypress/support/utils'; -import _, { cloneDeep } from 'lodash'; const GROUP_NAME = 'foobar'; const ROOT = 'div[id="group-systems-table"]'; @@ -56,7 +57,7 @@ hostsAllInGroupFixtures.results = hostsAllInGroupFixtures.results.map( const TEST_ID = hostsAllInGroupFixtures.results[0].groups[0].id; const checkSelectedNumber = (number) => - checkSelectedNumber_(number, '#bulk-select-systems-toggle-checkbox-text'); + checkSelectedNumberFec(number, '#bulk-select-systems-toggle-checkbox'); const mountTable = (initialEntries) => cy.mountWithContext( @@ -108,7 +109,7 @@ describe('renders correctly', () => { }); it('renders toolbar', () => { - cy.get(TOOLBAR).should('have.length', 1); + cy.get(PRIMARY_TOOLBAR).should('have.length', 1); }); it('renders table header', () => { @@ -136,7 +137,7 @@ describe('defaults', () => { }); it('name filter is a default filter', () => { - cy.get(TOOLBAR_FILTER).find(TEXT_INPUT).should('exist'); + cy.get(PRIMARY_TOOLBAR).find(TEXT_INPUT).should('exist'); }); }); @@ -189,7 +190,7 @@ describe('sorting', () => { }); const checkSorting = (label, order, dataField) => { - // get appropriate locators + // get appropriate selectors const header = `.ins-c-entity-table th[data-label="${label}"]`; if (order === 'ascending') { cy.get(header).find('button').click(); @@ -275,7 +276,7 @@ describe('filtering', () => { mountTable(); waitForTable(true); - cy.get('button[data-ouia-component-id="ConditionalFilter"]').click(); + cy.get(CONDITIONAL_FILTER).click(); cy.get(DROPDOWN_ITEM).should('not.contain', 'Group'); }); @@ -331,22 +332,22 @@ describe('selection and bulk selection', () => { }); */ it('can select page in dropdown toggle', () => { - cy.get(DROPDOWN_TOGGLE).eq(0).click(); // open selection dropdown - cy.get('.pf-v5-c-dropdown__menu > li').eq(1).click(); + cy.ouiaId('bulk-select-toggle-button').click(); // open selection dropdown + cy.get(DROPDOWN_ITEM).eq(1).click(); checkSelectedNumber(fixtures.count); }); it('can select page by clicking checkbox', () => { - cy.get('#bulk-select-systems-toggle-checkbox').eq(0).click(); + cy.get(PRIMARY_TOOLBAR).find(MENU_TOGGLE_CHECKBOX).click(); checkSelectedNumber(fixtures.count); - cy.get('#bulk-select-systems-toggle-checkbox').eq(0).click(); + cy.get(PRIMARY_TOOLBAR).find(MENU_TOGGLE_CHECKBOX).click(); checkSelectedNumber(0); }); it('can select none', () => { selectRowN(1); - cy.get(DROPDOWN_TOGGLE).eq(0).click(); // open selection dropdown - cy.get('.pf-v5-c-dropdown__menu > li').eq(0).click(); + cy.ouiaId('bulk-select-toggle-button').click(); // open selection dropdown + cy.get(DROPDOWN_ITEM).contains('Select none (0 items)').click(); checkSelectedNumber(0); }); }); @@ -364,7 +365,7 @@ describe('actions', () => { it('can open systems add modal', () => { cy.get('button').contains('Add systems').click(); - cy.get(MODAL).find('h1').contains('Add systems'); + cy.get(MODAL_CONTENT).find('h1').contains('Add systems'); cy.wait('@getHosts'); }); @@ -374,9 +375,9 @@ describe('actions', () => { 'DELETE', `/api/inventory/v1/groups/${TEST_ID}/hosts/${hostsAllInGroupFixtures.results[0].id}` ).as('request'); - cy.get(ROW).eq(1).find(DROPDOWN).click(); + cy.get(TABLE_ROW).eq(0).find(MENU_TOGGLE).click(); cy.get(DROPDOWN_ITEM).contains('Remove from group').click(); - cy.get(MODAL).within(() => { + cy.get(MODAL_CONTENT).within(() => { cy.get('h1').should('have.text', 'Remove from group'); cy.get('button[type="submit"]').click(); cy.wait('@request'); @@ -392,15 +393,15 @@ describe('actions', () => { .join(',')}` ).as('request'); - cy.get(ROW).find('[type="checkbox"]').eq(0).click(); - cy.get(ROW).find('[type="checkbox"]').eq(1).click(); + cy.get(TABLE_ROW_CHECKBOX).eq(0).click(); + cy.get(TABLE_ROW_CHECKBOX).eq(1).click(); // TODO: implement ouia selector for this component - cy.get('.ins-c-primary-toolbar__actions [aria-label="Actions"]').click(); + cy.get(PRIMARY_TOOLBAR_ACTIONS).click(); - cy.get(DROPDOWN_ITEM).contains('Remove from group').click(); + cy.get(MENU_ITEM).contains('Remove from group').click(); - cy.get(MODAL).within(() => { + cy.get(MODAL_CONTENT).within(() => { cy.get('h1').should('have.text', 'Remove from group'); cy.get('button[type="submit"]').click(); cy.wait('@request'); @@ -486,17 +487,19 @@ describe('integration with rbac', () => { it('the table is rendered', () => { cy.get('#group-systems-table').should('exist'); - cy.get(ROW).contains('dolor'); + cy.get(TABLE_ROW).contains('dolor'); }); it('no way to add or remove systems', () => { cy.get('button').contains('Add systems').shouldHaveAriaDisabled(); - cy.get('.ins-c-primary-toolbar__actions [aria-label="Actions"]').click(); - cy.get('button').contains('Remove from group').shouldHaveAriaDisabled(); + cy.get(PRIMARY_TOOLBAR_ACTIONS).click(); + cy.get(DROPDOWN_ITEM) + .contains('Remove from group') + .shouldHaveAriaDisabled(); }); it('per-row dropdown should be disabled', () => { - cy.get(ROW).eq(1).find(DROPDOWN).click(); + cy.get(TABLE_ROW).eq(0).find(MENU_TOGGLE).click(); cy.get('button').contains('Remove from group').shouldHaveAriaDisabled(); }); }); @@ -512,11 +515,11 @@ describe('integration with rbac', () => { }); it('can remove more hosts from group', () => { - cy.get(ROW).find('[type="checkbox"]').eq(0).click(); - cy.get(ROW).find('[type="checkbox"]').eq(1).click(); + cy.get(TABLE_ROW_CHECKBOX).eq(0).click(); + cy.get(TABLE_ROW_CHECKBOX).eq(1).click(); // TODO: implement ouia selector for this component - cy.get('.ins-c-primary-toolbar__actions [aria-label="Actions"]').click(); + cy.get(PRIMARY_TOOLBAR_ACTIONS).click(); cy.get(DROPDOWN_ITEM).contains('Remove from group').should('be.enabled'); }); diff --git a/src/components/GroupsTable/GroupsTable.cy.js b/src/components/GroupsTable/GroupsTable.cy.js index 37f215819..66604138e 100644 --- a/src/components/GroupsTable/GroupsTable.cy.js +++ b/src/components/GroupsTable/GroupsTable.cy.js @@ -3,31 +3,32 @@ import { CHIP, CHIP_GROUP, - DROPDOWN, DROPDOWN_ITEM, - DROPDOWN_TOGGLE, - MODAL, + MENU_ITEM, + MENU_TOGGLE, + MENU_TOGGLE_CHECKBOX, + MODAL_CONTENT, + PAGINATION_CURRENT, + PAGINATION_NEXT, + PAGINATION_TOP, PAGINATION_VALUES, - ROW, + PRIMARY_TOOLBAR_ACTIONS, SORTING_ORDERS, - TEXT_INPUT, + TABLE_ROW, TOOLBAR, - TOOLBAR_FILTER, changePagination, checkEmptyState, checkPaginationTotal, checkPaginationValues, + checkSelectedNumber, checkTableHeaders, hasChip, + selectRowN, } from '@redhat-cloud-services/frontend-components-utilities'; import _ from 'lodash'; import fixtures from '../../../cypress/fixtures/groups.json'; import { groupsInterceptors as interceptors } from '../../../cypress/support/interceptors'; -import { - ORDER_TO_URL, - checkSelectedNumber, - selectRowN, -} from '../../../cypress/support/utils'; +import { ORDER_TO_URL } from '../../../cypress/support/utils'; import GroupsTable from './GroupsTable'; const DEFAULT_ROW_COUNT = 50; @@ -125,7 +126,7 @@ describe('defaults', () => { }); it('name filter is a default filter', () => { - cy.get(TOOLBAR_FILTER).find(TEXT_INPUT).should('exist'); + cy.ouiaId('name-filter').should('exist'); }); }); @@ -156,7 +157,7 @@ describe('pagination', () => { }); it('can change page', () => { - cy.get('button[data-action=next]').eq(0).click(); // click "next page" button + cy.get(PAGINATION_TOP).find(PAGINATION_NEXT).click(); // click "next page" button cy.wait('@getGroups').its('request.url').should('include', `page=2`); }); }); @@ -173,14 +174,12 @@ describe('url search parameters', () => { .its('request.url') .should('contain', 'per_page=10') .and('contain', 'page=2'); - cy.ouiaId('pager').eq(0).find(DROPDOWN_TOGGLE).click(); - cy.get(DROPDOWN_ITEM) + cy.get(PAGINATION_TOP).find(MENU_TOGGLE).click(); + cy.get(PAGINATION_TOP) + .find(MENU_ITEM) .contains('10 per page') .should('have.class', 'pf-m-selected'); - cy.get('[data-ouia-component-id="pager"] .pf-v5-c-form-control').should( - 'have.value', - 2 - ); + cy.get(PAGINATION_CURRENT).should('have.value', 2); }); it('applies filters', () => { @@ -280,22 +279,22 @@ describe('selection and bulk selection', () => { }); it('can select all in dropdown toggle', () => { - cy.get(DROPDOWN_TOGGLE).eq(0).click(); // open selection dropdown - cy.get('.pf-v5-c-dropdown__menu > li').eq(2).click(); + cy.ouiaId('bulk-select-toggle-button').click(); // open selection dropdown + cy.get(DROPDOWN_ITEM).contains('Select all').click(); checkSelectedNumber(fixtures.total); }); it('can select all by clicking checkbox', () => { - cy.get('#toggle-checkbox').eq(0).click(); + cy.get(TOOLBAR).find(MENU_TOGGLE_CHECKBOX).click(); checkSelectedNumber(fixtures.total); - cy.get('#toggle-checkbox').eq(0).click(); + cy.get(TOOLBAR).find(MENU_TOGGLE_CHECKBOX).click(); checkSelectedNumber(0); }); it('can select none', () => { selectRowN(1); - cy.get(DROPDOWN_TOGGLE).eq(0).click(); // open selection dropdown - cy.get('.pf-v5-c-dropdown__menu > li').eq(1).click(); + cy.get(TOOLBAR).find(MENU_TOGGLE).contains('1 selected').click(); // open selection dropdown + cy.get(TOOLBAR).find(MENU_ITEM).eq(1).click(); checkSelectedNumber(0); }); }); @@ -311,7 +310,7 @@ describe('actions', () => { const TEST_ID = 0; it('bulk delete action is disabled when no items selected', () => { - cy.ouiaId('Actions').should('exist').click(); + cy.get(PRIMARY_TOOLBAR_ACTIONS).click(); cy.get(DROPDOWN_ITEM).contains('Delete group').shouldHaveAriaDisabled(); }); @@ -323,13 +322,13 @@ describe('actions', () => { }); it('can delete a group, 1', () => { - cy.get(ROW) + cy.get(TABLE_ROW) .eq(TEST_ID + 1) - .find(`${DROPDOWN} button`) + .find(MENU_TOGGLE) .click(); - cy.get(DROPDOWN_ITEM).contains('Delete group').click(); - cy.get(MODAL).find('h1').should('contain.text', 'Delete group?'); - cy.get(MODAL) + cy.get(MENU_ITEM).contains('Delete group').click(); + cy.get(MODAL_CONTENT).find('h1').should('contain.text', 'Delete group?'); + cy.get(MODAL_CONTENT) .find('p') .should( 'contain.text', @@ -339,10 +338,10 @@ describe('actions', () => { it('can delete a group, 2', () => { selectRowN(TEST_ID + 1); - cy.get(`${TOOLBAR} ${DROPDOWN}`).eq(1).click(); // open bulk action toolbar + cy.get(PRIMARY_TOOLBAR_ACTIONS).click(); cy.get(DROPDOWN_ITEM).contains('Delete group').click(); - cy.get(MODAL).find('h1').should('contain.text', 'Delete group?'); - cy.get(MODAL) + cy.get(MODAL_CONTENT).find('h1').should('contain.text', 'Delete group?'); + cy.get(MODAL_CONTENT) .find('p') .should( 'contain.text', @@ -356,9 +355,9 @@ describe('actions', () => { interceptors['successful with some items'](fixturesOneGroup); selectRowN(3); - cy.get(`${TOOLBAR} ${DROPDOWN}`).eq(1).click(); // open bulk action toolbar + cy.get(PRIMARY_TOOLBAR_ACTIONS).click(); cy.get(DROPDOWN_ITEM).contains('Delete group').click(); - cy.get(MODAL) + cy.get(MODAL_CONTENT) .find('h1') .should('contain.text', 'Cannot delete group at this time'); }); @@ -371,10 +370,10 @@ describe('actions', () => { const TEST_ROWS = [1, 2]; TEST_ROWS.forEach((row) => selectRowN(row)); - cy.get(`${TOOLBAR} ${DROPDOWN}`).eq(1).click(); // open bulk action toolbar + cy.get(PRIMARY_TOOLBAR_ACTIONS).click(); cy.get(DROPDOWN_ITEM).contains('Delete groups').click(); - cy.get(MODAL).find('h1').should('contain.text', 'Delete groups?'); - cy.get(MODAL) + cy.get(MODAL_CONTENT).find('h1').should('contain.text', 'Delete groups?'); + cy.get(MODAL_CONTENT) .find('p') .should( 'contain.text', @@ -390,9 +389,9 @@ describe('actions', () => { const TEST_ROWS = [1, 2, 3]; TEST_ROWS.forEach((row) => selectRowN(row)); - cy.get(`${TOOLBAR} ${DROPDOWN}`).eq(1).click(); // open bulk action toolbar + cy.get(PRIMARY_TOOLBAR_ACTIONS).click(); cy.get(DROPDOWN_ITEM).contains('Delete groups').click(); - cy.get(MODAL) + cy.get(MODAL_CONTENT) .find('h1') .should('contain.text', 'Cannot delete groups at this time'); }); @@ -445,19 +444,18 @@ describe('integration with rbac', () => { }); it('disables general actions', () => { - cy.ouiaId('Actions').should('exist').click(); - cy.get(TOOLBAR) .find('button') .contains('Create group') .shouldHaveAriaDisabled(); + + cy.get(PRIMARY_TOOLBAR_ACTIONS).click(); cy.get(DROPDOWN_ITEM).contains('Delete group').shouldHaveAriaDisabled(); }); it('disables per-row actions', () => { - cy.get(ROW).eq(1).find(`${DROPDOWN} button`).click(); - - cy.get(DROPDOWN_ITEM).contains('Delete group').shouldHaveAriaDisabled(); + cy.get(TABLE_ROW).eq(0).find(MENU_TOGGLE).click(); + cy.get(MENU_ITEM).contains('Delete group').shouldHaveAriaDisabled(); }); }); @@ -489,20 +487,20 @@ describe('integration with rbac', () => { }); it('has actions enabled for permitted group', () => { - cy.get(ROW).eq(1).find(`${DROPDOWN} button`).click(); + cy.get(TABLE_ROW).eq(0).find(MENU_TOGGLE).click(); cy.get(DROPDOWN_ITEM).contains('Rename group').shouldHaveAriaEnabled(); cy.get(DROPDOWN_ITEM).contains('Delete group').shouldHaveAriaEnabled(); }); it('has actions disabled for another group', () => { - cy.get(ROW).eq(2).find(`${DROPDOWN} button`).click(); + cy.get(TABLE_ROW).eq(1).find(MENU_TOGGLE).click(); cy.get(DROPDOWN_ITEM).contains('Rename group').shouldHaveAriaDisabled(); cy.get(DROPDOWN_ITEM).contains('Delete group').shouldHaveAriaDisabled(); }); it('should allow to bulk delete permitted groups', () => { - selectRowN(1); - cy.get(`${TOOLBAR} ${DROPDOWN}`).eq(1).click(); // open bulk action toolbar + selectRowN(0); + cy.get(PRIMARY_TOOLBAR_ACTIONS).click(); cy.get(DROPDOWN_ITEM) .contains('Delete group') .shouldHaveAriaEnabled() @@ -510,9 +508,9 @@ describe('integration with rbac', () => { }); it('cannot bulk delete if restricted group selected', () => { + selectRowN(0); selectRowN(1); - selectRowN(2); - cy.get(`${TOOLBAR} ${DROPDOWN}`).eq(1).click(); // open bulk action toolbar + cy.get(PRIMARY_TOOLBAR_ACTIONS).click(); cy.get(DROPDOWN_ITEM).contains('Delete group').shouldHaveAriaDisabled(); }); }); diff --git a/src/components/GroupsTable/GroupsTable.js b/src/components/GroupsTable/GroupsTable.js index 1e2b2ff0f..a03922b7c 100644 --- a/src/components/GroupsTable/GroupsTable.js +++ b/src/components/GroupsTable/GroupsTable.js @@ -447,6 +447,9 @@ const GroupsTable = ({ onCreateGroupClick }) => { }, ouiaId: 'groups-selector', count: selectedIds.length, + toggleProps: { + 'data-ouia-component-id': 'bulk-select-toggle-button', + }, }} actionsConfig={{ actions: [ diff --git a/src/components/ImmutableDevices/ImmutableDevices.cy.js b/src/components/ImmutableDevices/ImmutableDevices.cy.js index 15f3f276a..ede7d7c59 100644 --- a/src/components/ImmutableDevices/ImmutableDevices.cy.js +++ b/src/components/ImmutableDevices/ImmutableDevices.cy.js @@ -1,3 +1,4 @@ +/* eslint-disable rulesdir/disallow-fec-relative-imports */ import React from 'react'; import { Route, Routes } from 'react-router-dom'; import ImmutableDevices from './ImmutableDevices'; @@ -6,6 +7,13 @@ import { hostsInterceptors, } from '../../../cypress/support/interceptors'; import { DropdownItem } from '@patternfly/react-core/deprecated'; +import { + CONDITIONAL_FILTER, + DROPDOWN_ITEM, + MENU_ITEM, + MENU_TOGGLE, + TABLE_ROW, +} from '@redhat-cloud-services/frontend-components-utilities'; const defaultProps = { mergeAppColumns: (columns) => columns, @@ -214,11 +222,11 @@ describe('ImmutableDevices', () => { mountWithProps({ ...defaultProps, hideFilters }); - cy.get(`[aria-label="Conditional filter"]`).click(); - cy.get('.ins-c-conditional-filter__group > ul > li').contains('Tags'); + cy.get(CONDITIONAL_FILTER).click(); + cy.get(DROPDOWN_ITEM).contains('Tags'); }); - it('Should render table actions though the prop', () => { + it('Should render table actions through the prop', () => { const tableActions = () => [ { title: ( @@ -230,7 +238,7 @@ describe('ImmutableDevices', () => { ]; mountWithProps({ ...defaultProps, tableActions }); - cy.get(`[aria-label="Actions"]`).first().click(); - cy.get(`[aria-label="Mock table action"]`).should('be.visible'); + cy.get(TABLE_ROW).first().find(MENU_TOGGLE).click(); + cy.get(MENU_ITEM).contains('mock table action').should('be.visible'); }); }); diff --git a/src/components/InventoryGroupDetail/GroupDetailInfo.cy.js b/src/components/InventoryGroupDetail/GroupDetailInfo.cy.js index c487f407d..e264f240e 100644 --- a/src/components/InventoryGroupDetail/GroupDetailInfo.cy.js +++ b/src/components/InventoryGroupDetail/GroupDetailInfo.cy.js @@ -1,3 +1,8 @@ +/* eslint-disable rulesdir/disallow-fec-relative-imports */ +import { + CARD, + CARD_TITLE, +} from '@redhat-cloud-services/frontend-components-utilities'; import { GroupDetailInfo } from './GroupDetailInfo'; const mountPage = (params) => @@ -13,9 +18,9 @@ describe('group detail information page', () => { }); it('title is rendered', () => { - cy.get( - 'div[class="pf-v5-c-card__title pf-v5-c-title pf-m-lg card-title"]' - ).should('have.text', 'User access configuration'); + cy.get(CARD) + .find(CARD_TITLE) + .should('have.text', 'User access configuration'); }); it('button is present', () => { diff --git a/src/components/InventoryGroupDetail/InventoryGroupDetail.cy.js b/src/components/InventoryGroupDetail/InventoryGroupDetail.cy.js index 38e4a3a67..13096fafb 100644 --- a/src/components/InventoryGroupDetail/InventoryGroupDetail.cy.js +++ b/src/components/InventoryGroupDetail/InventoryGroupDetail.cy.js @@ -1,8 +1,11 @@ /* eslint-disable rulesdir/disallow-fec-relative-imports */ import { - DROPDOWN, - DROPDOWN_ITEM, - MODAL, + BREADCRUMB, + MENU_ITEM, + MENU_TOGGLE, + MODAL_CONTENT, + TAB_BUTTON, + TAB_CONTENT, } from '@redhat-cloud-services/frontend-components-utilities'; import groupDetailFixtures from '../../../cypress/fixtures/groups/620f9ae75A8F6b83d78F3B55Af1c4b2C.json'; import { @@ -11,8 +14,6 @@ import { } from '../../../cypress/support/interceptors'; import InventoryGroupDetail from './InventoryGroupDetail'; -const TAB_CONTENT = '[data-ouia-component-type="PF4/TabContent"]'; // TODO: move to FEC -const TAB_BUTTON = '[data-ouia-component-type="PF4/TabButton"]'; // TODO: move to FEC const TEST_GROUP_ID = '620f9ae75A8F6b83d78F3B55Af1c4b2C'; const mountPage = () => @@ -40,7 +41,8 @@ describe('group detail page', () => { cy.wait('@getGroupDetail'); cy.get('h1').contains(groupDetailFixtures.results[0].name); - cy.get('[data-ouia-component-type="PF4/Breadcrumb"] li') + cy.get(BREADCRUMB) + .find('li') .last() .should('have.text', groupDetailFixtures.results[0].name); }); @@ -49,9 +51,7 @@ describe('group detail page', () => { groupDetailInterceptors['long responding'](); mountPage(); - cy.get('[data-ouia-component-type="PF4/Breadcrumb"] li') - .last() - .find('.pf-v5-c-skeleton'); + cy.get(BREADCRUMB).find('li').last().find('.pf-v5-c-skeleton'); cy.get('h1').find('.pf-v5-c-skeleton'); cy.get('.pf-v5-c-empty-state').find('.pf-v5-c-spinner'); }); @@ -62,11 +62,11 @@ describe('group detail page', () => { groupDetailInterceptors['patch successful'](); mountPage(); - cy.ouiaId('group-actions-dropdown-toggle').should('be.enabled').click(); - cy.get(DROPDOWN_ITEM).contains('Rename').click(); + cy.get(MENU_TOGGLE).should('be.enabled').click(); + cy.get(MENU_ITEM).contains('Rename').click(); - cy.get(MODAL).find('input').type('1'); - cy.get(MODAL).find('button[type=submit]').click(); + cy.get(MODAL_CONTENT).find('input').type('1'); + cy.get(MODAL_CONTENT).find('button[type=submit]').click(); cy.wait('@patchGroup') .its('request.body') @@ -81,8 +81,8 @@ describe('group detail page', () => { groupDetailInterceptors['delete successful'](); mountPage(); - cy.ouiaId('group-actions-dropdown-toggle').should('be.enabled').click(); - cy.get(DROPDOWN_ITEM).contains('Delete').click(); + cy.get(MENU_TOGGLE).should('be.enabled').click(); + cy.get(MENU_ITEM).contains('Delete').click(); cy.get(`div[class="pf-v5-c-check"]`).click(); cy.get(`button[type="submit"]`).click(); @@ -105,7 +105,8 @@ describe('integration with rbac', () => { it('should render only id in header and breadcrumb', () => { cy.get('h1').contains(groupDetailFixtures.results[0].id); - cy.get('[data-ouia-component-type="PF4/Breadcrumb"] li') + cy.get(BREADCRUMB) + .find('li') .last() .should('have.text', groupDetailFixtures.results[0].id); }); @@ -123,7 +124,7 @@ describe('integration with rbac', () => { }); it('actions are disabled', () => { - cy.get(DROPDOWN).contains('Group actions').should('be.disabled'); + cy.get(MENU_TOGGLE).should('be.disabled'); }); it('should show group id', () => { @@ -157,7 +158,7 @@ describe('integration with rbac', () => { }); it('actions are disabled', () => { - cy.get(DROPDOWN).contains('Group actions').should('be.disabled'); + cy.get(MENU_TOGGLE).should('be.disabled'); }); it('should not allow to see systems', () => { @@ -208,7 +209,7 @@ describe('integration with rbac', () => { }); it('actions are disabled', () => { - cy.get(DROPDOWN).contains('Group actions').should('be.disabled'); + cy.get(MENU_TOGGLE).should('be.disabled'); cy.get('button').contains('Add systems').shouldHaveAriaDisabled(); }); diff --git a/src/components/InventoryGroups/Modals/AddSystemsToGroupModal.cy.js b/src/components/InventoryGroups/Modals/AddSystemsToGroupModal.cy.js index ed8ceade8..74feba80f 100644 --- a/src/components/InventoryGroups/Modals/AddSystemsToGroupModal.cy.js +++ b/src/components/InventoryGroups/Modals/AddSystemsToGroupModal.cy.js @@ -1,10 +1,13 @@ /* eslint-disable rulesdir/disallow-fec-relative-imports */ import { + ALERT, + CONDITIONAL_FILTER, DROPDOWN_ITEM, TABLE, checkTableHeaders, ouiaId, + selectRowN, } from '@redhat-cloud-services/frontend-components-utilities'; import _ from 'lodash'; import { @@ -15,7 +18,6 @@ import { hostsInterceptors, systemProfileInterceptors, } from '../../../../cypress/support/interceptors'; -import { selectRowN } from '../../../../cypress/support/utils'; import AddSystemsToGroupModal from './AddSystemsToGroupModal'; const TABLE_HEADERS = [ @@ -38,8 +40,6 @@ const AVAILABLE_FILTER_NAMES = [ 'Tags', ]; -const ALERT = '[data-ouia-component-type="PF4/Alert"]'; - before(() => { cy.mockWindowInsights(); }); @@ -112,7 +112,7 @@ describe('AddSystemsToGroupModal', () => { 'true' ); cy.get('button').contains('Add systems').should('be.disabled'); - selectRowN(4); + selectRowN(3); cy.get('button').contains('Add systems').click(); cy.wait('@postHosts') .its('request.body') @@ -128,7 +128,7 @@ describe('AddSystemsToGroupModal', () => { 'data-ouia-safe', 'true' ); - selectRowN(1); + selectRowN(0); cy.get(ALERT); // check the alert is shown cy.get('button') .contains('Add systems') @@ -141,7 +141,7 @@ describe('AddSystemsToGroupModal', () => { mountModal(); cy.wait('@getHosts'); - cy.get('button[data-ouia-component-id="ConditionalFilter"]').click(); + cy.get(CONDITIONAL_FILTER).click(); cy.get(DROPDOWN_ITEM).each(($item, i) => { expect($item.text()).to.equal(AVAILABLE_FILTER_NAMES[i]); }); diff --git a/src/components/InventoryGroups/Modals/DeleteGroupModal.cy.js b/src/components/InventoryGroups/Modals/DeleteGroupModal.cy.js index 8bbb28a12..f0506b6a5 100644 --- a/src/components/InventoryGroups/Modals/DeleteGroupModal.cy.js +++ b/src/components/InventoryGroups/Modals/DeleteGroupModal.cy.js @@ -1,7 +1,7 @@ /* eslint-disable rulesdir/disallow-fec-relative-imports */ import { CHECKBOX, - MODAL, + MODAL_CONTENT, } from '@redhat-cloud-services/frontend-components-utilities'; import { deleteGroupsInterceptors, @@ -51,7 +51,7 @@ describe('multiple non-empty groups', () => { groupIds: fixtures.results.map(({ id }) => id), }); cy.get('[role="progressbar"]'); - cy.get(MODAL).should('not.exist'); + cy.get(MODAL_CONTENT).should('not.exist'); }); it('can close the modal with the cross button', () => { diff --git a/src/components/InventoryTable/InventoryTable.cy.js b/src/components/InventoryTable/InventoryTable.cy.js index 862c12924..ffe26cb43 100644 --- a/src/components/InventoryTable/InventoryTable.cy.js +++ b/src/components/InventoryTable/InventoryTable.cy.js @@ -6,13 +6,13 @@ import { CHIP, CHIP_GROUP, + CONDITIONAL_FILTER, DROPDOWN_ITEM, PAGINATION_VALUES, + PRIMARY_TOOLBAR, SORTING_ORDERS, TABLE, TEXT_INPUT, - TOOLBAR, - TOOLBAR_FILTER, changePagination, checkPaginationTotal, checkPaginationValues, @@ -20,6 +20,7 @@ import { hasChip, } from '@redhat-cloud-services/frontend-components-utilities'; import _ from 'lodash'; +import groupsFixtures from '../../../cypress/fixtures/groups.json'; import { featureFlagsInterceptors, groupsInterceptors, @@ -29,7 +30,6 @@ import { } from '../../../cypress/support/interceptors'; import { ORDER_TO_URL } from '../../../cypress/support/utils'; import InventoryTable from './InventoryTable'; -import groupsFixtures from '../../../cypress/fixtures/groups.json'; const TABLE_HEADERS = ['Name', 'Group', 'OS', 'Last seen']; const DEFAULT_ROW_COUNT = 50; @@ -86,7 +86,7 @@ describe('with default parameters', () => { describe('renders correctly', () => { it('renders main components', () => { - cy.get(TOOLBAR).should('have.length', 1); + cy.get(PRIMARY_TOOLBAR).should('have.length', 1); cy.get(TABLE).should('have.length', 1); }); @@ -104,7 +104,7 @@ describe('with default parameters', () => { }); it('name filter is a default filter', () => { - cy.get(TOOLBAR_FILTER).find(TEXT_INPUT).should('exist'); + cy.get(PRIMARY_TOOLBAR).find(TEXT_INPUT).should('exist'); }); }); @@ -199,7 +199,7 @@ describe('with default parameters', () => { }); it('has correct list of default filters', () => { - cy.get('button[data-ouia-component-id="ConditionalFilter"]').click(); + cy.get(CONDITIONAL_FILTER).click(); AVAILABLE_FILTER_NAMES.forEach((filterName, index) => { cy.get(DROPDOWN_ITEM).eq(index).should('have.text', filterName); }); @@ -207,7 +207,7 @@ describe('with default parameters', () => { describe('groups filter', () => { it('options are populated correctly', () => { - cy.get('button[data-ouia-component-id="ConditionalFilter"]').click(); + cy.get(CONDITIONAL_FILTER).click(); cy.get(DROPDOWN_ITEM).contains('Group').click(); cy.ouiaId('FilterByGroup').click(); cy.ouiaId('FilterByGroupOption').should( @@ -219,7 +219,7 @@ describe('with default parameters', () => { const firstGroupName = shorterGroupsFixtures.results[0].name; it('creates a chip', () => { - cy.get('button[data-ouia-component-id="ConditionalFilter"]').click(); + cy.get(CONDITIONAL_FILTER).click(); cy.get(DROPDOWN_ITEM).contains('Group').click(); cy.ouiaId('FilterByGroup').click(); cy.ouiaId('FilterByGroupOption').eq(0).click(); @@ -227,7 +227,7 @@ describe('with default parameters', () => { }); it('triggers new request', () => { - cy.get('button[data-ouia-component-id="ConditionalFilter"]').click(); + cy.get(CONDITIONAL_FILTER).click(); cy.get(DROPDOWN_ITEM).contains('Group').click(); cy.ouiaId('FilterByGroup').click(); cy.ouiaId('FilterByGroupOption').eq(0).click(); @@ -249,50 +249,48 @@ describe('hiding filters', () => { it('can hide all filters', () => { mountTable({ hasAccess: true, hideFilters: { all: true } }); waitForTable(); - cy.get('button[data-ouia-component-id="ConditionalFilter"]').should( - 'not.exist' - ); + cy.get(CONDITIONAL_FILTER).should('not.exist'); }); it('can hide groups filter', () => { mountTable({ hasAccess: true, hideFilters: { hostGroupFilter: true } }); waitForTable(); - cy.get('button[data-ouia-component-id="ConditionalFilter"]').click(); + cy.get(CONDITIONAL_FILTER).click(); cy.get(DROPDOWN_ITEM).should('not.contain', 'Group'); }); it('can hide name filter', () => { mountTable({ hasAccess: true, hideFilters: { name: true } }); waitForTable(); - cy.get('button[data-ouia-component-id="ConditionalFilter"]').click(); + cy.get(CONDITIONAL_FILTER).click(); cy.get(DROPDOWN_ITEM).should('not.contain', 'Name'); }); it('can hide data collector filter', () => { mountTable({ hasAccess: true, hideFilters: { registeredWith: true } }); waitForTable(); - cy.get('button[data-ouia-component-id="ConditionalFilter"]').click(); + cy.get(CONDITIONAL_FILTER).click(); cy.get(DROPDOWN_ITEM).should('not.contain', 'Data Collector'); }); it('can hide rhcd filter', () => { mountTable({ hasAccess: true, hideFilters: { rhcdFilter: true } }); waitForTable(); - cy.get('button[data-ouia-component-id="ConditionalFilter"]').click(); + cy.get(CONDITIONAL_FILTER).click(); cy.get(DROPDOWN_ITEM).should('not.contain', 'RHC status'); }); it('can hide os filter', () => { mountTable({ hasAccess: true, hideFilters: { operatingSystem: true } }); waitForTable(); - cy.get('button[data-ouia-component-id="ConditionalFilter"]').click(); + cy.get(CONDITIONAL_FILTER).click(); cy.get(DROPDOWN_ITEM).should('not.contain', 'Operating System'); }); it('can hide last seen filter', () => { mountTable({ hasAccess: true, hideFilters: { lastSeen: true } }); waitForTable(); - cy.get('button[data-ouia-component-id="ConditionalFilter"]').click(); + cy.get(CONDITIONAL_FILTER).click(); cy.get(DROPDOWN_ITEM).should('not.contain', 'Last seen'); }); }); @@ -309,14 +307,14 @@ describe('with no group filter option', () => { }); it('no group is the first option', () => { - cy.get('button[data-ouia-component-id="ConditionalFilter"]').click(); + cy.get(CONDITIONAL_FILTER).click(); cy.get(DROPDOWN_ITEM).contains('Group').click(); cy.ouiaId('FilterByGroup').click(); cy.ouiaId('FilterByGroupOption').first().should('have.text', 'No group'); }); it('creates no group chip', () => { - cy.get('button[data-ouia-component-id="ConditionalFilter"]').click(); + cy.get(CONDITIONAL_FILTER).click(); cy.get(DROPDOWN_ITEM).contains('Group').click(); cy.ouiaId('FilterByGroup').click(); cy.ouiaId('FilterByGroupOption').eq(0).click(); @@ -324,7 +322,7 @@ describe('with no group filter option', () => { }); it('triggers new request with empty parameter', () => { - cy.get('button[data-ouia-component-id="ConditionalFilter"]').click(); + cy.get(CONDITIONAL_FILTER).click(); cy.get(DROPDOWN_ITEM).contains('Group').click(); cy.ouiaId('FilterByGroup').click(); cy.ouiaId('FilterByGroupOption').eq(0).click(); diff --git a/src/routes/InventoryDetail.cy.js b/src/routes/InventoryDetail.cy.js index ab7a66504..65967f87f 100644 --- a/src/routes/InventoryDetail.cy.js +++ b/src/routes/InventoryDetail.cy.js @@ -9,7 +9,7 @@ import { import InventoryDetail from './InventoryDetail'; import hostDetail from '../../cypress/fixtures/hostDetail.json'; import _ from 'lodash'; -import { MODAL } from '@redhat-cloud-services/frontend-components-utilities'; +import { MODAL_CONTENT } from '@redhat-cloud-services/frontend-components-utilities'; const mountWithProps = (options, props = {}) => cy.mountWithContext(InventoryDetail, options, props); @@ -115,10 +115,10 @@ describe('rbac integration', () => { it('should enable edit buttons', () => { cy.ouiaId('Display name value').find('[aria-label="Edit"]').click(); - cy.get(MODAL).find('h1').contains('Edit display name'); + cy.get(MODAL_CONTENT).find('h1').contains('Edit display name'); cy.ouiaId('edit-display-name-modal-ModalBoxCloseButton').click(); cy.ouiaId('Ansible hostname value').find('[aria-label="Edit"]').click(); - cy.get(MODAL).find('h1').contains('Edit Ansible host'); + cy.get(MODAL_CONTENT).find('h1').contains('Edit Ansible host'); }); }); @@ -150,10 +150,10 @@ describe('rbac integration', () => { it('should enable edit buttons', () => { cy.ouiaId('Display name value').find('[aria-label="Edit"]').click(); - cy.get(MODAL).find('h1').contains('Edit display name'); + cy.get(MODAL_CONTENT).find('h1').contains('Edit display name'); cy.ouiaId('edit-display-name-modal-ModalBoxCloseButton').click(); cy.ouiaId('Ansible hostname value').find('[aria-label="Edit"]').click(); - cy.get(MODAL).find('h1').contains('Edit Ansible host'); + cy.get(MODAL_CONTENT).find('h1').contains('Edit Ansible host'); }); }); }); diff --git a/src/routes/InventoryTable.cy.js b/src/routes/InventoryTable.cy.js index e7405ddab..9e3799158 100644 --- a/src/routes/InventoryTable.cy.js +++ b/src/routes/InventoryTable.cy.js @@ -16,10 +16,14 @@ import tagsFixtures from '../../cypress/fixtures/tags.json'; import hostsFixtures from '../../cypress/fixtures/hosts.json'; import groupsFixtures from '../../cypress/fixtures/groups.json'; import { - DROPDOWN, DROPDOWN_ITEM, - MODAL, - ROW, + MENU_ITEM, + MENU_TOGGLE, + MODAL_CONTENT, + PRIMARY_TOOLBAR_ACTIONS, + SELECT_MENU_ITEM, + TABLE_ROW, + TABLE_ROW_CHECKBOX, } from '@redhat-cloud-services/frontend-components-utilities'; const TEST_GROUP_NAME = 'ancd'; @@ -94,24 +98,24 @@ describe('inventory table', () => { describe('has groups actions', () => { it('cannot add host to another group', () => { - cy.get(ROW).eq(1).find(DROPDOWN).click(); + cy.get(TABLE_ROW).eq(0).find(MENU_TOGGLE).click(); cy.get(`${DROPDOWN_ITEM} a`) .contains('Add to group') .should('have.attr', 'aria-disabled', 'true'); }); it('cannot remove host without group', () => { - cy.get(ROW).find('[type="checkbox"]').eq(3).click(); + cy.get(TABLE_ROW_CHECKBOX).eq(3).click(); // TODO: implement ouia selector for this component - cy.get('.ins-c-primary-toolbar__actions [aria-label="Actions"]').click(); - cy.get(DROPDOWN_ITEM) + cy.get(PRIMARY_TOOLBAR_ACTIONS).click(); + cy.get(MENU_ITEM) .contains('Remove from group') .should('have.attr', 'aria-disabled', 'true'); }); it('cannot remove host without group, bulk select', () => { - cy.get(ROW).eq(4).find(DROPDOWN).click(); + cy.get(TABLE_ROW).eq(3).find(MENU_TOGGLE).click(); cy.get(DROPDOWN_ITEM) .contains('Remove from group') .should('have.attr', 'aria-disabled', 'true'); @@ -122,9 +126,9 @@ describe('inventory table', () => { 'DELETE', `/api/inventory/v1/groups/${hostsFixtures.results[0].groups[0].id}/hosts/${hostsFixtures.results[0].id}` ).as('request'); - cy.get(ROW).eq(1).find(DROPDOWN).click(); + cy.get(TABLE_ROW).eq(0).find(MENU_TOGGLE).click(); cy.get(`${DROPDOWN_ITEM} a`).contains('Remove from group').click(); - cy.get(MODAL).within(() => { + cy.get(MODAL_CONTENT).within(() => { cy.get('h1').should('have.text', 'Remove from group'); cy.get('button[type="submit"]').click(); cy.wait('@request'); @@ -137,9 +141,9 @@ describe('inventory table', () => { 'POST', `/api/inventory/v1/groups/${groupsFixtures.results[0].id}/hosts` ).as('request'); - cy.get(ROW).eq(4).find(DROPDOWN).click(); + cy.get(TABLE_ROW).eq(3).find(MENU_TOGGLE).click(); cy.get(`${DROPDOWN_ITEM} a`).contains('Add to group').click(); - cy.get(MODAL).within(() => { + cy.get(MODAL_CONTENT).within(() => { cy.get('h1').should('have.text', 'Add to group'); cy.wait('@getGroups'); cy.get('.pf-v5-c-select__toggle').click(); // TODO: implement ouia selector for this component @@ -153,12 +157,12 @@ describe('inventory table', () => { }); it('cannot remove hosts from different groups', () => { - cy.get(ROW).find('[type="checkbox"]').eq(1).click(); - cy.get(ROW).find('[type="checkbox"]').eq(2).click(); + cy.get(TABLE_ROW_CHECKBOX).eq(1).click(); + cy.get(TABLE_ROW_CHECKBOX).eq(2).click(); // TODO: implement ouia selector for this component - cy.get('.ins-c-primary-toolbar__actions [aria-label="Actions"]').click(); - cy.get(DROPDOWN_ITEM) + cy.get(PRIMARY_TOOLBAR_ACTIONS).click(); + cy.get(MENU_ITEM) .contains('Remove from group') .should('have.attr', 'aria-disabled', 'true'); }); @@ -174,15 +178,15 @@ describe('inventory table', () => { .join(',')}` ).as('request'); - cy.get(ROW).find('[type="checkbox"]').eq(0).click(); - cy.get(ROW).find('[type="checkbox"]').eq(1).click(); + cy.get(TABLE_ROW_CHECKBOX).eq(0).click(); + cy.get(TABLE_ROW_CHECKBOX).eq(1).click(); // TODO: implement ouia selector for this component - cy.get('.ins-c-primary-toolbar__actions [aria-label="Actions"]').click(); + cy.get(PRIMARY_TOOLBAR_ACTIONS).click(); - cy.get(DROPDOWN_ITEM).contains('Remove from group').click(); + cy.get(MENU_ITEM).contains('Remove from group').click(); - cy.get(MODAL).within(() => { + cy.get(MODAL_CONTENT).within(() => { cy.get('h1').should('have.text', 'Remove from group'); cy.get('button[type="submit"]').click(); cy.wait('@request'); @@ -199,19 +203,19 @@ describe('inventory table', () => { }/hosts` ).as('request'); - cy.get(ROW).find('[type="checkbox"]').eq(3).click(); - cy.get(ROW).find('[type="checkbox"]').eq(4).click(); + cy.get(TABLE_ROW_CHECKBOX).eq(3).click(); + cy.get(TABLE_ROW_CHECKBOX).eq(4).click(); // TODO: implement ouia selector for this component - cy.get('.ins-c-primary-toolbar__actions [aria-label="Actions"]').click(); + cy.get(PRIMARY_TOOLBAR_ACTIONS).click(); - cy.get(DROPDOWN_ITEM).contains('Add to group').click(); + cy.get(MENU_ITEM).contains('Add to group').click(); - cy.get(MODAL).within(() => { + cy.get(MODAL_CONTENT).within(() => { cy.get('h1').should('have.text', 'Add to group'); cy.wait('@getGroups'); cy.get('.pf-v5-c-select__toggle').click(); // TODO: implement ouia selector for this component - cy.get('.pf-v5-c-select__menu-item').contains(TEST_GROUP_NAME).click(); + cy.get(SELECT_MENU_ITEM).contains(TEST_GROUP_NAME).click(); cy.get('button[type="submit"]').click(); cy.wait('@request') .its('request.body') @@ -224,11 +228,14 @@ describe('inventory table', () => { }); it('can add to a new group', () => { - cy.get(ROW).find('[type="checkbox"]').eq(3).click(); - cy.get('.ins-c-primary-toolbar__actions [aria-label="Actions"]').click(); - cy.get(DROPDOWN_ITEM).contains('Add to group').click(); - cy.get(MODAL).find('button').contains('Create a new group').click(); - cy.get(MODAL).find('h1').should('have.text', 'Create group'); + cy.get(TABLE_ROW_CHECKBOX).eq(3).click(); + cy.get(PRIMARY_TOOLBAR_ACTIONS).click(); + cy.get(MENU_ITEM).contains('Add to group').click(); + cy.get(MODAL_CONTENT) + .find('button') + .contains('Create a new group') + .click(); + cy.get(MODAL_CONTENT).find('h1').should('have.text', 'Create group'); }); }); @@ -243,29 +250,27 @@ describe('inventory table', () => { beforeEach(() => prepareTest(false)); it('all per-row actions are disabled', () => { - cy.get(ROW).eq(1).find(DROPDOWN).click(); + cy.get(TABLE_ROW).eq(1).find(MENU_TOGGLE).click(); cy.get(`${DROPDOWN_ITEM} a`).each(($el) => cy.wrap($el).should('have.attr', 'aria-disabled', 'true') ); }); it('bulk actions are disabled', () => { - cy.get(ROW).find('[type="checkbox"]').eq(0).click(); + cy.get(TABLE_ROW_CHECKBOX).eq(0).click(); cy.get('button') .contains('Delete') .should('have.attr', 'aria-disabled', 'true'); // TODO: implement ouia selector for this component - cy.get( - '.ins-c-primary-toolbar__actions [aria-label="Actions"]' - ).click(); + cy.get(PRIMARY_TOOLBAR_ACTIONS).click(); - cy.get(DROPDOWN_ITEM) + cy.get(MENU_ITEM) .contains('Remove from group') .should('have.attr', 'aria-disabled', 'true'); - cy.get(DROPDOWN_ITEM) + cy.get(MENU_ITEM) .contains('Add to group') .should('have.attr', 'aria-disabled', 'true'); }); @@ -295,17 +300,17 @@ describe('inventory table', () => { beforeEach(() => prepareTest(false)); it('can edit hosts that in the test group', () => { - cy.get(ROW).eq(1).find(DROPDOWN).click(); + cy.get(TABLE_ROW).eq(1).find(MENU_TOGGLE).click(); cy.get(`${DROPDOWN_ITEM} a`) .contains('Edit') .should('have.attr', 'aria-disabled', 'false') .click(); cy.get('button').contains('Cancel').click(); - cy.get(ROW).eq(1).find(DROPDOWN).click(); + cy.get(TABLE_ROW).eq(1).find(MENU_TOGGLE).click(); }); it('can delete hosts in the test group', () => { - cy.get(ROW).eq(1).find(DROPDOWN).click(); + cy.get(TABLE_ROW).eq(1).find(MENU_TOGGLE).click(); cy.get(`${DROPDOWN_ITEM} a`) .contains('Delete') .should('have.attr', 'aria-disabled', 'false') @@ -314,7 +319,7 @@ describe('inventory table', () => { }); it('cannot edit nor delete hosts that are not in the test group', () => { - cy.get(ROW).eq(3).find(DROPDOWN).click(); + cy.get(TABLE_ROW).eq(3).find(MENU_TOGGLE).click(); cy.get(`${DROPDOWN_ITEM} a`) .contains('Edit') .should('have.attr', 'aria-disabled', 'true'); @@ -324,8 +329,8 @@ describe('inventory table', () => { }); it('can delete hosts that are in the test group', () => { - cy.get(ROW).find('[type="checkbox"]').eq(0).click(); - cy.get(ROW).find('[type="checkbox"]').eq(1).click(); + cy.get(TABLE_ROW_CHECKBOX).eq(0).click(); + cy.get(TABLE_ROW_CHECKBOX).eq(1).click(); cy.get('button') .contains('Delete') @@ -334,7 +339,7 @@ describe('inventory table', () => { }); it('cannot delete hosts that are not in the test group', () => { - cy.get(ROW).find('[type="checkbox"]').eq(2).click(); + cy.get(TABLE_ROW_CHECKBOX).eq(2).click(); cy.get('button') .contains('Delete') @@ -342,7 +347,7 @@ describe('inventory table', () => { }); it('cannot add or remove from group', () => { - cy.get(ROW).eq(1).find(DROPDOWN).click(); + cy.get(TABLE_ROW).eq(1).find(MENU_TOGGLE).click(); cy.get(DROPDOWN_ITEM).contains('Add to group').shouldHaveAriaDisabled(); cy.get(DROPDOWN_ITEM) .contains('Remove from group') @@ -374,13 +379,13 @@ describe('inventory table', () => { beforeEach(prepareTest); it('can edit hosts that are not a part of any group', () => { - cy.get(ROW).eq(4).find(DROPDOWN).click(); + cy.get(TABLE_ROW).eq(4).find(MENU_TOGGLE).click(); cy.get(`${DROPDOWN_ITEM} a`).contains('Edit').shouldHaveAriaEnabled(); cy.get(`${DROPDOWN_ITEM} a`).contains('Delete').shouldHaveAriaEnabled(); }); it('cannot edit hosts in groups', () => { - cy.get(ROW).eq(3).find(DROPDOWN).click(); + cy.get(TABLE_ROW).eq(2).find(MENU_TOGGLE).click(); cy.get(`${DROPDOWN_ITEM} a`).contains('Edit').shouldHaveAriaDisabled(); cy.get(`${DROPDOWN_ITEM} a`) .contains('Delete') @@ -388,14 +393,14 @@ describe('inventory table', () => { }); it('can bulk delete ungrouped hosts', () => { - cy.get(ROW).find('[type="checkbox"]').eq(4).click(); - cy.get(ROW).find('[type="checkbox"]').eq(5).click(); + cy.get(TABLE_ROW_CHECKBOX).eq(4).click(); + cy.get(TABLE_ROW_CHECKBOX).eq(5).click(); cy.get('button').contains('Delete').shouldHaveAriaEnabled(); }); it('cannot mix grouped and ungrouped hosts', () => { - cy.get(ROW).find('[type="checkbox"]').eq(2).click(); - cy.get(ROW).find('[type="checkbox"]').eq(3).click(); + cy.get(TABLE_ROW_CHECKBOX).eq(2).click(); + cy.get(TABLE_ROW_CHECKBOX).eq(3).click(); cy.get('button').contains('Delete').shouldHaveAriaDisabled(); }); }); @@ -424,7 +429,7 @@ describe('inventory table', () => { beforeEach(() => prepareTest(false)); it('can remove from permitted group', () => { - cy.get(ROW).eq(1).find(DROPDOWN).click(); + cy.get(TABLE_ROW).eq(1).find(MENU_TOGGLE).click(); cy.get(DROPDOWN_ITEM).contains('Add to group').shouldHaveAriaDisabled(); cy.get(DROPDOWN_ITEM) .contains('Remove from group') @@ -432,7 +437,7 @@ describe('inventory table', () => { }); it('add to group is enabled for ungroupped hosts', () => { - cy.get(ROW).eq(4).find(DROPDOWN).click(); + cy.get(TABLE_ROW).eq(4).find(MENU_TOGGLE).click(); cy.get(DROPDOWN_ITEM).contains('Add to group').shouldHaveAriaEnabled(); cy.get(DROPDOWN_ITEM) .contains('Remove from group') @@ -440,54 +445,40 @@ describe('inventory table', () => { }); it('can bulk remove from the permitted group', () => { - cy.get(ROW).find('[type="checkbox"]').eq(0).click(); + cy.get(TABLE_ROW_CHECKBOX).eq(0).click(); // TODO: implement ouia selector for this component - cy.get( - '.ins-c-primary-toolbar__actions [aria-label="Actions"]' - ).click(); - cy.get(DROPDOWN_ITEM) - .contains('Remove from group') - .shouldHaveAriaEnabled(); - cy.get(ROW).find('[type="checkbox"]').eq(1).click(); + cy.get(PRIMARY_TOOLBAR_ACTIONS).click(); + cy.get(MENU_ITEM).contains('Remove from group').shouldHaveAriaEnabled(); + cy.get(TABLE_ROW_CHECKBOX).eq(1).click(); // TODO: implement ouia selector for this component - cy.get( - '.ins-c-primary-toolbar__actions [aria-label="Actions"]' - ).click(); - cy.get(DROPDOWN_ITEM) - .contains('Remove from group') - .shouldHaveAriaEnabled(); + cy.get(PRIMARY_TOOLBAR_ACTIONS).click(); + cy.get(MENU_ITEM).contains('Remove from group').shouldHaveAriaEnabled(); }); it('can bulk remove from group together with ungroupped hosts', () => { - cy.get(ROW).find('[type="checkbox"]').eq(0).click(); - cy.get(ROW).find('[type="checkbox"]').eq(3).click(); + cy.get(TABLE_ROW_CHECKBOX).eq(0).click(); + cy.get(TABLE_ROW_CHECKBOX).eq(3).click(); // TODO: implement ouia selector for this component - cy.get( - '.ins-c-primary-toolbar__actions [aria-label="Actions"]' - ).click(); + cy.get(PRIMARY_TOOLBAR_ACTIONS).click(); cy.get(DROPDOWN_ITEM) .contains('Remove from group') .shouldHaveAriaEnabled(); }); it('can bulk add hosts to the permitted group', () => { - cy.get(ROW).find('[type="checkbox"]').eq(3).click(); - cy.get(ROW).find('[type="checkbox"]').eq(4).click(); + cy.get(TABLE_ROW_CHECKBOX).eq(3).click(); + cy.get(TABLE_ROW_CHECKBOX).eq(4).click(); // TODO: implement ouia selector for this component - cy.get( - '.ins-c-primary-toolbar__actions [aria-label="Actions"]' - ).click(); - cy.get(DROPDOWN_ITEM).contains('Add to group').shouldHaveAriaEnabled(); + cy.get(PRIMARY_TOOLBAR_ACTIONS).click(); + cy.get(MENU_ITEM).contains('Add to group').shouldHaveAriaEnabled(); }); it('cannot bulk add to group if groupped hosts selected', () => { - cy.get(ROW).find('[type="checkbox"]').eq(0).click(); - cy.get(ROW).find('[type="checkbox"]').eq(3).click(); + cy.get(TABLE_ROW_CHECKBOX).eq(0).click(); + cy.get(TABLE_ROW_CHECKBOX).eq(3).click(); // TODO: implement ouia selector for this component - cy.get( - '.ins-c-primary-toolbar__actions [aria-label="Actions"]' - ).click(); - cy.get(DROPDOWN_ITEM).contains('Add to group').shouldHaveAriaDisabled(); + cy.get(PRIMARY_TOOLBAR_ACTIONS).click(); + cy.get(MENU_ITEM).contains('Add to group').shouldHaveAriaDisabled(); }); }); });