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}