diff --git a/.vscode/tasks.json b/.vscode/tasks.json
new file mode 100644
index 00000000..91167a21
--- /dev/null
+++ b/.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"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/cypress/integration/donations.spec.js b/cypress/integration/donations.spec.js
index ba8de847..11a48a9e 100644
--- a/cypress/integration/donations.spec.js
+++ b/cypress/integration/donations.spec.js
@@ -1,149 +1,41 @@
///
-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('peter.payer@gmail.com')
- 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", "peter.payer@gmail.com", "Unbekannt 1", "Uffing am Staffelsee", "Germany{enter}", "82449")
- cardPayment("4242424242424242", "424", "242")
- });;
-
- it("Testing with Support Link ", () => {
- supportGift("yucatan", "25", "Peter", "Payer", "peter.payer@gmail.com", "Unbekannt 1", "Uffing am Staffelsee", "Germany{enter}", "82449")
- cardPayment("4242424242424242", "424", "242")
+ it("Testing Germany address ", () => {
+ cy.createDonation("25", "Peter", "Payer", "peter.payer@gmail.com", "Unbekannt 1", "Uffing am Staffelsee", "Germany{enter}", "82449")
+ cy.cardPayment("4242424242424242", "424", "242")
});
+ // it("Testing with Support Link ", () => {
+ // supportGift("yucatan", "25", "Peter", "Payer", "peter.payer@gmail.com", "Unbekannt 1", "Uffing am Staffelsee", "Germany{enter}", "82449")
+ // cardPayment("4242424242424242", "424", "242")
+ // });
+
it("Testing with Gift Donation ", () => {
- giftDonation("yucatan", "25", "Peter", "Payer", "peter.payer@gmail.com", "Unbekannt 1", "Uffing am Staffelsee", "Germany{enter}", "82449")
- cardPayment("4242424242424242", "424", "242")
+ cy.giftDonation("25", "Peter", "Payer", "peter.payer@gmail.com", "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", "peter.payer@gmail.com", "Unbekannt 1", "Uffing am Staffelsee", "Germany{enter}", "82449")
- cardPayment("4000002760000016", "424", "242")
+ cy.createDonation("25", "Peter", "Payer", "peter.payer@gmail.com", "Unbekannt 1", "Uffing am Staffelsee", "Germany{enter}", "82449")
+ cy.cardPayment("4000002760000016", "424", "242")
});
it("Testing with Spain Visa", () => {
- createDonation("yucatan", "25", "Peter", "Payer", "peter.payer@gmail.com", "aunchd", "Montcada i Reixac", "Spain{enter}", "08110")
- cardPayment("4000007240000007", "424", "242")
+ cy.createDonation("25", "Peter", "Payer", "peter.payer@gmail.com", "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", "peter.payer@gmail.com", "aunchd", "Montcada i Reixac", "Spain{enter}", "08110")
- cardPayment("4000000000000002", "424", "242")
- });4000000000009995
- it("Testing with Insufficient funds error", () => {
- createDonation("yucatan", "25", "Peter", "Payer", "peter.payer@gmail.com", "aunchd", "Montcada i Reixac", "Spain{enter}", "08110")
- cardPayment("4000000000009995", "424", "242")
+ cy.createDonation("25", "Peter", "Payer", "peter.payer@gmail.com", "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", "peter.payer@gmail.com", "aunchd", "Montcada i Reixac", "Spain{enter}", "08110")
+ cy.paymentError("4000000000009995", "424", "242")
});
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index 823acb83..9dac66f6 100644
--- a/cypress/support/commands.js
+++ b/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('peter.payer@gmail.com')
+ 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});
- })
-})
\ No newline at end of file
+// })
+
+
+// })
+
+// })
+
+// })
+// 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")
+// })
+// })
+// })
+// }
\ No newline at end of file
diff --git a/next.config.js b/next.config.js
index 91961181..812f3bf8 100644
--- a/next.config.js
+++ b/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"],
+
},
});
diff --git a/src/Donations/Components/PaymentsForm.tsx b/src/Donations/Components/PaymentsForm.tsx
index ac9d1870..8eb39454 100644
--- a/src/Donations/Components/PaymentsForm.tsx
+++ b/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"
>
{paymentError}