Skip to content

Added automated tests with cypress for Zone form #9535

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 23, 2025
Merged

Added automated tests with cypress for Zone form #9535

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
be4365c
Added automated tests with cypress for Zone form
asirvadAbrahamVarghese Aug 29, 2025
a916914
Using form-elements-validation commands
asirvadAbrahamVarghese Oct 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
282 changes: 282 additions & 0 deletions cypress/e2e/ui/Settings/Application-Settings/zone.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,282 @@
/* eslint-disable no-undef */
import { flashClassMap } from '../../../../support/assertions/assertion_constants';
import {
LABEL_CONFIG_KEYS,
FIELD_CONFIG_KEYS,
FIELD_TYPES,
BUTTON_CONFIG_KEYS,
} from '../../../../support/commands/constants/command_constants.js';

// Component route url
const COMPONENT_ROUTE_URL = '/ops/explorer#/';

// Menu options
const SETTINGS_LABEL = 'Settings';
const APP_SETTINGS_OPTION = 'Application Settings';

// Accordion items
const MANAGEIQ_REGION_ACCORDION_ITEM = /^ManageIQ Region:/;
const ZONES_ACCORDION_ITEM = 'Zones';

// Config options
const CONFIG_TOOLBAR_BUTTON = 'Configuration';
const ADD_ZONE_CONFIG_OPTION = 'Add a new Zone';
const EDIT_ZONE_CONFIG_OPTION = 'Edit this Zone';
const DELETE_ZONE_CONFIG_OPTION = 'Delete this Zone';

// Field values
const NAME_FIELD_LABEL = 'Name';
const DESCRIPTION_FIELD_LABEL = 'Description';
const SERVER_IP_FIELD_LABEL = 'Server IP';
const MAX_SCAN_FIELD_LABEL = 'VM Scans';
const FORM_HEADER_FRAGMENT = 'Zone';
const INFO_SUB_HEADER = 'Info';
const SETTINGS_SUB_HEADER = 'Settings';
const ZONE_NAME = 'Test-Zone-Name';
const INITIAL_ZONE_DESCRIPTION = 'Test-Zone-Description';
const UPDATED_ZONE_DESCRIPTION = 'Test-Zone-Description-Updated';
const INITIAL_SERVER_IP = '0.0.0.0';
const UPDATED_SERVER_IP = '1.1.1.1';
const INITIAL_MAX_SCAN_LIMIT = 5;
const UPDATED_MAX_SCAN_LIMIT = 10;

// Buttons
const SAVE_BUTTON_TEXT = 'Save';
const CANCEL_BUTTON_TEXT = 'Cancel';
const ADD_BUTTON_TEXT = 'Add';
const RESET_BUTTON_TEXT = 'Reset';

// Flash message text snippets
const FLASH_MESSAGE_OPERATION_CANCELED = 'cancel';
const FLASH_MESSAGE_ZONE_UPDATED = 'queued';
const FLASH_MESSAGE_OPERATION_RESET = 'reset';
const DELETE_CONFIRM_TEXT = 'delete';

function addZone() {
cy.toolbar(CONFIG_TOOLBAR_BUTTON, ADD_ZONE_CONFIG_OPTION);
cy.getFormInputFieldByIdAndType({ inputId: 'name' }).type(ZONE_NAME);
cy.getFormInputFieldByIdAndType({ inputId: 'description' }).type(
INITIAL_ZONE_DESCRIPTION
);
cy.getFormInputFieldByIdAndType({ inputId: 'settings.proxy_server_ip' }).type(
INITIAL_SERVER_IP
);
cy.getFormSelectFieldById({
selectId: 'settings.concurrent_vm_scans',
}).select(INITIAL_MAX_SCAN_LIMIT);
cy.interceptApi({
alias: 'createZoneApi',
urlPattern: '/api/zones',
triggerFn: () =>
cy
.getFormFooterButtonByTypeWithText({
buttonText: ADD_BUTTON_TEXT,
buttonType: 'submit',
})
.should('be.enabled')
.click(),
});
return cy.then(() => {
return `Zone: ${INITIAL_ZONE_DESCRIPTION}`;
});
}

