From bac2ead7aae28db1cd0adaf455150a41dcf27e15 Mon Sep 17 00:00:00 2001 From: Andrew Snaith Date: Fri, 11 Feb 2022 06:55:20 -0800 Subject: [PATCH] Add ui test for crypto payment flow initiation and return (#1933) * add new ui tests for annual and monthly billing options * add new element identifiers for downgrade details modal * add test to downgrade subscription plan * address pr feedback * add test for returning to pay crypto invoice * fix misc mistakes * re-add accidentally removed test steps * Apply suggestions from code review * lingui extract Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> Co-authored-by: GitHub Actions --- .../page-objects/billingHistoryPage.ts | 4 +- .../modals/billing/cryptoPaymentModal.ts | 24 +++++++ .../billing/planChangeConfirmationModal.ts | 9 ++- .../support/page-objects/settingsPage.ts | 3 + .../cypress/tests/subscription-plan-spec.ts | 67 ++++++++++++++++++- .../SubscriptionTab/BillingHistory.tsx | 5 +- .../SubscriptionTab/Common/ConfirmPlan.tsx | 5 +- .../SubscriptionTab/Common/CryptoPayment.tsx | 56 ++++++++++++---- .../PayInvoice/PayInvoiceModal.tsx | 2 +- packages/files-ui/src/locales/de/messages.po | 3 + packages/files-ui/src/locales/en/messages.po | 3 + packages/files-ui/src/locales/es/messages.po | 3 + packages/files-ui/src/locales/fr/messages.po | 3 + packages/files-ui/src/locales/no/messages.po | 3 + 14 files changed, 167 insertions(+), 23 deletions(-) create mode 100644 packages/files-ui/cypress/support/page-objects/modals/billing/cryptoPaymentModal.ts diff --git a/packages/files-ui/cypress/support/page-objects/billingHistoryPage.ts b/packages/files-ui/cypress/support/page-objects/billingHistoryPage.ts index 54baba4cff..cc14fbddb3 100644 --- a/packages/files-ui/cypress/support/page-objects/billingHistoryPage.ts +++ b/packages/files-ui/cypress/support/page-objects/billingHistoryPage.ts @@ -3,6 +3,6 @@ import { basePage } from "./basePage" export const billingHistoryPage = { ...basePage, billingHistoryHeader: () => cy.get("[data-cy=header-billing-history]"), - downloadInvoiceButton: () => cy.get("[data-testid=button-download-invoice]"), - payInvoiceButton: () => cy.get("[data-testid=button-pay-invoice]") + viewPdfButton: () => cy.get("[data-testid=button-download-invoice]"), + payNowButton: () => cy.get("[data-testid=button-pay-invoice]") } \ No newline at end of file diff --git a/packages/files-ui/cypress/support/page-objects/modals/billing/cryptoPaymentModal.ts b/packages/files-ui/cypress/support/page-objects/modals/billing/cryptoPaymentModal.ts new file mode 100644 index 0000000000..520846dc58 --- /dev/null +++ b/packages/files-ui/cypress/support/page-objects/modals/billing/cryptoPaymentModal.ts @@ -0,0 +1,24 @@ +export const cryptoPaymentModal = { + body: () => cy.get("[data-testid=modal-container-cryptoPayment]", { timeout: 10000 }), + closeButton: () => cy.get("[data-testid=button-close-modal-cryptoPayment]"), + payWithCryptoHeader: () => cy.get("[data-cy=header-pay-with-crypto]"), + cryptoPaymentTimer: () => cy.get("[data-cy=container-crypto-time-remaining]"), + totalLabel: () => cy.get("[data-cy=label-total-crypto-title]", { timeout: 10000 }), + totalPriceLabel: () => cy.get("[data-cy=label-total-crypto-price]"), + crypoPaymentErrorLabel: () => cy.get("[data-cy=label-crypto-payment-error]"), + selectCryptocurrencyLabel: () => cy.get("[data-cy=label-select-cryptocurrency]"), + cryptoPaymentButton: () => cy.get("[data-cy=container-crypto-payment-option]"), + + // elements below only shown after crypto payment button has been clicked + receivingQrCodeContainer: () => cy.get("[data-cy=container-qr-code]"), + currencyTypeWarning: () => cy.get("[data-cy=label-currency-type-warning]"), + destinationAddressLabelTitle: () => cy.get("[data-cy=label-destination-address-title]"), + destinationAddressLabel: () => cy.get("[data-cy=label-destination-address]"), + cryptoAmountTitleLabel: () => cy.get("[data-cy=label-crypto-amount-title]"), + cryptoAmountLabel: () => cy.get("[data-cy=label-crypto-amount]"), + crypoFinalSaleWarningLabel: () => cy.get("[data-cy=label-crypto-final-sale-warning]"), + goBackButton: () => cy.get("[data-testid=button-go-back-to-crypto-selection]"), + switchNetworkButton: () => cy.get("[data-testid=button-switch-network]"), + connectWalletButton: () => cy.get("[data-testid=button-connect-wallet]") +} + diff --git a/packages/files-ui/cypress/support/page-objects/modals/billing/planChangeConfirmationModal.ts b/packages/files-ui/cypress/support/page-objects/modals/billing/planChangeConfirmationModal.ts index 087b584d5a..8024b834d0 100644 --- a/packages/files-ui/cypress/support/page-objects/modals/billing/planChangeConfirmationModal.ts +++ b/packages/files-ui/cypress/support/page-objects/modals/billing/planChangeConfirmationModal.ts @@ -13,7 +13,12 @@ export const planChangeConfirmationModal = { totalLabel: () => cy.get("[data-cy=label-total-title]"), totalPriceLabel: () => cy.get("[data-cy=label-total-price]"), changePlanErrorLabel: () => cy.get("[data-cy=label-change-plan-error]"), - planPaymentWarningLabel: () => cy.get("[data-cy=label-change-plan-payment-warning]"), goBackButton: () => cy.get("[data-testid=button-go-back-to-payment-method]"), - confirmPlanChangeButton: () => cy.get("[data-testid=button-confirm-plan-change]") + confirmPlanChangeButton: () => cy.get("[data-testid=button-confirm-plan-change]"), + finalSaleWarningLabel: () => cy.get("[data-cy=label-final-sale-warning]"), + + // elements are only displayed if the payment type is crypto + payWithCryptoLabel: () => cy.get("[data-cy=label-pay-with-crypto]"), + acceptedCurrenciesLabel: () => cy.get("[data-cy=label-accepted-currencies]"), + acceptedCryptoTypes: () => cy.get("[data-cy=label-accepted-crypto-types]") } \ No newline at end of file diff --git a/packages/files-ui/cypress/support/page-objects/settingsPage.ts b/packages/files-ui/cypress/support/page-objects/settingsPage.ts index 2cab1390dc..3ef3ef642c 100644 --- a/packages/files-ui/cypress/support/page-objects/settingsPage.ts +++ b/packages/files-ui/cypress/support/page-objects/settingsPage.ts @@ -35,6 +35,9 @@ export const settingsPage = { noCardLabel: () => cy.get("[data-cy=label-no-card]"), removeCardLink: () => cy.get("[data-cy=link-remove-card]"), changePlanButton: () => cy.get("[data-cy=button-change-plan]", { timeout: 10000 }), + allInvoicesLink: () => cy.get("[data-cy=link-all-invoices]"), + viewPdfButton: () => cy.get("[data-testid=button-download-invoice]"), + payNowButton: () => cy.get("[data-testid=button-pay-invoice]"), // use this convenience function when an upgraded account is required as a test requisite upgradeSubscription(plan: "standard" | "premium") { diff --git a/packages/files-ui/cypress/tests/subscription-plan-spec.ts b/packages/files-ui/cypress/tests/subscription-plan-spec.ts index 8bf8ef5aac..4a35dfc872 100644 --- a/packages/files-ui/cypress/tests/subscription-plan-spec.ts +++ b/packages/files-ui/cypress/tests/subscription-plan-spec.ts @@ -14,6 +14,7 @@ import { planChangeConfirmationModal } from "../support/page-objects/modals/bill import { planChangeSuccessModal } from "../support/page-objects/modals/billing/planChangeSuccessModal" import { billingHistoryPage } from "../support/page-objects/billingHistoryPage" import { downgradeDetailsModal } from "../support/page-objects/modals/billing/downgradeDetailsModal" +import { cryptoPaymentModal } from "../support/page-objects/modals/billing/cryptoPaymentModal" describe("Subscription Plan", () => { @@ -326,7 +327,7 @@ describe("Subscription Plan", () => { planChangeConfirmationModal.billingStartDate().should("be.visible") planChangeConfirmationModal.totalLabel().should("be.visible") planChangeConfirmationModal.totalPriceLabel().should("be.visible") - planChangeConfirmationModal.planPaymentWarningLabel().should("be.visible") + planChangeConfirmationModal.finalSaleWarningLabel().should("be.visible") planChangeConfirmationModal.goBackButton().should("be.visible") planChangeConfirmationModal.confirmPlanChangeButton().should("be.visible") @@ -356,7 +357,7 @@ describe("Subscription Plan", () => { expect($request).to.be.null }) - billingHistoryPage.downloadInvoiceButton().first().click() + billingHistoryPage.viewPdfButton().first().click() // ensure the download request contains pdf content cy.wait("@downloadRequest").its("response.headers").should("contain", { @@ -459,5 +460,67 @@ describe("Subscription Plan", () => { cy.get("@freePlanName").should("not.equal", $standardPlanName) }) }) + + it("can initiate and return to a crypto payment flow within 60 minutes", () => { + cy.web3Login({ deleteCreditCard: true, resetToFreePlan: true }) + navigationMenu.settingsNavButton().click() + settingsPage.subscriptionTabButton().click() + settingsPage.changePlanButton().click() + selectPlanModal.createPlanCypressAliases() + cy.get("@standardPlanBox").parent().within(() => { + selectPlanModal.selectPlanButton().click() + }) + + // choose crypto as payment type + planDetailsModal.durationToggleSwitch().click() + planDetailsModal.selectThisPlanButton().click() + selectPaymentMethodModal.cryptoRadioInput() + .should("be.visible") + .click() + selectPaymentMethodModal.selectPaymentButton().click() + + // ensure crypto payment specific elements are displayed + planChangeConfirmationModal.body().should("be.visible") + planChangeConfirmationModal.payWithCryptoLabel().should("be.visible") + planChangeConfirmationModal.acceptedCurrenciesLabel().should("be.visible") + planChangeConfirmationModal.acceptedCryptoTypes().should("be.visible") + planChangeConfirmationModal.finalSaleWarningLabel().should("be.visible") + planChangeConfirmationModal.confirmPlanChangeButton().click() + + // ensure default crypto elements are displayed + cryptoPaymentModal.body().should("be.visible") + cryptoPaymentModal.payWithCryptoHeader().should("be.visible") + cryptoPaymentModal.totalLabel().should("be.visible") + cryptoPaymentModal.cryptoPaymentTimer().should("be.visible") + cryptoPaymentModal.totalPriceLabel().should("be.visible") + cryptoPaymentModal.selectCryptocurrencyLabel().should("be.visible") + + // choose a crypto currency + cryptoPaymentModal.cryptoPaymentButton().contains("Ethereum").click() + + // ensure additional modal elements are displayed after crypto type is selected + cryptoPaymentModal.receivingQrCodeContainer().should("be.visible") + cryptoPaymentModal.currencyTypeWarning().should("be.visible") + cryptoPaymentModal.destinationAddressLabelTitle().should("be.visible") + cryptoPaymentModal.destinationAddressLabel().should("be.visible") + cryptoPaymentModal.cryptoAmountTitleLabel().should("be.visible") + cryptoPaymentModal.cryptoAmountLabel().should("be.visible") + cryptoPaymentModal.crypoFinalSaleWarningLabel().should("be.visible") + cryptoPaymentModal.goBackButton().should("be.visible") + cryptoPaymentModal.connectWalletButton().should("be.visible") + + // close modal, ensure we can return to flow via "pay now" on settings page + cryptoPaymentModal.closeButton().click() + cryptoPaymentModal.body().should("not.exist") + settingsPage.payNowButton().click() + cryptoPaymentModal.body().should("be.visible") + + // close modal, ensure we can return to flow via "pay now" on billing history page + cryptoPaymentModal.closeButton().click() + cryptoPaymentModal.body().should("not.exist") + settingsPage.allInvoicesLink().click() + billingHistoryPage.payNowButton().click() + cryptoPaymentModal.body().should("be.visible") + }) }) }) \ No newline at end of file diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/BillingHistory.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/BillingHistory.tsx index a2f78d2f55..cda0540d37 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/BillingHistory.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/BillingHistory.tsx @@ -48,7 +48,10 @@ const BillingHistory = () => { component="p" className={classes.link} > - + All invoices diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/Common/ConfirmPlan.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/Common/ConfirmPlan.tsx index c848028c4b..90f893c60c 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/Common/ConfirmPlan.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/Common/ConfirmPlan.tsx @@ -226,6 +226,7 @@ const ConfirmPlan = ({ Pay with Crypto @@ -247,6 +248,7 @@ const ConfirmPlan = ({ Accepted currencies @@ -254,6 +256,7 @@ const ConfirmPlan = ({ DAI, USDC, ETH or BTC @@ -308,7 +311,7 @@ const ConfirmPlan = ({ variant="body1" component="p" className={classes.warningText} - data-cy="label-change-plan-payment-warning" + data-cy="label-final-sale-warning" > {paymentMethod === "crypto" diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/Common/CryptoPayment.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/Common/CryptoPayment.tsx index e737eb6ff9..a02627f161 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/Common/CryptoPayment.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/Common/CryptoPayment.tsx @@ -368,15 +368,20 @@ const CryptoPayment = ({ planPrice }: ICryptoPayment) => { variant="h5" component="h4" className={classes.heading} + data-cy="header-pay-with-crypto" > Pay with crypto - {cryptoPayment &&
+ {cryptoPayment &&
}
@@ -388,6 +393,7 @@ const CryptoPayment = ({ planPrice }: ICryptoPayment) => { component="p" variant="body1" className={classes.error} + data-cy="label-crypto-payment-error" > Failed to create a charge @@ -395,9 +401,11 @@ const CryptoPayment = ({ planPrice }: ICryptoPayment) => { {cryptoPayment && pendingCryptoInvoice && <>
- Total + + Total +
- + {pendingCryptoInvoice.currency?.toUpperCase()} {pendingCryptoInvoice.amount}
@@ -405,8 +413,12 @@ const CryptoPayment = ({ planPrice }: ICryptoPayment) => { {!selectedCurrency && currencies && <> - Select a cryptocurrency -
+ + Select a cryptocurrency + +
{currencies.map(c => { const CurrencyIcon = iconMap[c] || null return } {selectedCurrency && selectedCurrency !== "bitcoin" && !isReady && - + } {selectedCurrency && selectedCurrency !== "bitcoin" && isReady && network !== 1 && - } diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/PayInvoice/PayInvoiceModal.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/PayInvoice/PayInvoiceModal.tsx index bf35e8bb66..5e2bb6f075 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/PayInvoice/PayInvoiceModal.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/PayInvoice/PayInvoiceModal.tsx @@ -68,7 +68,7 @@ const PayInvoiceModal = ({ onClose, invoiceId }: IChangeProductModal) => { injectedClass={{ inner: classes.inner }} - testId="pay-invoice" + testId="cryptoPayment" onClose={onClose} > {invoiceToPay?.payment_method === "crypto" diff --git a/packages/files-ui/src/locales/de/messages.po b/packages/files-ui/src/locales/de/messages.po index 511a2078e9..ea47b97579 100644 --- a/packages/files-ui/src/locales/de/messages.po +++ b/packages/files-ui/src/locales/de/messages.po @@ -796,6 +796,9 @@ msgstr "Sicherheit" msgid "See payment info" msgstr "" +msgid "Select a cryptocurrency" +msgstr "" + msgid "Select a wallet" msgstr "" diff --git a/packages/files-ui/src/locales/en/messages.po b/packages/files-ui/src/locales/en/messages.po index 71356cb6a8..b6dd25cacb 100644 --- a/packages/files-ui/src/locales/en/messages.po +++ b/packages/files-ui/src/locales/en/messages.po @@ -799,6 +799,9 @@ msgstr "Security" msgid "See payment info" msgstr "See payment info" +msgid "Select a cryptocurrency" +msgstr "Select a cryptocurrency" + msgid "Select a wallet" msgstr "Select a wallet" diff --git a/packages/files-ui/src/locales/es/messages.po b/packages/files-ui/src/locales/es/messages.po index adcbc9f496..292e0e3db6 100644 --- a/packages/files-ui/src/locales/es/messages.po +++ b/packages/files-ui/src/locales/es/messages.po @@ -800,6 +800,9 @@ msgstr "Seguridad" msgid "See payment info" msgstr "" +msgid "Select a cryptocurrency" +msgstr "" + msgid "Select a wallet" msgstr "Seleccione una billetera" diff --git a/packages/files-ui/src/locales/fr/messages.po b/packages/files-ui/src/locales/fr/messages.po index 5451345766..e141698f4d 100644 --- a/packages/files-ui/src/locales/fr/messages.po +++ b/packages/files-ui/src/locales/fr/messages.po @@ -800,6 +800,9 @@ msgstr "Sécurité" msgid "See payment info" msgstr "Voir les détails du paiement" +msgid "Select a cryptocurrency" +msgstr "" + msgid "Select a wallet" msgstr "Sélectionner un wallet" diff --git a/packages/files-ui/src/locales/no/messages.po b/packages/files-ui/src/locales/no/messages.po index 79475b1ce6..3ee2b63cd3 100644 --- a/packages/files-ui/src/locales/no/messages.po +++ b/packages/files-ui/src/locales/no/messages.po @@ -796,6 +796,9 @@ msgstr "" msgid "See payment info" msgstr "" +msgid "Select a cryptocurrency" +msgstr "" + msgid "Select a wallet" msgstr ""