test: Add integration tests for network busy alert (#26679)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

Adds an integration test to check that the alert is displayed when
network is busy.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/26679?quickstart=1)

## **Related issues**

Fixes:
[#2977](MetaMask/MetaMask-planning#2977)

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

test/integration/confirmations/transactions/alerts.test.tsx

@@ -0,0 +1,137 @@
+import { act, fireEvent } from '@testing-library/react';
+import { ApprovalType } from '@metamask/controller-utils';
+import nock from 'nock';
+import mockMetaMaskState from '../../data/integration-init-state.json';
+import { integrationTestRender } from '../../../lib/render-helpers';
+import * as backgroundConnection from '../../../../ui/store/background-connection';
+import { createMockImplementation, mock4byte } from '../../helpers';
+import { getUnapprovedApproveTransaction } from './transactionDataHelpers';
+
+jest.mock('../../../../ui/store/background-connection', () => ({
+  ...jest.requireActual('../../../../ui/store/background-connection'),
+  submitRequestToBackground: jest.fn(),
+  callBackgroundMethod: jest.fn(),
+}));
+
+const mockedBackgroundConnection = jest.mocked(backgroundConnection);
+
+const backgroundConnectionMocked = {
+  onNotification: jest.fn(),
+};
+export const pendingTransactionId = '48a75190-45ca-11ef-9001-f3886ec2397c';
+export const pendingTransactionTime = new Date().getTime();
+
+const getMetaMaskStateWithUnapprovedApproveTransaction = (
+  accountAddress: string,
+) => {
+  return {
+    ...mockMetaMaskState,
+    preferences: {
+      ...mockMetaMaskState.preferences,
+      redesignedConfirmationsEnabled: true,
+    },
+    pendingApprovals: {
+      [pendingTransactionId]: {
+        id: pendingTransactionId,
+        origin: 'origin',
+        time: pendingTransactionTime,
+        type: ApprovalType.Transaction,
+        requestData: {
+          txId: pendingTransactionId,
+        },
+        requestState: null,
+        expectsResult: false,
+      },
+    },
+    pendingApprovalCount: 1,
+    knownMethodData: {
+      '0x3b4b1381': {
+        name: 'Mint NFTs',
+        params: [
+          {
+            type: 'uint256',
+          },
+        ],
+      },
+    },
+    transactions: [
+      getUnapprovedApproveTransaction(
+        accountAddress,
+        pendingTransactionId,
+        pendingTransactionTime,
+      ),
+    ],
+  };
+};
+
+const setupSubmitRequestToBackgroundMocks = (
+  mockRequests?: Record<string, unknown>,
+) => {
+  mockedBackgroundConnection.submitRequestToBackground.mockImplementation(
+    createMockImplementation({
+      ...(mockRequests ?? {}),
+    }),
+  );
+};
+
+describe('Contract Interaction Confirmation', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+    setupSubmitRequestToBackgroundMocks();
+    const APPROVE_NFT_HEX_SIG = '0x095ea7b3';
+    mock4byte(APPROVE_NFT_HEX_SIG);
+  });
+
+  afterEach(() => {
+    nock.cleanAll();
+  });
+
+  it('displays the alert when network is busy', async () => {
+    const account =
+      mockMetaMaskState.internalAccounts.accounts[
+        mockMetaMaskState.internalAccounts
+          .selectedAccount as keyof typeof mockMetaMaskState.internalAccounts.accounts
+      ];
+
+    const mockedMetaMaskState =
+      getMetaMaskStateWithUnapprovedApproveTransaction(account.address);
+
+    const { findByTestId, getByTestId, queryByTestId } =
+      await integrationTestRender({
+        preloadedState: {
+          ...mockedMetaMaskState,
+          gasFeeEstimatesByChainId: {
+            '0x5': {
+              gasFeeEstimates: {
+                networkCongestion: 1.0005,
+              },
+            },
+          },
+        },
+        backgroundConnection: backgroundConnectionMocked,
+      });
+
+    act(() => {
+      fireEvent.click(getByTestId('inline-alert'));
+    });
+
+    expect(await findByTestId('alert-modal')).toBeInTheDocument();
+
+    expect(
+      await findByTestId('alert-modal__selected-alert'),
+    ).toBeInTheDocument();
+
+    expect(await findByTestId('alert-modal__selected-alert')).toHaveTextContent(
+      'Gas prices are high and estimates are less accurate.',
+    );
+
+    expect(await findByTestId('alert-modal-button')).toBeInTheDocument();
+    const alertModalConfirmButton = await findByTestId('alert-modal-button');
+
+    act(() => {
+      fireEvent.click(alertModalConfirmButton);
+    });
+
+    expect(queryByTestId('alert-modal')).not.toBeInTheDocument();
+  });
+});

test/integration/confirmations/transactions/contract-interaction.test.tsx

@@ -61,7 +61,7 @@ const getMetaMaskStateWithUnapprovedContractInteraction = ({
     pendingApprovals: {
       [pendingTransactionId]: {
         id: pendingTransactionId,
-        origin: 'origin',
+        origin: 'local:http://localhost:8086/',
         time: pendingTransactionTime,
         type: ApprovalType.Transaction,
         requestData: {

test/integration/confirmations/transactions/transactionDataHelpers.tsx

@@ -12,7 +12,7 @@ export const getUnapprovedTransaction = (
       gas: '0x16a92',
     },
     id: pendingTransactionId,
-    origin: 'origin',
+    origin: 'local:http://localhost:8086/',
     securityAlertResponse: {},
     status: 'unapproved',
     time: pendingTransactionTime,

ui/components/app/alert-system/alert-modal/alert-modal.tsx

@@ -342,7 +342,7 @@ export function AlertModal({
   }, [isConfirmed, selectedAlert.key, setAlertConfirmed]);
 
   return (
-    <Modal isOpen onClose={handleClose}>
+    <Modal isOpen onClose={handleClose} data-testid="alert-modal">
       <ModalOverlay />
       <ModalContent>
         <ModalHeader