function validateFormElements(isEditForm = false) {
Copy link
Member

@jrafanie jrafanie Aug 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After we do a few pages of these, we'll probably have shared behavior we can extract. It's probably best to get a few of these in first.

Copy link
Contributor Author

@asirvadAbrahamVarghese asirvadAbrahamVarghese Aug 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not really sure about the best approach to extract these, one way would be to have separate methods in a shared helper file for each field, something like:

function validateNameField(isDisabled = false) {
  cy.getFormLabelByInputId('name').should('be.visible');
  cy.getFormInputFieldById('name')
    .should('be.visible')
    .then((nameField) => {
      if (isDisabled) {
        expect(nameField).to.be.disabled;
      } else {
        expect(nameField).to.not.be.disabled;
      }
    });
}

But we might end up with a pile of methods 😴

More flexible one would be to get the set of field configs and then do the assertions:

function validateFormFields(fieldConfigs) {
  fieldConfigs.forEach((config) => {
    const { id, fieldType = 'input', shouldBeDisabled = false } = config;

    // Check label
    cy.getFormLabelByInputId(id).should('be.visible');

    // Check field
    if (fieldType === 'input') {
      cy.getFormInputFieldById(id)
        .should('be.visible')
        .then((field) => {
          if (shouldBeDisabled) {
            expect(field).to.be.disabled;
          } else {
            expect(field).to.not.be.disabled;
          }
        });
    } else if (fieldType === 'select') {
      cy.getFormSelectFieldById(id)
        .should('be.visible')
        .then((field) => {
          if (shouldBeDisabled) {
            expect(field).to.be.disabled;
          } else {
            expect(field).to.not.be.disabled;
          }
        });
    }
  });
}

and use it like:

validateFormFields([
  { id: 'name', shouldBeDisabled: true },
  { id: 'description' },
  { fieldType: 'select', id: 'concurrent_vm_scans' },
]);

Any thoughts?

Copy link
Member

@jrafanie jrafanie Sep 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, I didn't see this reply. yeah, I think something like that is what we should do. How many pages have we done this for now? Maybe after we have several done and can figure out a clean way to do this...

One for validating form labels and one for form input fields seem the most logical to me. Keep this in mind as you do these and propose an interface and maybe we can try converting one of these tests to use it... and we can judge before vs. after.

Copy link
Contributor Author

@asirvadAbrahamVarghese asirvadAbrahamVarghese Sep 29, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR with form element validation commands: #9635

Copy link
Contributor Author

@asirvadAbrahamVarghese asirvadAbrahamVarghese Oct 21, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This test is now updated with new elements validation commands

cy.expect_explorer_title(FORM_HEADER_FRAGMENT);
cy.get('#main-content .bx--form h3').contains(INFO_SUB_HEADER);
// Validate form labels
cy.validateFormLabels([
{
[LABEL_CONFIG_KEYS.FOR_VALUE]: 'name',
[LABEL_CONFIG_KEYS.EXPECTED_TEXT]: NAME_FIELD_LABEL,
},
{
[LABEL_CONFIG_KEYS.FOR_VALUE]: 'description',
[LABEL_CONFIG_KEYS.EXPECTED_TEXT]: DESCRIPTION_FIELD_LABEL,
},
{
[LABEL_CONFIG_KEYS.FOR_VALUE]: 'settings.proxy_server_ip',
[LABEL_CONFIG_KEYS.EXPECTED_TEXT]: SERVER_IP_FIELD_LABEL,
},
{
[LABEL_CONFIG_KEYS.FOR_VALUE]: 'settings.concurrent_vm_scans',
[LABEL_CONFIG_KEYS.EXPECTED_TEXT]: MAX_SCAN_FIELD_LABEL,
},
]);
// Validate form fields
cy.validateFormFields([
{
[FIELD_CONFIG_KEYS.ID]: 'name',
[FIELD_CONFIG_KEYS.SHOULD_BE_DISABLED]: isEditForm,
},
{
[FIELD_CONFIG_KEYS.ID]: 'description',
},
{
[FIELD_CONFIG_KEYS.ID]: 'settings.proxy_server_ip',
},
{
[FIELD_CONFIG_KEYS.ID]: 'settings.concurrent_vm_scans',
[FIELD_CONFIG_KEYS.FIELD_TYPE]: FIELD_TYPES.SELECT,
},
]);
// Validate form footer buttons
cy.validateFormFooterButtons([
{
[BUTTON_CONFIG_KEYS.BUTTON_TEXT]: CANCEL_BUTTON_TEXT,
},
{
[BUTTON_CONFIG_KEYS.BUTTON_TEXT]: isEditForm
? SAVE_BUTTON_TEXT
: ADD_BUTTON_TEXT,
[BUTTON_CONFIG_KEYS.BUTTON_TYPE]: 'submit',
[BUTTON_CONFIG_KEYS.SHOULD_BE_DISABLED]: true,
},
...(isEditForm
? [
{
[BUTTON_CONFIG_KEYS.BUTTON_TEXT]: RESET_BUTTON_TEXT,
[BUTTON_CONFIG_KEYS.SHOULD_BE_DISABLED]: true,
},
]
: []),
]);
}

function cleanUp() {
cy.get('li.list-group-item').each((item) => {
const text = item.text().trim();
if (text.includes(INITIAL_ZONE_DESCRIPTION)) {
if (!item.hasClass('node-selected')) {
cy.wrap(item).click();
}
cy.expect_browser_confirm_with_text({
confirmTriggerFn: () =>
cy.toolbar(CONFIG_TOOLBAR_BUTTON, DELETE_ZONE_CONFIG_OPTION),
});
return false; // exit the iteration
}
return null; // has no impact - just to get rid of eslint warning
});
}

function selectZoneAccordionItem(childZoneNode) {
cy.selectAccordionItem([
MANAGEIQ_REGION_ACCORDION_ITEM,
ZONES_ACCORDION_ITEM,
...(childZoneNode ? [childZoneNode] : []),
]);
}

