diff --git a/ui/components/multichain/network-list-menu/__snapshots__/network-list-menu.test.js.snap b/ui/components/multichain/network-list-menu/__snapshots__/network-list-menu.test.js.snap
index 1b2a8d056105..0bd083b01636 100644
--- a/ui/components/multichain/network-list-menu/__snapshots__/network-list-menu.test.js.snap
+++ b/ui/components/multichain/network-list-menu/__snapshots__/network-list-menu.test.js.snap
@@ -1,3 +1,1177 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`NetworkListMenu renders properly 1`] = `
`;
+exports[`NetworkListMenu renders properly 1`] = `
+
+
+
+
+
+
+
+ Press space bar to start a drag.
+ When dragging you can use the arrow keys to move the item around and escape to cancel.
+ Some screen readers may require you to be in focus mode or to use your pass through key
+
+
+
+`;
+
+exports[`NetworkListMenu should match snapshot when adding a network 1`] = `
+
+
+
+
+
+
+`;
+
+exports[`NetworkListMenu should match snapshot when editing a network 1`] = `
+
+
+
+
+
+`;
diff --git a/ui/components/multichain/network-list-menu/network-list-menu.test.js b/ui/components/multichain/network-list-menu/network-list-menu.test.js
index 702f5b00bf75..c6be491a1aaa 100644
--- a/ui/components/multichain/network-list-menu/network-list-menu.test.js
+++ b/ui/components/multichain/network-list-menu/network-list-menu.test.js
@@ -1,5 +1,6 @@
/* eslint-disable jest/require-top-level-describe */
import React from 'react';
+import { RpcEndpointType } from '@metamask/network-controller';
import { fireEvent, renderWithProvider } from '../../../../test/jest';
import configureStore from '../../../store/store';
import mockState from '../../../../test/data/mock-state.json';
@@ -35,11 +36,16 @@ const render = ({
isUnlocked = true,
origin = MOCK_ORIGIN,
selectedTabOriginInDomainsState = true,
+ isAddingNewNetwork = false,
+ editedNetwork = undefined,
} = {}) => {
const state = {
+ appState: {
+ isAddingNewNetwork,
+ editedNetwork,
+ },
metamask: {
...mockState.metamask,
- // this could use the network controllers default state instead
networkConfigurationsByChainId: {
'0x1': {
nativeCurrency: 'ETH',
@@ -48,6 +54,8 @@ const render = ({
defaultRpcEndpointIndex: 0,
rpcEndpoints: [
{
+ url: 'http://localhost/rpc',
+ type: RpcEndpointType.Custom,
networkClientId: NETWORK_TYPES.MAINNET,
},
],
@@ -59,6 +67,8 @@ const render = ({
defaultRpcEndpointIndex: 0,
rpcEndpoints: [
{
+ url: 'http://localhost/rpc',
+ type: RpcEndpointType.Custom,
networkClientId: 'linea-mainnet',
},
],
@@ -70,6 +80,8 @@ const render = ({
defaultRpcEndpointIndex: 0,
rpcEndpoints: [
{
+ url: 'http://localhost/rpc',
+ type: RpcEndpointType.Custom,
networkClientId: 'bnb-network',
},
],
@@ -81,6 +93,8 @@ const render = ({
defaultRpcEndpointIndex: 0,
rpcEndpoints: [
{
+ url: 'http://localhost/rpc',
+ type: RpcEndpointType.Custom,
networkClientId: 'goerli',
},
],
@@ -92,6 +106,8 @@ const render = ({
defaultRpcEndpointIndex: 0,
rpcEndpoints: [
{
+ url: 'http://localhost/rpc',
+ type: RpcEndpointType.Custom,
networkClientId: 'sepolia',
},
],
@@ -103,6 +119,8 @@ const render = ({
defaultRpcEndpointIndex: 0,
rpcEndpoints: [
{
+ url: 'http://localhost/rpc',
+ type: RpcEndpointType.Custom,
networkClientId: 'linea-sepolia',
},
],
@@ -135,9 +153,24 @@ describe('NetworkListMenu', () => {
});
it('renders properly', () => {
- const { container } = render();
- expect(container).toMatchSnapshot();
+ const { baseElement } = render();
+ expect(baseElement).toMatchSnapshot();
+ });
+
+ it('should match snapshot when adding a network', async () => {
+ const { baseElement } = render({
+ isAddingNewNetwork: true,
+ });
+ expect(baseElement).toMatchSnapshot();
});
+
+ it('should match snapshot when editing a network', async () => {
+ const { baseElement } = render({
+ editedNetwork: { chainId: '0x1' },
+ });
+ expect(baseElement).toMatchSnapshot();
+ });
+
it('displays important controls', () => {
const { getByText, getByPlaceholderText } = render();