test(RHINENG-8182): Update cypress tests after PF5 upgrade (#2146)

Fixes https://issues.redhat.com/browse/RHINENG-8182.

* test: Update and enable cypress tests after PF5 upgrade

* chore: Add @patternfly/patternfly dep to enable cypress tests

* chore: Upgrade FEC dependencies

* test: Update GroupSystems.cy.js to use new selectors

* test: Update InventoryTable.cy.js to use new selectors

* test: Update GroupsTable.cy.js to use new selectors

* test: Update ImmutableDevices.cy.js to use new selectors

* test: Add new cy commands/utils

* test: Update AddSystemsToGroupModal.cy.js to use new selectors

* test: Update InventoryTable.cy.js to use new selectors

.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)

cypress/support/commands.js

@@ -91,3 +91,9 @@ Cypress.Commands.add(
   { prevSubject: true },
   (subject) => cy.wrap(subject).should('have.attr', 'aria-disabled', 'false')
 );
+
+Cypress.Commands.add(
+  'shouldNotHaveAriaDisabled',
+  { prevSubject: true },
+  (subject) => cy.wrap(subject).should('not.have.attr', 'aria-disabled')
+);

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 {
@@ -26,3 +16,5 @@ export const unleashDummyConfig = {
   clientKey: 'abc',
   appName: 'abc',
 };
+
+export const INVENTORY_ACTION_MENU_ITEM = 'button.inventory__action-menu-item';

package.json

@@ -124,6 +124,7 @@
     "@cypress/code-coverage": "^3.12.9",
     "@cypress/react18": "^2.0.0",
     "@faker-js/faker": "^8.2.0",
+    "@patternfly/patternfly": "^5.2.0",
     "@redhat-cloud-services/eslint-config-redhat-cloud-services": "^2.0.3",
     "@redhat-cloud-services/frontend-components-config": "^5.1.1",
     "@semantic-release/changelog": "^6.0.1",

src/components/GroupSystems/GroupSystems.cy.js

@@ -2,37 +2,41 @@
 import {
   CHIP,
   CHIP_GROUP,
-  DROPDOWN,
   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,
+  PAGINATION_TOP,
+  PAGINATION_NEXT,
+  PT_CONDITIONAL_FILTER_TOGGLE,
+  PT_BULK_SELECT,
 } 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 +60,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(
@@ -80,7 +84,7 @@ const waitForTable = (waitNetwork = false) => {
 };
 
 describe('test data', () => {
-  it('first systems has name dolor', () => {
+  it('first system has name dolor', () => {
     expect(fixtures.results[0].display_name === 'dolor');
   });
 });
@@ -108,7 +112,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', () => {
@@ -129,14 +133,11 @@ describe('defaults', () => {
   });
 
   it(`pagination is set to ${DEFAULT_ROW_COUNT}`, () => {
-    cy.get('.pf-v5-c-menu-toggle__text')
-      .find('b')
-      .eq(0)
-      .should('have.text', `1 - ${DEFAULT_ROW_COUNT}`);
+    cy.get(PAGINATION_TOP).should('contain.text', `1 - ${DEFAULT_ROW_COUNT}`);
   });
 
   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');
   });
 });
 
@@ -171,7 +172,7 @@ describe('pagination', () => {
   });
 
   it('can change page', () => {
-    cy.get('button[data-action=next]').eq(0).click(); // click "next page" button
+    cy.get(PAGINATION_NEXT).first().click(); // click "next page" button
     cy.wait('@getHosts').its('request.url').should('include', `page=2`);
   });
 });
@@ -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(PT_CONDITIONAL_FILTER_TOGGLE).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.get(PT_BULK_SELECT).click(); // open selection dropdown
+    cy.get(DROPDOWN_ITEM).contains('Select page').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.get(PT_BULK_SELECT).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');
     });