describe('Automate Zone form operations: Settings > Application Settings > Settings > Zones > Configuration > Add a new Zone', () => {
beforeEach(() => {
cy.login();
cy.menu(SETTINGS_LABEL, APP_SETTINGS_OPTION);
cy.accordion(SETTINGS_LABEL);
selectZoneAccordionItem();
});

it('Validate the visibility and state of add form elements', () => {
cy.toolbar(CONFIG_TOOLBAR_BUTTON, ADD_ZONE_CONFIG_OPTION);
validateFormElements();
});

it('Checking whether cancel button works on the add form', () => {
cy.toolbar(CONFIG_TOOLBAR_BUTTON, ADD_ZONE_CONFIG_OPTION);
cy.getFormFooterButtonByTypeWithText({
buttonText: CANCEL_BUTTON_TEXT,
}).click();
cy.expect_flash(flashClassMap.warning, FLASH_MESSAGE_OPERATION_CANCELED);
});

it('Checking whether add, edit & delete zone works', () => {
/* ===== Add ===== */
addZone().then((createdZone) => {
// Here the createdZone will have value "Zone: Test-Zone-Description",
// which is the accordion item to be selected
cy.expect_flash(flashClassMap.success, FLASH_MESSAGE_ZONE_UPDATED);
selectZoneAccordionItem(createdZone);
});
/* ===== Edit ===== */
cy.toolbar(CONFIG_TOOLBAR_BUTTON, EDIT_ZONE_CONFIG_OPTION);
cy.getFormInputFieldByIdAndType({ inputId: 'description' })
.clear()
.type(UPDATED_SERVER_IP);
cy.getFormSelectFieldById({
selectId: 'settings.concurrent_vm_scans',
}).select(UPDATED_MAX_SCAN_LIMIT);
cy.getFormFooterButtonByTypeWithText({
buttonText: SAVE_BUTTON_TEXT,
buttonType: 'submit',
})
.should('be.enabled')
.click();
cy.expect_flash(flashClassMap.success, FLASH_MESSAGE_ZONE_UPDATED);
/* ===== Delete ===== */
cy.expect_browser_confirm_with_text({
confirmTriggerFn: () =>
cy.toolbar(CONFIG_TOOLBAR_BUTTON, DELETE_ZONE_CONFIG_OPTION),
containsText: DELETE_CONFIRM_TEXT,
});
cy.expect_flash(flashClassMap.success, DELETE_CONFIRM_TEXT);
});

it('Validate the visibility and state of edit form elements', () => {
addZone().then((createdZone) => {
// Here the createdZone will have value "Zone: Test-Zone-Description",
// which is the accordion item to be selected
selectZoneAccordionItem(createdZone);
});
cy.toolbar(CONFIG_TOOLBAR_BUTTON, EDIT_ZONE_CONFIG_OPTION);
validateFormElements(true);
cy.getFormFooterButtonByTypeWithText({
buttonText: CANCEL_BUTTON_TEXT,
}).click();
});

it('Checking whether cancel & reset buttons work on the edit form', () => {
addZone().then((createdZone) => {
// Here the createdZone will have value "Zone: Test-Zone-Description",
// which is the accordion item to be selected
selectZoneAccordionItem(createdZone);
});
cy.toolbar(CONFIG_TOOLBAR_BUTTON, EDIT_ZONE_CONFIG_OPTION);
/* ===== Reset ===== */
cy.getFormInputFieldByIdAndType({ inputId: 'description' })
.clear()
.type(UPDATED_ZONE_DESCRIPTION);
cy.getFormInputFieldByIdAndType({ inputId: 'settings.proxy_server_ip' })
.clear()
.type(UPDATED_SERVER_IP);
cy.getFormFooterButtonByTypeWithText({ buttonText: RESET_BUTTON_TEXT })
.should('be.enabled')
.click();
cy.expect_flash(flashClassMap.warning, FLASH_MESSAGE_OPERATION_RESET);
cy.getFormInputFieldByIdAndType({ inputId: 'description' }).should(
'have.value',
INITIAL_ZONE_DESCRIPTION
);
cy.getFormInputFieldByIdAndType({
inputId: 'settings.proxy_server_ip',
}).should('have.value', INITIAL_SERVER_IP);
/* ===== Cancel ===== */
cy.getFormFooterButtonByTypeWithText({
buttonText: CANCEL_BUTTON_TEXT,
}).click();
cy.expect_flash(flashClassMap.warning, FLASH_MESSAGE_OPERATION_CANCELED);
});

afterEach(() => {
cy.url()
.then((url) => {
// Ensures navigation to Settings -> Application-Settings in the UI
if (!url.endsWith(COMPONENT_ROUTE_URL)) {
cy.visit(COMPONENT_ROUTE_URL);
}
cy.accordion(SETTINGS_LABEL);
})
.then(() => {
cleanUp();
Copy link
Member

@jrafanie jrafanie Oct 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's keep the UI driven cleanup for now and revisit it with the test setup with factories and rollback using cypress on rails.

});
});
});
Loading