Merge pull request #11300 from jrichter1/addflow49

Bug 2071692: Backport add-flow e2e tests to 4.9

frontend/packages/dev-console/integration-tests/cypress.json

@@ -23,7 +23,7 @@
     "NAMESPACE": "aut-pipelines"
   },
   "retries": {
-    "runMode": 1,
+    "runMode": 0,
     "openMode": 0
   }
 }

frontend/packages/dev-console/integration-tests/features/addFlow/add-page.feature

@@ -9,7 +9,7 @@ Feature: Add page on Developer Console
               And user is at Add page
 
 
-        @regression @to-do
+        @regression
         Scenario: Getting started resources on Developer perspective: A-11-TC01
              Then user will see Getting started resources
               And user will see Create Application using Samples
@@ -26,22 +26,22 @@ Feature: Add page on Developer Console
               And user will see "From Local Machine" card
 
 
-        @regression @to-do
+        @regression
         Scenario: Developer Catalog option to create an Application, Component or Service: A-11-TC03
              Then user will see "All services" option
               And user will see "Database" option
               And user will see "Operator Backed" option
               And user will see "Helm Chart" option
 
+     # Git, Docker file, Devfile forms are converged as per the 4.9 Epic: ODC-5009
+     #    @regression @to-do
+     #    Scenario: Git Repository option to create an Application, Component or Service: A-11-TC04
+     #         Then user will see "From Git" option
+     #          And user will see "From Devfile" option
+     #          And user will see "From Dockerfile" option
 
-        @regression @to-do
-        Scenario: Git Repository option to create an Application, Component or Service: A-11-TC04
-             Then user will see "From Git" option
-              And user will see "From Devfile" option
-              And user will see "From Dockerfile" option
 
-
-        @regression @to-do
+        @regression
         Scenario: From Local Machine option to create an Application, Component or Service: A-11-TC05
              Then user will see "Import YAML" option
               And user will see "Upload JAR file" option

frontend/packages/dev-console/integration-tests/features/addFlow/create-from-devfile.feature

@@ -11,13 +11,12 @@ Feature: Create Application from Devfile
 
         @regression @odc-5009
         Scenario: Deploy git workload with devfile from topology page: A-04-TC01
-            Given user has created workload "nodejs-ex-git" with resource type "Deployment"
-              And user is at the Topology page
+            Given user is at the Topology page
              When user right clicks on topology empty graph
               And user selects "Import from Git" option from Add to Project context menu
-              And user enters Git Repo URL as "https://github.com/nodeshift-starters/devfile-sample" in Import from Git form
-              And user enters workload name as "node-bulletin-board-1" in Name
-              And user clicks Create button
+              And user enters Git Repo URL as "https://github.com/redhat-developer/devfile-sample" in Import from Git form
+              And user enters workload name as "node-bulletin-board-1"
+              And user clicks Create button on Add page
              Then user will be redirected to Topology page
               And user is able to see workload "node-bulletin-board-1" in topology page
 
@@ -26,8 +25,8 @@ Feature: Create Application from Devfile
         Scenario: Create the workload from dev file: A-04-TC02
             Given user is at Import from Git form
              When user enters Git Repo URL as "https://github.com/redhat-developer/devfile-sample"
-              And user enters workload name as "node-bulletin-board" in Name
-              And user clicks Create button
+              And user enters workload name as "node-bulletin-board"
+              And user clicks Create button on Add page
              Then user will be redirected to Topology page
               And user is able to see workload "node-bulletin-board" in topology page
 

frontend/packages/dev-console/integration-tests/features/addFlow/create-from-git.feature

@@ -157,13 +157,11 @@ Feature: Create Application from git form
 
         # Marking this scenario as @manual, because due to git-rate limit issue, below scenarios are failing
         @regression @manual
-        Scenario Outline: Builder iamge detected for git url "<git_url>": A-06-TC12
+        Scenario Outline: Builder image detected for git url "<git_url>": A-06-TC12
             Given user is at Import from Git form
              When user enters Git Repo URL as "<git_url>"
              Then git url "<git_url>" gets Validated
-              And import strategy as Builder Image is detected
               And builder image is detected
-              And builder image version drop down is displayed
               And Application name displays as "<app_name>"
               And Name displays as "<name>"
 
@@ -188,7 +186,6 @@ Feature: Create Application from git form
               And user enters Context dir as "<dir_name>"
              Then git url "<git_url>" gets Validated
               And user is able to see "Builder Image(s) selected" message
-              And .NET builder image card tile is highlighted with * mark
 
         Examples:
                   | git_url                                                   | dir_name | app_name              | name              |
