MetaMask · bergeron · Sep 12, 2024 · Sep 11, 2024 · Sep 11, 2024 · Sep 11, 2024
@@ -0,0 +1,85 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MultiRpcEditModal renders correctly with required props 1`] = `
+<body>
+  <div
+    id="popover-content"
+  />
+  <div />
+  <div
+    class="mm-modal"
+    data-testid="multi-rpc-edit-modal"
+  >
+    <div
+      aria-hidden="true"
+      class="mm-box mm-modal-overlay mm-box--width-full mm-box--height-full mm-box--background-color-overlay-default"
+    />
+    <div
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="0"
+    />
+    <div
+      data-focus-lock-disabled="false"
+    >
+      <div
+        class="mm-box mm-modal-content mm-box--padding-top-4 mm-box--sm:padding-top-8 mm-box--md:padding-top-12 mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--sm:padding-bottom-8 mm-box--md:padding-bottom-12 mm-box--padding-left-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-flex-start mm-box--width-screen mm-box--height-screen"
+      >
+        <section
+          aria-modal="true"
+          class="mm-box mm-modal-content__dialog mm-modal-content__dialog--size-sm mm-box--padding-top-4 mm-box--padding-bottom-4 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full mm-box--background-color-background-default mm-box--rounded-lg"
+          role="dialog"
+        >
+          <div
+            class="mm-box mm-modal-body mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-flex mm-box--flex-direction-column"
+          >
+            <div
+              class="mm-box mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--rounded-sm"
+            >
+              <img
+                src="/images/networks1.png"
+              />
+            </div>
+            <p
+              class="mm-box mm-text mm-text--body-md-bold mm-text--text-align-center mm-box--color-text-default"
+            >
+              updatedRpcForNetworks
+            </p>
+            <p
+              class="mm-box mm-text mm-text--body-md mm-text--text-align-center mm-box--padding-top-2 mm-box--color-text-default"
+            >
+              supportMultiRpcInformation
+            </p>
+            <div
+              class="mm-box mm-box--padding-bottom-6"
+            >
+              <div
+                class="mm-box mm-box--margin-top-4 mm-box--margin-bottom-1"
+              />
+            </div>
+          </div>
+          <div
+            class="mm-box mm-modal-footer mm-box--padding-top-4 mm-box--padding-right-4 mm-box--padding-left-4"
+          >
+            <div
+              class="mm-box mm-container mm-container--max-width-sm mm-box--margin-right-auto mm-box--margin-left-auto mm-box--display-flex mm-box--gap-4 mm-box--flex-wrap-wrap mm-box--align-items-center"
+            >
+              <button
+                class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-modal-footer__button mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
+                data-theme="light"
+              >
+                accept
+              </button>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+    <div
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="0"
+    />
+  </div>
+</body>
+`;
@@ -0,0 +1,113 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import MultiRpcEditModal from './multi-rpc-edit-modal';
+import '@testing-library/jest-dom/extend-expect';
+
+const mockStore = configureStore([thunk]);
+
+const initialState = {
+  metamask: {
+    networkConfigurationsByChainId: {
+      '0x1': {
+        blockExplorerUrls: [],
+        chainId: '0x1',
+        defaultRpcEndpointIndex: 0,
+        name: 'Ethereum Mainnet',
+        nativeCurrency: 'ETH',
+        rpcEndpoints: [
+          {
+            name: 'Eth test 1',
+            networkClientId: '96d93309-dab5-45dd-9fff-0d9d7f0843cc',
+            type: 'custom',
+            url: 'https://eth-mainnet.public.blastapi.io',
+          },
+          {
+            networkClientId: 'mainnet',
+            type: 'infura',
+            url: 'https://mainnet.infura.io/v3/{infuraProjectId}',
+          },
+          {
+            name: 'Alchemyyyy',
+            networkClientId: '40cd2a17-1085-4077-8ffb-1ea1bdc65289',
+            type: 'custom',
+            url: 'https://eth-mainnet.g.alchemy.com/v2/fCe_AL0z95whoz8H6hvdKvwNAE3goTa0',
+          },
+          {
+            name: 'onfinality',
+            networkClientId: '42d0d494-b92f-43f0-9270-51eb660d35a0',
+            type: 'custom',
+            url: 'https://eth.api.onfinality.io/public',
+          },
+          {
+            name: 'mevBlocker',
+            networkClientId: '53107ebb-6184-44b5-ae53-057772795de7',
+            type: 'custom',
+            url: 'https://rpc.mevblocker.io',
+          },
+        ],
+      },
+    },
+  },
+  TransactionController: {
+    transactions: [
+      {
+        chainId: '0x1',
+        history: [{ networkClientId: 'mainnet' }],
+      },
+    ],
+  },
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const setup = (props: any) => {
+  const store = mockStore(initialState);
+  return render(
+    <Provider store={store}>
+      <MultiRpcEditModal {...props} />
+    </Provider>,
+  );
+};
+
+jest.mock('../../../hooks/useI18nContext', () => ({
+  useI18nContext: jest.fn(),
+}));
+
+describe('MultiRpcEditModal', () => {
+  const useI18nContextMock = useI18nContext as jest.Mock;
+
+  beforeEach(() => {
+    useI18nContextMock.mockReturnValue((key: string) => key);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders correctly with required props', () => {
+    const onCloseMock = jest.fn();
+
+    const { baseElement } = setup({
+      isOpen: true,
+      onClose: onCloseMock,
+    });
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('renders the modal and displays the network information', () => {
+    const onCloseMock = jest.fn();
+
+    setup({
+      isOpen: true,
+      onClose: onCloseMock,
+    });
+
+    expect(screen.getByTestId('multi-rpc-edit-modal')).toBeInTheDocument();
+    // TODO: enable with network controller v21 upgrade after `getNetworkConfigurationsByChainId` is implemented
+    // expect(screen.getByText('Ethereum Mainnet')).toBeInTheDocument();
+    expect(screen.getByText('supportMultiRpcInformation')).toBeInTheDocument();
+  });
+});