ODC-7492: automation for sample-card-add-page feature file

frontend/packages/dev-console/integration-tests/features/getting-started/sample-card-add-page.feature

@@ -6,16 +6,14 @@ Feature: Create Sample Application
             Given user is at developer perspective
               And user has created or selected namespace "aut-addflow-catalog"
 
-
-        @regression @to-do
+        @regression
         Scenario: Sample Card in Add flow: GS-03-TC01
             Given user is at Add page
-             When user clicks on "Samples" card
+             When user clicks on the "View all samples" link
              Then user is redirected to Samples Page
-              And user can see different sample applications
+              And user is able to see different sample applications
               And sample applications are based on the builder images
 
-
         @regression @odc-7128
         Scenario Outline: Create Sample Application from Add page: GS-03-TC05
             Given user is at Add page
@@ -31,39 +29,36 @@ Feature: Create Sample Application
                   | Httpd     | Create Sample application | httpd-sample  |
                   | Basic Go  | Import from Git           | go-basic      |
 
-
-        @regression @to-do
-        Scenario: Create node Sample Appliation: GS-03-TC02
+        @regression
+        Scenario: Review Sample Appliation form: GS-03-TC02
             Given user is at Add page
-             When user clicks on "Sample" card
-              And samples page opens
-              And user selects a sample card
-              And sample Application Creation form opens
+             When user clicks on the "View all samples" link
+              And user is redirected to Samples Page
+              And user selects "Go" sample from Samples
+              And user is able to see the form header name as "Create Sample application"
              Then form is filled with default values
               And user will see the name section
               And user will see builder image version dropdown
               And user will see builder image below builder image version dropdown
               And user will see git url is ineditable field
               And user will see create and cancel button
-
-
-        @regression @to-do
-        Scenario: Create node Sample Appliation: GS-03-TC03
+
+        @regression
+        Scenario: Edit Sample Appliation form: GS-03-TC03
             Given user is in Add flow of dev perspective
-             When user clicks on Sample card
-              And samples page opens
-              And user selects node card
-              And sample Application Creation form opens
-              And user can assign a name in the name section
-              And user can change builder image version from dropdown if required
-              And user clicks on create
-             Then user is taken to topology with a node deployment workload created inside sample application
-
+             When user clicks on the "View all samples" link
+             Then user is redirected to Samples Page
+              And user clicks on the "Go" card
+              And user is able to see the form header name as "Create Sample application"
+              And user assign a new name as "golang-sample-app1" in the name section
+              And user changes the builder image version from dropdown to "latest"
+              And user clicks on the Create button
+              And user is taken to topology with a "golang-sample-app1" deployment workload created inside sample application
 
-        @regression @to-do
+        @regression
         Scenario: Create Basic NodeJS Devfile Sample Appliation: GS-03-TC04
             Given user is at Samples page
-             When user clicks on Basic NodeJS card
+             When user clicks on the "Basic Node.js" card
               And user assigns a name "node-js-basic-sample1" in the Name section of Import from Devfile form
-              And user clicks on Create
-             Then user is taken to Topology page with deployment workload "node-js-basic-sample1" created
+              And user clicks on the Create button
+             Then user is taken to Topology page with deployment workload "node-js-basic-sample1" created

frontend/packages/dev-console/integration-tests/support/pageObjects/add-flow-po.ts

@@ -11,6 +11,7 @@ export const addPagePO = {
   buildWithGuidedDocumentation: '[data-test="card quick-start"]',
   buildWithGuidedDocumentationItems: '[data-test="card quick-start"] [data-test~="item"]',
   viewAllQuickStarts: '[data-test="item all-quick-starts"]',
+  viewAllSamples: '[data-test="item all-samples"]',
   helmChartRepositoriesCard: '[data-test="card helm-chart-repositories"]',
 };
 
@@ -226,6 +227,12 @@ export const samplesPO = {
   cards: {
     httpdTemplate: 'a[data-test="BuilderImage-Httpd"]',
     basicgoTemplate: 'a[data-test="Devfile-Basic Go"]',
+    basicnodeTemplate: '[data-test="Devfile-Basic Node.js"]',
+    goTemplate: '[data-test="BuilderImage-Go"]',
+  },
+  form: {
+    name: '[data-test-id="application-form-app-name"]',
+    header: '[data-test-id="resource-title"]',
   },
 };
 

frontend/packages/dev-console/integration-tests/support/pages/add-flow/samples-page.ts

@@ -17,6 +17,14 @@ export const samplesPage = {
         cy.get(samplesPO.cards.basicgoTemplate).first().click();
         break;
       }
+      case 'Basic Node.js': {
+        cy.get(samplesPO.cards.basicnodeTemplate).first().click();
+        break;
+      }
+      case 'Go': {
+        cy.get(samplesPO.cards.goTemplate).first().click();
+        break;
+      }
       default: {
         throw new Error(`${card} card is not available in Catalog`);
       }

