donation testing

cypress.json

@@ -1,3 +1,4 @@
 {
-  "baseUrl": "http://localhost:3000"
+  "baseUrl": "http://localhost:3000",
+  "chromeWebSecurity": false
 }

cypress/integration/test.spec.js

@@ -0,0 +1,28 @@
+/// <reference types="cypress" />
+
+describe("HomaPage", () => {
+    it("PFTP site",() => {
+        cy.visit("http://localhost:3000")
+        cy.wait(5000)
+        cy.get('[data-test-id="continue-next"]').click().then(() => {
+            cy.get('[data-test-id="test-firstName"]').type("rish")
+            cy.get('[data-test-id="test-lastName"]').type("singh")
+            cy.get('[data-test-id="test-email"]').type("[email protected]")
+            cy.get('[data-test-id="test-address"]').type("abcd")
+            cy.get('[data-test-id="test-city"]').type("mumbai")
+            cy.get('[data-test-id="test-zipCode"]').type("401107")
+            cy.get('[data-test-id="test-continueToPayment"]').click().then(() => {
+                cy.get('#card-element').within(() => {
+                    cy.fillElementsInput('cardNumber', '4242424242424242');
+                    cy.fillElementsInput('cardExpiry', '1025'); // MMYY
+                    cy.fillElementsInput('cardCvc', '123');
+                  });
+                cy.get('[data-test-id="test-donateButton"]').click()
+            })
+
+        })
+
+    });
+
+
+})

cypress/support/index.js

@@ -15,6 +15,7 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands'
+import 'cypress-plugin-stripe-elements';
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

package.json

@@ -43,6 +43,7 @@
     "@typescript-eslint/eslint-plugin": "^4.20.0",
     "@typescript-eslint/parser": "^4.20.0",
     "cypress": "^6.8.0",
+    "cypress-plugin-stripe-elements": "^1.0.1",
     "eslint": "^7.23.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^8.1.0",

src/Donations/Components/ContactsForm.tsx

@@ -80,6 +80,7 @@ function ContactsForm({}: Props): ReactElement {
                 variant="outlined"
                 name="firstname"
                 defaultValue={contactDetails.firstname}
+                data-test-id="test-firstName"
               />
               {errors.firstname && (
                 <span className={"form-errors"}>{t("firstNameRequired")}</span>
@@ -93,6 +94,7 @@ function ContactsForm({}: Props): ReactElement {
                 variant="outlined"
                 name="lastname"
                 defaultValue={contactDetails.lastname}
+                data-test-id="test-lastName"
               />
               {errors.lastname && (
                 <span className={"form-errors"}>{t("lastNameRequired")}</span>
@@ -111,6 +113,7 @@ function ContactsForm({}: Props): ReactElement {
               variant="outlined"
               name="email"
               defaultValue={contactDetails.email}
+              data-test-id="test-email"
             />
             {errors.email && (
               <span className={"form-errors"}>{t("emailRequired")}</span>
@@ -124,6 +127,7 @@ function ContactsForm({}: Props): ReactElement {
               variant="outlined"
               name="address"
               defaultValue={contactDetails.address}
+              data-test-id="test-address"
             />
             {errors.address && (
               <span className={"form-errors"}>{t("addressRequired")}</span>
@@ -138,6 +142,7 @@ function ContactsForm({}: Props): ReactElement {
                 variant="outlined"
                 name="city"
                 defaultValue={contactDetails.city}
+                data-test-id="test-city"
               />
               {errors.city && (
                 <span className={"form-errors"}>{t("cityRequired")}</span>
@@ -155,6 +160,7 @@ function ContactsForm({}: Props): ReactElement {
                   variant="outlined"
                   name="zipCode"
                   defaultValue={contactDetails.zipCode}
+                  data-test-id="test-zipCode"
                 />
               )}
               {errors.zipCode && (
@@ -249,6 +255,7 @@ function ContactsForm({}: Props): ReactElement {
             <button
               onClick={handleSubmit(onSubmit)}
               className={"primary-button mt-30"}
+              data-test-id="test-continueToPayment"
             >
               {t("continue")}
             </button>

src/Donations/PaymentMethods/CardPayments.tsx

@@ -187,7 +187,7 @@ function CardPayments({
       {paymentError && <div className={"paymentError"}>{paymentError}</div>}
 
       {
-        <div>
+        <div id="card-element">
           <FormControlNew variant="outlined">
             <CardNumberElement
               id="cardNumber"
@@ -220,6 +220,7 @@ function CardPayments({
           onClick={handleSubmit}
           className="primary-button w-100 mt-30"
           id="donateContinueButton"
+          data-test-id="test-donateButton"
         >
           {t("donate")}{" "}
           {totalCost}

src/Donations/PaymentMethods/PaymentRequestCustomButton.tsx

@@ -165,7 +165,7 @@ export const PaymentRequestCustomButton = ({
       ) : null}
 
       {!isPaymentPage && (
-        <button onClick={() => continueNext()} className="primary-button">
+        <button data-test-id="continue-next" onClick={() => continueNext()} className="primary-button">
           {canMakePayment ? t("payPalCard") : t("continue")}
         </button>
       )}

tsconfig.json

@@ -12,7 +12,8 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "types": ["cypress", "cypress-plugin-stripe-elements"]
   },
   "exclude": ["node_modules"],
   "include": [