From 59d3f41e1caba4042da8ee9ad7a2093f533e84c5 Mon Sep 17 00:00:00 2001 From: preetamrevankar Date: Tue, 8 Oct 2024 19:24:58 +0530 Subject: [PATCH 1/4] feat: added test cases in cypress --- Hyperswitch-React-Demo-App/.env | 2 +- .../cypress/e2e/Stripe-no3ds-test.cy.ts | 96 +++++++++++++++++++ ...ow-e2e-test.cy.ts => savedcard-test.cy.ts} | 4 +- .../cypress/e2e/stripe-3ds-test.cy.ts | 57 +++++++++++ .../e2e/stripe-Manualcapture-test.cy.ts | 48 ++++++++++ cypress-tests/cypress/support/cards.ts | 72 ++++++++++++++ cypress-tests/cypress/support/commands.ts | 2 +- 7 files changed, 277 insertions(+), 4 deletions(-) create mode 100644 cypress-tests/cypress/e2e/Stripe-no3ds-test.cy.ts rename cypress-tests/cypress/e2e/{card-flow-e2e-test.cy.ts => savedcard-test.cy.ts} (95%) create mode 100644 cypress-tests/cypress/e2e/stripe-3ds-test.cy.ts create mode 100644 cypress-tests/cypress/e2e/stripe-Manualcapture-test.cy.ts create mode 100644 cypress-tests/cypress/support/cards.ts diff --git a/Hyperswitch-React-Demo-App/.env b/Hyperswitch-React-Demo-App/.env index d2fead8d2..c7fd6d536 100644 --- a/Hyperswitch-React-Demo-App/.env +++ b/Hyperswitch-React-Demo-App/.env @@ -2,6 +2,6 @@ STATIC_DIR=./dist HYPERSWITCH_PUBLISHABLE_KEY= HYPERSWITCH_SECRET_KEY= HYPERSWITCH_SERVER_URL= -HYPERSWITCH_CLIENT_URL= +HYPERSWITCH_CLIENT_URL="http://localhost:9050" SELF_SERVER_URL= PROFILE_ID="" diff --git a/cypress-tests/cypress/e2e/Stripe-no3ds-test.cy.ts b/cypress-tests/cypress/e2e/Stripe-no3ds-test.cy.ts new file mode 100644 index 000000000..3db5f3401 --- /dev/null +++ b/cypress-tests/cypress/e2e/Stripe-no3ds-test.cy.ts @@ -0,0 +1,96 @@ +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>; + let iframeSelector = + "#orca-payment-element-iframeRef-orca-elements-payment-element-payment-element"; + + // changeObjectKeyValue(createPaymentBody,"profile_id","YOUR_PROFILE_ID") + + + 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", () => { + // Visit the page with the payment form + //cy.visit(CLIENT_URL); + const { cardNo, card_exp_month, card_exp_year, cvc } = stripeCards.successCard; + + // Wait for iframe to load and get its body + getIframeBody().find('[data-testid=cardNoInput]').type(cardNo); // Example card number + getIframeBody().find('[data-testid=expiryInput]').type(card_exp_month); // Expiration month + getIframeBody().find('[data-testid=expiryInput]').type(card_exp_year); // Expiration year + getIframeBody().find('[data-testid=cvvInput]').type(cvc); // CVV + + // Click on the submit button + getIframeBody().get("#submit").click(); + + // Wait for the response and assert payment success message + cy.wait(3000); // Adjust wait time based on actual response time + cy.contains("Thanks for your order!").should("be.visible"); + }); + + + it("should fail with an invalid card number", () => { + // cy.visit(CLIENT_URL); + const { cardNo, card_exp_month, card_exp_year, cvc } = stripeCards.invalidCard; + + getIframeBody().find('[data-testid=cardNoInput]').type(cardNo); // Invalid card number + getIframeBody().find('[data-testid=expiryInput]').type(card_exp_month); // Expiration month + getIframeBody().find('[data-testid=expiryInput]').type(card_exp_year); // Expiration year + getIframeBody().find('[data-testid=cvvInput]').type(cvc); // CVV + + getIframeBody().get("#submit").click(); + + cy.wait(3000); // Adjust wait time based on actual response time + cy.contains("Please enter valid details").should("be.visible"); // Adjust based on actual error message + }); + + it("should show error for expired card year", () => { + //cy.visit(CLIENT_URL); + const { cardNo, card_exp_month, card_exp_year, cvc } = stripeCards.invalidYear; + + getIframeBody().find('[data-testid=cardNoInput]').type(cardNo); // Valid card number + getIframeBody().find('[data-testid=expiryInput]').type(card_exp_month); // Expiration month + getIframeBody().find('[data-testid=expiryInput]').type(card_exp_year); // Expiration year + getIframeBody().find('[data-testid=cvvInput]').type(cvc); // CVV + + getIframeBody().get("#submit").click(); + + cy.wait(3000); // Adjust wait time based on actual response time + 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", () => { + //cy.visit(CLIENT_URL); + const{ cardNo, card_exp_month , card_exp_year ,cvc}=stripeCards.invalidCVC + + getIframeBody().find('[data-testid=cardNoInput]').type(cardNo); // Valid card number + getIframeBody().find('[data-testid=expiryInput]').type(card_exp_month); // Expiration month + getIframeBody().find('[data-testid=expiryInput]').type(card_exp_year); // Expiration year + getIframeBody().find('[data-testid=cvvInput]').type(cvc); // Incomplete CVV + + getIframeBody().get("#submit").click(); + + cy.wait(3000); // Adjust wait time based on actual response time + getIframeBody().find('.Error.pt-1').should('be.visible') + .and('contain.text', "Your card's security code is incomplete."); + }); + +}); diff --git a/cypress-tests/cypress/e2e/card-flow-e2e-test.cy.ts b/cypress-tests/cypress/e2e/savedcard-test.cy.ts similarity index 95% rename from cypress-tests/cypress/e2e/card-flow-e2e-test.cy.ts rename to cypress-tests/cypress/e2e/savedcard-test.cy.ts index c0131cb74..39f0c6fb9 100644 --- a/cypress-tests/cypress/e2e/card-flow-e2e-test.cy.ts +++ b/cypress-tests/cypress/e2e/savedcard-test.cy.ts @@ -11,9 +11,9 @@ describe("Card payment flow test", () => { 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(() => { diff --git a/cypress-tests/cypress/e2e/stripe-3ds-test.cy.ts b/cypress-tests/cypress/e2e/stripe-3ds-test.cy.ts new file mode 100644 index 000000000..300f3c0ef --- /dev/null +++ b/cypress-tests/cypress/e2e/stripe-3ds-test.cy.ts @@ -0,0 +1,57 @@ +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>; + let iframeSelector = + "#orca-payment-element-iframeRef-orca-elements-payment-element-payment-element"; + + 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.get(iframeSelector) + .should("be.visible") + .its("0.contentDocument") + .its("body"); + }); + + it("should complete the card payment successfully", () => { + // Visit the page with the payment form +const{ cardNo,cvc, card_exp_month, card_exp_year}=stripeCards.threeDSCard + // Wait for iframe to load and get its body + getIframeBody().find('[data-testid=cardNoInput]').type(cardNo); // Example card number + getIframeBody().find('[data-testid=expiryInput]').type(card_exp_month); // Expiration month + getIframeBody().find('[data-testid=expiryInput]').type(card_exp_year); // Expiration year + getIframeBody().find('[data-testid=cvvInput]').type(cvc); // CVV + + // Click on the submit button + getIframeBody().get("#submit").click(); + + // Wait for the response and assert payment success message + cy.wait(3000); // Adjust wait time based on actual response time + cy.url().should('include', 'hooks.stripe.com/3d_secure_2'); + }); +}); + diff --git a/cypress-tests/cypress/e2e/stripe-Manualcapture-test.cy.ts b/cypress-tests/cypress/e2e/stripe-Manualcapture-test.cy.ts new file mode 100644 index 000000000..843e6c85f --- /dev/null +++ b/cypress-tests/cypress/e2e/stripe-Manualcapture-test.cy.ts @@ -0,0 +1,48 @@ +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>; + let iframeSelector = + "#orca-payment-element-iframeRef-orca-elements-payment-element-payment-element"; + + changeObjectKeyValue(createPaymentBody,"capture_method","manual") + + + 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; + + // Wait for iframe to load and get its body + getIframeBody().find('[data-testid=cardNoInput]').type(cardNo); // Example card number + getIframeBody().find('[data-testid=expiryInput]').type(card_exp_month); // Expiration month + getIframeBody().find('[data-testid=expiryInput]').type(card_exp_year); // Expiration year + getIframeBody().find('[data-testid=cvvInput]').type(cvc); // CVV + + // Click on the submit button + getIframeBody().get("#submit").click(); + + // Wait for the response and assert payment processing message + cy.wait(3000); + cy.contains('Payment processing! Requires manual capture') + .should('be.visible'); + +}); +}); \ No newline at end of file diff --git a/cypress-tests/cypress/support/cards.ts b/cypress-tests/cypress/support/cards.ts new file mode 100644 index 000000000..44088f2e7 --- /dev/null +++ b/cypress-tests/cypress/support/cards.ts @@ -0,0 +1,72 @@ +export type cardDetails = { + cardNo: string, + cardScheme: string, + cvc: string, + card_exp_month: string, + card_exp_year: string, + +} + + +type connectorCard = { + successCard: cardDetails + failureCard: cardDetails + threeDSCard: cardDetails + invalidCard: cardDetails + invalidCVC : cardDetails + invalidMonth:cardDetails + invalidYear: cardDetails +} + + +export const stripeCards = { + successCard: { + cardNo: "4242424242424242", + cardScheme: "Visa", + cvc: "123", + card_exp_month:"12", + card_exp_year:"30", + }, + failureCard: { + cardNo: "4000000000000002", + cardScheme: "Visa", + cvc: "123", + card_exp_month:"12", + card_exp_year:"30", + }, + invalidYear: { + cardNo: "4242424242424242", + cardScheme: "Visa", + cvc: "123", + card_exp_month:"12", + card_exp_year:"10", + }, + invalidCVC: { + cardNo: "4000000000000002", + cardScheme: "Visa", + cvc: "12", + card_exp_month:"12", + card_exp_year:"30", + }, + invalidCard: { + cardNo: "400000000000000", + cardScheme: "Visa", + cvc: "123", + card_exp_month:"12", + card_exp_year:"30", + }, + invalidMonth: { + cardNo: "4000000000000002", + cardScheme: "Visa", + cvc: "123", + card_exp_month:"13", + card_exp_year:"30", + }, + threeDSCard: { + cardNo: "4000000000003220", + cardScheme: "Visa", + cvc: "123", + card_exp_month:"13", + card_exp_year:"30", + }, +} \ No newline at end of file diff --git a/cypress-tests/cypress/support/commands.ts b/cypress-tests/cypress/support/commands.ts index 5a3fe36e2..fe84834c0 100644 --- a/cypress-tests/cypress/support/commands.ts +++ b/cypress-tests/cypress/support/commands.ts @@ -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", From 94e70f4b74bf8aa6faefb33b2e7b789d71f9a43e Mon Sep 17 00:00:00 2001 From: preetamrevankar Date: Tue, 8 Oct 2024 19:27:19 +0530 Subject: [PATCH 2/4] refactor: removed env --- Hyperswitch-React-Demo-App/.env | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Hyperswitch-React-Demo-App/.env b/Hyperswitch-React-Demo-App/.env index c7fd6d536..d2fead8d2 100644 --- a/Hyperswitch-React-Demo-App/.env +++ b/Hyperswitch-React-Demo-App/.env @@ -2,6 +2,6 @@ STATIC_DIR=./dist HYPERSWITCH_PUBLISHABLE_KEY= HYPERSWITCH_SECRET_KEY= HYPERSWITCH_SERVER_URL= -HYPERSWITCH_CLIENT_URL="http://localhost:9050" +HYPERSWITCH_CLIENT_URL= SELF_SERVER_URL= PROFILE_ID="" From c2d976c5e013d8c81a2acf0a483d3e35af70b366 Mon Sep 17 00:00:00 2001 From: preetamrevankar Date: Tue, 8 Oct 2024 19:32:20 +0530 Subject: [PATCH 3/4] refactor: added customer id --- cypress-tests/cypress/e2e/Stripe-no3ds-test.cy.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/cypress-tests/cypress/e2e/Stripe-no3ds-test.cy.ts b/cypress-tests/cypress/e2e/Stripe-no3ds-test.cy.ts index 3db5f3401..3d3fa246f 100644 --- a/cypress-tests/cypress/e2e/Stripe-no3ds-test.cy.ts +++ b/cypress-tests/cypress/e2e/Stripe-no3ds-test.cy.ts @@ -13,6 +13,7 @@ describe("Card payment flow test", () => { "#orca-payment-element-iframeRef-orca-elements-payment-element-payment-element"; // changeObjectKeyValue(createPaymentBody,"profile_id","YOUR_PROFILE_ID") + changeObjectKeyValue(createPaymentBody,"customer_id","new_user") beforeEach(() => { From 6778a6bd565e4e5674162176b25196b779fb4f13 Mon Sep 17 00:00:00 2001 From: preetamrevankar Date: Tue, 8 Oct 2024 19:38:10 +0530 Subject: [PATCH 4/4] refactor: added customer id --- cypress-tests/cypress/e2e/stripe-3ds-test.cy.ts | 1 + cypress-tests/cypress/e2e/stripe-Manualcapture-test.cy.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/cypress-tests/cypress/e2e/stripe-3ds-test.cy.ts b/cypress-tests/cypress/e2e/stripe-3ds-test.cy.ts index 300f3c0ef..5a64ad3e5 100644 --- a/cypress-tests/cypress/e2e/stripe-3ds-test.cy.ts +++ b/cypress-tests/cypress/e2e/stripe-3ds-test.cy.ts @@ -13,6 +13,7 @@ describe("Card payment flow test", () => { "#orca-payment-element-iframeRef-orca-elements-payment-element-payment-element"; changeObjectKeyValue(createPaymentBody,"authentication_type","three_ds") + changeObjectKeyValue(createPaymentBody,"customer_id","new_user") beforeEach(() => { diff --git a/cypress-tests/cypress/e2e/stripe-Manualcapture-test.cy.ts b/cypress-tests/cypress/e2e/stripe-Manualcapture-test.cy.ts index 843e6c85f..bf1430dc1 100644 --- a/cypress-tests/cypress/e2e/stripe-Manualcapture-test.cy.ts +++ b/cypress-tests/cypress/e2e/stripe-Manualcapture-test.cy.ts @@ -13,6 +13,7 @@ describe("Card payment flow test", () => { "#orca-payment-element-iframeRef-orca-elements-payment-element-payment-element"; changeObjectKeyValue(createPaymentBody,"capture_method","manual") + changeObjectKeyValue(createPaymentBody,"customer_id","new_user") beforeEach(() => {