1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/app/dropdowns/network-dropdown.test.js
Elliot Winkler ed3cc404f2
NetworkController: Split network into networkId and networkStatus (#17556)
The `network` store of the network controller crams two types of data
into one place. It roughly tracks whether we have enough information to
make requests to the network and whether the network is capable of
receiving requests, but it also stores the ID of the network (as
obtained via `net_version`).

Generally we shouldn't be using the network ID for anything, as it has
been completely replaced by chain ID, which all custom RPC endpoints
have been required to support for over a year now. However, as the
network ID is used in various places within the extension codebase,
removing it entirely would be a non-trivial effort. So, minimally, this
commit splits `network` into two stores: `networkId` and
`networkStatus`. But it also expands the concept of network status.

Previously, the network was in one of two states: "loading" and
"not-loading". But now it can be in one of four states:

- `available`: The network is able to receive and respond to requests.
- `unavailable`: The network is not able to receive and respond to
  requests for unknown reasons.
- `blocked`: The network is actively blocking requests based on the
  user's geolocation. (This is specific to Infura.)
- `unknown`: We don't know whether the network can receive and respond
  to requests, either because we haven't checked or we tried to check
  and were unsuccessful.

This commit also changes how the network status is determined —
specifically, how many requests are used to determine that status, when
they occur, and whether they are awaited. Previously, the network
controller would make 2 to 3 requests during the course of running
`lookupNetwork`.

* First, if it was an Infura network, it would make a request for
  `eth_blockNumber` to determine whether Infura was blocking requests or
  not, then emit an appropriate event. This operation was not awaited.
* Then, regardless of the network, it would fetch the network ID via
  `net_version`. This operation was awaited.
* Finally, regardless of the network, it would fetch the latest block
  via `eth_getBlockByNumber`, then use the result to determine whether
  the network supported EIP-1559. This operation was awaited.

Now:

* One fewer request is made, specifically `eth_blockNumber`, as we don't
  need to make an extra request to determine whether Infura is blocking
  requests; we can reuse `eth_getBlockByNumber`;
* All requests are awaited, which makes `lookupNetwork` run fully
  in-band instead of partially out-of-band; and
* Both requests for `net_version` and `eth_getBlockByNumber` are
  performed in parallel to make `lookupNetwork` run slightly faster.
2023-03-30 16:49:12 -06:00

187 lines
5.5 KiB
JavaScript

import React from 'react';
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { screen } from '@testing-library/react';
import { renderWithProvider } from '../../../../test/lib/render-helpers';
import { LOCALHOST_RPC_URL } from '../../../../shared/constants/network';
import NetworkDropdown from './network-dropdown';
// Mock linea test network feature toggle
jest.mock('../../../../shared/constants/network', () => {
const constants = jest.requireActual('../../../../shared/constants/network');
return {
...constants,
SHOULD_SHOW_LINEA_TESTNET_NETWORK: true,
};
});
describe('Network Dropdown', () => {
const createMockStore = configureMockStore([thunk]);
describe('NetworkDropdown in appState in false', () => {
const mockState = {
metamask: {
networkId: '1',
networkStatus: 'available',
provider: {
type: 'test',
},
showTestnetMessageInDropdown: false,
preferences: {
showTestNetworks: true,
},
},
appState: {
networkDropdownOpen: false,
},
};
const store = createMockStore(mockState);
beforeEach(() => {
renderWithProvider(<NetworkDropdown />, store);
});
it('should not render menu dropdown when network dropdown is in false state', () => {
const menuDropdown = screen.queryByTestId('menu-dropdown');
expect(menuDropdown).not.toBeInTheDocument();
});
it('checks for network droppo class', () => {
const networkDropdown = screen.queryByTestId('network-droppo');
expect(networkDropdown).toBeInTheDocument();
});
});
describe('NetworkDropdown in appState is true and show test networks is true', () => {
const mockState = {
metamask: {
networkId: '1',
networkStatus: 'available',
provider: {
type: 'test',
},
showTestnetMessageInDropdown: false,
preferences: {
showTestNetworks: true,
},
networkConfigurations: {
networkConfigurationId1: {
chainId: '0x1a',
rpcUrl: 'http://localhost:7545',
},
networkConfigurationId2: { rpcUrl: 'http://localhost:7546' },
networkConfigurationId3: {
rpcUrl: LOCALHOST_RPC_URL,
nickname: 'localhost',
},
},
},
appState: {
networkDropdownOpen: true,
},
};
global.platform = {
openExtensionInBrowser: jest.fn(),
};
const store = createMockStore(mockState);
beforeEach(() => {
renderWithProvider(<NetworkDropdown />, store);
});
it('checks background color for first ColorIndicator', () => {
const mainnetColorIndicator = screen.queryByTestId('color-icon-mainnet');
expect(mainnetColorIndicator).toBeInTheDocument();
});
it('checks background color for fourth ColorIndicator', () => {
const goerliColorIndicator = screen.queryByTestId('color-icon-goerli');
expect(goerliColorIndicator).toBeInTheDocument();
});
it('checks background color for fifth ColorIndicator', () => {
const sepoliaColorIndicator = screen.queryByTestId('color-icon-sepolia');
expect(sepoliaColorIndicator).toBeInTheDocument();
});
it('checks background color for sixth ColorIndicator', () => {
const localhostColorIndicator = screen.queryByTestId(
'color-icon-localhost',
);
expect(localhostColorIndicator).toBeInTheDocument();
});
it('checks background color for seventh ColorIndicator', () => {
const lineaColorIndicator = screen.queryByTestId(
'color-icon-lineatestnet',
);
expect(lineaColorIndicator).toBeInTheDocument();
});
it('checks that Add Network button is rendered', () => {
const addNetworkButton = screen.queryByText('Add network');
expect(addNetworkButton).toBeInTheDocument();
});
it('shows test networks in the dropdown', () => {
const networkItems = screen.queryAllByTestId(/network-item/u);
expect(networkItems).toHaveLength(7);
});
});
describe('NetworkDropdown in appState is true and show test networks is false', () => {
const mockState = {
metamask: {
networkId: '1',
networkStatus: 'available',
provider: {
type: 'test',
},
showTestnetMessageInDropdown: false,
preferences: {
showTestNetworks: false,
},
networkConfigurations: {
networkConfigurationId1: {
chainId: '0x1a',
rpcUrl: 'http://localhost:7545',
},
networkConfigurationId2: { rpcUrl: 'http://localhost:7546' },
},
},
appState: {
networkDropdownOpen: true,
},
};
global.platform = {
openExtensionInBrowser: jest.fn(),
};
const store = createMockStore(mockState);
beforeEach(() => {
renderWithProvider(<NetworkDropdown />, store);
});
it('checks background color for first ColorIndicator', () => {
const mainnetColorIndicator = screen.queryByTestId('color-icon-mainnet');
expect(mainnetColorIndicator).toBeInTheDocument();
});
it('checks that Add Network button is rendered', () => {
const addNetworkButton = screen.queryByText('Add network');
expect(addNetworkButton).toBeInTheDocument();
});
it('does not show test networks in the dropdown', () => {
const networkItems = screen.queryAllByTestId(/network-item/u);
expect(networkItems).toHaveLength(3);
});
});
});