Fix access mode e2e tests and add more test cases (opendatahub-io#5493)

* Fix access mode e2e tests and add more test cases

* fix tests

* address comments

* address comments

* address review comments

Author: DaoDaoNoCode

frontend/src/__tests__/cypress/.eslintignore

@@ -0,0 +1,6 @@
+*.md
+*.yaml
+*.yml
+*.json
+results/
+node_modules/

frontend/src/__tests__/cypress/cypress/fixtures/e2e/dataScienceProjects/testClusterStorageAccessModes.yaml

@@ -0,0 +1,9 @@
+# testClusterStorageAccessModes.cy.ts Test Data #
+projectName: "test-cluster-storage-access-modes"
+storageClassRWO: "sc-rwo-preset"
+storageClassRWX: "sc-rwx-preset"
+storageClassROX: "sc-rox-preset"
+storageClassRWOP: "sc-rwop-preset"
+storageClassMultiAccess: "sc-multi-preset"
+storageName: "test-storage-rwx"
+storageDescription: "Test storage with ReadWriteMany access mode"

frontend/src/__tests__/cypress/cypress/fixtures/e2e/dataScienceProjects/testWorkbenchStorageClasses.yaml

@@ -0,0 +1,12 @@
+# testWorkbenchStorageClasses.cy.ts Test Data #
+projectName: "test-workbench-storage-preset"
+storageClassRWO: "sc-rwo"
+storageClassMultiAccess: "sc-multi-access"
+workbenchRWO: "wb-rwo-test"
+workbenchMultiAccessA: "wb-multi-a"
+workbenchMultiAccessB: "wb-multi-b"
+storageRWO: "storage-rwo"
+storageMultiAccess: "storage-multi"
+mountPathA: "mnt/path-a"
+mountPathB: "mnt/path-b"
+mountPathC: "mnt/path-c"

frontend/src/__tests__/cypress/cypress/pages/clusterStorage.ts

@@ -73,7 +73,8 @@ class SelectStorageClass {
   }
 
   selectStorageClassSelectOption(name: string | RegExp) {
-    cy.findByRole('option', { name, hidden: true }).click();
+    // Use contains to find the visible option text and click it
+    cy.contains('[role="option"]', name).should('be.visible').click();
   }
 
   findSelectStorageClassLabel(name: string | RegExp, accessMode: AccessMode) {
@@ -284,12 +285,16 @@ class ClusterStorage {
     );
   }
 
-  findCreateButton() {
-    return cy.findByTestId('cluster-storage-button');
-  }
-
-  findCreateButtonFromActions() {
-    return cy.findByTestId('actions-cluster-storage-button');
+  findAddClusterStorageButton() {
+    // Use Cypress's built-in handling to try one selector, then another if the first fails
+    return cy.get('body').then(() =>
+      cy
+        .get(
+          '[data-testid="cluster-storage-button"], [data-testid="actions-cluster-storage-button"]',
+        )
+        .first()
+        .then(($el) => cy.wrap($el)),
+    );
   }
 
   findKebabToggle() {

frontend/src/__tests__/cypress/cypress/pages/workbench.ts

@@ -1,13 +1,35 @@
+import type { AccessMode } from '#~/__tests__/cypress/cypress/types';
 import { K8sNameDescriptionField } from '#~/__tests__/cypress/cypress/pages/components/subComponents/K8sNameDescriptionField';
 import { Contextual } from './components/Contextual';
 import { Modal } from './components/Modal';
 import { TableRow } from './components/table';
 
+class SelectStorageClass {
+  find() {
+    return cy.findByTestId('storage-classes-selector');
+  }
+
+  selectStorageClassSelectOption(name: string | RegExp) {
+    cy.findByRole('option', { name, hidden: true }).click();
+  }
+
+  findSelectStorageClassLabel(name: string | RegExp, accessMode: AccessMode) {
+    return cy.findByRole('option', { name, hidden: true }).findByTestId(`${accessMode}-label`);
+  }
+}
 class StorageModal extends Modal {
   constructor() {
     super('Add storage to Test Notebook');
   }
 
+  findNameInput() {
+    return this.find().findByTestId('create-new-storage-name');
+  }
+
+  findStorageClassSelect() {
+    return new SelectStorageClass();
+  }
+
   selectExistingPersistentStorage(name: string) {
     cy.findByTestId('persistent-storage-group')
       .findByRole('button', { name: 'Typeahead menu toggle' })
@@ -16,7 +38,7 @@ class StorageModal extends Modal {
   }
 
   findSubmitButton() {
-    return this.find().findByTestId('attach-storage');
+    return this.find().findByTestId('modal-submit-button');
   }
 
   findWorkbenchRestartAlert() {
@@ -26,6 +48,18 @@ class StorageModal extends Modal {
   findMountField() {
     return this.find().findByTestId('mount-path-folder-value');
   }
+
+  findRWOAccessMode() {
+    return this.find().findByTestId('ReadWriteOnce-radio');
+  }
+
+  findRWXAccessMode() {
+    return this.find().findByTestId('ReadWriteMany-radio');
+  }
+
+  findROXAccessMode() {
+    return this.find().findByTestId('ReadOnlyMany-radio');
+  }
 }
 class WorkbenchPage {
   visit(projectName: string) {
@@ -397,6 +431,27 @@ class StorageTable {
         >,
     );
   }
+
+  /**
+   * Verify that a storage with a specific name has the expected access mode
+   * @param storageName - The name of the storage to find
+   * @param accessMode - The expected access mode label (e.g., 'ReadWriteOnce')
+   */
+  verifyStorageAccessMode(storageName: string, accessMode: string) {
+    this.find().within(() => {
+      cy.contains('tr', storageName).within(() => {
+        cy.contains(accessMode).should('exist');
+      });
+    });
+  }
+
+  /**
+   * Find a table row by storage name
+   * @param storageName - The name of the storage to find
+   */
+  findRowByName(storageName: string) {
+    return this.find().contains('tr', storageName);
+  }
 }
 
 class NotebookImageGroup extends Contextual<HTMLElement> {}
@@ -451,6 +506,10 @@ class CreateSpawnerPage {
     return cy.findByTestId('existing-storage-button');
   }
 
+  findCreateStorageButton() {
+    return cy.findByTestId('create-storage-button');
+  }
+
   selectPVSize(name: string) {
     this.findPVSizeSelectButton().click();
     cy.findByRole('menuitem', { name }).click();