mgr/dashboard: add e2e tests for cephfs management

Fixes: https://tracker.ceph.com/issues/62340
Signed-off-by: Nizamudeen A <nia@redhat.com>

src/pybind/mgr/dashboard/frontend/cypress.config.ts

@@ -37,6 +37,6 @@ export default defineConfig({
     baseUrl: 'https://localhost:4200/',
     excludeSpecPattern: ['*.po.ts', '**/orchestrator/**'],
     experimentalSessionAndOrigin: true,
-    specPattern: 'cypress/e2e/**/*-spec.{js,jsx,ts,tsx}',
+    specPattern: 'cypress/e2e/**/*-spec.{js,jsx,ts,tsx,feature}',
   },
 })

src/pybind/mgr/dashboard/frontend/cypress/e2e/common/01-global.feature.po.ts

@@ -62,9 +62,9 @@ And('{string} option {string}', (action: string, labels: string) => {
  * @param field ID of the field that needs to be filled out.
  * @param value Value that should be filled in the field.
  */
-And('enter {string} {string}', (field: string, value: string) => {
+And('enter {string} {string} in the modal', (field: string, value: string) => {
   cy.get('cd-modal').within(() => {
-    cy.get(`input[id=${field}]`).type(value);
+    cy.get(`input[id=${field}]`).clear().type(value);
   });
 });
 
@@ -185,3 +185,14 @@ And('I should see row {string} have {string} on this tab', (row: string, options
     });
   }
 });
+
+/**
+ * Fills in the given field using the value provided
+ * @param field ID of the field that needs to be filled out.
+ * @param value Value that should be filled in the field.
+ */
+And('enter {string} {string}', (field: string, value: string) => {
+  cy.get('.cd-col-form').within(() => {
+    cy.get(`input[id=${field}]`).clear().type(value);
+  });
+});

src/pybind/mgr/dashboard/frontend/cypress/e2e/common/urls.po.ts

@@ -39,6 +39,10 @@ export class UrlsCollection extends PageHelper {
     logs: { url: '#/logs', id: 'cd-logs' },
 
     // RGW Daemons
-    'rgw daemons': { url: '#/rgw/daemon', id: 'cd-rgw-daemon-list' }
+    'rgw daemons': { url: '#/rgw/daemon', id: 'cd-rgw-daemon-list' },
+
+    // CephFS
+    cephfs: { url: '#/cephfs', id: 'cd-cephfs-list' },
+    'create cephfs': { url: '#/cephfs/create', id: 'cd-cephfs-form' }
   };
 }

src/pybind/mgr/dashboard/frontend/cypress/e2e/filesystems/filesystems.e2e-spec.feature

@@ -0,0 +1,30 @@
+Feature: CephFS Management
+
+    Goal: To test out the CephFS management features
+
+    Background: Login
+        Given I am logged in
+
+    Scenario: Create a CephFS Volume
+        Given I am on the "cephfs" page
+        And I click on "Create" button
+        And enter "name" "test_cephfs"
+        And I click on "Create Volume" button
+        Then I should see a row with "test_cephfs"
+
+    Scenario: Edit CephFS Volume
+        Given I am on the "cephfs" page
+        And I select a row "test_cephfs"
+        And I click on "Edit" button
+        And enter "name" "test_cephfs_edit" in the modal
+        And I click on "Edit Volume" button
+        Then I should see a row with "test_cephfs_edit"
+
+    Scenario: Remove CephFS Volume
+        Given I am on the "cephfs" page
+        And I select a row "test_cephfs_edit"
+        And I click on "Remove" button from the table actions
+        Then I should see the modal
+        And I check the tick box in modal
+        And I click on "Remove Volume" button
+        Then I should not see a row with "test_cephfs_edit"

src/pybind/mgr/dashboard/frontend/cypress/e2e/filesystems/filesystems.e2e-spec.ts

@@ -1,16 +0,0 @@
-import { FilesystemsPageHelper } from './filesystems.po';
-
-describe('File Systems page', () => {
-  const filesystems = new FilesystemsPageHelper();
-
-  beforeEach(() => {
-    cy.login();
-    filesystems.navigateTo();
-  });
-
-  describe('breadcrumb test', () => {
-    it('should open and show breadcrumb', () => {
-      filesystems.expectBreadcrumbText('File Systems');
-    });
-  });
-});

src/pybind/mgr/dashboard/frontend/cypress/e2e/filesystems/filesystems.po.ts

@@ -1,5 +0,0 @@
-import { PageHelper } from '../page-helper.po';
-
-export class FilesystemsPageHelper extends PageHelper {
-  pages = { index: { url: '#/cephfs', id: 'cd-cephfs-list' } };
-}

src/pybind/mgr/dashboard/frontend/cypress/e2e/orchestrator/workflow/02-create-cluster-add-host.feature

@@ -12,7 +12,7 @@ Feature: Cluster expansion host addition
     Scenario Outline: Add hosts
         Given I am on the "Add Hosts" section
         When I click on "Add" button
-        And enter "hostname" "<hostname>"
+        And enter "hostname" "<hostname>" in the modal
         And select options "<labels>"
         And I click on "Add Host" button
         Then I should not see the modal
@@ -43,7 +43,7 @@ Feature: Cluster expansion host addition
     Scenario: Add hosts using pattern 'ceph-node-[01-02]'
         Given I am on the "Add Hosts" section
         When I click on "Add" button
-        And enter "hostname" "ceph-node-[01-02]"
+        And enter "hostname" "ceph-node-[01-02]" in the modal
         And I click on "Add Host" button
         Then I should not see the modal
         And I should see rows with following entries
@@ -55,7 +55,7 @@ Feature: Cluster expansion host addition
         Given I am on the "Add Hosts" section
         And I should see a row with "ceph-node-00"
         When I click on "Add" button
-        And enter "hostname" "ceph-node-00"
+        And enter "hostname" "ceph-node-00" in the modal
         Then I should see an error in "hostname" field
 
     Scenario Outline: Add and remove labels on host

src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-list/cephfs-list.component.ts

@@ -162,7 +162,7 @@ export class CephfsListComponent extends ListWithDetails implements OnInit {
       fields: [
         {
           type: 'text',
-          name: 'volumeName',
+          name: 'name',
           value: selectedVolume,
           label: $localize`Name`,
           required: true
@@ -170,7 +170,7 @@ export class CephfsListComponent extends ListWithDetails implements OnInit {
       ],
       submitButtonText: $localize`Edit Volume`,
       onSubmit: (values: any) => {
-        this.cephfsService.rename(selectedVolume, values.volumeName).subscribe(() => {
+        this.cephfsService.rename(selectedVolume, values.name).subscribe(() => {
           this.notificationService.show(
             NotificationType.success,
             $localize`Updated Volume '${selectedVolume}'`