@@ -200,7 +197,7 @@ Feature: Create Application from git form
             Given user is at Import from Git form
              When user enters Git Repo URL as "<git_url>"
              Then git url "<git_url>" gets Validated
-              And user is able to see warning message "Unable to detect the import strategy"
+              And user is able to see warning message "Unable to detect Import strategy"
 
         Examples:
                   | git_url                                | builder_image |

frontend/packages/dev-console/integration-tests/features/e2e/add-flow-ci.feature

@@ -0,0 +1,134 @@
+@add-flow @smoke
+Feature: Create the different workloads from Add page
+              As a user, I should be able to create an Application, component or service from one of the options provided on Add page
+
+
+        Background:
+            Given user is at developer perspective
+              And user has created or selected namespace "ci-addflow"
+              And user is at Add page
+
+        Scenario: Getting started resources on Developer perspective
+             Then user will see Create Application using Samples, Build with guided documentation and Explore new developer features under Getting started resources section
+              And user will see All services, Database, Operator Backed and Helm Chart options under Developer Catalog section
+              And user will see Import from Git card under Git Repository section
+              And user will see "Container images" option
+              And user will see "Samples" option
+              And user will see Import YAML, Upload JAR file under From Local Machine section
+
+
+        Scenario Outline: Deploy Application using Catalog Template "<template_type>": A-01-TC02
+            Given user is at Developer Catalog page
+              And user is at Templates page
+             When user selects "<template_type>" from Templates type
+              And user searches and selects Template card "<card_name>" from catalog page
+              And user clicks Instantiate Template button on side bar
+              And user clicks create button on Instantiate Template page
+             Then user will be redirected to Topology page
+              And user is able to see workload "<workload_name>" in topology page
+
+        Examples:
+                  | template_type | card_name                             | workload_name             |
+                  | CI/CD         | Jenkins                               | jenkins                   |
+                  | Databases     | MariaDB                               | mariadb                   |
+                  | Languages     | Node.js + PostgreSQL (Ephemeral)      | nodejs-postgresql-example |
+                  | Middleware    | Apache HTTP Server                    | httpd-example             |
+                  | Other         | Nginx HTTP server and a reverse proxy | nginx-example             |
+
+
+        Scenario Outline: Deploy <image> image with Runtime icon from external registry: A-02-TC02
+            Given user is at Deploy Image page
+             When user enters Image name from external registry as "<image_name>"
+              And user selects the "<runtime_icon>" from Runtime Icon dropdown
+              And user selects the application "sample-app" from Application dropdown
+              And user enters Name as "<name>"
+              And user selects resource type as "deployment"
+              And user clicks Create button on Add page
+             Then user will be redirected to Topology page
+              And user will see the deployed image "<name>" with "<runtime_icon>" icon
+
+        Examples:
+                  | image  | image_name                | runtime_icon | name         |
+                  | secure | openshift/hello-openshift | fedora       | hello-secure |
+
+
+        Scenario Outline: Deploy image with Runtime icon from internal registry: A-02-TC03
+            Given user is at Deploy Image page
+             When user selects Image stream tag from internal registry
+              And user selects Project as "openshift" from internal registry
+              And user selects Image Stream as "<image_stream>" from internal registry
+              And user selects tag as "latest" from internal registry
+              And user selects the "<runtime_icon>" from Runtime Icon dropdown
+              And user selects the application "sample-app" from Application dropdown
+              And user enters Name as "<name>"
+              And user selects resource type as "deployment"
+              And user clicks Create button on Add page
+             Then user will be redirected to Topology page
+              And user will see the deployed image "<name>" with "<runtime_icon>" icon
+
+        Examples:
+                  | image_stream | runtime_icon | name           |
+                  | golang       | fedora       | hello-internal |
+
+
+        Scenario: Edit Runtime Icon while Editing Image: A-02-TC05
+            Given user has deployed container Image "openshift/hello-openshift" from external registry
+              And user is at Topology page
+              And topology page has a deployed image "hello-openshift" with Runtime Icon "fedora"
+             When user right clicks on the node "hello-openshift" to open context menu
+              And user selects Edit imagename "hello-openshift" option
+              And user updates the Runtime icon to "ansible"
+              And user clicks on Save button
+             Then user will be redirected to Topology page
+              And user will see the deployment image "hello-openshift" icon updated to "ansible" Icon
+
+
+        Scenario: Create the Database from Add page: A-03-TC01
+             When user clicks Database card
+              And user selects "MariaDB" database on Developer Catalog
+              And user clicks Instantiate Template button on side bar
+              And user clicks create button on Instantiate Template page
+             Then user will be redirected to Topology page
+              And user is able to see workload "mariadb" in topology page
+
+
+        Scenario: Deploy git workload with devfile from topology page: A-04-TC01
+            Given user is at the Topology page
+             When user right clicks on topology empty graph
+              And user selects "Import from Git" option from Add to Project context menu
+              And user enters Git Repo URL as "https://github.com/nodeshift-starters/devfile-sample" in Import from Git form
+              And user enters workload name as "node-bulletin-board-1"
+              And user clicks Create button on Add page
+             Then user will be redirected to Topology page
+              And user is able to see workload "node-bulletin-board-1" in topology page
+
+
+        Scenario Outline: Create a workload from Docker file with "<resource_type>" as resource type: A-05-TC02
+            Given user is on Import from Git form
+             When user enters Git Repo URL as "https://github.com/rohitkrai03/flask-dockerfile-example"
+              And user enters Name as "<name>" in Docker file page
+              And user selects "<resource_type>" radio button in Resource type section
+              And user clicks Create button on Add page
+             Then user will be redirected to Topology page
+              And user is able to see workload "<name>" in topology page
+
+        Examples:
+                  | resource_type | name       |
+                  | Deployment    | dockerfile |
+
+
+        Scenario: Create a workload from YAML file: A-07-TC01
+            Given user is at Import YAML page
+             When user enters the "testData/add-flow/git-dc.yaml" file data to YAML Editor
+              And user clicks create button on YAML page
+              And user navigates to Topology page
+             Then user is able to see workload "shell-app" in topology page
+
+
+        Scenario: Upload Jar file page details: A-10-TC01
+            Given user is at Add page
+             When user clicks on the Upload JAR file card
+             Then user is able to see Upload jar file, Optional java commands, Run time Icon and Builder Image version fields displayed in JAR section
+              And Application Name, Name fields displayed in General section
+              And Resources section, Advanced options sections are displayed
+              And Create button is in disabled state

