From d85f5048f92a600e897f3efbc93d336ca42a3349 Mon Sep 17 00:00:00 2001 From: Sanskar Atrey Date: Mon, 16 Sep 2024 16:48:16 +0530 Subject: [PATCH] feat: added support to change create payment and added env to cypress --- Hyperswitch-React-Demo-App/src/Payment.js | 18 +++-- cypress-tests/.env | 0 cypress-tests/cypress.env.json | 4 ++ .../cypress/e2e/card-flow-e2e-test.cy.ts | 20 ++++-- cypress-tests/cypress/support/commands.ts | 30 ++------ cypress-tests/cypress/support/types.ts | 4 +- cypress-tests/cypress/support/utils.ts | 68 ++++++++++++++++--- 7 files changed, 96 insertions(+), 48 deletions(-) delete mode 100644 cypress-tests/.env create mode 100644 cypress-tests/cypress.env.json diff --git a/Hyperswitch-React-Demo-App/src/Payment.js b/Hyperswitch-React-Demo-App/src/Payment.js index b7710ec25..b86c0d4d8 100644 --- a/Hyperswitch-React-Demo-App/src/Payment.js +++ b/Hyperswitch-React-Demo-App/src/Payment.js @@ -8,6 +8,11 @@ function Payment() { const [hyperPromise, setHyperPromise] = useState(null); const [clientSecret, setClientSecret] = useState(""); + const queryParams = new URLSearchParams(window.location.search); + const isCypressTestMode = queryParams.get("isCypressTestMode"); + const publishableKeyQueryParam = queryParams.get("publishableKey"); + const clientSecretQueryParam = queryParams.get("clientSecret"); + useEffect(() => { const fetchData = async () => { try { @@ -45,9 +50,12 @@ function Payment() { setHyperPromise( new Promise((resolve) => { resolve( - window.Hyper(publishableKey, { - customBackendUrl: serverUrl, - }) + window.Hyper( + isCypressTestMode ? publishableKeyQueryParam : publishableKey, + { + customBackendUrl: serverUrl, + } + ) ); }) ); @@ -81,7 +89,9 @@ function Payment() { { + + 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"; beforeEach(() => { getIframeBody = () => cy.iframe(iframeSelector); - cy.visit(CLIENT_URL); - }); - it("page loaded successfully", () => { - cy.visit(CLIENT_URL); + cy.createPaymentIntent(secretKey).then(()=>{ + cy.getGlobalState("clientSecret").then((clientSecret)=>{ + + cy.visit(getClientURL(clientSecret,publishableKey)); + }); + + }) }); + it("title rendered correctly", () => { cy.contains("Hyperswitch Unified Checkout").should("be.visible"); }); @@ -30,8 +38,6 @@ describe("Card payment flow test", () => { it('should check if cards are saved', () => { // Visit the page where the test will be performed - cy.visit(CLIENT_URL); - getIframeBody().find(`[data-testid=${testIds.addNewCardIcon}]`) .then($element => { if ($element.length > 0) { diff --git a/cypress-tests/cypress/support/commands.ts b/cypress-tests/cypress/support/commands.ts index 1dbfe8435..e86bdc6c5 100644 --- a/cypress-tests/cypress/support/commands.ts +++ b/cypress-tests/cypress/support/commands.ts @@ -24,6 +24,7 @@ // -- This will overwrite an existing command -- // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) import "cypress-iframe"; +import {createPaymentBody} from "./utils" import * as testIds from "../../../src/Utilities/TestUtils.bs"; // commands.js or your custom support file const iframeSelector = @@ -145,27 +146,8 @@ Cypress.Commands.add( } ); -const request = { - currency: "USD", - amount: 6500, - authentication_type: "three_ds", - description: "Joseph First Crypto", - email: "hyperswitch_sdk_demo_id@gmail.com", - connector_metadata: { - noon: { - order_category: "applepay", - }, - }, - metadata: { - udf1: "value1", - new_customer: "true", - login_date: "2019-09-10T10:11:12Z", - }, - // customer_id: "hyperswitch_sdk_demo_test_id", - business_country: "US", - business_label: "default", -}; -Cypress.Commands.add("createPaymentIntent", () => { + +Cypress.Commands.add("createPaymentIntent", (secretKey:string) => { return cy .request({ method: "POST", @@ -173,9 +155,9 @@ Cypress.Commands.add("createPaymentIntent", () => { headers: { "Content-Type": "application/json", Accept: "application/json", - "api-key": "snd_c691ade6995743bd88c166ba509ff5da", + "api-key": secretKey, }, - body: JSON.stringify(request), + body: JSON.stringify(createPaymentBody), }) .then((response) => { expect(response.headers["content-type"]).to.include("application/json"); @@ -188,6 +170,6 @@ Cypress.Commands.add("createPaymentIntent", () => { }); }); -Cypress.Commands.add("getGlobalState", (key: number) => { +Cypress.Commands.add("getGlobalState", (key: any) => { return globalState[key]; }); diff --git a/cypress-tests/cypress/support/types.ts b/cypress-tests/cypress/support/types.ts index 20953bc94..b847d7a8c 100644 --- a/cypress-tests/cypress/support/types.ts +++ b/cypress-tests/cypress/support/types.ts @@ -24,8 +24,8 @@ declare global { testDynamicFields( customerData: CustomerData, testIdsToRemoveArr: string[], isThreeDSEnabled: boolean ): Chainable> - createPaymentIntent(): Chainable> - getGlobalState(key: number): Chainable> + createPaymentIntent(secretKey:string): Chainable> + getGlobalState(key: string): Chainable> } } } \ No newline at end of file diff --git a/cypress-tests/cypress/support/utils.ts b/cypress-tests/cypress/support/utils.ts index b6b28900d..99c09e7f4 100644 --- a/cypress-tests/cypress/support/utils.ts +++ b/cypress-tests/cypress/support/utils.ts @@ -1,14 +1,44 @@ -export const CLIENT_URL = "http://localhost:9060" +export const CLIENT_BASE_URL = "http://localhost:9060" -export const request = { + + +export const getClientURL=(clientSecret,publishableKey)=>{ + return `${CLIENT_BASE_URL}?isCypressTestMode=true&clientSecret=${clientSecret}&publishableKey=${publishableKey}`; +} + + +export const createPaymentBody ={ currency: "USD", - amount: 6500, + amount: 2999, + order_details: [ + { + product_name: "Apple iPhone 15", + quantity: 1, + amount: 2999, + }, + ], + confirm: false, + capture_method: "automatic", authentication_type: "three_ds", - description: "Joseph First Crypto", + customer_id: "hyperswitch_sdk_demo_id", email: "hyperswitch_sdk_demo_id@gmail.com", - connector_metadata: { - noon: { - order_category: "applepay", + request_external_three_ds_authentication: false, + description: "Hello this is description", + shipping: { + address: { + line1: "1467", + line2: "Harrison Street", + line3: "Harrison Street", + city: "San Fransico", + state: "California", + zip: "94122", + country: "US", + first_name: "joseph", + last_name: "Doe", + }, + phone: { + number: "8056594427", + country_code: "+91", }, }, metadata: { @@ -16,10 +46,26 @@ export const request = { new_customer: "true", login_date: "2019-09-10T10:11:12Z", }, - // customer_id: "hyperswitch_sdk_demo_test_id", - business_country: "US", - business_label: "default", -}; + profile_id: "pro_xsQ7wTCP89OLqmWNcnRq", + billing: { + email: "hyperswitch_sdk_demo_id@gmail.com", + address: { + line1: "1467", + line2: "Harrison Street", + line3: "Harrison Street", + city: "San Fransico", + state: "California", + zip: "94122", + country: "US", + first_name: "joseph", + last_name: "Doe", + }, + phone: { + number: "8056594427", + country_code: "+91", + }, + }, +} export const confirmBody = { client_secret: "",