Multiple pool cypress testing

Soigned-off-by: gshanmug <gshanmug@redhat.com>

frontend/packages/ceph-storage-plugin/integration-tests-cypress/tests/multiple-pool.spec.ts

@@ -0,0 +1,44 @@
+import { checkErrors } from '../../../integration-tests-cypress/support';
+import { storagePool } from '../views/multiple-pool';
+
+// Pool var
+const poolName: string = 'example.pool';
+const replicaCount: string = '2';
+
+describe('Test Ceph pool creation', () => {
+  before(() => {
+    cy.login();
+    cy.visit('/');
+    cy.install();
+  });
+
+  beforeEach(() => {
+    cy.visit('/');
+    cy.clickNavLink(['Storage', 'StorageClasses']);
+    cy.byTestID('item-create').click();
+  });
+
+  after(() => {
+    cy.logout();
+  });
+
+  afterEach(() => {
+    checkErrors();
+  });
+
+  it('Check for a new pool creation', () => {
+    cy.log('Test creation of a new pool');
+    storagePool.prepareStorageClassForm();
+    storagePool.create(poolName, replicaCount, 'POOL_CREATED');
+
+    cy.log('Verify a newly created pool');
+    storagePool.verify(poolName, replicaCount);
+
+    cy.log('Try to create a new pool with already existing name');
+    storagePool.prepareStorageClassForm();
+    storagePool.create(poolName, replicaCount, 'POOL_DUPLICATED');
+
+    cy.log('Deleting a pool');
+    storagePool.delete(poolName);
+  });
+});

frontend/packages/ceph-storage-plugin/integration-tests-cypress/utils/consts.ts

@@ -0,0 +1,2 @@
+// OCS namespace
+export const NS = 'openshift-storage';

frontend/packages/ceph-storage-plugin/integration-tests-cypress/views/multiple-pool.ts

@@ -0,0 +1,72 @@
+import { NS } from '../utils/consts';
+import { modal } from '../../../integration-tests-cypress/views/modal';
+
+// Create storage class from
+export const storagePoolDropdown: string = 'pool-dropdown-toggle';
+
+// Create new pool form
+export const poolNameTextBox: string = 'new-pool-name-textbox';
+export const replicaDropdown: string = 'replica-dropdown';
+export const confirmAction: string = 'confirm-action';
+
+// Pool status
+export const emptyStateBody: string = 'empty-state-body';
+
+export const poolMessage = {
+  PROGRESS:
+    'The creation of an OCS storage cluster is still in progress or have failed please try again after the storage cluster is ready to use.',
+  POOL_START: (poolName) => `Pool ${poolName} creation in progress`,
+  POOL_DUPLICATED: (poolName) => `Pool "${poolName}" already exists`,
+  POOL_CREATED: (poolName) => `Pool ${poolName} was successfully created`,
+};
+
+export const storagePool = {
+  prepareStorageClassForm: () => {
+    // Select provisioner
+    cy.byTestID('storage-class-provisioner-dropdown').click();
+    cy.byLegacyTestID('dropdown-text-filter').type('openshift-storage.rbd.csi.ceph.com');
+    cy.byTestID('dropdown-menu-item-link').should('contain', 'openshift-storage.rbd.csi.ceph.com');
+    cy.byTestID('dropdown-menu-item-link').click();
+    // Open a storage pool creation form
+    cy.byTestID(storagePoolDropdown).click();
+    cy.byTestID('create-new-pool-button').click();
+  },
+  create: (poolName: string, replicaCount: string, poolCreationJobStatus: string) => {
+    // Make sure the storage pool creation form is open
+    modal.modalTitleShouldContain('Create New Storage Pool');
+    modal.submitShouldBeDisabled();
+    modal.shouldBeOpened();
+
+    cy.byTestID(poolNameTextBox)
+      .clear()
+      .type(poolName);
+    cy.byTestID(replicaDropdown)
+      .click()
+      .byLegacyTestID(replicaCount)
+      .click();
+
+    // Create new pool
+    cy.byTestID(confirmAction)
+      .last()
+      .click();
+
+    // Validations
+    storagePool.validate(emptyStateBody, poolMessage.POOL_START(poolName));
+    storagePool.validate(emptyStateBody, poolMessage[poolCreationJobStatus](poolName));
+
+    // Close a pool creation form
+    cy.byTestID(confirmAction)
+      .last()
+      .click();
+  },
+  delete: (poolName: string) => cy.exec(`oc delete CephBlockPool ${poolName} -n ${NS}`),
+  verify: (poolName: string, replicaCount: string) => {
+    cy.byTestID(storagePoolDropdown).click();
+    const poolDropdownItem = [poolName, `Replica ${replicaCount} no compression`];
+    const regex = new RegExp(`${poolDropdownItem.join('|')}`, 'g');
+    storagePool.validate(poolName, regex);
+    cy.byTestID(storagePoolDropdown).click();
+  },
+  validate: (elementId: string, expectedValue: any) =>
+    cy.byTestID(elementId).contains(expectedValue),
+};

