Add cypress test

opendatahub-io · Oct 14, 2024 · 81c8af0 · 81c8af0
1 parent 4ad8a3d
commit 81c8af0
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 1 deletion.
diff --git a/frontend/src/__tests__/cypress/cypress/pages/workbench.ts b/frontend/src/__tests__/cypress/cypress/pages/workbench.ts
@@ -174,6 +174,22 @@ class NotebookRow extends TableRow {
   }
 }
 
+class AttachConnectionModal extends Modal {
+  constructor() {
+    super('Attach existing connections');
+  }
+
+  selectConnectionOption(name: string) {
+    this.find().findByRole('button', { name: 'Connections' }).click();
+    this.find().findByRole('option', { name }).click();
+    this.find().findByRole('button', { name: 'Connections' }).click();
+  }
+
+  findAttachButton() {
+    return this.find().findByTestId('attach-button');
+  }
+}
+
 class CreateSpawnerPage {
   k8sNameDescription = new K8sNameDescriptionField('workbench');
 
@@ -309,6 +325,19 @@ class CreateSpawnerPage {
   findContainerSizeInput(name: string) {
     return cy.findByTestId('container-size-group').contains(name);
   }
+
+  findAttachConnectionButton() {
+    return cy.findByTestId('attach-existing-connection-button');
+  }
+
+  findConnectionsTable() {
+    return cy.findByTestId('connections-table');
+  }
+
+  findConnectionsTableRow(name: string, type: string) {
+    this.findConnectionsTable().find(`[data-label=Name]`).contains(name);
+    this.findConnectionsTable().find(`[data-label=Type]`).contains(type);
+  }
 }
 
 class EditSpawnerPage extends CreateSpawnerPage {
@@ -373,3 +402,4 @@ export const notebookConfirmModal = new NotebookConfirmModal();
 export const editSpawnerPage = new EditSpawnerPage();
 export const storageModal = new StorageModal();
 export const notFoundSpawnerPage = new NotFoundSpawnerPage();
+export const attachConnectionModal = new AttachConnectionModal();
diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/projects/workbench.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/projects/workbench.cy.ts
@@ -13,6 +13,7 @@ import { mockImageStreamK8sResource } from '~/__mocks__/mockImageStreamK8sResour
 import { mockPVCK8sResource } from '~/__mocks__/mockPVCK8sResource';
 import { mockPodK8sResource } from '~/__mocks__/mockPodK8sResource';
 import {
+  attachConnectionModal,
   createSpawnerPage,
   editSpawnerPage,
   notFoundSpawnerPage,
@@ -37,6 +38,7 @@ import {
 import { mock200Status } from '~/__mocks__/mockK8sStatus';
 import type { NotebookSize } from '~/types';
 import { mockAcceleratorProfile } from '~/__mocks__/mockAcceleratorProfile';
+import { mockConnectionTypeConfigMap } from '~/__mocks__/mockConnectionType';
 
 const configYamlPath = '../../__mocks__/mock-upload-configmap.yaml';
 
@@ -407,6 +409,74 @@ describe('Workbench page', () => {
     verifyRelativeURL('/projects/test-project?section=workbenches');
   });
 
+  it('Create workbench with connection', () => {
+    initIntercepts({ isEmpty: true });
+    cy.interceptOdh('GET /api/config', mockDashboardConfig({ disableConnectionTypes: false }));
+    cy.interceptOdh('GET /api/connection-types', [mockConnectionTypeConfigMap({})]);
+    cy.interceptK8sList(
+      { model: SecretModel, ns: 'test-project' },
+      mockK8sResourceList([
+        mockSecretK8sResource({ name: 'test1', displayName: 'test1' }),
+        mockSecretK8sResource({ name: 'test2', displayName: 'test2' }),
+      ]),
+    );
+
+    workbenchPage.visit('test-project');
+    workbenchPage.findCreateButton().click();
+    createSpawnerPage.findSubmitButton().should('be.disabled');
+    verifyRelativeURL('/projects/test-project/spawner');
+    createSpawnerPage.k8sNameDescription.findDisplayNameInput().fill('1234');
+    createSpawnerPage.findNotebookImage('test-9').click();
+
+    createSpawnerPage.findAttachConnectionButton().click();
+    attachConnectionModal.shouldBeOpen();
+    attachConnectionModal.findAttachButton().should('be.disabled');
+    attachConnectionModal.selectConnectionOption('test1');
+    attachConnectionModal.findAttachButton().should('be.enabled');
+    attachConnectionModal.selectConnectionOption('test2');
+    attachConnectionModal.findAttachButton().click();
+
+    createSpawnerPage.findConnectionsTableRow('test1', 's3');
+    createSpawnerPage.findConnectionsTableRow('test2', 's3');
+
+    createSpawnerPage.findSubmitButton().click();
+    cy.wait('@createWorkbench').then((interception) => {
+      expect(interception.request.body).to.containSubset({
+        metadata: {
+          annotations: {
+            'openshift.io/display-name': '1234',
+          },
+          name: 'wb-1234',
+          namespace: 'test-project',
+        },
+        spec: {
+          template: {
+            spec: {
+              affinity: {},
+              containers: [
+                {
+                  envFrom: [
+                    {
+                      secretRef: {
+                        name: 'test1',
+                      },
+                    },
+                    {
+                      secretRef: {
+                        name: 'test2',
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
+          },
+        },
+      });
+    });
+    verifyRelativeURL('/projects/test-project?section=workbenches');
+  });
+
   it('list workbench and table sorting', () => {
     initIntercepts({
       notebookSizes: [

diff --git a/frontend/src/pages/projects/screens/spawner/connections/ConnectionsFormSection.tsx b/frontend/src/pages/projects/screens/spawner/connections/ConnectionsFormSection.tsx
@@ -111,6 +111,7 @@ export const ConnectionsFormSection: React.FC<Props> = ({
             trigger={unselectedConnections.length === 0 ? 'mouseenter focus' : 'manual'}
           >
             <Button
+              data-testid="attach-existing-connection-button"
               variant="secondary"
               isAriaDisabled={unselectedConnections.length === 0}
               onClick={() => setShowAttachConnectionsModal(true)}
@@ -119,6 +120,7 @@ export const ConnectionsFormSection: React.FC<Props> = ({
             </Button>
           </Tooltip>{' '}
           <Button
+            data-testid="create-connection-button"
             variant="secondary"
             onClick={() => setManageConnectionModal({ connection: undefined, isEdit: false })}
           >
@@ -133,7 +135,7 @@ export const ConnectionsFormSection: React.FC<Props> = ({
       {selectedConnections.length > 0 ? (
         <Table
           data={selectedConnections}
-          data-testid="connection-table"
+          data-testid="connections-table"
           columns={columns}
           rowRenderer={(connection) => (
             <ConnectionsTableRow

diff --git a/frontend/src/pages/projects/screens/spawner/connections/SelectConnectionsModal.tsx b/frontend/src/pages/projects/screens/spawner/connections/SelectConnectionsModal.tsx
@@ -75,6 +75,7 @@ export const SelectConnectionsModal: React.FC<Props> = ({
       onClose={onClose}
       actions={[
         <Button
+          data-testid="attach-button"
           key="attach-button"
           variant="primary"
           isDisabled={selectionOptions.every((selection) => selection.selected === false)}