From 068e92fd44b9d80688eb0a8619fc7f8b4c2ca229 Mon Sep 17 00:00:00 2001
From: Cassie Liu <cliu@akamai.com>
Date: Wed, 3 Apr 2024 14:49:11 -0400
Subject: [PATCH 1/2] M3-7797 Add Cypress tests for Account billing drawers

---
 .../billing/restricted-user-billing.spec.ts   | 62 +++++++++++++++++++
 1 file changed, 62 insertions(+)

diff --git a/packages/manager/cypress/e2e/core/billing/restricted-user-billing.spec.ts b/packages/manager/cypress/e2e/core/billing/restricted-user-billing.spec.ts
index c0c349545b2..55566712282 100644
--- a/packages/manager/cypress/e2e/core/billing/restricted-user-billing.spec.ts
+++ b/packages/manager/cypress/e2e/core/billing/restricted-user-billing.spec.ts
@@ -5,6 +5,7 @@
 import { paymentMethodFactory, profileFactory } from '@src/factories';
 import { accountUserFactory } from '@src/factories/accountUsers';
 import { grantsFactory } from '@src/factories/grants';
+import { ADMINISTRATOR, PARENT_USER } from 'src/features/Account/constants';
 import { mockGetPaymentMethods, mockGetUser } from 'support/intercepts/account';
 import {
   mockAppendFeatureFlags,
@@ -173,6 +174,56 @@ const assertAddPaymentMethodEnabled = () => {
     });
 };
 
+/**
+ * Asserts that the "Make a Payment" button is disabled.
+ *
+ * Additionally confirms that clicking the "Make a Payment" button reveals
+ * a tooltip and does not open the "Make a Payment" drawer.
+ *
+ * @param tooltipText - Expected tooltip message to be shown to the user.
+ */
+const assertMakeAPaymentDisabled = (tooltipText: string) => {
+  // Confirm "Make A Payment" button is disabled, then click it.
+  ui.button
+    .findByTitle('Make a Payment')
+    .should('be.visible')
+    .should('be.disabled')
+    .click();
+
+  // Assert that "Make a Payment" drawer does not open and that tooltip is revealed.
+  cy.get(`[data-qa-drawer-title="Make a Payment"]`).should('not.exist');
+  ui.tooltip.findByText(tooltipText).should('be.visible');
+};
+
+/**
+ * Asserts that the "Make a Payment" button is enabled.
+ *
+ * Additionally confirms that clicking the "Make a Payment" button reveals
+ * a tooltip and does not open the "Make a Payment" drawer.
+ *
+ * @param tooltipText - Expected tooltip message to be shown to the user.
+ */
+const assertMakeAPaymentEnabled = () => {
+  // Confirm "Make A Payment" button is enabled, then click it.
+  ui.button
+    .findByTitle('Make a Payment')
+    .should('be.visible')
+    .should('be.enabled')
+    .click();
+
+  cy.get(`[data-qa-drawer-title="Make a Payment"]`).should('be.visible');
+  ui.drawer
+    .findByTitle('Make a Payment')
+    .should('be.visible')
+    .within(() => {
+      ui.button
+        .findByTitle('Pay Now')
+        .should('be.visible')
+        .should('be.enabled');
+      ui.drawerCloseButton.find().click();
+    });
+};
+
 describe('restricted user billing flows', () => {
   beforeEach(() => {
     mockGetPaymentMethods(mockPaymentMethods);
@@ -215,6 +266,7 @@ describe('restricted user billing flows', () => {
       cy.visitWithLogin('/account/billing');
       assertEditBillingInfoEnabled();
       assertAddPaymentMethodEnabled();
+      assertMakeAPaymentEnabled();
     });
   });
 
@@ -261,6 +313,10 @@ describe('restricted user billing flows', () => {
 
       assertEditBillingInfoDisabled(restrictedUserTooltip);
       assertAddPaymentMethodDisabled(restrictedUserTooltip);
+      assertMakeAPaymentDisabled(
+        restrictedUserTooltip +
+          ` Please contact your ${ADMINISTRATOR} to request the necessary permissions.`
+      );
     });
 
     /*
@@ -287,6 +343,10 @@ describe('restricted user billing flows', () => {
 
       assertEditBillingInfoDisabled(restrictedUserTooltip);
       assertAddPaymentMethodDisabled(restrictedUserTooltip);
+      assertMakeAPaymentDisabled(
+        restrictedUserTooltip +
+          ` Please contact your ${PARENT_USER} to request the necessary permissions.`
+      );
     });
 
     /*
@@ -323,6 +383,7 @@ describe('restricted user billing flows', () => {
       cy.findByText(mockProfileRegular.username);
       assertEditBillingInfoEnabled();
       assertAddPaymentMethodEnabled();
+      assertMakeAPaymentEnabled();
 
       // Confirm button behavior for parent users.
       mockGetProfile(mockProfileParent);
@@ -331,6 +392,7 @@ describe('restricted user billing flows', () => {
       cy.findByText(mockProfileParent.username);
       assertEditBillingInfoEnabled();
       assertAddPaymentMethodEnabled();
+      assertMakeAPaymentEnabled();
     });
   });
 });

From 5b2d2051a0fac25daa9a70270ed61c62f366fbea Mon Sep 17 00:00:00 2001
From: Cassie Liu <cliu@akamai.com>
Date: Thu, 4 Apr 2024 14:03:35 -0400
Subject: [PATCH 2/2] Added changeset: Add Cypress tests for Account billing
 drawers

---
 packages/manager/.changeset/pr-10349-tests-1712253815522.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 packages/manager/.changeset/pr-10349-tests-1712253815522.md

diff --git a/packages/manager/.changeset/pr-10349-tests-1712253815522.md b/packages/manager/.changeset/pr-10349-tests-1712253815522.md
new file mode 100644
index 00000000000..8148ff0d4e4
--- /dev/null
+++ b/packages/manager/.changeset/pr-10349-tests-1712253815522.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Add Cypress tests for Account billing drawers ([#10349](https://github.com/linode/manager/pull/10349))