Add ui test for downgrade plan selection (#1958)

* add new test for downgrade plan selection

* Remove unnecessary stub as per PR feedback

Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>

Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
Co-authored-by: Michael Yankelev <12774278+FSM1@users.noreply.github.com>

packages/files-ui/cypress/support/page-objects/modals/billing/selectPlanModal.ts

@@ -1,5 +1,6 @@
 export const selectPlanModal = {
   body: () => cy.get("[data-testid=modal-container-select]", { timeout: 10000 }),
+  closeButton: () => cy.get("[data-testid=button-close-modal-container-select]"),
   planBoxContainer: () => cy.get("[data-cy=container-plan-box]", { timeout: 10000 }),
   switchPlanHeader: () => cy.get("[data-cy=header-switch-plan]"),
   selectPlanButton: () => cy.get("[data-testid=button-select-plan]"),

packages/files-ui/cypress/tests/subscription-plan-spec.ts

@@ -214,6 +214,33 @@ describe("Subscription Plan", () => {
       selectPlanModal.body().should("be.visible")
     })
 
+    it("cannot downgrade if used storage exceeds plan allowance", () => {
+      cy.web3Login({ deleteCreditCard: true, resetToFreePlan: true })
+
+      // upgrade to a premium plan first
+      navigationMenu.settingsNavButton().click()
+      settingsPage.upgradeSubscription("premium")
+
+      // setup intercepter, stub the used products response to disallow update
+      cy.intercept("GET", "**/billing/products", (req) => {
+        req.on("response", (res) => {
+          res.body = [{ "prices": [{ "is_update_allowed": false }] }]
+        })
+      })
+
+      settingsPage.changePlanButton().click()
+      selectPlanModal.body().should("be.visible")
+      selectPlanModal.planBoxContainer().should("have.length.greaterThan", 0)
+
+      // ensure warning is shown and the free plan is not selectable
+      cy.get("@freePlanBox").parent().within(() => {
+        selectPlanModal.storageCapacityWarningLabel().should("be.visible")
+        selectPlanModal.selectPlanButton()
+          .should("be.visible")
+          .should("be.disabled")
+      })
+    })
+
     it("can toggle between monthly and annual billing price", () => {
       cy.web3Login({ deleteCreditCard: true, resetToFreePlan: true })
       navigationMenu.settingsNavButton().click()