Update global pipelines cypress test

opendatahub-io · May 2, 2024 · c8e4f14 · c8e4f14
1 parent 1b56d25
commit c8e4f14
Show file tree

Hide file tree

Showing 9 changed files with 683 additions and 19 deletions.
diff --git a/frontend/src/__tests__/cypress/cypress/e2e/pipelines/Pipelines.cy.ts b/frontend/src/__tests__/cypress/cypress/e2e/pipelines/Pipelines.cy.ts
diff --git a/frontend/src/__tests__/cypress/cypress/pages/pipelines/pipelinesGlobal.ts b/frontend/src/__tests__/cypress/cypress/pages/pipelines/pipelinesGlobal.ts
@@ -1,4 +1,5 @@
 import { DeleteModal } from '~/__tests__/cypress/cypress/pages/components/DeleteModal';
+import { Modal } from '~/__tests__/cypress/cypress/pages/components/Modal';
 
 class PipelinesGlobal {
   visit(projectName: string) {
@@ -11,6 +12,23 @@ class PipelinesGlobal {
     cy.testA11y();
   }
 
+  findEmptyState() {
+    return cy.findByTestId('empty-state-title');
+  }
+
+  findConfigurePipelineServerButton() {
+    return cy.findByTestId('create-pipeline-button');
+  }
+
+  private findPipelineServerActionButton() {
+    return cy.findByTestId('pipeline-server-action');
+  }
+
+  selectPipelineServerAction(name: string) {
+    this.findPipelineServerActionButton().click();
+    cy.findByRole('menuitem', { name }).click();
+  }
+
   findImportPipelineButton() {
     return cy.findByTestId('import-pipeline-button');
   }
@@ -45,6 +63,111 @@ class PipelinesGlobal {
   }
 }
 
+class ConfigurePipelineServerModal extends Modal {
+  constructor() {
+    super('Configure pipeline server');
+  }
+
+  findAwsKeyInput() {
+    return this.find().findByTestId('field AWS_ACCESS_KEY_ID');
+  }
+
+  findAwsSecretKeyInput() {
+    return this.find().findByTestId('field AWS_SECRET_ACCESS_KEY');
+  }
+
+  findEndpointInput() {
+    return this.find().findByTestId('field AWS_S3_ENDPOINT');
+  }
+
+  findRegionInput() {
+    return this.find().findByTestId('field AWS_DEFAULT_REGION');
+  }
+
+  findBucketInput() {
+    return this.find().findByTestId('field AWS_S3_BUCKET');
+  }
+
+  findSubmitButton() {
+    return this.find().findByTestId('modal-submit-button');
+  }
+
+  findShowPasswordButton() {
+    return this.find().findByRole('button', { name: 'Show password' });
+  }
+
+  private findSelectDataConnectionButton() {
+    return cy.findByTestId('select-data-connection');
+  }
+
+  selectDataConnection(name: string) {
+    this.findSelectDataConnectionButton().click();
+    cy.findByRole('menuitem', { name }).click();
+  }
+
+  findToggleButton() {
+    return this.find().findByRole('button', { name: 'Show advanced database options' });
+  }
+
+  findExternalMYSQLDatabaseRadio() {
+    return this.find().findByTestId('external-database-type-radio');
+  }
+
+  findHostInput() {
+    return this.find().findByTestId('field Host');
+  }
+
+  findPortInput() {
+    return this.find().findByTestId('field Port');
+  }
+
+  findUsernameInput() {
+    return this.find().findByTestId('field Username');
+  }
+
+  findPasswordInput() {
+    return this.find().findByTestId('field Password');
+  }
+
+  findDatabaseInput() {
+    return this.find().findByTestId('field Database');
+  }
+}
+
+class ViewPipelineServerModal extends Modal {
+  constructor() {
+    super('View pipeline server');
+  }
+
+  findDoneButton() {
+    return this.find().findByTestId('view-pipeline-server-done-button');
+  }
+
+  shouldHaveAccessKey(value: string) {
+    this.find().findByTestId('access-key-field').should('have.text', value);
+    return this;
+  }
+
+  shouldHaveSecretKey(value: string) {
+    this.find().findByTestId('secret-key-field').should('have.text', value);
+    return this;
+  }
+
+  shouldHaveBucketName(value: string) {
+    this.find().findByTestId('bucket-field').should('have.text', value);
+    return this;
+  }
+
+  shouldHaveEndPoint(value: string) {
+    this.find().findByTestId('endpoint-field').should('have.text', value);
+    return this;
+  }
+
+  findPasswordHiddenButton() {
+    return this.find().findByTestId('password-hidden-button');
+  }
+}
+
 class PipelineDeleteModal extends DeleteModal {
   constructor() {
     super();
@@ -57,3 +180,5 @@ class PipelineDeleteModal extends DeleteModal {
 
 export const pipelineDeleteModal = new PipelineDeleteModal();
 export const pipelinesGlobal = new PipelinesGlobal();
+export const configurePipelineServerModal = new ConfigurePipelineServerModal();
+export const viewPipelineServerModal = new ViewPipelineServerModal();
diff --git a/frontend/src/__tests__/cypress/cypress/pages/pipelines/pipelinesTable.ts b/frontend/src/__tests__/cypress/cypress/pages/pipelines/pipelinesTable.ts
@@ -9,10 +9,6 @@ class PipelinesTableRow extends TableRow {
     return this.find().findByTestId(`table-row-title-${name}`).find('a');
   }
 
-  findPipelineVersionName(name: string) {
-    return this.find().parents().findByTestId(`table-row-title-${name}`).find('a');
-  }
-
   toggleExpandByIndex(index: number) {
     this.find().find('button').should('have.attr', 'aria-label', 'Details').eq(index).click();
   }
@@ -26,13 +22,22 @@ class PipelinesTableRow extends TableRow {
     return this;
   }
 }
+
 class PipelinesTable {
   private testId = 'pipelines-table';
 
   find() {
     return cy.findByTestId(this.testId);
   }
 
+  findRows() {
+    return this.find().find('tbody tr');
+  }
+
+  findTableHeaderButton(name: string) {
+    return this.find().find('thead').findByRole('button', { name });
+  }
+
   getRowByName(name: string) {
     return new PipelinesTableRow(() =>
       this.find().findByTestId(`table-row-title-${name}`).parents('tr'),
@@ -48,6 +53,21 @@ class PipelinesTable {
     return cy.findByTestId('global-no-pipelines').should('exist');
   }
 
+  selectFilterByName(name: string) {
+    cy.findByTestId('pipeline-filter')
+      .findByTestId('pipeline-filter-dropdown')
+      .findDropdownItem(name)
+      .click();
+  }
+
+  findFilterTextField() {
+    return cy.findByTestId('pipeline-filter').findByTestId('pipeline-filter-text-field');
+  }
+
+  findEmptyResults() {
+    return cy.findByTestId('no-result-found-title');
+  }
+
   mockDeletePipeline(pipeline: PipelineKFv2, namespace: string) {
     return cy.intercept(
       {

diff --git a/frontend/src/components/PasswordHiddenText.tsx b/frontend/src/components/PasswordHiddenText.tsx
@@ -22,7 +22,11 @@ const PasswordHiddenText: React.FC<PasswordHiddenTextProps> = ({ password }) =>
         <Text>{passwordText}</Text>
       </FlexItem>
       <FlexItem>
-        <Button variant="plain" onClick={() => setIsHidden(!isHidden)}>
+        <Button
+          variant="plain"
+          onClick={() => setIsHidden(!isHidden)}
+          data-testid="password-hidden-button"
+        >
           {isHidden ? <EyeSlashIcon /> : <EyeIcon />}
         </Button>
       </FlexItem>

diff --git a/frontend/src/concepts/pipelines/content/PipelineServerActions.tsx b/frontend/src/concepts/pipelines/content/PipelineServerActions.tsx
@@ -28,6 +28,7 @@ const PipelineServerActions: React.FC<PipelineServerActionsProps> = ({ variant,
 
   const DropdownComponent = (
     <Dropdown
+      data-testid="pipeline-server-action"
       onSelect={() => setOpen(false)}
       toggle={
         variant === 'kebab' ? (

diff --git a/frontend/src/concepts/pipelines/content/ViewPipelineServerModal.tsx b/frontend/src/concepts/pipelines/content/ViewPipelineServerModal.tsx
@@ -41,7 +41,12 @@ const ViewPipelineServerModal: React.FC<ViewPipelineServerModalProps> = ({
       isOpen={isOpen}
       onClose={onClose}
       actions={[
-        <Button key="done-button" variant="link" onClick={onClose}>
+        <Button
+          key="done-button"
+          variant="link"
+          onClick={onClose}
+          data-testid="view-pipeline-server-done-button"
+        >
           Done
         </Button>,
       ]}
@@ -55,19 +60,19 @@ const ViewPipelineServerModal: React.FC<ViewPipelineServerModalProps> = ({
               <Title headingLevel="h2">Object storage connection</Title>
               <DescriptionListGroup>
                 <DescriptionListTerm>Access key</DescriptionListTerm>
-                <DescriptionListDescription>
+                <DescriptionListDescription data-testid="access-key-field">
                   {pipelineSecret.AWS_ACCESS_KEY_ID || ''}
                 </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
                 <DescriptionListTerm>Secret key</DescriptionListTerm>
-                <DescriptionListDescription>
+                <DescriptionListDescription data-testid="secret-key-field">
                   <PasswordHiddenText password={pipelineSecret.AWS_SECRET_ACCESS_KEY ?? ''} />
                 </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
                 <DescriptionListTerm>Endpoint</DescriptionListTerm>
-                <DescriptionListDescription>
+                <DescriptionListDescription data-testid="endpoint-field">
                   {pipelineNamespaceCR.spec.objectStorage.externalStorage.scheme &&
                   pipelineNamespaceCR.spec.objectStorage.externalStorage.host
                     ? `${pipelineNamespaceCR.spec.objectStorage.externalStorage.scheme}://${pipelineNamespaceCR.spec.objectStorage.externalStorage.host}`
@@ -76,7 +81,7 @@ const ViewPipelineServerModal: React.FC<ViewPipelineServerModalProps> = ({
               </DescriptionListGroup>
               <DescriptionListGroup>
                 <DescriptionListTerm>Bucket</DescriptionListTerm>
-                <DescriptionListDescription>
+                <DescriptionListDescription data-testid="bucket-field">
                   {pipelineNamespaceCR.spec.objectStorage.externalStorage.bucket}
                 </DescriptionListDescription>
               </DescriptionListGroup>

diff --git a/frontend/src/concepts/pipelines/content/configurePipelinesServer/ObjectStorageSection.tsx b/frontend/src/concepts/pipelines/content/configurePipelinesServer/ObjectStorageSection.tsx
@@ -63,6 +63,7 @@ export const ObjectStorageSection = ({
               <InputGroupItem isFill>
                 <TextInput
                   aria-label={`Field list ${field.key}`}
+                  data-testid={`field ${field.key}`}
                   isRequired={field.isRequired}
                   value={
                     config.objectStorage.newValue.find((data) => data.key === field.key)?.value ||

diff --git a/frontend/src/concepts/pipelines/content/configurePipelinesServer/PipelineDropdown.tsx b/frontend/src/concepts/pipelines/content/configurePipelinesServer/PipelineDropdown.tsx
@@ -76,6 +76,7 @@ export const PipelineDropdown = ({
   };
   return (
     <Dropdown
+      data-testid="select-data-connection"
       menuAppendTo="parent"
       position={DropdownPosition.right}
       toggle={<MenuToggle onClick={onToggle} icon={<KeyIcon />} />}

diff --git a/...tend/src/concepts/pipelines/content/configurePipelinesServer/PipelinesDatabaseSection.tsx b/...tend/src/concepts/pipelines/content/configurePipelinesServer/PipelinesDatabaseSection.tsx
@@ -61,6 +61,7 @@ export const PipelinesDatabaseSection = ({
             <Radio
               className="checkbox-radio-fix-body-width"
               name="database-type-radio"
+              data-testid="external-database-type-radio"
               id="external-database-type-radio"
               label="Connect to external MySQL database"
               isChecked={!config.database.useDefault}