Fixes a flaky test (#2270)

Fixes test-case: "Selecting external partner integrations checkbox enables custom manifests as well"
Reporting: "AssertionError: Timed out retrying after 4000ms: expected '<input#form-input-addCustomManifest-field.pf-c-check__input>' to be 'checked'"

libs/ui-lib-tests/cypress/@types/Cypress.d.ts

@@ -1,5 +1,11 @@
 declare namespace Cypress {
   interface Chainable {
+    /**
+     * If `ancestorAlias` is defined, executes `cy.get(ancestorAlias).find(childSelector)`. Otherwise, executes `cy.get(childSelector)`.
+     * @param childSelector The CSS selector
+     * @param ancestorAlias The alias of the child's ancestor
+     */
+    findWithinOrGet(childSelector: string, ancestorAlias?: string): Chainable<JQuery<HTMLElement>>;
     pasteText(selector: string, text: string): Chainable<Element>;
     newByDataTestId(selector: string, timeout?: number): Chainable<JQuery<HTMLElement>>;
     hostDetailSelector(i: number, label: string, timeout?: number): Chainable<Element>;

libs/ui-lib-tests/cypress/integration/use-cases/create-cluster/with-external-partner-integrations.cy.ts

@@ -1,6 +1,5 @@
-import { clusterDetailsPage } from '../../../views/clusterDetails';
-import ClusterDetailsForm from '../../../views/forms/ClusterDetailsForm';
-import NewClusterPage from '../../../views/pages/NewClusterPage';
+import { NewClusterPage } from '../../../views/pages/NewClusterPage';
+import { ClusterDetailsForm } from '../../../views/forms/ClusterDetails/ClusterDetailsForm';
 
 describe('Create a new cluster with external partner integrations', () => {
   const setTestStartSignal = (activeSignal: string) => {
@@ -18,57 +17,60 @@ describe('Create a new cluster with external partner integrations', () => {
     // This test case is disabled intentionally because it requires tweaking the
     // props passed to the LibRouter in the app.
     it('The user cannot see the external partner integrations checkbox', () => {
-      // Disable somehow Features.STANDALONE_DEPLOYMENT_ENABLED_FEATURES.ASSISTED_INSTALLER_PLATFORM_OCI, then...
-      // ClusterDetailsForm.externalPartnerIntegrationsControl.findLabel().should('not.exist');
+      // Disable somehow Features.STANDALONE_DEPLOYMENT_ENABLED_FEATURES.ASSISTED_INSTALLER_PLATFORM_OCI, and then...
+      // ClusterDetailsForm.init().externalPartnerIntegrationsControl.findLabel().should('not.exist');
     });
   });
 
   context('When the feature is enabled:', () => {
     beforeEach(() => {
       NewClusterPage.visit();
+      ClusterDetailsForm.init();
     });
 
     it('The user can select the external partner integrations checkbox', () => {
-      ClusterDetailsForm.externalPartnerIntegrationsControl.findLabel().click();
+      ClusterDetailsForm.externalPartnerIntegrationsField.findLabel().click();
     });
 
     it('There is a popover and helper text next to the checkbox label', () => {
-      ClusterDetailsForm.externalPartnerIntegrationsControl.findPopoverButton().click();
-      ClusterDetailsForm.externalPartnerIntegrationsControl.findPopoverContent();
-      ClusterDetailsForm.externalPartnerIntegrationsControl.findHelperText();
+      ClusterDetailsForm.externalPartnerIntegrationsField.findPopoverButton().click();
+      ClusterDetailsForm.externalPartnerIntegrationsField.findPopoverContent();
+      ClusterDetailsForm.externalPartnerIntegrationsField.findHelperText();
     });
 
     it('Selecting external partner integrations checkbox enables custom manifests as well', () => {
-      clusterDetailsPage.inputOpenshiftVersion('4.14');
-      ClusterDetailsForm.externalPartnerIntegrationsControl.findLabel().click();
-      ClusterDetailsForm.customManifestsControl
+      ClusterDetailsForm.openshiftVersionField.selectVersion('4.14');
+      ClusterDetailsForm.externalPartnerIntegrationsField.findLabel().click();
+      ClusterDetailsForm.customManifestsField
         .findCheckbox()
         .should('be.checked')
         .and('be.disabled');
     });
 
     it('External partner integrations checkbox is unselected after OCP < v4.14 is selected', () => {
-      clusterDetailsPage.inputOpenshiftVersion('4.14');
-      ClusterDetailsForm.externalPartnerIntegrationsControl.findLabel().click();
-      clusterDetailsPage.inputOpenshiftVersion('4.13');
-      ClusterDetailsForm.externalPartnerIntegrationsControl.findCheckbox().should('not.be.checked');
+      ClusterDetailsForm.openshiftVersionField.selectVersion('4.14');
+      ClusterDetailsForm.externalPartnerIntegrationsField.findLabel().click();
+      ClusterDetailsForm.openshiftVersionField.selectVersion('4.13');
+      ClusterDetailsForm.externalPartnerIntegrationsField.findCheckbox().should('not.be.checked');
     });
 
     it("Hosts' Network Configuration control is disabled when external partner integration is selected", () => {
-      clusterDetailsPage.getStaticIpNetworkConfig().click();
-      clusterDetailsPage.inputOpenshiftVersion('4.14');
-      ClusterDetailsForm.externalPartnerIntegrationsControl.findLabel().click();
-      clusterDetailsPage.getStaticIpNetworkConfig().should('be.disabled').and('not.be.checked');
+      ClusterDetailsForm.hostsNetworkConfigurationField.findStaticIpRadioLabel().click();
+      ClusterDetailsForm.openshiftVersionField.selectVersion('4.14');
+      ClusterDetailsForm.externalPartnerIntegrationsField.findLabel().click();
+      ClusterDetailsForm.hostsNetworkConfigurationField
+        .findStaticIpRadioButton()
+        .should('be.disabled')
+        .and('not.be.checked');
     });
 
     xit('The minimal ISO is presented by default', () => {
       // TODO(jkilzi): WIP...
-      // ClusterDetailsForm.clusterNameControl
+      // ClusterDetailsForm.clusterNameField
       //   .findInputField()
-      //   .scrollIntoView()
       //   .type(Cypress.env('CLUSTER_NAME'));
-      // ClusterDetailsForm.baseDomainControl.findInputField().scrollIntoView().type('redhat.com');
-      // ClusterDetailsForm.openshiftVersionControl.findInputField().scrollIntoView().type('redhat.com');
+      // ClusterDetailsForm.baseDomainField.findInputField().scrollIntoView().type('redhat.com');
+      // ClusterDetailsForm.openshiftVersionField.findInputField().scrollIntoView().type('redhat.com');
     });
   });
 });

libs/ui-lib-tests/cypress/support/commands.ts

@@ -18,3 +18,7 @@ Cypress.Commands.add('pasteText', (selector, text) => {
     cy.get(selector).type(' {backspace}');
   });
 });
+
+Cypress.Commands.add('findWithinOrGet', (childSelector: string, ancestorAlias?: string) => {
+  return ancestorAlias ? cy.get(ancestorAlias).find(childSelector) : cy.get(childSelector);
+});

libs/ui-lib-tests/cypress/views/forms/ClusterDetails/ClusterDetailsForm.ts

@@ -0,0 +1,40 @@
+import { BaseDomainField } from './Fields/BaseDomainField';
+import { ClusterNameField } from './Fields/ClusterNameField';
+import { CustomManifestsField } from './Fields/CustomManifestsField';
+import { ExternalPartnerIntegrationsField } from './Fields/ExternalPartnerIntegrationsField';
+import { HostsNetworkConfigurationField } from './Fields/HostsNetworkConfigurationField';
+import { OpenShiftVersionField } from './Fields/OpenShiftVersionField';
+
+export class ClusterDetailsForm {
+  static readonly alias = `@${ClusterDetailsForm.name}`;
+  static readonly selector = '#wizard-cluster-details__form';
+
+  static init(ancestorAlias?: string) {
+    cy.findWithinOrGet(ClusterDetailsForm.selector, ancestorAlias).as(ClusterDetailsForm.name);
+    return ClusterDetailsForm;
+  }
+
+  static get externalPartnerIntegrationsField() {
+    return ExternalPartnerIntegrationsField.init(ClusterDetailsForm.alias);
+  }
+
+  static get customManifestsField() {
+    return CustomManifestsField.init(ClusterDetailsForm.alias);
+  }
+
+  static get clusterNameField() {
+    return ClusterNameField.init(ClusterDetailsForm.alias);
+  }
+
+  static get baseDomainField() {
+    return BaseDomainField.init(ClusterDetailsForm.alias);
+  }
+
+  static get openshiftVersionField() {
+    return OpenShiftVersionField.init(ClusterDetailsForm.alias);
+  }
+
+  static get hostsNetworkConfigurationField() {
+    return HostsNetworkConfigurationField.init(ClusterDetailsForm.alias);
+  }
+}

libs/ui-lib-tests/cypress/views/forms/ClusterDetails/Fields/BaseDomainField.ts

@@ -0,0 +1,15 @@
+export class BaseDomainField {
+  static readonly alias = `${BaseDomainField.name}`;
+  static readonly selector = '#form-control__form-input-baseDnsDomain-field';
+
+  static init(ancestorAlias: string) {
+    cy.findWithinOrGet(BaseDomainField.selector, ancestorAlias).as(BaseDomainField.name);
+    return BaseDomainField;
+  }
+
+  static findInputField() {
+    return cy.get(BaseDomainField.alias).findByRole('textbox', {
+      name: /base domain/i,
+    });
+  }
+}

libs/ui-lib-tests/cypress/views/forms/ClusterDetails/Fields/ClusterNameField.ts

@@ -0,0 +1,15 @@
+export class ClusterNameField {
+  static readonly alias = `@${ClusterNameField}`;
+  static readonly selector = '#form-control__form-input-name-field';
+
+  static init(ancestorAlias?: string) {
+    cy.findWithinOrGet(ClusterNameField.selector, ancestorAlias).as(ClusterNameField.name);
+    return ClusterNameField;
+  }
+
+  static findInputField() {
+    return cy.get(ClusterNameField.alias).findByRole('textbox', {
+      name: /cluster name/i,
+    });
+  }
+}

libs/ui-lib-tests/cypress/views/forms/ClusterDetails/Fields/CustomManifestsField.ts

@@ -0,0 +1,15 @@
+export class CustomManifestsField {
+  static readonly alias = `@${CustomManifestsField.name}`;
+  static readonly selector = '#form-control__form-input-addCustomManifest-field';
+
+  static init(ancestorAlias?: string) {
+    cy.findWithinOrGet(CustomManifestsField.selector, ancestorAlias).as(CustomManifestsField.name);
+    return CustomManifestsField;
+  }
+
+  static findCheckbox() {
+    return cy.get(CustomManifestsField.alias).findByRole('checkbox', {
+      name: /include custom manifests/i,
+    });
+  }
+}

libs/ui-lib-tests/cypress/views/forms/ClusterDetails/Fields/ExternalPartnerIntegrationsField.ts

@@ -0,0 +1,44 @@
+export class ExternalPartnerIntegrationsField {
+  static readonly alias = `@${ExternalPartnerIntegrationsField.name}`;
+  static readonly selector = '#form-control__form-checkbox-externalPartnerIntegrations-field';
+
+  static init(ancestorAlias?: string) {
+    cy.findWithinOrGet(ExternalPartnerIntegrationsField.selector, ancestorAlias).as(
+      ExternalPartnerIntegrationsField.name,
+    );
+    return ExternalPartnerIntegrationsField;
+  }
+
+  static findPopoverButton() {
+    return cy.get(ExternalPartnerIntegrationsField.alias).findByRole('img', {
+      hidden: true,
+    });
+  }
+
+  static findPopoverContent() {
+    // The popover is attached to the bottom of the body by default.
+    // No need to search anything related to it within this form field.
+    return cy
+      .get('#popover-externalPartnerIntegrations-body')
+      .findByText(
+        /to integrate with an external partner \(for example, oracle cloud\), you'll need to provide a custom manifest\./i,
+      );
+  }
+  static findLabel() {
+    return cy
+      .get(ExternalPartnerIntegrationsField.alias)
+      .findByText(/external partner integrations/i);
+  }
+
+  static findHelperText() {
+    return cy
+      .get(ExternalPartnerIntegrationsField.alias)
+      .findByText(/integrate with other platforms using custom manifests\./i);
+  }
+
+  static findCheckbox() {
+    return cy.get(ExternalPartnerIntegrationsField.alias).findByRole('checkbox', {
+      name: /external partner integrations/i,
+    });
+  }
+}

libs/ui-lib-tests/cypress/views/forms/ClusterDetails/Fields/HostsNetworkConfigurationField.ts

@@ -0,0 +1,27 @@
+export class HostsNetworkConfigurationField {
+  static readonly alias = `@${HostsNetworkConfigurationField.name}`;
+  static readonly selector = '#form-control__form-radio-hostsNetworkConfigurationType-field';
+
+  static init(ancestorAlias?: string) {
+    cy.findWithinOrGet(HostsNetworkConfigurationField.selector, ancestorAlias).as(
+      HostsNetworkConfigurationField.name,
+    );
+    return HostsNetworkConfigurationField;
+  }
+
+  static findLabel() {
+    return cy.get(HostsNetworkConfigurationField.alias).findByText(/hosts' network configuration/i);
+  }
+
+  static findStaticIpRadioButton() {
+    return cy
+      .get(HostsNetworkConfigurationField.alias)
+      .find('#form-radio-hostsNetworkConfigurationType-static-field');
+  }
+
+  static findStaticIpRadioLabel() {
+    return cy
+      .get(HostsNetworkConfigurationField.alias)
+      .findByText(/static ip, bridges, and bonds/i);
+  }
+}

libs/ui-lib-tests/cypress/views/forms/ClusterDetails/Fields/OpenShiftVersionField.ts

@@ -0,0 +1,27 @@
+export class OpenShiftVersionField {
+  static readonly alias = `@${OpenShiftVersionField.name}`;
+  static readonly selector = '#form-control__form-input-openshiftVersion-field';
+
+  static init(ancestorAlias?: string) {
+    cy.findWithinOrGet(OpenShiftVersionField.selector, ancestorAlias).as(
+      OpenShiftVersionField.name,
+    );
+
+    return OpenShiftVersionField;
+  }
+
+  static findLabel() {
+    return cy.get(OpenShiftVersionField.alias).findByText(/openshift version/i);
+  }
+
+  static findDropdown() {
+    return cy.get(OpenShiftVersionField.alias).find('#form-input-openshiftVersion-field');
+  }
+
+  static selectVersion(version: string) {
+    OpenShiftVersionField.findDropdown().click();
+    OpenShiftVersionField.findDropdown().within(() => {
+      cy.findByRole('menuitem', { name: new RegExp(`openshift ${version}`, 'i') }).click();
+    });
+  }
+}