test: [M3-7737] - Resolve Billing Contact Cypress failure (#10150)

* Resolve failure by narrowing text selection to billing contact section and drawer
linode · Feb 6, 2024 · 418f4f6 · 418f4f6
1 parent a381824
commit 418f4f6
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 62 deletions.
diff --git a/packages/manager/.changeset/pr-10150-tests-1707236804326.md b/packages/manager/.changeset/pr-10150-tests-1707236804326.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Fix billing contact Cypress test by narrowing element selection scope ([#10150](https://github.com/linode/manager/pull/10150))
diff --git a/packages/manager/cypress/e2e/core/billing/billing-contact.spec.ts b/packages/manager/cypress/e2e/core/billing/billing-contact.spec.ts
@@ -1,6 +1,7 @@
 import { mockGetAccount, mockUpdateAccount } from 'support/intercepts/account';
 import { accountFactory } from 'src/factories/account';
 import type { Account } from '@linode/api-v4';
+import { ui } from 'support/ui';
 
 /* eslint-disable sonarjs/no-duplicate-string */
 const accountData = accountFactory.build({
@@ -66,75 +67,82 @@ describe('Billing Contact', () => {
     // mock the user's account data and confirm that it is displayed correctly upon page load
     mockGetAccount(accountData).as('getAccount');
     cy.visitWithLogin('/account/billing');
-    checkAccountContactDisplay(accountData);
 
     // edit the billing contact information
     mockUpdateAccount(newAccountData).as('updateAccount');
     cy.get('[data-qa-contact-summary]').within((_contact) => {
+      checkAccountContactDisplay(accountData);
       cy.findByText('Edit').should('be.visible').click();
     });
-    // check drawer is visible
-    cy.findByLabelText('First Name')
-      .should('be.visible')
-      .click()
-      .clear()
-      .type(newAccountData['first_name']);
-    cy.findByLabelText('Last Name')
-      .should('be.visible')
-      .click()
-      .clear()
-      .type(newAccountData['last_name']);
-    cy.findByLabelText('Company Name')
-      .should('be.visible')
-      .click()
-      .clear()
-      .type(newAccountData['company']);
-    cy.findByLabelText('Address')
-      .should('be.visible')
-      .click()
-      .clear()
-      .type(newAccountData['address_1']);
-    cy.findByLabelText('Address 2')
-      .should('be.visible')
-      .click()
-      .clear()
-      .type(newAccountData['address_2']);
-    cy.findByLabelText('Email (required)')
-      .should('be.visible')
-      .click()
-      .clear()
-      .type(newAccountData['email']);
-    cy.findByLabelText('City')
-      .should('be.visible')
-      .click()
-      .clear()
-      .type(newAccountData['city']);
-    cy.findByLabelText('Postal Code')
-      .should('be.visible')
-      .click()
-      .clear()
-      .type(newAccountData['zip']);
-    cy.findByLabelText('Phone')
-      .should('be.visible')
-      .click()
-      .clear()
-      .type(newAccountData['phone']);
-    cy.get('[data-qa-contact-country]').click().type('United States{enter}');
-    cy.get('[data-qa-contact-state-province]')
-      .should('be.visible')
-      .click()
-      .type(`${newAccountData['state']}{enter}`);
-    cy.findByLabelText('Tax ID')
+
+    ui.drawer
+      .findByTitle('Edit Billing Contact Info')
       .should('be.visible')
-      .click()
-      .clear()
-      .type(newAccountData['tax_id']);
-    cy.get('[data-qa-save-contact-info="true"]')
-      .click()
-      .then(() => {
-        cy.wait('@updateAccount').then((xhr) => {
-          expect(xhr.response?.body).to.eql(newAccountData);
-        });
+      .within(() => {
+        cy.findByLabelText('First Name')
+          .should('be.visible')
+          .click()
+          .clear()
+          .type(newAccountData['first_name']);
+        cy.findByLabelText('Last Name')
+          .should('be.visible')
+          .click()
+          .clear()
+          .type(newAccountData['last_name']);
+        cy.findByLabelText('Company Name')
+          .should('be.visible')
+          .click()
+          .clear()
+          .type(newAccountData['company']);
+        cy.findByLabelText('Address')
+          .should('be.visible')
+          .click()
+          .clear()
+          .type(newAccountData['address_1']);
+        cy.findByLabelText('Address 2')
+          .should('be.visible')
+          .click()
+          .clear()
+          .type(newAccountData['address_2']);
+        cy.findByLabelText('Email (required)')
+          .should('be.visible')
+          .click()
+          .clear()
+          .type(newAccountData['email']);
+        cy.findByLabelText('City')
+          .should('be.visible')
+          .click()
+          .clear()
+          .type(newAccountData['city']);
+        cy.findByLabelText('Postal Code')
+          .should('be.visible')
+          .click()
+          .clear()
+          .type(newAccountData['zip']);
+        cy.findByLabelText('Phone')
+          .should('be.visible')
+          .click()
+          .clear()
+          .type(newAccountData['phone']);
+        cy.get('[data-qa-contact-country]')
+          .click()
+          .type('United States{enter}');
+        cy.get('[data-qa-contact-state-province]')
+          .should('be.visible')
+          .click()
+          .type(`${newAccountData['state']}{enter}`);
+        cy.findByLabelText('Tax ID')
+          .should('be.visible')
+          .click()
+          .clear()
+          .type(newAccountData['tax_id']);
+        cy.get('[data-qa-save-contact-info="true"]')
+          .click()
+          .then(() => {
+            cy.wait('@updateAccount').then((xhr) => {
+              expect(xhr.response?.body).to.eql(newAccountData);
+            });
+          });
       });
 
     // check the page updates to reflect the edits