frontend/packages/ceph-storage-plugin/src/components/modals/storage-pool-modal/storage-pool-modal.tsx

@@ -56,7 +56,7 @@ const PoolStatusComponent: React.FC<PoolStatusComponentProps> = ({ status, name,
     <>
       <EmptyState>
         <EmptyStateIcon icon={statusObj.icon} className={statusObj.className} />
-        <EmptyStateBody>
+        <EmptyStateBody data-test="empty-state-body">
           {error ? error.replace(ROOK_MODEL, 'Pool') : statusObj.desc.replace('{name}', name)}
         </EmptyStateBody>
       </EmptyState>
@@ -233,6 +233,7 @@ export const StoragePoolModal = withHandlePromise((props: StoragePoolModalProps)
             <Button
               type="submit"
               variant="primary"
+              data-test="confirm-action"
               isDisabled={poolStatus === POOL_PROGRESS.PROGRESS}
               id="confirm-action"
               onClick={handleFinishButton}
@@ -269,6 +270,7 @@ export const StoragePoolModal = withHandlePromise((props: StoragePoolModalProps)
                 aria-describedby={t('ceph-storage-plugin~pool-name-help')}
                 id="pool-name"
                 name="newPoolName"
+                data-test="new-pool-name-textbox"
                 required
               />
             </div>
@@ -281,6 +283,7 @@ export const StoragePoolModal = withHandlePromise((props: StoragePoolModalProps)
                 toggle={
                   <DropdownToggle
                     id="replica-dropdown"
+                    data-test="replica-dropdown"
                     onToggle={() => setReplicaOpen(!isReplicaOpen)}
                     toggleIndicator={CaretDownIcon}
                   >

frontend/packages/ceph-storage-plugin/src/components/ocs-storage-class-form/ocs-storage-class-form.tsx

@@ -96,6 +96,7 @@ export const PoolResourceComponent: React.FC<ProvisionerProps> = ({ onParamChang
             key={pool.metadata.uid}
             component="button"
             id={pool?.metadata?.name}
+            data-test={pool?.metadata?.name}
             onClick={handleDropdownChange}
             description={t('ceph-storage-plugin~Replica {{poolSize}} {{compressionText}}', {
               poolSize: pool?.spec?.replicated?.size,
@@ -110,6 +111,7 @@ export const PoolResourceComponent: React.FC<ProvisionerProps> = ({ onParamChang
     },
     [
       <DropdownItem
+        data-test="create-new-pool-button"
         key="first-item"
         component="button"
         onClick={() =>
@@ -138,6 +140,7 @@ export const PoolResourceComponent: React.FC<ProvisionerProps> = ({ onParamChang
               toggle={
                 <DropdownToggle
                   id="pool-dropdown-id"
+                  data-test="pool-dropdown-toggle"
                   onToggle={() => setOpen(!isOpen)}
                   toggleIndicator={CaretDownIcon}
                 >

frontend/public/components/storage-class-form.tsx

@@ -1053,6 +1053,7 @@ export class StorageClassForm_ extends React.Component<
               selectedKey={_.get(this.state, 'newStorageClass.type')}
               onChange={(event) => this.setStorageHandler('type', event)}
               id="storage-class-provisioner"
+              dataTest="storage-class-provisioner-dropdown"
             />
             <span className="help-block">
               Determines what volume plugin is used for provisioning persistent volumes.