From b5b8829aec761413b4cdaebca406b6c9e5a32a7d Mon Sep 17 00:00:00 2001
From: Andrew Snaith <andrew@chainsafe.io>
Date: Wed, 19 Jan 2022 13:39:18 -0800
Subject: [PATCH 1/2] add new test for invalid card details

---
 packages/files-ui/cypress/fixtures/cardData.ts               | 5 ++++-
 .../Modules/Settings/SubscriptionTab/AddCard/AddCard.tsx     | 1 +
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/files-ui/cypress/fixtures/cardData.ts b/packages/files-ui/cypress/fixtures/cardData.ts
index 68ac61de49..6e012c8cc3 100644
--- a/packages/files-ui/cypress/fixtures/cardData.ts
+++ b/packages/files-ui/cypress/fixtures/cardData.ts
@@ -3,4 +3,7 @@ export const visaCvc = "123"
 export const visaExpiry = "12/30"
 export const mastercardNumber = "5555555555554444"
 export const mastercardCvc = "456"
-export const mastercardExpiry = "01/31"
\ No newline at end of file
+export const mastercardExpiry = "01/31"
+export const invalidCardNumber = "6242424242424255"
+export const invalidCvc = "11"
+export const invalidExpiry = "02/21"
\ No newline at end of file
diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCard/AddCard.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCard/AddCard.tsx
index 534af53afa..c8f3717925 100644
--- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCard/AddCard.tsx
+++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCard/AddCard.tsx
@@ -204,6 +204,7 @@ const AddCard = ({ onClose, onCardAdd, footerClassName, submitText, goBack }: IA
           component="p"
           variant="body1"
           className={classes.error}
+          data-cy="label-add-card-error"
         >
           {cardAddError}
         </Typography>

From 7e3d33e04965f43f8900f83d2238145118888694 Mon Sep 17 00:00:00 2001
From: Andrew Snaith <andrew@chainsafe.io>
Date: Wed, 19 Jan 2022 13:43:13 -0800
Subject: [PATCH 2/2] add spec file changes

---
 .../cypress/tests/subscription-plan-spec.ts   | 57 +++++++++++++++++++
 1 file changed, 57 insertions(+)

diff --git a/packages/files-ui/cypress/tests/subscription-plan-spec.ts b/packages/files-ui/cypress/tests/subscription-plan-spec.ts
index c33bc4b7c4..64af07d178 100644
--- a/packages/files-ui/cypress/tests/subscription-plan-spec.ts
+++ b/packages/files-ui/cypress/tests/subscription-plan-spec.ts
@@ -1,6 +1,7 @@
 import { navigationMenu } from "../support/page-objects/navigationMenu"
 import { settingsPage } from "../support/page-objects/settingsPage"
 import { addOrUpdateCardModal } from "../support/page-objects/modals/addOrUpdateCardModal"
+import { invalidCardNumber, invalidExpiry, invalidCvc } from "../fixtures/cardData"
 import { visaNumber, visaExpiry, visaCvc } from "../fixtures/cardData"
 import { mastercardNumber, mastercardExpiry, mastercardCvc } from "../fixtures/cardData"
 import { cardAddedToast } from "../support/page-objects/toasts/cardAddedToast"
@@ -80,6 +81,62 @@ describe("Subscription Plan", () => {
       settingsPage.addCardButton().should("be.visible")
     })
 
+    it("can not add an invalid card to the profile", () => {
+      cy.web3Login({ deleteCreditCard: true })
+
+      // navigate to settings
+      navigationMenu.settingsNavButton().click()
+      settingsPage.subscriptionTabButton().click()
+
+      // attempt to add card with invalid number
+      settingsPage.addCardButton()
+        .should("be.visible")
+        .click()
+      addOrUpdateCardModal.body().should("be.visible")
+      addOrUpdateCardModal.addCardHeader().should("be.visible")
+      addOrUpdateCardModal.awaitStripeElementReady()
+      addOrUpdateCardModal.cardNumberInput().type(invalidCardNumber)
+      addOrUpdateCardModal.expiryDateInput().type(visaExpiry)
+      addOrUpdateCardModal.cvcNumberInput().type(visaCvc)
+      addOrUpdateCardModal.addCardButton().click()
+
+      // ensure error is displayed and modal remains in view
+      addOrUpdateCardModal.cardErrorLabel().should("be.visible")
+      addOrUpdateCardModal.body().should("be.visible")
+
+      // attempt to add card with invalid expiry
+      addOrUpdateCardModal.cardNumberInput()
+        .type("{selectall}{del}")
+        .type(visaNumber)
+      addOrUpdateCardModal.expiryDateInput()
+        .type("{selectall}{del}")
+        .type(invalidExpiry)
+      addOrUpdateCardModal.cvcNumberInput()
+        .type("{selectall}{del}")
+        .type(visaCvc)
+      addOrUpdateCardModal.addCardButton().click()
+
+      // ensure error is displayed and modal remains in view
+      addOrUpdateCardModal.cardErrorLabel().should("be.visible")
+      addOrUpdateCardModal.body().should("be.visible")
+
+      // attempt to add card with invalid cvc
+      addOrUpdateCardModal.cardNumberInput()
+        .type("{selectall}{del}")
+        .type(visaNumber)
+      addOrUpdateCardModal.expiryDateInput()
+        .type("{selectall}{del}")
+        .type(visaExpiry)
+      addOrUpdateCardModal.cvcNumberInput()
+        .type("{selectall}{del}")
+        .type(invalidCvc)
+      addOrUpdateCardModal.addCardButton().click()
+
+      // ensure error is displayed and modal remains in view
+      addOrUpdateCardModal.cardErrorLabel().should("be.visible")
+      addOrUpdateCardModal.body().should("be.visible")
+    })
+
     it("can select a subscription plan and view plan details", () => {
       cy.web3Login()