jwa(front): Add e2e tests for volume's mount path input

Signed-off-by: Tasos Alexiou <tasos@arrikto.com>

components/crud-web-apps/jupyter/frontend/cypress/integration/form-page.spec.ts

@@ -0,0 +1,50 @@
+describe('New notebook form', () => {
+  beforeEach(() => {});
+
+  it('should have a "New notebook" title', () => {
+    cy.visit('/new');
+    cy.get('[data-cy-toolbar-title]').contains('New notebook').should('exist');
+  });
+
+  it('should auto update mount value when name change', () => {
+    cy.get('[data-cy="add new volume"]').click();
+
+    cy.get('.last[data-cy="data volumes"]').click();
+
+    cy.get('.last[data-cy="data volumes"]')
+      .find('[data-cy="volume name input"]')
+      .type('new-volume-name')
+      .then($nameInput => {
+        const nameValue = $nameInput.val();
+        cy.get('.last[data-cy="data volumes"]')
+          .find('[data-cy="mount path"]')
+          .should($mountInput => {
+            const mountValue = $mountInput.val();
+            expect(mountValue).equal(`/home/jovyan/${nameValue}`);
+          });
+      });
+  });
+
+  it('should not auto update mount value when it is dirty', () => {
+    cy.get('[data-cy="add new volume"]').click();
+
+    cy.get('.last[data-cy="data volumes"]').click();
+
+    cy.get('.last[data-cy="data volumes"]')
+      .find('[data-cy="mount path"]')
+      .type('dirty');
+
+    cy.get('.last[data-cy="data volumes"]')
+      .find('[data-cy="volume name input"]')
+      .type('new-volume-name')
+      .then($nameInput => {
+        const nameValue = $nameInput.val();
+        cy.get('.last[data-cy="data volumes"]')
+          .find('[data-cy="mount path"]')
+          .should($mountInput => {
+            const mountValue = $mountInput.val();
+            expect(mountValue).not.equal(`/home/jovyan/${nameValue}`);
+          });
+      });
+  });
+});

components/crud-web-apps/jupyter/frontend/src/app/pages/form/form-new/form-data-volumes/form-data-volumes.component.html

@@ -7,9 +7,15 @@
   <mat-accordion>
     <mat-expansion-panel
       hideToggle
-      *ngFor="let volGroup of volsArray.controls; let i = index"
+      *ngFor="
+        let volGroup of volsArray.controls;
+        let i = index;
+        let last = last
+      "
       (opened)="openPanel.add(i)"
       (closed)="openPanel.clear()"
+      [class.last]="last"
+      data-cy="data volumes"
     >
       <mat-expansion-panel-header>
         <mat-panel-title>
@@ -92,6 +98,7 @@
       (click)="addNewVolume()"
       mat-stroked-button
       i18n
+      data-cy="add new volume"
     >
       + Add new volume
     </button>
@@ -103,6 +110,7 @@
       (click)="attachExistingVolume()"
       mat-stroked-button
       i18n
+      data-cy="attach existing volume"
     >
       + Attach existing volume
     </button>

components/crud-web-apps/jupyter/frontend/src/app/pages/form/form-new/volume/mount/mount.component.html

@@ -1,4 +1,9 @@
 <mat-form-field appearance="outline" class="wide">
   <mat-label i18n>Mount path</mat-label>
-  <input autocomplete="off" matInput [formControl]="volGroup.get('mount')" />
+  <input
+    autocomplete="off"
+    matInput
+    [formControl]="volGroup.get('mount')"
+    data-cy="mount path"
+  />
 </mat-form-field>

components/crud-web-apps/jupyter/frontend/src/app/pages/form/form-new/volume/new/name/name.component.html

@@ -11,6 +11,7 @@
     autocomplete="off"
     matInput
     [formControl]="metadataGroup.get('name')"
+    data-cy="volume name input"
   />
 </mat-form-field>
 
@@ -24,6 +25,7 @@
     autocomplete="off"
     matInput
     [formControl]="metadataGroup.get('generateName')"
+    data-cy="volume generateName input"
   />
   <mat-icon
     matSuffix