test: [M3-9143] - Cypress test for Service Transfers fetch error

packages/manager/.changeset/pr-11607-tests-1738694493702.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Add Cypress test for Service Transfers fetch error ([#11607](https://github.com/linode/manager/pull/11607))

packages/manager/cypress/e2e/core/account/service-transfer.spec.ts

@@ -15,6 +15,7 @@ import {
   mockGetEntityTransfers,
   mockReceiveEntityTransfer,
   mockInitiateEntityTransferError,
+  mockGetEntityTransfersError,
 } from 'support/intercepts/account';
 import { mockGetLinodes } from 'support/intercepts/linodes';
 import { ui } from 'support/ui';
@@ -27,6 +28,9 @@ import { cleanUp } from 'support/util/cleanup';
 
 import type { EntityTransferStatus } from '@linode/api-v4';
 
+// Service transfer error message.
+export const serviceTransferErrorMessage = 'An unknown error has occurred';
+
 // Service transfer landing page URL.
 const serviceTransferLandingUrl = '/account/service-transfers';
 
@@ -107,6 +111,18 @@ const assertReceiptError = (errorMessage: string) => {
     });
 };
 
+/**
+ * Asserts that an error message is shown upon service transfer tables.
+ *
+ * @param errorMessage - Error message which is expected to be shown.
+ */
+const assertServiceTransfersError = (errorMessage: string) => {
+  // Error Icon should shows up.
+  cy.findByTestId('ErrorOutlineIcon').should('be.visible');
+  // Error message should be visible.
+  cy.findByText(errorMessage, { exact: false }).should('be.visible');
+};
+
 authenticate();
 describe('Account service transfers', () => {
   before(() => {
@@ -475,4 +491,32 @@ describe('Account service transfers', () => {
     initiateLinodeTransfer(mockLinodes[0].label);
     cy.findByText(errorMessage).should('be.visible');
   });
+
+  /*
+   * - Confirms that an error message is displayed in both the Received and Sent tables when the requests to fetch service transfers fail.
+   */
+  it('can display an error message when the request fails to fetch service transfer', () => {
+    mockGetEntityTransfersError().as('getTransfersError');
+
+    cy.visitWithLogin(serviceTransferLandingUrl);
+    cy.wait('@getTransfersError');
+
+    cy.get('[data-qa-panel="Pending Service Transfers"]').should('not.exist');
+
+    // Confirm that an error message is displayed in "Received Service Transfers" panel.
+    cy.get('[data-qa-panel="Received Service Transfers"]')
+      .should('be.visible')
+      .within(() => {
+        cy.get('[data-testid="KeyboardArrowDownIcon"]').click();
+        assertServiceTransfersError(serviceTransferErrorMessage);
+      });
+
+    // Confirm that an error message is displayed is in "Sent Service Transfers" panel.
+    cy.get('[data-qa-panel="Sent Service Transfers"]')
+      .should('be.visible')
+      .within(() => {
+        cy.get('[data-testid="KeyboardArrowDownIcon"]').click();
+        assertServiceTransfersError(serviceTransferErrorMessage);
+      });
+  });
 });

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

@@ -305,6 +305,25 @@ export const mockGetEntityTransfers = (
   });
 };
 
+/**
+ * Intercepts GET request to fetch service transfers and mocks an error response.
+ *
+ * @param errorMessage - API error message with which to mock response.
+ * @param statusCode - HTTP status code with which to mock response.
+ *
+ * @returns Cypress chainable.
+ */
+export const mockGetEntityTransfersError = (
+  errorMessage: string = 'An unknown error has occurred',
+  statusCode: number = 500
+) => {
+  return cy.intercept(
+    'GET',
+    apiMatcher('account/entity-transfers*'),
+    makeErrorResponse(errorMessage, statusCode)
+  );
+};
+
 /**
  * Intercepts GET request to receive entity transfer and mocks response.
  *