test: added e2e tests for get credentials (#1585)

* build : Initial commit for get credential phase 2

* build : --Added the separated components and moved into folder

* build : --Updated the get crdential external page

* feat: wired up get template by id and install template endpoints (#1577)

* feat: wired up get template by id and install template endpoints

* fix: remove unused code

* Delete yarn.lock

---------

Co-authored-by: BaskarMitrah <113968869+BaskarMitrah@users.noreply.github.com>

* fix: added request access

* integrated request access

* build : Fixed design issues & Removed unwanted code

* fix: code improvements

* build : fixed the design issues and removed the unwanted code

* Revert "build : fixed the design issues and removed the unwanted code"

This reverts commit 07751e0.

* build:added some design issue (#1580)

* fix: incorrect import

* build: update change organization

* fix: build issue

* Add back in yarn.lock

* Increase cypress timeout

* Increase cypress timeout again

* added hardcoded wiring for generating access token

* build : showed access token and secret key in the card

* Added optional chaining to the response

* fix: oauths2s and api key get credential components

* --Fixed bugs

* fix : reduced code & added tooltip for card

* fix : removed unwanted code

* feat: bug fix, integrate with TR on stage

* fix: fixes

* Bugs/api integration (#1581)

* build : api integration & fixed design issue

* build : added edge cases

* -- Wired edge case in the RequestAccess

* fix: access token generation

* fix: show scrollbar

* fix: reorder error case handling

* fix: remove type1 edge case for api key credential

* Added allowed origins, Changed the building blocks for Restrictedaccessproducts

* Fixed the issue in download

* fix: do not check for org type in index.js

---------

Co-authored-by: BaskarMitrah <mit44186@adobe.com>
Co-authored-by: Manimaran Kottursamy <mit80447@adobe.com>

* fix: increase cypress timeout

* fix : Added Scopes & fixed design issues (#1583)

Co-authored-by: BaskarMitrah <mit44186@adobe.com>

* feat: integrated the new accounts API, bug fixes

* fix: code improvements and bug fixes

* removed unnecessary console.log

* feat: use window.adobeIMS instead of ims from context

* Bugs/remaned components (#1584)

* -- Removed the Subscription Error

* renamed NestedAlertContent files

* --Fixed Sample code download issues

* --fixed the project link to the card after create the credential

* --Fixed the checkmark issues on the picker in the return flow project details

* Fixed scopes details as dynamic

* --Separated the Service and formfields page

---------

Co-authored-by: BaskarMitrah <mit44186@adobe.com>
Co-authored-by: Manimaran Kottursamy <mit80447@adobe.com>

* test: added e2e tests for get credentials

* test: added console logs

* test: run get credentials along with smoke tests

* test: try running tests on https

* test: try running tests on https

* test: added basic login test for get credentials component

* test: added get_credential_phase2 to pr test branches

* test: try pass env vars to the start command

* test: force trigger tests

* test: revert force trigger

* fix: env vars

* test: create env file in git

* test: enable running tests for PRs to get_credential_phase2

* --Added the test for the credential for oAuth & APIKey

* Migrated the functionalities from commands to get-credentials.cy

* --Migrated to commands to functions

* removed unnecessary wait and reorganized code

* disable videos, increase command timeout

* test improvements

* added form submission test

* comment out get credentials e2e test

* do not run e2e tests for get_credential_phase2

* fix: test

* test: enable get creds test, run on self-hosted runner

* fix: added step to install yarn

* test: try installing yarn as root

* fix: run test commands as root

* fix: try using npx to run yarn commands

* fix: run install command as root, upgrade to cypress gh action v6

* feat: added step to install latest lts version of node

* try print node version

* try adding cache and cache-dependency-path

* fix: format

* remove caching

* print node version

* print non-sudo node version

* try installing yarn without sudo

* do not use sudo, enable caching of yarn packages

* revert to use cypress github action v5

* try running in docker

* use checkout v4

* debug missing checkout step files

* add sudo to ls

* run id

* try using user root

* remove sudo

* remove id

* added custom certs for e2e tests

* remove build step, increase wait timeout

* remove unnecessary code

* remove extra file

---------

Co-authored-by: BaskarMitrah <mit44186@adobe.com>
Co-authored-by: BaskarMitrah <113968869+BaskarMitrah@users.noreply.github.com>
Co-authored-by: timkim <timk@adobe.com>
Co-authored-by: Manimaran Kottursamy <mit80447@adobe.com>

.github/workflows/e2e-tests.yml

@@ -18,17 +18,31 @@ on:
       - "cypress/**"
 jobs:
   smoke_tests:
-    runs-on: ubuntu-latest
+    container:
+      image: cypress/browsers:node-20.14.0-chrome-126.0.6478.114-1-ff-127.0.1-edge-126.0.2592.61-1
+      options: --user root
+    runs-on: self-hosted
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
+
+      - name: 'Create env file'
+        run: |
+          touch ./example/.env
+          echo GATSBY_IMS_SRC="https://auth-stg1.services.adobe.com/imslib/imslib.min.js" >> ./example/.env
+          echo GATSBY_IMS_CONFIG='{"client_id": "stage_adobe_io", "scope": "AdobeID,openid,unified_dev_portal,read_organizations,additional_info.projectedProductContext,additional_info.roles,gnav,read_pc.dma_bullseye,creative_sdk,adobeio_api,service_principals.read,service_principals.write,read_client_secret", "environment": "stg1"}' >> ./example/.env
+          cat ./example/.env
 
       - name: Run Tests
         uses: cypress-io/github-action@v5
         with:
-          build: yarn build
-          start: yarn serve
-          wait-on: 'http://[::1]:9000'
+          start: yarn dev:https:ci
+          wait-on: 'https://localhost.corp.adobe.com:9000'
+          wait-on-timeout: 150
           browser: chrome
           config-file: cypress.config.js
-          spec: cypress/e2e/smoke.cy.js
+          spec: |
+            cypress/e2e/smoke.cy.js
+            cypress/e2e/get-credentials.cy.js
+        env:
+          NODE_TLS_REJECT_UNAUTHORIZED: '0'

cypress.config.js

@@ -1,16 +1,21 @@
-const { defineConfig } = require('cypress')
-
-module.exports = defineConfig({
-  viewportHeight: 900,
-  viewportWidth: 1440,
-  e2e: {
-    // We've imported your old cypress plugins here.
-    // You may want to clean this up later by importing these.
-    setupNodeEvents(on, config) {
-      return require('./cypress/plugins/index.js')(on, config)
-    },
-    baseUrl: 'http://localhost:9000',
-    specPattern: 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
-  },
-  pageLoadTimeout: 500000,
-})
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  viewportHeight: 900,
+  viewportWidth: 1440,
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require('./cypress/plugins/index.js')(on, config)
+    },
+    baseUrl: 'https://localhost.corp.adobe.com:9000',
+    specPattern: 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
+  },
+  pageLoadTimeout: 500000,
+  userEmail: 'cypress1@adobe.com',
+  userPassword: 'ScotchB33r&1234567',
+  defaultCommandTimeout: 60000,
+  video: false,
+  chromeWebSecurity: false
+})

cypress/e2e/get-credentials.cy.js

@@ -0,0 +1,162 @@
+const API_KEY = 'apikey';
+const OAUTH_S2S = 'oauths2s';
+
+function init(route) {
+  cy.visit(route).assertRoute(route);
+  cy.expect('button[data-cy="sign-in-btn"]').to.exist;
+  cy.get('button[data-cy="sign-in-btn"]').should('be.visible');
+  cy.get('button[data-cy="sign-in-btn"]').should('be.enabled');
+  cy.get('button[data-cy="sign-in-btn"]').click();
+  cy.login();
+  cy.get('button[data-cy="sign-in-btn"]').should('not.exist');
+  cy.assertRoute(route + '#');
+}
+
+function checkRequestAccessEdgeCase() {
+  cy.get('button[data-cy="accessDetails-edgeCase-btn"]').should('be.visible').should('be.enabled');
+};
+
+function getIframeBody() {
+  return cy.get('iframe[data-cy="request-access-iframe"]')
+  .its('0.contentDocument.body').should('not.be.empty')
+  .then(cy.wrap);
+}
+
+function checkRequestAccess() {
+  cy.get('body').then(($body) => {
+    // if the request is not already sent, send the request
+    if ($body.find('[data-cy="request-access-button"]').length > 0) {
+      cy.get('[data-cy="request-access-button"]').click();
+      getIframeBody().find('button[data-testid="send-request-button"]').should('exist').click();
+      getIframeBody().find('button[data-testid="close-button"]').should('exist').click();
+    }
+  });
+  cy.get('button[data-cy="request-info"]').should('be.visible').should('be.enabled').click();
+  cy.get('body', { timeout: 1000 }).click();
+};
+
+function checkReturnFlow(credentialType) {
+  // verify return flow is visible
+  cy.get('[data-cy="return-flow"]').should('be.visible');
+
+  // verify clicking on create new credential button opens the form
+  returnToForm();
+
+  // verify clicking on cancel button closes the form
+  cy.get('[data-cy="cancel-new-credential"]').click();
+  cy.get('[data-cy="return-flow"]').should('be.visible');
+
+  // verify clicking on manage projects console button exists
+  cy.get('[data-cy="manage-projects-console"]').should('exist');
+
+  // ensure project picker is visible
+  cy.get('button[data-cy="projects-picker"]').should('be.visible').should('be.enabled');
+
+  // verify all the information is visible based on credential type
+  checkCredential(credentialType);
+};
+
+function checkAPIKey() {
+  // verify API key is visible
+  cy.contains('API Key').should('be.visible');
+
+  // verify API key copy button is clickable
+  cy.get('[data-cy="API Key-copyIcon"]').should('be.visible');
+
+  // verify allowed domains copy button is clickable
+  cy.get('[data-cy="Allowed domains-copyIcon"]').should('be.visible');
+}
+
+function checkOAuthS2S() {
+  cy.get('button[data-cy="generate-token"]').should('be.visible').should('be.enabled');
+  // cy.get('button[data-cy="copy-token"]').should('exist');
+  cy.get('[data-cy="credentialName-link"]').should('exist');
+  cy.get('button[data-cy="ClientId-copyIcon"]').should('exist');
+  cy.get('button[data-cy="retrieve-client-secret"]').should('be.visible').should('be.enabled');
+  // cy.get('button[data-cy="copy-client-secret"]').should('exist');
+  cy.get('button[data-cy="Scopes-copyIcon"]').should('exist');
+  cy.contains('openid, AdobeID, read_organizations, firefly_api, ff_apis').should('exist');
+}
+
+function checkCredential(credentialType) {
+  switch(credentialType) {
+    case API_KEY:
+      checkAPIKey();
+      break;
+    case OAUTH_S2S:
+      checkOAuthS2S();
+      break;
+  }
+
+  cy.get('[data-cy="next-step-button"]').should('exist');
+  if (credentialType !== API_KEY) {
+    cy.get('[data-cy="Manage-Dev-Console-link"]').should('exist');
+  }
+};
+
+function addCredential(credentialType) {
+  const credentialName = `CypressTest${credentialType}${Math.floor(Math.random() * 1000)}`;
+  cy.get('[data-cy="add-credential-name"]').click().should('have.focus');
+  cy.get('[data-cy="add-credential-name"]').type(credentialName).should('have.value', credentialName);
+  if (credentialType === API_KEY) {
+    cy.get('[data-cy="add-allowed-origins"]').click().should('have.focus');
+    cy.get('[data-cy="add-allowed-origins"]').type('localhost:9000').should('have.value', 'localhost:9000');
+    cy.get('[data-cy="download-checkBox"]').check().should('be.checked');
+    cy.get('[data-cy="select-download-language"]').click();
+    cy.get('ul li').contains('JavaScript').click();
+  }
+  cy.get('[data-cy="terms-condition-link"]').should('be.visible');
+  cy.get('[data-cy="update-terms-condition"]').check().should('be.checked');
+  cy.get('[data-cy="create-credential-btn"]').should('be.visible');
+  cy.get('[data-cy="create-credential-btn"]').should('be.enabled');
+  cy.get('[data-cy="create-credential-btn"]').click();
+  if (credentialType === API_KEY) {
+    cy.get('button[data-cy="restart-download"]').should('be.visible').should('be.enabled').click();
+  }
+  checkCredential(credentialType);
+  cy.get('[data-cy="Restart-new-credential"]').click();
+};
+
+function waitForLoader() {
+  cy.get('div[data-cy="loader"]').should('exist');
+  cy.get('div[data-cy="loader"]').should('not.exist');
+
+}
+
+function selectOrganization(orgName) {
+  cy.get('button[data-cy="change-organization-btn"]').should('be.visible').should('be.enabled').click();
+  cy.get('button[data-cy="organization-picker"]').should('be.visible').should('be.enabled').click();
+  cy.contains(orgName).should('exist').click();
+  cy.get('button[data-cy="submit-change-organization"]').should('be.visible').should('be.enabled').click();
+  waitForLoader();
+};
+
+function returnToForm() {
+  cy.get('[data-cy="create-new-credential"]').should('be.visible');
+  cy.get('[data-cy="create-new-credential"]').click();
+  cy.get('[data-cy="credential-form"]').should('be.visible');
+}
+
+describe('Get Credentials Test', () => {
+  it('API Key page loads', () => {
+    init('/getCredential/');
+    checkReturnFlow(API_KEY);
+    selectOrganization('AdobeIOTestingOrg');
+    checkReturnFlow(API_KEY);
+    // return to the form
+    returnToForm();
+    addCredential(API_KEY);
+  });
+
+  it('OAuth s2s page loads', () => {
+    init('/get-credential-oauth/');
+    checkRequestAccessEdgeCase();
+    selectOrganization('Romans entp org');
+    checkRequestAccess();
+    selectOrganization('MAC New Feature Testing');
+    checkReturnFlow(OAUTH_S2S);
+    // return to the form
+    returnToForm();
+    addCredential(OAUTH_S2S);
+  });
+});