frontend/packages/dev-console/integration-tests/package.json

@@ -11,7 +11,7 @@
     "clean-reports": "rm -rf ../../../gui_test_screenshots",
     "cypress-merge": "../../../node_modules/.bin/mochawesome-merge ../../../gui_test_screenshots/cypress_report*.json > ../../../gui_test_screenshots/cypress.json",
     "cypress-generate": "../../../node_modules/.bin/marge -o ../../../gui_test_screenshots/ -f cypress-report -t 'OpenShift DevConsole Cypress Test Results' -p 'OpenShift Cypress Test Results' --showPassed false --assetsDir ../../../gui_test_screenshots/cypress/assets ../../../gui_test_screenshots/cypress.json",
-    "test-headless": "node --max-old-space-size=4096 ../../../node_modules/.bin/cypress run --env openshift=true --browser ${BRIDGE_E2E_BROWSER_NAME:=chrome} --headless --spec \"features/addFlow/*.feature\";",
+    "test-headless": "node --max-old-space-size=4096 ../../../node_modules/.bin/cypress run --env openshift=true --browser ${BRIDGE_E2E_BROWSER_NAME:=chrome} --headless --spec \"features/e2e/add-flow-ci.feature\";",
     "test-cypress-headless": "yarn run clean-reports && yarn run test-headless && yarn run cypress-merge && yarn run cypress-generate"
   }
 }

frontend/packages/dev-console/integration-tests/support/commands/app.ts

@@ -20,6 +20,7 @@ declare global {
       selectActionsMenuOption(actionsMenuOption: string): Chainable<Element>;
       dropdownSwitchTo(dropdownMenuOption: string): Chainable<Element>;
       isDropdownVisible(): Chainable<Element>;
+      checkErrors(): Chainable<Element>;
     }
   }
 }
@@ -105,3 +106,31 @@ Cypress.Commands.add('isDropdownVisible', () => {
     .get('.pf-c-dropdown__menu')
     .should('be.visible');
 });
+
+Cypress.Commands.add('checkErrors', () => {
+  cy.get('body').then(($body) => {
+    if ($body.find('[data-test-id="reset-button"]').length !== 0) {
+      cy.byLegacyTestID('reset-button').click({ force: true });
+      cy.log('After Scenario: Still form is open, so cancelling the form');
+    } else if ($body.find('[aria-label="Danger Alert"]').length !== 0) {
+      cy.get('[aria-label="Danger Alert"]')
+        .find('.co-pre-line')
+        .then(($alert) => {
+          cy.log(
+            `Displaying following error: "${$alert.text()}", so closing this form and proceeding with next scenario`,
+          );
+        });
+      cy.byLegacyTestID('reset-button').click({ force: true });
+    } else if ($body.find('[data-test-id="modal-cancel-action"]').length !== 0) {
+      cy.log('Modal is not getting closed, due to error. so closing it forcefully');
+      cy.byLegacyTestID('modal-cancel-action').click({ force: true });
+      cy.get('body').then(($body1) => {
+        if ($body1.find('[data-test-id="reset-button"]').length !== 0) {
+          cy.byLegacyTestID('reset-button').click({ force: true });
+        }
+      });
+    } else {
+      cy.log('Scenario executed successfully');
+    }
+  });
+});

