test: add e2e test for card payment for Adyen connector successful flow

cypress-tests/cypress/e2e/adyen-card-flow-e2e-test.cy.ts

@@ -0,0 +1,72 @@
+import * as testIds from "../../../src/Utilities/TestUtils.bs";
+import {
+  getClientURL,
+  createPaymentBody,
+  changeObjectKeyValue,
+} from "../support/utils";
+
+describe("Adyen Card payment flow test", () => {
+  const publishableKey = Cypress.env("HYPERSWITCH_PUBLISHABLE_KEY");
+  const secretKey = Cypress.env("HYPERSWITCH_SECRET_KEY");
+  let getIframeBody: () => Cypress.Chainable<JQuery<HTMLBodyElement>>;
+  const iframeSelector =
+    "#orca-payment-element-iframeRef-orca-elements-payment-element-payment-element";
+  const adyenIframeSelector = ".adyen-checkout__iframe--threeDSIframe";
+
+  changeObjectKeyValue(
+    createPaymentBody,
+    "profile_id",
+    Cypress.env("PROFILE_ID")
+  );
+  changeObjectKeyValue(createPaymentBody, "authentication_type", "three_ds");
+
+  beforeEach(() => {
+    getIframeBody = () => cy.iframe(iframeSelector);
+    cy.createPaymentIntent(secretKey, createPaymentBody).then(() => {
+      cy.getGlobalState("clientSecret").then((clientSecret) => {
+        cy.visit(getClientURL(clientSecret, publishableKey));
+      });
+    });
+  });
+
+  it("title rendered correctly", () => {
+    cy.contains("Hyperswitch Unified Checkout").should("be.visible");
+  });
+
+  it("orca-payment-element iframe loaded", () => {
+    cy.frameLoaded(iframeSelector);
+  });
+
+  it("submit payment form and make successful payment", () => {
+    cy.clickElementInIframe(testIds.addNewCardIcon);
+
+    cy.fixture("adyen3DSCardDetails").then((cardDetails) => {
+      cy.enterValueInIframe(testIds.cardNoInputTestId, cardDetails.cardNumber);
+      cy.enterValueInIframe(testIds.expiryInputTestId, cardDetails.expiryDate);
+      cy.enterValueInIframe(testIds.cardCVVInputTestId, cardDetails.cvv);
+    });
+
+    cy.intercept("**/payments/redirect/**").as("hyperswitchRedriect");
+    cy.intercept("**/checkoutshopper/threeDS2.shtml*").as("adyenCheckout");
+
+    getIframeBody().get("#submit").click();
+
+    //redirect through hyperswitch
+    cy.wait("@hyperswitchRedriect").then(() => {
+      cy.location("pathname").should("include", "/payments/redirect");
+      cy.contains("Please wait while we process your payment...").should(
+        "be.visible"
+      );
+    });
+
+    //adyen checkout page
+    cy.wait("@adyenCheckout").then(() => {
+      cy.frameLoaded(adyenIframeSelector);
+      cy.getIframeElement(adyenIframeSelector, ".input-field").type("password");
+      cy.getIframeElement(adyenIframeSelector, "#buttonSubmit").click();
+
+      cy.contains("Returning to JuspayDEECOM");
+    });
+    cy.contains("Thanks for your order!").should("be.visible");
+  });
+});

cypress-tests/cypress/fixtures/adyen3DSCardDetails.json

@@ -0,0 +1,5 @@
+{
+  "cardNumber": "4917 6100 0000 0000",
+  "expiryDate": "03/30",
+  "cvv": "737"
+}

cypress-tests/cypress/support/commands.ts

@@ -24,7 +24,7 @@
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
 import "cypress-iframe";
-import { createPaymentBody } from "./utils"
+import { createPaymentBody } from "./utils";
 import * as testIds from "../../../src/Utilities/TestUtils.bs";
 // commands.js or your custom support file
 const iframeSelector =
@@ -46,6 +46,13 @@ Cypress.Commands.add("selectValueInIframe", (selector, value) => {
     .select(value);
 });
 