frontend/packages/dev-console/integration-tests/support/step-definitions/getting-started/sample-card-add-page.ts

@@ -0,0 +1,152 @@
+import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
+import { detailsPage } from '@console/cypress-integration-tests/views/details-page';
+import { addOptions, devNavigationMenu, switchPerspective } from '../../constants';
+import { addPagePO, samplesPO } from '../../pageObjects';
+import {
+  addPage,
+  app,
+  navigateTo,
+  perspective,
+  projectNameSpace,
+  samplesPage,
+  topologyPage,
+  verifyAddPage,
+} from '../../pages';
+
+Given('user is at developer perspective', () => {
+  perspective.switchTo(switchPerspective.Developer);
+});
+
+Given('user has created or selected namespace {string}', (projectName: string) => {
+  projectNameSpace.selectOrCreateProject(`${projectName}`);
+});
+
+Given('user is at Add page', () => {
+  navigateTo(devNavigationMenu.Add);
+});
+
+When('user clicks on the {string} link', () => {
+  cy.get(addPagePO.viewAllSamples).click();
+});
+
+When('user is redirected to Samples Page', () => {
+  cy.byLegacyTestID('resource-title').contains('Sample');
+});
+
+When('user clicks on the Samples card', () => {
+  verifyAddPage.verifyAddPageCard('Samples');
+  addPage.selectCardFromOptions(addOptions.Samples);
+});
+
+When('user selects {string} sample from Samples', (sample: string) => {
+  samplesPage.search(sample);
+  samplesPage.selectCardInSamples(sample);
+});
+
+When('user is able to see the form header name as {string}', (formName) => {
+  app.waitForLoad();
+  detailsPage.titleShouldContain(formName);
+});
+
+Then('form is filled with default values', () => {
+  cy.get('input[name="git.url"]')
+    .invoke('attr', 'value')
+    .then((text) => {
+      if (text !== undefined) {
+        return true;
+      }
+      return false;
+    });
+  cy.byLegacyTestID('git-form-input-url').should('be.disabled');
+});
+
+Then('user will see builder image below builder image version dropdown', () => {
+  cy.get('img[alt="Icon"]').should('be.visible');
+});
+
+Then('user is able to see different sample applications', () => {
+  cy.get('[data-test*="Devfile"]').first().should('be.visible');
+  cy.get('[data-test*="BuilderImage"]').first().should('be.visible');
+});
+
+Then('sample applications are based on the builder images', () => {
+  cy.get('[data-test^="BuilderImage"]').then((elements) => {
+    if (elements.length >= 1) {
+      return true;
+    }
+    return false;
+  });
+});
+
+When('user clicks on the Create button', () => {
+  app.waitForLoad();
+  cy.byLegacyTestID('submit-button').click();
+});
+
+When('user selects a sample card', () => {
+  cy.get('[class*="catalog"]').first().click();
+});
+
+Then('user will see the name section', () => {
+  cy.byLegacyTestID('application-form-app-name').should('be.visible');
+});
+
+Then('user will see builder image version dropdown', () => {
+  cy.byLegacyTestID('dropdown-button').should('be.visible');
+});
+
+Then('user will see git url is ineditable field', () => {
+  cy.byLegacyTestID('git-form-input-url').should('be.visible');
+});
+
+Then('user will see create and cancel button', () => {
+  cy.byLegacyTestID('submit-button').should('be.visible');
+  cy.byLegacyTestID('reset-button').should('be.visible');
+});
+
+Given('user is in Add flow of dev perspective', () => {
+  navigateTo(devNavigationMenu.Add);
+});
+
+When('user assign a new name as {string} in the name section', (workload: string) => {
+  cy.byLegacyTestID('application-form-app-name').clear().type(workload);
+});
+
+When('user changes the builder image version from dropdown to {string}', (version: string) => {
+  cy.byLegacyTestID('dropdown-button').should('be.visible').click();
+  cy.byLegacyTestID('dropdown-menu').contains(version).click();
+});
+
+Then(
+  'user is taken to topology with a {string} deployment workload created inside sample application',
+  (workloadName: string) => {
+    topologyPage.verifyTopologyPage();
+    topologyPage.verifyWorkloadInTopologyPage(workloadName);
+  },
+);
+
+Given('user is at Samples page', () => {
+  navigateTo(devNavigationMenu.Add);
+  cy.get(addPagePO.viewAllSamples).click();
+});
+
+When('user clicks on the {string} card', (sample: string) => {
+  samplesPage.selectCardInSamples(sample);
+});
+
+When(
+  'user assigns a name {string} in the Name section of Import from Devfile form',
+  (name: string) => {
+    app.waitForLoad();
+    cy.wait(10000);
+    cy.get(samplesPO.form.name).clear().type(name);
+  },
+);
+
+Then(
+  'user is taken to Topology page with deployment workload {string} created',
+  (workloadName: string) => {
+    topologyPage.verifyTopologyPage();
+    topologyPage.verifyWorkloadInTopologyPage(workloadName);
+  },
+);