cleared donations.specs.js by making our own cypress functions and sh…

…ifted those functions to diferent file. Also added error handling

.vscode/tasks.json

@@ -0,0 +1,12 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "npm",
+			"script": "cypress:open",
+			"problemMatcher": [],
+			"label": "npm: cypress:open",
+			"detail": "cypress open"
+		}
+	]
+}

cypress/integration/donations.spec.js

@@ -1,149 +1,41 @@
 /// <reference types="cypress" />
-function createDonation(customTrees, firstName, lastName, email, address, city, country, zipCode) {
-    cy.wait(5000)
-    cy.get('.custom-tree-input').type(customTrees)
-    cy.get('[data-test-id="selectCurrency"]').click().then(() => {
-        cy.get('[data-test-id="country-select"]').clear().type(country)
-    })
-    cy.get('[data-test-id="continue-next"]').click().then(() => {
-        cy.get('[data-test-id="test-firstName"]').type(firstName)
-        cy.get('[data-test-id="test-lastName"]').type(lastName)
-        cy.get('[data-test-id="test-email"]').type(email)
-        // any known address will trigger a dropdown of suggestions which only get away with a tab key,
-        // but Cypress does not support {tab} yet, so we use an unknown address to test here:
-        cy.get('[data-test-id="test-address"]').type(address);
-        cy.get('[data-test-id="test-city"]').clear().type(city)
-        cy.get('[data-test-id="test-country"]').clear().type(country);
-        cy.get('[data-test-id="test-zipCode"]').clear().type(zipCode)
-        cy.get('[data-test-id="test-continueToPayment"]').click()
 
-    })
-}
-function giftDonation(project = "yucatan", customTrees, firstName, lastName, email, address, city, country, zipCode) {
-    cy.visit(`/?to=${project}`)
-    cy.wait(5000)
-    giftDonationForm()
-    cy.get('.custom-tree-input').type(customTrees)
-    cy.get('[data-test-id="selectCurrency"]').click().then(() => {
-        cy.get('[data-test-id="country-select"]').clear().type(country)
-    })
-    cy.get('[data-test-id="continue-next"]').click().then(() => {
-        cy.get('[data-test-id="test-firstName"]').type(firstName)
-        cy.get('[data-test-id="test-lastName"]').type(lastName)
-        cy.get('[data-test-id="test-email"]').type(email)
-        // any known address will trigger a dropdown of suggestions which only get away with a tab key,
-        // but Cypress does not support {tab} yet, so we use an unknown address to test here:
-        cy.get('[data-test-id="test-address"]').type(address);
-        cy.get('[data-test-id="test-city"]').clear().type(city)
-        cy.get('[data-test-id="test-country"]').clear().type(country);
-        cy.get('[data-test-id="test-zipCode"]').clear().type(zipCode)
-        cy.get('[data-test-id="test-continueToPayment"]').click()
-
-    })
-}
-function giftDonationForm() {
-    cy.get('.donations-gift-toggle').click().then(() => {
-        cy.get('[data-test-id="recipientName"]').type('Rishabh')
-        cy.get('[data-test-id="addEmailButton"]').click()
-        cy.get('[data-test-id="giftRecipient"]').type('[email protected]')
-        cy.get('[data-test-id="giftMessage"]').type('This gift is for Peter')
-        cy.get('[data-test-id="giftSubmit"]').click()
-    })
-}
-function cardPayment(cardNumber, cardExpiry, cardCvc) {
-    cy.get('#card-element').within(() => {
-        cy.fillElementsInput('cardNumber', cardNumber);
-        cy.fillElementsInput('cardExpiry', cardExpiry); // MMYY
-        cy.fillElementsInput('cardCvc', cardCvc);
-    });
-    cy.get('[data-test-id="test-donateButton"]').click()
-        .then(() => {
-            cy.wait(8000).then(() => {
-                // cy.get('#test-source-authorize-3ds').click()
-                cy.get('[data-test-id="test-thankYou"]').should("have.text", "Thank you")
-            })
-
-        })
-}
-
-function sofortPayment() {
-    cy.get('[data-test-id="sofortPayment"]').click()
-    cy.get('[data-test-id="sofortDonateContinue"]').click().then(() => {
-        cy.get('.actions').within(() => {
-            cy.get('button').should("have.text", "AUTHORIZE TEST PAYMENT").click().then(() => {
-                cy.should("have.text", "COMPLETING YOUR DONATION")
-            })
-        })
-    })
-}
-
-function supportGift(project = "yucatan", customTrees, firstName, lastName, email, address, city, country, zipCode) {
-    cy.visit({
-        url: `/?to=${project}`,
-        qs: { 's': 'sagar-aryal' }
-    })
-    cy.wait(5000)
-    cy.get('.custom-tree-input').type(customTrees)
-    cy.get('[data-test-id="selectCurrency"]').click().then(() => {
-        cy.get('[data-test-id="country-select"]').clear().type(country)
-    })
-    cy.get('[data-test-id="continue-next"]').click().then(() => {
-        cy.get('[data-test-id="test-firstName"]').type(firstName)
-        cy.get('[data-test-id="test-lastName"]').type(lastName)
-        cy.get('[data-test-id="test-email"]').type(email)
-        // any known address will trigger a dropdown of suggestions which only get away with a tab key,
-        // but Cypress does not support {tab} yet, so we use an unknown address to test here:
-        cy.get('[data-test-id="test-address"]').type(address);
-        cy.get('[data-test-id="test-city"]').clear().type(city)
-        cy.get('[data-test-id="test-country"]').clear().type(country);
-        cy.get('[data-test-id="test-zipCode"]').clear().type(zipCode)
-        cy.get('[data-test-id="test-continueToPayment"]').click()
-
-    })
-}
 describe("Donations", () => {
 
-    it("Testing with Germany address ", () => {
-        createDonation("yucatan", "25", "Peter", "Payer", "[email protected]", "Unbekannt 1", "Uffing am Staffelsee", "Germany{enter}", "82449")
-        cardPayment("4242424242424242", "424", "242")
-    });;
-
-    it("Testing with Support Link ", () => {
-        supportGift("yucatan", "25", "Peter", "Payer", "[email protected]", "Unbekannt 1", "Uffing am Staffelsee", "Germany{enter}", "82449")
-        cardPayment("4242424242424242", "424", "242")
+    it("Testing Germany address ", () => {
+        cy.createDonation("25", "Peter", "Payer", "[email protected]", "Unbekannt 1", "Uffing am Staffelsee", "Germany{enter}", "82449")
+        cy.cardPayment("4242424242424242", "424", "242")
     });
 
+    // it("Testing with Support Link ", () => {
+    //     supportGift("yucatan", "25", "Peter", "Payer", "[email protected]", "Unbekannt 1", "Uffing am Staffelsee", "Germany{enter}", "82449")
+    //     cardPayment("4242424242424242", "424", "242")
+    // });
+
     it("Testing with Gift Donation ", () => {
-        giftDonation("yucatan", "25", "Peter", "Payer", "[email protected]", "Unbekannt 1", "Uffing am Staffelsee", "Germany{enter}", "82449")
-        cardPayment("4242424242424242", "424", "242")
+        cy.giftDonation("25", "Peter", "Payer", "[email protected]", "Unbekannt 1", "Uffing am Staffelsee", "Germany{enter}", "82449")
+        cy.cardPayment("4242424242424242", "424", "242")
     });;
 
     // International Cards
     it("Testing with Germany Visa", () => {
-        createDonation("yucatan", "25", "Peter", "Payer", "[email protected]", "Unbekannt 1", "Uffing am Staffelsee", "Germany{enter}", "82449")
-        cardPayment("4000002760000016", "424", "242")
+        cy.createDonation("25", "Peter", "Payer", "[email protected]", "Unbekannt 1", "Uffing am Staffelsee", "Germany{enter}", "82449")
+        cy.cardPayment("4000002760000016", "424", "242")
     });
 
     it("Testing with Spain Visa", () => {
-        createDonation("yucatan", "25", "Peter", "Payer", "[email protected]", "aunchd", "Montcada i Reixac", "Spain{enter}", "08110")
-        cardPayment("4000007240000007", "424", "242")
+        cy.createDonation("25", "Peter", "Payer", "[email protected]", "aunchd", "Montcada i Reixac", "Spain{enter}", "08110")
+        cy.cardPayment("4000007240000007", "424", "242")
     });
 
     //error testing
     it("Testing with Charge declined error", () => {
-        createDonation("yucatan", "25", "Peter", "Payer", "[email protected]", "aunchd", "Montcada i Reixac", "Spain{enter}", "08110")
-        cardPayment("4000000000000002", "424", "242")
-    });4000000000009995
-    it("Testing with Insufficient funds error", () => {
-        createDonation("yucatan", "25", "Peter", "Payer", "[email protected]", "aunchd", "Montcada i Reixac", "Spain{enter}", "08110")
-        cardPayment("4000000000009995", "424", "242")
+        cy.createDonation("25", "Peter", "Payer", "[email protected]", "aunchd", "Montcada i Reixac", "Spain{enter}", "08110")
+        cy.paymentError("4000000000000002", "424", "242")
     });
-    // To search project
-    it('should search', () => {   
-        cy.visit(`localhost:3000`) 
-        cy.wait(5000)
-        cy.SearchProject('yucatan')
-        cy.get('#yucatan').click()
+    it("Testing with Insufficient funds error", () => {
+        cy.createDonation("25", "Peter", "Payer", "[email protected]", "aunchd", "Montcada i Reixac", "Spain{enter}", "08110")
+        cy.paymentError("4000000000009995", "424", "242")
     });
 
 

cypress/support/commands.js

@@ -119,46 +119,171 @@
 //  });
 
  // Function to search project
-// Cypress.Commands.add('SearchProject', (project) => {
-//     cy.get('#searchProject').type(project)
+Cypress.Commands.add('SearchProject', (project) => {
+    cy.get('#searchProject').type(project)
 
-// })
+})
+
+Cypress.Commands.add('createDonation', (customTrees, firstName, lastName, email, address, city, country, zipCode) => {
+    cy.visit(`localhost:3000`)
+    cy.wait(5000)
+    cy.SearchProject('yucatan')
+    cy.get('#yucatan').click()
+    cy.wait(5000)
+    cy.get('.custom-tree-input').type(customTrees)
+    cy.get('[data-test-id="selectCurrency"]').click().then(() => {
+        cy.get('[data-test-id="country-select"]').clear().type(country)
+    })
+    cy.get('[data-test-id="continue-next"]').click().then(() => {
+        cy.get('[data-test-id="test-firstName"]').type(firstName)
+        cy.get('[data-test-id="test-lastName"]').type(lastName)
+        cy.get('[data-test-id="test-email"]').type(email)
+        // any known address will trigger a dropdown of suggestions which only get away with a tab key,
+        // but Cypress does not support {tab} yet, so we use an unknown address to test here:
+        cy.get('[data-test-id="test-address"]').type(address);
+        cy.get('[data-test-id="test-city"]').clear().type(city)
+        cy.get('[data-test-id="test-country"]').clear().type(country);
+        cy.get('[data-test-id="test-zipCode"]').clear().type(zipCode)
+        cy.get('[data-test-id="test-continueToPayment"]').click()
+
+    })
+
+})
+
+Cypress.Commands.add('giftDonation', ( customTrees, firstName, lastName, email, address, city, country, zipCode) => {
+    cy.visit(`localhost:3000`)
+    cy.wait(5000)
+    cy.SearchProject('yucatan')
+    cy.get('#yucatan').click()
+    cy.giftDonationForm()
+    cy.get('.custom-tree-input').type(customTrees)
+    cy.get('[data-test-id="selectCurrency"]').click().then(() => {
+        cy.get('[data-test-id="country-select"]').clear().type(country)
+    })
+    cy.get('[data-test-id="continue-next"]').click().then(() => {
+        cy.get('[data-test-id="test-firstName"]').type(firstName)
+        cy.get('[data-test-id="test-lastName"]').type(lastName)
+        cy.get('[data-test-id="test-email"]').type(email)
+        // any known address will trigger a dropdown of suggestions which only get away with a tab key,
+        // but Cypress does not support {tab} yet, so we use an unknown address to test here:
+        cy.get('[data-test-id="test-address"]').type(address);
+        cy.get('[data-test-id="test-city"]').clear().type(city)
+        cy.get('[data-test-id="test-country"]').clear().type(country);
+        cy.get('[data-test-id="test-zipCode"]').clear().type(zipCode)
+        cy.get('[data-test-id="test-continueToPayment"]').click()
+
+    })
+})
+Cypress.Commands.add('giftDonationForm',() => {
+    cy.get('.donations-gift-toggle').click().then(() => {
+        cy.get('[data-test-id="recipientName"]').type('Rishabh')
+        cy.get('[data-test-id="addEmailButton"]').click()
+        cy.get('[data-test-id="giftRecipient"]').type('[email protected]')
+        cy.get('[data-test-id="giftMessage"]').type('This gift is for Peter')
+        cy.get('[data-test-id="giftSubmit"]').click()
+    })
+})
 
-Cypress.Commands.add("processStripeSCA", (action) => {
+Cypress.Commands.add('cardPayment', (cardNumber, cardExpiry, cardCvc) => {
+    cy.get('#card-element').within(() => {
+        cy.fillElementsInput('cardNumber', cardNumber);
+        cy.fillElementsInput('cardExpiry', cardExpiry); // MMYY
+        cy.fillElementsInput('cardCvc', cardCvc);
+    });
+    cy.get('[data-test-id="test-donateButton"]').click()
+        .then(() => {
+            cy.wait(8000).then(() => {
+                // cy.get('#test-source-authorize-3ds').click()
+                cy.get('[data-test-id="test-thankYou"]').should("have.text", "Thank you")
+            })
 
+        })
+})  
 
-  //Find the first frame - Named differently each load ( __privateStripeFrameXXXX )
-  cy.get("iframe[name*='__privateStripeFrame62665']")
-      .within(($element) => {
+Cypress.Commands.add('paymentError', (cardNumber, cardExpiry, cardCvc) => {
+    cy.get('#card-element').within(() => {
+        cy.fillElementsInput('cardNumber', cardNumber);
+        cy.fillElementsInput('cardExpiry', cardExpiry); // MMYY
+        cy.fillElementsInput('cardCvc', cardCvc);
+    });
+    cy.get('[data-test-id="test-donateButton"]').click()
+        .then(() => {
+            cy.wait(8000).then(() => {
+                // cy.get('#test-source-authorize-3ds').click()
+                cy.get('[data-test-id="payment-error"]')
+            })
 
-          //Get the body from the first frame
-          const $body = $element.contents().find("body");
-          let topLevel = cy.wrap($body)
+        })
+})  
+Cypress.Commands.add('supportGift', (project = "yucatan", customTrees, firstName, lastName, email, address, city, country, zipCode) => {
+    cy.visit({
+        url: `/?to=${project}`,
+        qs: { 's': 'sagar-aryal' }
+    })
+    cy.wait(5000)
+    cy.get('.custom-tree-input').type(customTrees)
+    cy.get('[data-test-id="selectCurrency"]').click().then(() => {
+        cy.get('[data-test-id="country-select"]').clear().type(country)
+    })
+    cy.get('[data-test-id="continue-next"]').click().then(() => {
+        cy.get('[data-test-id="test-firstName"]').type(firstName)
+        cy.get('[data-test-id="test-lastName"]').type(lastName)
+        cy.get('[data-test-id="test-email"]').type(email)
+        // any known address will trigger a dropdown of suggestions which only get away with a tab key,
+        // but Cypress does not support {tab} yet, so we use an unknown address to test here:
+        cy.get('[data-test-id="test-address"]').type(address);
+        cy.get('[data-test-id="test-city"]').clear().type(city)
+        cy.get('[data-test-id="test-country"]').clear().type(country);
+        cy.get('[data-test-id="test-zipCode"]').clear().type(zipCode)
+        cy.get('[data-test-id="test-continueToPayment"]').click()
 
-          //Find the second frame
-          topLevel.find("iframe[name*='__stripeJSChallengeFrame']")
-              .within(($secondElement) => {
+    })
+})
+// Cypress.Commands.add("processStripeSCA", (action) => {
 
-                  //Get the body from the second frame
-                  const $secondBody = $secondElement.contents().find("body");
-                  let secondLevel = cy.wrap($secondBody)
 
-                  //Find the third frame -  acsFrame
-                  secondLevel.find("iframe[name*='acsFrame']")
+//   //Find the first frame - Named differently each load ( __privateStripeFrameXXXX )
+//   cy.get("iframe[name*='__privateStripeFrame62665']")
+//       .within(($element) => {
 
+//           //Get the body from the first frame
+//           const $body = $element.contents().find("body");
+//           let topLevel = cy.wrap($body)
 
-                      //Scope into the actual modal
-                      .within(($thirdElement) => {
+//           //Find the second frame
+//           topLevel.find("iframe[name*='__stripeJSChallengeFrame']")
+//               .within(($secondElement) => {
 
-                          //Grab the URL of the stripe popup, then have puppeteer browse to it!
-                          cy.task('processSCA', {url: $thirdElement[0]["baseURI"], action: action});
+//                   //Get the body from the second frame
+//                   const $secondBody = $secondElement.contents().find("body");
+//                   let secondLevel = cy.wrap($secondBody)
 
+//                   //Find the third frame -  acsFrame
+//                   secondLevel.find("iframe[name*='acsFrame']")
 
-                      })
 
+//                       //Scope into the actual modal
+//                       .within(($thirdElement) => {
 
-              })
+//                           //Grab the URL of the stripe popup, then have puppeteer browse to it!
+//                           cy.task('processSCA', {url: $thirdElement[0]["baseURI"], action: action});
 
-      })
 
-})
+//                       })
+
+
+//               })
+
+//       })
+
+// })
+// function sofortPayment() {
+//     cy.get('[data-test-id="sofortPayment"]').click()
+//     cy.get('[data-test-id="sofortDonateContinue"]').click().then(() => {
+//         cy.get('.actions').within(() => {
+//             cy.get('button').should("have.text", "AUTHORIZE TEST PAYMENT").click().then(() => {
+//                 cy.should("have.text", "COMPLETING YOUR DONATION")
+//             })
+//         })
+//     })
+// }

next.config.js

@@ -137,6 +137,7 @@ module.exports = withPlugins([[withBundleAnalyzer], [withSourceMaps]], {
   // https://nextjs.org/docs/api-reference/next.config.js/cdn-support-with-asset-prefix
   i18n,
   images: {
-    domains: ["cdn.plant-for-the-planet.org"],
+    domains: ["cdn.plant-for-the-planet.org", "cdn.planetapp.workers.dev"],
+
   },
 });

src/Donations/Components/PaymentsForm.tsx

@@ -236,6 +236,7 @@ function PaymentsForm({}: Props): ReactElement {
               className={
                 "mt-20 d-flex align-items-center callout-danger text-danger"
               }
+              data-test-id="payment-error"
             >
               <InfoIcon />
               {paymentError}