From 1349f9b287320a8a05e07b8f7366d40c4c9c9dfe Mon Sep 17 00:00:00 2001 From: preetamrevankar Date: Tue, 3 Sep 2024 21:22:38 +0530 Subject: [PATCH 1/2] test: card cypress test added --- Hyperswitch-React-Demo-App/.env | 12 +-- Hyperswitch-React-Demo-App/server.js | 2 +- cypress-tests/cypress.config.js | 1 + cypress-tests/cypress/e2e/3ds-card-test.cy.ts | 49 +++++++++++ .../cypress/e2e/card-flow-e2e-test.cy.ts | 1 + .../cypress/e2e/no3ds-card-test.cy.ts | 85 +++++++++++++++++++ cypress-tests/cypress/support/commands.ts | 6 +- cypress-tests/cypress/support/utils.ts | 2 +- 8 files changed, 147 insertions(+), 11 deletions(-) create mode 100644 cypress-tests/cypress/e2e/3ds-card-test.cy.ts create mode 100644 cypress-tests/cypress/e2e/no3ds-card-test.cy.ts diff --git a/Hyperswitch-React-Demo-App/.env b/Hyperswitch-React-Demo-App/.env index d2fead8d2..12fb58eb0 100644 --- a/Hyperswitch-React-Demo-App/.env +++ b/Hyperswitch-React-Demo-App/.env @@ -1,7 +1,7 @@ STATIC_DIR=./dist -HYPERSWITCH_PUBLISHABLE_KEY= -HYPERSWITCH_SECRET_KEY= -HYPERSWITCH_SERVER_URL= -HYPERSWITCH_CLIENT_URL= -SELF_SERVER_URL= -PROFILE_ID="" +HYPERSWITCH_PUBLISHABLE_KEY="pk_snd_3dbcd4a313b248f78f046dfe0090636e" +HYPERSWITCH_SECRET_KEY="snd_6jXxdUbFxGW4EulF5hl0fWpJ3ABRuSDyI1vFfGaG26SdR43k6MYisvvWIqoSeKJh" +HYPERSWITCH_SERVER_URL="https://sandbox.hyperswitch.io" +HYPERSWITCH_CLIENT_URL="http://localhost:9050" +SELF_SERVER_URL="" +PROFILE_ID="pro_ka4Uc7Cj4b3hjUXxRSZY" \ No newline at end of file diff --git a/Hyperswitch-React-Demo-App/server.js b/Hyperswitch-React-Demo-App/server.js index 13cd945c2..bc6f6b26d 100644 --- a/Hyperswitch-React-Demo-App/server.js +++ b/Hyperswitch-React-Demo-App/server.js @@ -51,7 +51,7 @@ const paymentData = { ], confirm: false, capture_method: "automatic", - authentication_type: "three_ds", + authentication_type: "no_three_ds", customer_id: "hyperswitch_sdk_demo_id", email: "hyperswitch_sdk_demo_id@gmail.com", description: "Hello this is description", diff --git a/cypress-tests/cypress.config.js b/cypress-tests/cypress.config.js index f59b43758..ffa7b5109 100644 --- a/cypress-tests/cypress.config.js +++ b/cypress-tests/cypress.config.js @@ -1,6 +1,7 @@ const { defineConfig } = require("cypress"); module.exports = defineConfig({ + watchForFileChanges:true, projectId: "6r9ayw", chromeWebSecurity: false, e2e: { diff --git a/cypress-tests/cypress/e2e/3ds-card-test.cy.ts b/cypress-tests/cypress/e2e/3ds-card-test.cy.ts new file mode 100644 index 000000000..85cfe2cf4 --- /dev/null +++ b/cypress-tests/cypress/e2e/3ds-card-test.cy.ts @@ -0,0 +1,49 @@ +import * as testIds from "../../../src/Utilities/TestUtils.bs"; +import { CLIENT_URL } from "../support/utils"; + +describe("Card payment flow test", () => { + // Define the type for getIframeBody function + let getIframeBody: () => Cypress.Chainable>; + const iframeSelector = "#orca-payment-element-iframeRef-orca-elements-payment-element-payment-element"; + + beforeEach(() => { + // Initialize the getIframeBody function + getIframeBody = () => cy.iframe(iframeSelector); + + // Visit the page with the payment form + cy.visit(CLIENT_URL); + }); + + it("page loaded successfully", () => { + cy.visit(CLIENT_URL); + }); + + 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 + cy.visit(CLIENT_URL); + + // Wait for iframe to load and get its body + getIframeBody().find('[data-testid=cardNoInput]').type('4000000000003220'); // Example card number + getIframeBody().find('[data-testid=expiryInput]').type('12'); // Expiration month + getIframeBody().find('[data-testid=expiryInput]').type('25'); // Expiration year + getIframeBody().find('[data-testid=cvvInput]').type('123'); // 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/card-flow-e2e-test.cy.ts b/cypress-tests/cypress/e2e/card-flow-e2e-test.cy.ts index add9fa9b8..5d53af8b4 100644 --- a/cypress-tests/cypress/e2e/card-flow-e2e-test.cy.ts +++ b/cypress-tests/cypress/e2e/card-flow-e2e-test.cy.ts @@ -45,3 +45,4 @@ describe("Card payment flow test", () => { }); }); }); + diff --git a/cypress-tests/cypress/e2e/no3ds-card-test.cy.ts b/cypress-tests/cypress/e2e/no3ds-card-test.cy.ts new file mode 100644 index 000000000..309cec021 --- /dev/null +++ b/cypress-tests/cypress/e2e/no3ds-card-test.cy.ts @@ -0,0 +1,85 @@ +import * as testIds from "../../../src/Utilities/TestUtils.bs"; +import { CLIENT_URL } from "../support/utils"; + +// Define a type for the getIframeBody function +type GetIframeBody = () => Cypress.Chainable>; + +describe("Card payment flow test", () => { + let getIframeBody: GetIframeBody; + const iframeSelector = "#orca-payment-element-iframeRef-orca-elements-payment-element-payment-element"; + + before(() => { + // Initialize the getIframeBody function + getIframeBody = () => cy.iframe(iframeSelector); + cy.visit(CLIENT_URL); + }); + + 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 + cy.visit(CLIENT_URL); + + // Wait for iframe to load and get its body + getIframeBody().find('[data-testid=cardNoInput]').type('4242424242424242'); // Example card number + getIframeBody().find('[data-testid=expiryInput]').type('12'); // Expiration month + getIframeBody().find('[data-testid=expiryInput]').type('25'); // Expiration year + getIframeBody().find('[data-testid=cvvInput]').type('123'); // 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); + + getIframeBody().find('[data-testid=cardNoInput]').type('1234567812345678'); // Invalid card number + getIframeBody().find('[data-testid=expiryInput]').type('12'); // Expiration month + getIframeBody().find('[data-testid=expiryInput]').type('25'); // Expiration year + getIframeBody().find('[data-testid=cvvInput]').type('123'); // 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); + + getIframeBody().find('[data-testid=cardNoInput]').type('4242424242424242'); // Valid card number + getIframeBody().find('[data-testid=expiryInput]').type('12'); // Expiration month + getIframeBody().find('[data-testid=expiryInput]').type('20'); // Expiration year + getIframeBody().find('[data-testid=cvvInput]').type('123'); // 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); + + getIframeBody().find('[data-testid=cardNoInput]').type('4242424242424242'); // Valid card number + getIframeBody().find('[data-testid=expiryInput]').type('12'); // Expiration month + getIframeBody().find('[data-testid=expiryInput]').type('25'); // Expiration year + getIframeBody().find('[data-testid=cvvInput]').type('12'); // 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/support/commands.ts b/cypress-tests/cypress/support/commands.ts index 1dbfe8435..c9800ed5c 100644 --- a/cypress-tests/cypress/support/commands.ts +++ b/cypress-tests/cypress/support/commands.ts @@ -72,7 +72,7 @@ Cypress.Commands.add( if (isThreeDSEnabled) { mapping[testIds.cardNoInputTestId] = customerData.threeDSCardNo; } - let publishableKey = "pk_snd_3b33cd9404234113804aa1accaabe22f"; + let publishableKey = "pk_snd_3dbcd4a313b248f78f046dfe0090636e"; let clientSecret:string; cy.request({ method: "GET", @@ -148,7 +148,7 @@ Cypress.Commands.add( const request = { currency: "USD", amount: 6500, - authentication_type: "three_ds", + authentication_type: "no_three_ds", description: "Joseph First Crypto", email: "hyperswitch_sdk_demo_id@gmail.com", connector_metadata: { @@ -173,7 +173,7 @@ Cypress.Commands.add("createPaymentIntent", () => { headers: { "Content-Type": "application/json", Accept: "application/json", - "api-key": "snd_c691ade6995743bd88c166ba509ff5da", + "api-key": "snd_6jXxdUbFxGW4EulF5hl0fWpJ3ABRuSDyI1vFfGaG26SdR43k6MYisvvWIqoSeKJh", }, body: JSON.stringify(request), }) diff --git a/cypress-tests/cypress/support/utils.ts b/cypress-tests/cypress/support/utils.ts index b6b28900d..1659d9fa6 100644 --- a/cypress-tests/cypress/support/utils.ts +++ b/cypress-tests/cypress/support/utils.ts @@ -3,7 +3,7 @@ export const CLIENT_URL = "http://localhost:9060" export const request = { currency: "USD", amount: 6500, - authentication_type: "three_ds", + authentication_type: "no_three_ds", description: "Joseph First Crypto", email: "hyperswitch_sdk_demo_id@gmail.com", connector_metadata: { From 66de7bd52b7abb42b54412ec4916575cfcb333df Mon Sep 17 00:00:00 2001 From: preetamrevankar Date: Wed, 4 Sep 2024 15:02:01 +0530 Subject: [PATCH 2/2] test: updated commands.ts --- cypress-tests/cypress/support/commands.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/cypress-tests/cypress/support/commands.ts b/cypress-tests/cypress/support/commands.ts index c9800ed5c..dbd97f8b1 100644 --- a/cypress-tests/cypress/support/commands.ts +++ b/cypress-tests/cypress/support/commands.ts @@ -72,7 +72,6 @@ Cypress.Commands.add( if (isThreeDSEnabled) { mapping[testIds.cardNoInputTestId] = customerData.threeDSCardNo; } - let publishableKey = "pk_snd_3dbcd4a313b248f78f046dfe0090636e"; let clientSecret:string; cy.request({ method: "GET", @@ -173,7 +172,6 @@ Cypress.Commands.add("createPaymentIntent", () => { headers: { "Content-Type": "application/json", Accept: "application/json", - "api-key": "snd_6jXxdUbFxGW4EulF5hl0fWpJ3ABRuSDyI1vFfGaG26SdR43k6MYisvvWIqoSeKJh", }, body: JSON.stringify(request), })