frontend/packages/dev-console/integration-tests/support/commands/hooks.ts

@@ -9,3 +9,8 @@ after(() => {
   cy.exec(`oc delete namespace ${Cypress.env('NAMESPACE')}`, { failOnNonZeroExit: false });
   // cy.logout();
 });
+
+afterEach(() => {
+  // Below code helps to close the form, when there is any issue. so that other scenarios will be executed
+  cy.checkErrors();
+});

frontend/packages/dev-console/integration-tests/support/pages/app.ts

@@ -226,6 +226,11 @@ export const createForm = {
       .get(formPO.cancel)
       .should('be.enabled')
       .click(),
+  clickSave: () =>
+    cy
+      .get(formPO.create)
+      .should('be.enabled')
+      .click(),
   sectionTitleShouldContain: (sectionTitle: string) =>
     cy.get(gitPO.sectionTitle).should('have.text', sectionTitle),
 };

frontend/packages/dev-console/integration-tests/support/step-definitions/addFlow/create-from-docker-file.ts

@@ -11,6 +11,11 @@ When('user enters Git Repo URL as {string}', (gitUrl: string) => {
   devFilePage.verifyValidatedMessage(gitUrl);
 });
 
+When('user enters Git Repo URL as {string} in Import from Git form', (gitUrl: string) => {
+  gitPage.enterGitUrl(gitUrl);
+  devFilePage.verifyValidatedMessage(gitUrl);
+});
+
 When('user selects {string} radio button in Resource type section', (resourceType: string) => {
   gitPage.selectResource(resourceType);
 });

frontend/packages/dev-console/integration-tests/support/step-definitions/addFlow/create-from-git.ts

@@ -53,6 +53,10 @@ When('user enters Name as {string}', (name: string) => {
   gitPage.enterComponentName(name);
 });
 
+When('user enters Name as {string} in General section', (name: string) => {
+  gitPage.enterComponentName(name);
+});
+
 When('user unselects the advanced option Create a route to the application', () => {
   gitPage.unselectRoute();
 });

frontend/packages/dev-console/integration-tests/support/step-definitions/addFlow/page-details.ts

@@ -64,6 +64,38 @@ Then('user will see Explore new developer features', () => {
   cy.byTestID('card developer-features').should('be.visible');
 });
 
+Then(
+  'user will see Create Application using Samples, Build with guided documentation and Explore new developer features under Getting started resources section',
+  () => {
+    cy.get(addPagePO.gettingStarted).should('be.visible');
+    cy.byTestID('card samples').should('be.visible');
+    cy.byTestID('card quick-start').should('be.visible');
+    cy.byTestID('card developer-features').should('be.visible');
+  },
+);
+
+Then(
+  'user will see All services, Database, Operator Backed and Helm Chart options under Developer Catalog section',
+  () => {
+    verifyAddPage.verifyAddPageCard('Developer Catalog');
+    verifyAddPage.verifyAddPageCard('All services');
+    verifyAddPage.verifyAddPageCard('Database');
+    verifyAddPage.verifyAddPageCard('Operator Backed');
+    verifyAddPage.verifyAddPageCard('Helm Chart');
+  },
+);
+
+Then('user will see Import from Git card under Git Repository section', () => {
+  verifyAddPage.verifyAddPageCard('Git Repository');
+  verifyAddPage.verifyAddPageCard('From Git');
+});
+
+Then('user will see Import YAML, Upload JAR file under From Local Machine section', () => {
+  verifyAddPage.verifyAddPageCard('Import YAML');
+  verifyAddPage.verifyAddPageCard('Upload JAR file');
+  verifyAddPage.verifyAddPageCard('From Local Machine');
+});
+
 Then('user will see {string} card', (addPageCard: string) => {
   verifyAddPage.verifyAddPageCard(addPageCard);
 });

frontend/packages/dev-console/integration-tests/testData/add-flow/git-dc.yaml

@@ -2,7 +2,6 @@ apiVersion: apps/v1
 kind: Deployment
 metadata:
   name: shell-app
-  namespace: aut-addflow-yaml
 spec:
   selector:
     matchLabels: