From db463151eb85e2f24adf89cbd2222e2ebab1bd16 Mon Sep 17 00:00:00 2001 From: The-Anton Date: Tue, 20 Feb 2024 14:41:58 +0530 Subject: [PATCH] quick-start-access-code-snippet gherkin automation --- .../quick-start-access-code-snippet.feature | 52 ++++++----- .../support/pageObjects/quickStarts-po.ts | 6 ++ .../quick-start-access-code-snippet.ts | 93 +++++++++++++++++++ 3 files changed, 126 insertions(+), 25 deletions(-) create mode 100644 frontend/packages/dev-console/integration-tests/support/step-definitions/quck-starts/quick-start-access-code-snippet.ts diff --git a/frontend/packages/dev-console/integration-tests/features/guided-tour/quick-starts/quick-start-access-code-snippet.feature b/frontend/packages/dev-console/integration-tests/features/guided-tour/quick-starts/quick-start-access-code-snippet.feature index 8558440e6f3..57eaffb61d6 100644 --- a/frontend/packages/dev-console/integration-tests/features/guided-tour/quick-starts/quick-start-access-code-snippet.feature +++ b/frontend/packages/dev-console/integration-tests/features/guided-tour/quick-starts/quick-start-access-code-snippet.feature @@ -2,49 +2,51 @@ Feature: Access a code snippet from a quick start As a user, I want to be able to visualize seeing a CLI snippet in Quick Starts differently, able to copy it and if Web Terminal is installed, I should have an option to execute the command directly without having to copy/paste - Background: - Given user is at developer perspective - And user has applied copy-execute-demo.yaml - + Given user has installed Web Terminal Operator + And user is at developer perspective + And user has created or selected namespace "guided-tour" + And user has applied "copy-execute-demo.yaml" + And user is at Add page - @regression @to-do + @regression Scenario: Copy to clipboard tooltip with code snippet: QS-02-TC01 Given user is at Quick Starts catalog page - When user clicks on "Create ruby app" Quick Starts card + When user clicks on the "Create ruby app" Quick Starts card And user clicks on Step 1 And user hovers on the copy icon in the code snippet - Then user can see "Copy to clipboard" tooltip appears + Then user can see "Copy to clipboard" tooltip appears after hover - - @regression @to-do + @regression Scenario: Copied to clipboard option with code snippet: QS-02-TC02 Given user is at Quick Starts catalog page - When user clicks on "Create ruby app" Quick Starts card - And user clicks on Step 1 + When user clicks on the "Create ruby app" Quick Starts card + And user clicks on the Start button + And user sees that "Create ruby app" step has started And user clicks on the copy icon in the code snippet - Then user can see "Successfully copied to clipboard!" tooltip appears + Then user can see "Successfully copied to clipboard!" tooltip appears after click - - @regression @to-do + @regression @manual Scenario: Copy to clipboard option once code snippet has been copied: QS-02-TC03 - Given user has the "Create ruby app" Quick Starts side panel open + Given user is at Quick Starts catalog page + When user clicks on the "Create ruby app" Quick Starts card + And user clicks on the Start button + And user sees that "Create ruby app" step has started And user has copied the code snippet - When user removes the mouse focus from the code snippet + And user removes the mouse focus from the code snippet And user hovers on the copy icon in the code snippet Then user can see "Copy to clipboard" tooltip appears - - @regression @to-do + @regression Scenario: Run in Web Terminal tooltip with code snippet: QS-02-TC04 Given user is at Quick Starts catalog page - When user clicks on "Create ruby app" Quick Starts card - And user clicks on Step 1 + When user clicks on the "Create ruby app" Quick Starts card + And user clicks on the Start button + And user sees that "Create ruby app" step has started And user hovers on the play icon in the code snippet - Then user can see "Run in Web Terminal" tooltip appears - + Then user can see "Run in Web Terminal" tooltip appears for executing the code in terminal - @regression @to-do + @regression @manual Scenario: Running in Web Terminal tooltip with code snippet: QS-02-TC05 Given user is at Quick Starts catalog page When user clicks on "Create ruby app" Quick Starts card @@ -55,14 +57,14 @@ Feature: Access a code snippet from a quick start And user can see the code snippet running in the Web Terminal - @regression @to-do + @regression @manual Scenario: Running in Web Terminal action has run once: QS-02-TC06 Given user has the "Create ruby app" Quick Starts side panel open And user has ran code snippet in web terminal Then user can see checkmark icon in place of play icon - @regression @to-do + @regression @manual Scenario: Run in Web Terminal option after running in Web Terminal action has been executed: QS-02-TC07 Given user has the "Create ruby app" Quick Starts side panel open And user has ran code snippet in web terminal diff --git a/frontend/packages/dev-console/integration-tests/support/pageObjects/quickStarts-po.ts b/frontend/packages/dev-console/integration-tests/support/pageObjects/quickStarts-po.ts index bcada05a6cc..b3b5d37496a 100644 --- a/frontend/packages/dev-console/integration-tests/support/pageObjects/quickStarts-po.ts +++ b/frontend/packages/dev-console/integration-tests/support/pageObjects/quickStarts-po.ts @@ -21,6 +21,9 @@ export const quickStartSidebarPO = { closePanel: '[data-testid="qs-drawer-close"] [aria-label="Close drawer panel"] ', yesOptionCheckInput: '[data-testid="qs-drawer-check-yes"]', noOptionCheckInput: '[data-testid="qs-drawer-check-no"]', + clipboardAction: '[aria-label="Copy to clipboard"]', + executeAction: '[aria-label="Run in Web Terminal"]', + tooltip: '[role="tooltip"]', }; export const quickStartLeaveModalPO = { @@ -42,6 +45,9 @@ export const quickStartDisplayNameToName = (displayName: string) => { case 'Install the OpenShift Serverless Operator': { return 'install-serverless'; } + case 'Create ruby app': { + return 'copy-execute-demo'; + } default: { throw new Error('Option is not available'); } diff --git a/frontend/packages/dev-console/integration-tests/support/step-definitions/quck-starts/quick-start-access-code-snippet.ts b/frontend/packages/dev-console/integration-tests/support/step-definitions/quck-starts/quick-start-access-code-snippet.ts new file mode 100644 index 00000000000..327ca62001d --- /dev/null +++ b/frontend/packages/dev-console/integration-tests/support/step-definitions/quck-starts/quick-start-access-code-snippet.ts @@ -0,0 +1,93 @@ +import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'; +import { operators } from '../../constants'; +import { devNavigationMenuPO, quickStartCard, quickStartSidebarPO } from '../../pageObjects'; +import { app, verifyAndInstallOperator } from '../../pages'; + +Given('user has installed Web Terminal Operator', () => { + verifyAndInstallOperator(operators.WebTerminalOperator); +}); + +Given('user has applied {string}', (yamlFileName: string) => { + cy.exec(`oc apply -f testData/quick-start/${yamlFileName} -n ${Cypress.env('NAMESPACE')} `, { + failOnNonZeroExit: false, + }).then(function (result) { + cy.log(result.stdout); + }); +}); + +Given('user is at Quick Starts catalog page', () => { + cy.get(devNavigationMenuPO.add).click(); + cy.reload(); + cy.byTestID('item all-quick-starts').click(); +}); + +When('user clicks on the {string} Quick Starts card', (tourName: string) => { + cy.get(quickStartCard(tourName)).click(); +}); + +When('user clicks on Step 1', () => { + cy.get(quickStartSidebarPO.quickStartSidebarBody).find('h3').click(); +}); + +When('user clicks on the Start button', () => { + cy.get(quickStartSidebarPO.quickStartSidebar).byTestID('Start button').click(); +}); + +When('user sees that {string} step has started', (stepName: string) => { + cy.get(quickStartSidebarPO.quickStartSidebarBody).get('h3').contains(stepName); + cy.byLegacyTestID('quick-start-task-subtitle').contains('1 of 1'); +}); + +When('user hovers on the copy icon in the code snippet', () => { + cy.get(quickStartSidebarPO.clipboardAction).first().trigger('mouseenter').invoke('focus'); +}); + +Then('user can see {string} tooltip appears after click', (tooltip: string) => { + cy.get(quickStartSidebarPO.clipboardAction) + .first() + .invoke('focus') + .trigger('mouseenter') + .wait(1000) + .then(() => { + cy.get(quickStartSidebarPO.tooltip).contains(tooltip); + }) + .trigger('mouseleave'); +}); + +Then('user can see {string} tooltip appears after hover', (tooltip: string) => { + cy.get(quickStartSidebarPO.tooltip).contains(tooltip); +}); + +Then('user clicks on the copy icon in the code snippet', () => { + cy.get(quickStartSidebarPO.clipboardAction).first().click(); +}); + +Then('user clicks on the Restart button', () => { + cy.get(quickStartSidebarPO.restartSideNoteAction).click(); +}); + +Given('user has the {string} Quick Starts side panel open', (tour: string) => { + cy.get(quickStartSidebarPO.quickStartSidebar).should('be.visible'); + cy.get(quickStartSidebarPO.quickStartSidebar).find('h2').contains(tour); +}); + +When('user has copied the code snippet', () => { + cy.get(quickStartSidebarPO.clipboardAction).first().click(); +}); + +When('user hovers on the play icon in the code snippet', () => { + cy.reload(); + app.waitForDocumentLoad(); + cy.get(quickStartSidebarPO.executeAction).first().trigger('mouseenter').invoke('focus'); +}); + +Then('user clicks on the play icon in the code snippet', () => { + cy.get(quickStartSidebarPO.executeAction).first().click(); +}); + +Then( + 'user can see {string} tooltip appears for executing the code in terminal', + (tooltip: string) => { + cy.get('[class="ocs-tooltip"]').contains(tooltip); + }, +);