test: added test cases in cypress (#721)

Co-authored-by: Sanskar Atrey <[email protected]>

cypress-tests/cypress/e2e/card-flow-e2e-test.cy.ts → cypress-tests/cypress/e2e/saved-card-flow-e2e-test.cy.ts

@@ -10,15 +10,12 @@ describe("Card payment flow test", () => {
   let getIframeBody: () => Cypress.Chainable<JQuery<HTMLBodyElement>>;
   let iframeSelector =
     "#orca-payment-element-iframeRef-orca-elements-payment-element-payment-element";
-
-  // changeObjectKeyValue(createPaymentBody,"profile_id","YOUR_PROFILE_ID")
-
+     changeObjectKeyValue(createPaymentBody,"customer_id","hyperswitch_sdk_demo_id")
 
   beforeEach(() => {
     getIframeBody = () => cy.iframe(iframeSelector);
     cy.createPaymentIntent(secretKey, createPaymentBody).then(() => {
       cy.getGlobalState("clientSecret").then((clientSecret) => {
-
         cy.visit(getClientURL(clientSecret, publishableKey));
       });
 

cypress-tests/cypress/e2e/stripe-3DS-card-flow-e2e-test.cy.ts

@@ -0,0 +1,51 @@
+import * as testIds from "../../../src/Utilities/TestUtils.bs";
+import { getClientURL } from "../support/utils";
+import { createPaymentBody } from "../support/utils";
+import { changeObjectKeyValue } from "../support/utils";
+import { stripeCards } from "cypress/support/cards";
+
+describe("Card payment flow test", () => {
+
+  const publishableKey = Cypress.env('HYPERSWITCH_PUBLISHABLE_KEY')
+  const secretKey = Cypress.env('HYPERSWITCH_SECRET_KEY')
+  let getIframeBody: () => Cypress.Chainable<JQuery<HTMLBodyElement>>;
+  let iframeSelector =
+    "#orca-payment-element-iframeRef-orca-elements-payment-element-payment-element";
+
+  changeObjectKeyValue(createPaymentBody,"authentication_type","three_ds")
+  changeObjectKeyValue(createPaymentBody,"customer_id","new_user")
+
+  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.get(iframeSelector)
+      .should("be.visible")
+      .its("0.contentDocument")
+      .its("body");
+  });
+
+  it("should complete the card payment successfully", () => {
+   const{ cardNo,cvc, card_exp_month, card_exp_year}=stripeCards.threeDSCard
+    getIframeBody().find('[data-testid=cardNoInput]').type(cardNo); 
+    getIframeBody().find('[data-testid=expiryInput]').type(card_exp_month); 
+    getIframeBody().find('[data-testid=expiryInput]').type(card_exp_year); 
+    getIframeBody().find('[data-testid=cvvInput]').type(cvc); 
+
+    getIframeBody().get("#submit").click().then(() => {
+      cy.url().should('include', 'hooks.stripe.com/3d_secure_2');
+    });
+  });
+});
+

cypress-tests/cypress/e2e/stripe-manual-capture-card-flow-e2e-test.cy.ts

@@ -0,0 +1,45 @@
+import * as testIds from "../../../src/Utilities/TestUtils.bs";
+import { getClientURL } from "../support/utils";
+import { createPaymentBody } from "../support/utils";
+import { changeObjectKeyValue } from "../support/utils";
+import { stripeCards } from "cypress/support/cards";
+
+describe("Card payment flow test", () => {
+
+  const publishableKey = Cypress.env('HYPERSWITCH_PUBLISHABLE_KEY')
+  const secretKey = Cypress.env('HYPERSWITCH_SECRET_KEY')
+  let getIframeBody: () => Cypress.Chainable<JQuery<HTMLBodyElement>>;
+  let iframeSelector =
+    "#orca-payment-element-iframeRef-orca-elements-payment-element-payment-element";
+
+   changeObjectKeyValue(createPaymentBody,"capture_method","manual")
+   changeObjectKeyValue(createPaymentBody,"customer_id","new_user")
+
+
+  beforeEach(() => {
+    getIframeBody = () => cy.iframe(iframeSelector);
+    cy.createPaymentIntent(secretKey, createPaymentBody).then(() => {
+      cy.getGlobalState("clientSecret").then((clientSecret) => {
+      cy.visit(getClientURL(clientSecret, publishableKey));
+      });
+
+    })
+  });
+
+it("should complete the card payment successfully", () => {
+
+    const { cardNo, card_exp_month, card_exp_year, cvc } = stripeCards.successCard;
+
+    getIframeBody().find('[data-testid=cardNoInput]').type(cardNo); 
+    getIframeBody().find('[data-testid=expiryInput]').type(card_exp_month);
+    getIframeBody().find('[data-testid=expiryInput]').type(card_exp_year); 
+    getIframeBody().find('[data-testid=cvvInput]').type(cvc);
+
+    getIframeBody().get("#submit").click();
+
+  cy.wait(3000);
+  cy.contains('Payment processing! Requires manual capture')
+  .should('be.visible');
+
+});
+});

cypress-tests/cypress/e2e/stripe-no-3DS-card-flow-e2e-test.cy.ts

@@ -0,0 +1,90 @@
+import * as testIds from "../../../src/Utilities/TestUtils.bs";
+import { getClientURL } from "../support/utils";
+import { createPaymentBody } from "../support/utils";
+import { changeObjectKeyValue } from "../support/utils";
+import { stripeCards } from "cypress/support/cards";
+
+describe("Card payment flow test", () => {
+
+  const publishableKey = Cypress.env('HYPERSWITCH_PUBLISHABLE_KEY')
+  const secretKey = Cypress.env('HYPERSWITCH_SECRET_KEY')
+  let getIframeBody: () => Cypress.Chainable<JQuery<HTMLBodyElement>>;
+  let iframeSelector =
+    "#orca-payment-element-iframeRef-orca-elements-payment-element-payment-element";
+
+  // changeObjectKeyValue(createPaymentBody,"profile_id","YOUR_PROFILE_ID")
+   changeObjectKeyValue(createPaymentBody,"customer_id","new_user")
+
+
+  beforeEach(() => {
+    getIframeBody = () => cy.iframe(iframeSelector);
+    cy.createPaymentIntent(secretKey, createPaymentBody).then(() => {
+      cy.getGlobalState("clientSecret").then((clientSecret) => {
+
+        cy.visit(getClientURL(clientSecret, publishableKey));
+      });
+
+    })
+  });
+
+it("should complete the card payment successfully", () => {
+    const { cardNo, card_exp_month, card_exp_year, cvc } = stripeCards.successCard;
+
+    getIframeBody().find('[data-testid=cardNoInput]').type(cardNo);
+    getIframeBody().find('[data-testid=expiryInput]').type(card_exp_month); 
+    getIframeBody().find('[data-testid=expiryInput]').type(card_exp_year); 
+    getIframeBody().find('[data-testid=cvvInput]').type(cvc); 
+
+    getIframeBody().get("#submit").click();
+
+    cy.wait(3000); 
+    cy.contains("Thanks for your order!").should("be.visible");
+  });
+
+
+  it("should fail with an invalid card number", () => {
+   const { cardNo, card_exp_month, card_exp_year, cvc } = stripeCards.invalidCard;
+
+    getIframeBody().find('[data-testid=cardNoInput]').type(cardNo); 
+    getIframeBody().find('[data-testid=expiryInput]').type(card_exp_month); 
+    getIframeBody().find('[data-testid=expiryInput]').type(card_exp_year); 
+    getIframeBody().find('[data-testid=cvvInput]').type(cvc); 
+
+    getIframeBody().get("#submit").click();
+
+    cy.wait(3000); 
+    cy.contains("Please enter valid details").should("be.visible"); 
+  });
+
+  it("should show error for expired card year", () => {
+    const { cardNo, card_exp_month, card_exp_year, cvc } = stripeCards.successCard;
+
+    getIframeBody().find('[data-testid=cardNoInput]').type(cardNo); 
+    getIframeBody().find('[data-testid=expiryInput]').type(card_exp_month); 
+    getIframeBody().find('[data-testid=expiryInput]').type("10");
+    getIframeBody().find('[data-testid=cvvInput]').type(cvc); 
+
+    getIframeBody().get("#submit").click();
+
+    cy.wait(3000); 
+    getIframeBody().find('.Error.pt-1').should('be.visible')
+      .and('contain.text', "Your card's expiration year is in the past.");
+  });
+
+  it("should show error for incomplete card CVV", () => {
+    const{ cardNo, card_exp_month , card_exp_year ,cvc}=stripeCards.successCard;
+
+    getIframeBody().find('[data-testid=cardNoInput]').type(cardNo); 
+    getIframeBody().find('[data-testid=expiryInput]').type(card_exp_month); 
+    getIframeBody().find('[data-testid=expiryInput]').type(card_exp_year); 
+    getIframeBody().find('[data-testid=cvvInput]').type("1"); 
+
+    getIframeBody().get("#submit").click();
+
+    cy.wait(3000); 
+    getIframeBody().find('.Error.pt-1').should('be.visible')
+      .and('contain.text', "Your card's security code is incomplete.");
+  });
+
+
+});

cypress-tests/cypress/support/cards.ts

@@ -0,0 +1,40 @@
+export type cardDetails = {
+    cardNo: string,
+    cardScheme: string,
+    cvc: string,
+    card_exp_month: string,
+    card_exp_year: string,
+
+}
+
+
+type connectorCard = {
+    successCard: cardDetails
+    threeDSCard: cardDetails
+    invalidCard: cardDetails
+}
+
+
+export const stripeCards = {
+    successCard: {
+        cardNo: "4242424242424242",
+        cardScheme: "Visa",
+        cvc: "123",
+        card_exp_month:"12",
+        card_exp_year:"30",
+    },
+    invalidCard: {
+        cardNo: "400000000000000",
+        cardScheme: "Visa",
+        cvc: "123",
+        card_exp_month:"12",
+        card_exp_year:"30",
+    },
+    threeDSCard: {
+        cardNo: "4000000000003220",
+        cardScheme: "Visa",
+        cvc: "123",
+        card_exp_month:"13",
+        card_exp_year:"30",
+    },
+}

cypress-tests/cypress/support/commands.ts

@@ -56,7 +56,7 @@ Cypress.Commands.add("hardReload", () => {
 
 Cypress.Commands.add(
   "testDynamicFields",
-  (customerData, testIdsToRemoveArr = [], isThreeDSEnabled = false) => {
+  (customerData, testIdsToRemoveArr = [], isThreeDSEnabled = false, publishableKey) => {
     const mapping = {
       [testIds.cardNoInputTestId]: customerData.cardNo,
       [testIds.expiryInputTestId]: customerData.cardExpiry,
@@ -73,7 +73,7 @@ Cypress.Commands.add(
     if (isThreeDSEnabled) {
       mapping[testIds.cardNoInputTestId] = customerData.threeDSCardNo;
     }
-    let publishableKey = "pk_snd_3b33cd9404234113804aa1accaabe22f";
+
     let clientSecret: string;
     cy.request({
       method: "GET",

cypress-tests/cypress/support/types.ts

@@ -22,7 +22,7 @@ declare global {
             selectValueInIframe(selector: string, value: string): Chainable<JQuery<HTMLElement>>
             hardReload(): Chainable<JQuery<HTMLElement>>
             testDynamicFields(
-                customerData: CustomerData, testIdsToRemoveArr: string[], isThreeDSEnabled: boolean
+                customerData: CustomerData, testIdsToRemoveArr: string[], isThreeDSEnabled: boolean, publishableKey: string
             ): Chainable<JQuery<HTMLElement>>
             createPaymentIntent(secretKey: string, createPaymentBody: Record<string, any>): Chainable<Response<any>>
             getGlobalState(key: string): Chainable<Response<any>>