test: add a new unit test to cover for multichain feature flags ON (#…

…12442)

Once we remove the feature flags, we can delete the old tests, until
then this ensure both side of the code is tested.

<!--
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**
- Modifying the env variable corresponding to the feature flag didnt
take effect in the test, had to find another way, mocking the getter of
the feture flag
- Mocking the getter worked, but modifying the mock inside the same test
file didnt take effect in the component, re-importing the component
caused all other mocks to fail, setting all mocks a second time didn't
work.
- Finally something did work, which is having each test in their own
test file is the only way i could get the mocks initialized with
expected values.
<!--
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?
-->

## **Related issues**

Fixes: MetaMask/MetaMask-planning#3664

## **Manual testing steps**

1. run `npx jest app/components/Views/AccountPermissions/**` and all
tests should pass


## **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/AccountPermissions/AccountPermissions.ff-on.test.tsx

@@ -0,0 +1,79 @@
+// Mock the networks module before any imports
+
+import React from 'react';
+import renderWithProvider, {
+  DeepPartial,
+} from '../../../util/test/renderWithProvider';
+import { backgroundState } from '../../../util/test/initial-root-state';
+import { RootState } from '../../../reducers';
+import AccountPermissions from './AccountPermissions';
+
+const mockedNavigate = jest.fn();
+const mockedGoBack = jest.fn();
+const mockedTrackEvent = jest.fn();
+
+// Mock navigation
+jest.mock('@react-navigation/native', () => {
+  const actualNav = jest.requireActual('@react-navigation/native');
+  return {
+    ...actualNav,
+    useNavigation: () => ({
+      navigate: mockedNavigate,
+      goBack: mockedGoBack,
+      setOptions: jest.fn(),
+    }),
+  };
+});
+
+// Mock safe area context
+jest.mock('react-native-safe-area-context', () => {
+  const inset = { top: 0, right: 0, bottom: 0, left: 0 };
+  const frame = { width: 0, height: 0, x: 0, y: 0 };
+  return {
+    SafeAreaProvider: jest.fn().mockImplementation(({ children }) => children),
+    SafeAreaConsumer: jest
+      .fn()
+      .mockImplementation(({ children }) => children(inset)),
+    useSafeAreaInsets: jest.fn().mockImplementation(() => inset),
+    useSafeAreaFrame: jest.fn().mockImplementation(() => frame),
+  };
+});
+
+// Mock metrics
+jest.mock('../../../components/hooks/useMetrics', () => ({
+  useMetrics: () => ({
+    trackEvent: mockedTrackEvent,
+  }),
+}));
+
+jest.mock('../../../util/networks/index.js', () => ({
+  ...jest.requireActual('../../../util/networks/index.js'),
+  isMultichainVersion1Enabled: true,
+  isChainPermissionsFeatureEnabled: true,
+}));
+
+const mockInitialState: DeepPartial<RootState> = {
+  settings: {},
+  engine: {
+    backgroundState: {
+      ...backgroundState,
+    },
+  },
+};
+
+describe('AccountPermissions with feature flags ON', () => {
+  it('should render AccountPermissions with multichain and chain permissions enabled', () => {
+    const { toJSON } = renderWithProvider(
+      <AccountPermissions
+        route={{
+          params: {
+            hostInfo: { metadata: { origin: 'test' } },
+          },
+        }}
+      />,
+      { state: mockInitialState },
+    );
+
+    expect(toJSON()).toMatchSnapshot('AccountPermissions-FeatureFlagsOn');
+  });
+});

app/components/Views/AccountPermissions/AccountPermissions.test.tsx

@@ -27,6 +27,12 @@ jest.mock('../../../components/hooks/useMetrics', () => ({
   }),
 }));
 
+jest.mock('../../../util/networks/index.js', () => ({
+  ...jest.requireActual('../../../util/networks/index.js'),
+  isMultichainVersion1Enabled: false,
+  isChainPermissionsFeatureEnabled: false,
+}));
+
 jest.mock('react-native-safe-area-context', () => {
   const inset = { top: 0, right: 0, bottom: 0, left: 0 };
   const frame = { width: 0, height: 0, x: 0, y: 0 };