chore: Add missing confirmation unit tests (#12355)

<!--
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**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

This PR purely adds missing confirmation unit tests and improve snapshot
testing.

## **Related issues**

Fixes: MetaMask/MetaMask-planning#3584

## **Manual testing steps**

N/A

## **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 Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.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-mobile/blob/main/.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.

app/components/Views/confirmations/Approval/index.test.tsx

@@ -1,36 +1,102 @@
-import Approval from '.';
-import { renderScreen } from '../../../../util/test/renderWithProvider';
-import { backgroundState } from '../../../../util/test/initial-root-state';
-
-const approvalState = {
-  engine: {
-    backgroundState: {
-      ...backgroundState,
-    },
-  },
-};
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import configureMockStore from 'redux-mock-store';
+import { Provider } from 'react-redux';
+import { Store } from 'redux';
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+
+import Approval from './index';
+import { ThemeContext, mockTheme } from '../../../../util/theme';
+import initialRootState from '../../../../util/test/initial-root-state';
+
+const TRANSACTION_ID_MOCK = '123';
+jest.mock('../../../../selectors/smartTransactionsController', () => ({
+  selectShouldUseSmartTransaction: jest.fn().mockReturnValue(false),
+}));
+
+jest.mock('../../../../util/dappTransactions', () => ({
+  handleGetGasLimit: jest.fn(),
+}));
 
 jest.mock('../../../../core/Engine.ts', () => ({
   rejectPendingApproval: jest.fn(),
   context: {
     KeyringController: {
       resetQRKeyringState: jest.fn(),
+      getOrAddQRKeyring: jest.fn(),
+    },
+    GasFeeController: {
+      getGasFeeEstimatesAndStartPolling: jest.fn().mockResolvedValue(null),
+      stopPolling: jest.fn(),
     },
   },
   controllerMessenger: {
     tryUnsubscribe: jest.fn(),
+    subscribe: jest.fn(),
+    unsubscribe: jest.fn(),
   },
 }));
 
+const Stack = createStackNavigator();
+const mockStore = configureMockStore();
+const navigationPropMock = {
+  setOptions: jest.fn(),
+  setParams: jest.fn(),
+  navigate: jest.fn(),
+};
+const routeMock = {
+  params: {},
+};
+
+const renderComponent = ({ store }: { store: Store }) => render(
+    <Provider store={store}>
+      <ThemeContext.Provider value={mockTheme}>
+        <NavigationContainer>
+          <Stack.Navigator>
+            <Stack.Screen name="Approval">
+              {() => (
+                <Approval
+                  dappTransactionModalVisible
+                  navigation={navigationPropMock}
+                  route={routeMock}
+                />
+              )}
+            </Stack.Screen>
+          </Stack.Navigator>
+        </NavigationContainer>
+      </ThemeContext.Provider>
+    </Provider>,
+  );
+
 describe('Approval', () => {
-  it('render matches snapshot', () => {
-    const wrapper = renderScreen(
-      Approval,
-      { name: 'Approval' },
-      {
-        state: approvalState,
+  let store: Store;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    store = mockStore({
+      ...initialRootState,
+      settings: {
+        showCustomNonce: false,
+      },
+      transaction: {
+        id: TRANSACTION_ID_MOCK,
+        from: '0x1234',
+        transaction: {
+          data: '0x1',
+        },
       },
-    );
+      browser: {
+        tabs: [],
+      },
+      alert: {
+        isVisible: false,
+      },
+    });
+  });
+
+  it('render matches snapshot', () => {
+    const wrapper = renderComponent({ store });
     expect(wrapper).toMatchSnapshot();
   });
 });