+Cypress.Commands.add("clickElementInIframe", (selector) => {
+  cy.iframe(iframeSelector)
+    .find(`[data-testid=${selector}]`)
+    .should("be.visible")
+    .click();
+});
+
 Cypress.Commands.add("hardReload", () => {
   cy.wrap(
     Cypress.automation("remote:debugger:protocol", {
@@ -146,30 +153,36 @@ Cypress.Commands.add(
   }
 );
 
-
-Cypress.Commands.add("createPaymentIntent", (secretKey: string, createPaymentBody: any) => {
-  return cy
-    .request({
-      method: "POST",
-      url: "https://sandbox.hyperswitch.io/payments",
-      headers: {
-        "Content-Type": "application/json",
-        Accept: "application/json",
-        "api-key": secretKey,
-      },
-      body: JSON.stringify(createPaymentBody),
-    })
-    .then((response) => {
-      expect(response.headers["content-type"]).to.include("application/json");
-      expect(response.body).to.have.property("client_secret");
-      const clientSecret = response.body.client_secret;
-      cy.log(clientSecret);
-      cy.log(response.toString());
-
-      globalState["clientSecret"] = clientSecret;
-    });
-});
+Cypress.Commands.add(
+  "createPaymentIntent",
+  (secretKey: string, createPaymentBody: any) => {
+    return cy
+      .request({
+        method: "POST",
+        url: "https://sandbox.hyperswitch.io/payments",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+          "api-key": secretKey,
+        },
+        body: JSON.stringify(createPaymentBody),
+      })
+      .then((response) => {
+        expect(response.headers["content-type"]).to.include("application/json");
+        expect(response.body).to.have.property("client_secret");
+        const clientSecret = response.body.client_secret;
+        cy.log(clientSecret);
+        cy.log(response.toString());
+
+        globalState["clientSecret"] = clientSecret;
+      });
+  }
+);
 
 Cypress.Commands.add("getGlobalState", (key: any) => {
   return globalState[key];
 });
+
+Cypress.Commands.add("getIframeElement", (iframeSelector, elementSelector) => {
+  return cy.iframe(iframeSelector).find(elementSelector).should("be.visible");
+});

cypress-tests/cypress/support/types.ts

@@ -1,31 +1,46 @@
-
-export { }; // indicate that file is a module
+export {}; // indicate that file is a module
 
 export type CustomerData = {
-    cardNo: string
-    cardExpiry: string
-    cardCVV: string
-    cardHolderName: string
-    email: string
-    address: string
-    city: string
-    country: string
-    state: string
-    postalCode: string
-    threeDSCardNo: string
-}
+  cardNo: string;
+  cardExpiry: string;
+  cardCVV: string;
+  cardHolderName: string;
+  email: string;
+  address: string;
+  city: string;
+  country: string;
+  state: string;
+  postalCode: string;
+  threeDSCardNo: string;
+};
 
 declare global {
-    namespace Cypress {
-        interface Chainable {
-            enterValueInIframe(selector: string, value: string): Chainable<JQuery<HTMLElement>>
-            selectValueInIframe(selector: string, value: string): Chainable<JQuery<HTMLElement>>
-            hardReload(): Chainable<JQuery<HTMLElement>>
-            testDynamicFields(
-                customerData: CustomerData, testIdsToRemoveArr: string[], isThreeDSEnabled: boolean
-            ): Chainable<JQuery<HTMLElement>>
-            createPaymentIntent(secretKey: string, createPaymentBody: Record<string, any>): Chainable<Response<any>>
-            getGlobalState(key: string): Chainable<Response<any>>
-        }
+  namespace Cypress {
+    interface Chainable {
+      enterValueInIframe(
+        selector: string,
+        value: string
+      ): Chainable<JQuery<HTMLElement>>;
+      selectValueInIframe(
+        selector: string,
+        value: string
+      ): Chainable<JQuery<HTMLElement>>;
+      clickElementInIframe(selector: string): Chainable<JQuery<HTMLElement>>;
+      hardReload(): Chainable<JQuery<HTMLElement>>;
+      testDynamicFields(
+        customerData: CustomerData,
+        testIdsToRemoveArr: string[],
+        isThreeDSEnabled: boolean
+      ): Chainable<JQuery<HTMLElement>>;
+      createPaymentIntent(
+        secretKey: string,
+        createPaymentBody: Record<string, any>
+      ): Chainable<Response<any>>;
+      getGlobalState(key: string): Chainable<Response<any>>;
+      getIframeElement(
+        iframeSelector: string,
+        elementSelector: string
+      ): Chainable<JQuery<HTMLElement>>;
     }
-}
+  }
+}