test: [M3-8226] - Cypress integration tests for account "Maintenance"…

… tab (linode#10694)

* Add test for account maintenance

* Update tests

* Update tests

* Update comments

* Added changeset: Cypress integration tests for account Maintenance tab

* Update test to make it stable

* Add aria-label and update the test

* Add truncate util in the test

* Added changeset: Adding an ARIA label to these Account Maintenance tables

* Add a TODO comment

packages/manager/.changeset/pr-10694-added-1722002374051.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Adding an ARIA label to these Account Maintenance tables ([#10694](https://github.com/linode/manager/pull/10694))

packages/manager/.changeset/pr-10694-tests-1721327150369.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Cypress integration tests for account "Maintenance" tab ([#10694](https://github.com/linode/manager/pull/10694))

packages/manager/cypress/e2e/core/account/account-maintenance.spec.ts

@@ -0,0 +1,129 @@
+import { mockGetMaintenance } from 'support/intercepts/account';
+import { accountMaintenanceFactory } from 'src/factories';
+
+describe('Maintenance', () => {
+  /*
+   * - Confirm user can navigate to account maintenance page via user menu.
+   * - When there is no pending maintenance, "No pending maintenance." is shown in the table.
+   * - When there is no completed maintenance, "No completed maintenance." is shown in the table.
+   */
+  it('table empty when no maintenance', () => {
+    mockGetMaintenance([], []).as('getMaintenance');
+
+    cy.visitWithLogin('/linodes');
+    // user can navigate to account maintenance page via user menu.
+    cy.findByTestId('nav-group-profile').click();
+    cy.findByTestId('menu-item-Maintenance')
+      .should('be.visible')
+      .should('be.enabled')
+      .click();
+    cy.url().should('endWith', '/account/maintenance');
+
+    cy.wait('@getMaintenance');
+
+    // Confirm correct messages shown in the table when no maintenance.
+    cy.contains('No pending maintenance').should('be.visible');
+    cy.contains('No completed maintenance').should('be.visible');
+  });
+
+  /*
+   * - Uses mock API data to confirm maintenance details.
+   * - When there is pending maintenance, it is shown in the table with expected details.
+   * - When there is completed maintenance, it is shown in the table with expected details.
+   * - Confirm "Download CSV" button for pending maintenance visible and enabled.
+   * - Confirm "Download CSV" button for completed maintenance visible and enabled.
+   */
+  it('confirm maintenance details in the tables', () => {
+    const pendingMaintenanceNumber = 2;
+    const completedMaintenanceNumber = 5;
+    const accountpendingMaintenance = accountMaintenanceFactory.buildList(
+      pendingMaintenanceNumber
+    );
+    const accountcompletedMaintenance = accountMaintenanceFactory.buildList(
+      completedMaintenanceNumber,
+      { status: 'completed' }
+    );
+
+    mockGetMaintenance(
+      accountpendingMaintenance,
+      accountcompletedMaintenance
+    ).as('getMaintenance');
+
+    cy.visitWithLogin('/account/maintenance');
+
+    cy.wait('@getMaintenance');
+
+    cy.contains('No pending maintenance').should('not.exist');
+    cy.contains('No completed maintenance').should('not.exist');
+
+    // Confirm Pending table is not empty and contains exact number of pending maintenances
+    cy.findByLabelText('List of pending maintenance')
+      .should('be.visible')
+      .find('tbody')
+      .within(() => {
+        accountpendingMaintenance.forEach(() => {
+          cy.get('tr')
+            .should('have.length', accountpendingMaintenance.length)
+            .each((row, index) => {
+              const pendingMaintenance = accountpendingMaintenance[index];
+              cy.wrap(row).within(() => {
+                cy.contains(pendingMaintenance.entity.label).should(
+                  'be.visible'
+                );
+                // Confirm that the first 90 characters of each reason string are rendered on screen
+                const truncatedReason = pendingMaintenance.reason.substring(
+                  0,
+                  90
+                );
+                cy.findByText(truncatedReason, { exact: false }).should(
+                  'be.visible'
+                );
+                // Check the content of each <td> element
+                cy.get('td').each(($cell, idx, $cells) => {
+                  cy.wrap($cell).should('not.be.empty');
+                });
+              });
+            });
+        });
+      });
+
+    // Confirm Completed table is not empty and contains exact number of completed maintenances
+    cy.findByLabelText('List of completed maintenance')
+      .should('be.visible')
+      .find('tbody')
+      .within(() => {
+        accountcompletedMaintenance.forEach(() => {
+          cy.get('tr')
+            .should('have.length', accountcompletedMaintenance.length)
+            .each((row, index) => {
+              const completedMaintenance = accountcompletedMaintenance[index];
+              cy.wrap(row).within(() => {
+                cy.contains(completedMaintenance.entity.label).should(
+                  'be.visible'
+                );
+                // Confirm that the first 90 characters of each reason string are rendered on screen
+                const truncatedReason = completedMaintenance.reason.substring(
+                  0,
+                  90
+                );
+                cy.findByText(truncatedReason, { exact: false }).should(
+                  'be.visible'
+                );
+                // Check the content of each <td> element
+                cy.get('td').each(($cell, idx, $cells) => {
+                  cy.wrap($cell).should('not.be.empty');
+                });
+              });
+            });
+        });
+      });
+
+    // Confirm download buttons work
+    cy.get('button')
+      .filter(':contains("Download CSV")')
+      .should('be.visible')
+      .should('be.enabled')
+      .click({ multiple: true });
+    // TODO Need to add assertions to confirm CSV contains the expected contents on first trial (M3-8393)
+  });
+});

packages/manager/cypress/support/intercepts/account.ts

@@ -11,6 +11,7 @@ import { makeResponse } from 'support/util/response';
 import type {
   Account,
   AccountLogin,
+  AccountMaintenance,
   AccountSettings,
   Agreements,
   CancelAccount,
@@ -646,3 +647,25 @@ export const mockGetAccountLogins = (
 export const interceptGetNetworkUtilization = (): Cypress.Chainable<null> => {
   return cy.intercept('GET', apiMatcher('account/transfer'));
 };
+
+/**
+ * Intercepts GET request to fetch the account maintenance and mocks the response.
+ *
+ * @param accountMaintenance - Account Maintenance objects with which to mock response.
+ *
+ * @returns Cypress chainable.
+ */
+export const mockGetMaintenance = (
+  accountPendingMaintenance: AccountMaintenance[],
+  accountCompletedMaintenance: AccountMaintenance[]
+): Cypress.Chainable<null> => {
+  return cy.intercept('GET', apiMatcher(`account/maintenance*`), (req) => {
+    const filters = getFilters(req);
+
+    if (filters?.['status'] === 'completed') {
+      req.reply(paginateResponse(accountCompletedMaintenance));
+    } else {
+      req.reply(paginateResponse(accountPendingMaintenance));
+    }
+  });
+};

packages/manager/src/features/Account/Maintenance/MaintenanceTable.tsx

@@ -159,7 +159,7 @@ const MaintenanceTable = ({ type }: Props) => {
           />
         </Box>
       </Box>
-      <Table>
+      <Table aria-label={`List of ${type} maintenance`}>
         <TableHead>
           <TableRow>
             <TableCell className={classes.cell}>Entity</TableCell>