2021-02-04 19:15:23 +01:00
|
|
|
import React from 'react';
|
|
|
|
import configureMockStore from 'redux-mock-store';
|
|
|
|
import thunk from 'redux-thunk';
|
2021-10-28 21:31:05 +02:00
|
|
|
import Button from '../../ui/button';
|
2021-04-28 21:53:59 +02:00
|
|
|
import { mountWithRouter } from '../../../../test/lib/render-helpers';
|
2021-03-16 22:00:08 +01:00
|
|
|
import ColorIndicator from '../../ui/color-indicator';
|
2021-11-22 17:24:42 +01:00
|
|
|
import { LOCALHOST_RPC_URL } from '../../../../shared/constants/network';
|
2021-03-16 22:00:08 +01:00
|
|
|
import NetworkDropdown from './network-dropdown';
|
|
|
|
import { DropdownMenuItem } from './dropdown';
|
2018-09-24 18:28:04 +02:00
|
|
|
|
2021-04-15 20:01:46 +02:00
|
|
|
describe('Network Dropdown', () => {
|
2021-02-04 19:15:23 +01:00
|
|
|
let wrapper;
|
|
|
|
const createMockStore = configureMockStore([thunk]);
|
2018-09-24 18:28:04 +02:00
|
|
|
|
2021-04-15 20:01:46 +02:00
|
|
|
describe('NetworkDropdown in appState in false', () => {
|
2018-09-24 18:28:04 +02:00
|
|
|
const mockState = {
|
|
|
|
metamask: {
|
2020-01-16 04:33:37 +01:00
|
|
|
network: '1',
|
2018-09-24 18:28:04 +02:00
|
|
|
provider: {
|
|
|
|
type: 'test',
|
|
|
|
},
|
2021-10-28 21:31:05 +02:00
|
|
|
preferences: {
|
|
|
|
showTestNetworks: true,
|
|
|
|
},
|
2018-09-24 18:28:04 +02:00
|
|
|
},
|
|
|
|
appState: {
|
2020-01-16 04:33:37 +01:00
|
|
|
networkDropdownOpen: false,
|
2018-09-24 18:28:04 +02:00
|
|
|
},
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2018-09-24 18:28:04 +02:00
|
|
|
|
2021-02-04 19:15:23 +01:00
|
|
|
const store = createMockStore(mockState);
|
2018-09-24 18:28:04 +02:00
|
|
|
|
2021-04-15 20:01:46 +02:00
|
|
|
beforeEach(() => {
|
2021-02-04 19:15:23 +01:00
|
|
|
wrapper = mountWithRouter(<NetworkDropdown store={store} />);
|
|
|
|
});
|
2018-09-24 18:28:04 +02:00
|
|
|
|
2021-04-15 20:01:46 +02:00
|
|
|
it('checks for network droppo class', () => {
|
|
|
|
expect(wrapper.find('.network-droppo')).toHaveLength(1);
|
2021-02-04 19:15:23 +01:00
|
|
|
});
|
2018-09-24 18:28:04 +02:00
|
|
|
|
2021-04-15 20:01:46 +02:00
|
|
|
it('renders only one child when networkDropdown is false in state', () => {
|
|
|
|
expect(wrapper.children()).toHaveLength(1);
|
2021-02-04 19:15:23 +01:00
|
|
|
});
|
|
|
|
});
|
2018-09-24 18:28:04 +02:00
|
|
|
|
2021-10-28 21:31:05 +02:00
|
|
|
describe('NetworkDropdown in appState is true and show test networks is true', () => {
|
2018-09-24 18:28:04 +02:00
|
|
|
const mockState = {
|
|
|
|
metamask: {
|
2020-01-16 04:33:37 +01:00
|
|
|
network: '1',
|
2018-09-24 18:28:04 +02:00
|
|
|
provider: {
|
2020-11-03 00:41:28 +01:00
|
|
|
type: 'test',
|
2018-09-24 18:28:04 +02:00
|
|
|
},
|
2021-10-28 21:31:05 +02:00
|
|
|
preferences: {
|
|
|
|
showTestNetworks: true,
|
|
|
|
},
|
2018-10-26 10:26:43 +02:00
|
|
|
frequentRpcListDetail: [
|
2020-10-06 19:57:02 +02:00
|
|
|
{ chainId: '0x1a', rpcUrl: 'http://localhost:7545' },
|
|
|
|
{ rpcUrl: 'http://localhost:7546' },
|
2021-11-22 17:24:42 +01:00
|
|
|
{ rpcUrl: LOCALHOST_RPC_URL, nickname: 'localhost' },
|
2018-09-24 18:28:04 +02:00
|
|
|
],
|
|
|
|
},
|
|
|
|
appState: {
|
2020-11-03 00:41:28 +01:00
|
|
|
networkDropdownOpen: true,
|
2018-09-24 18:28:04 +02:00
|
|
|
},
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2021-10-28 21:31:05 +02:00
|
|
|
|
|
|
|
global.platform = {
|
|
|
|
openExtensionInBrowser: jest.fn(),
|
|
|
|
};
|
|
|
|
|
2021-02-04 19:15:23 +01:00
|
|
|
const store = createMockStore(mockState);
|
2018-09-24 18:28:04 +02:00
|
|
|
|
2021-10-28 21:31:05 +02:00
|
|
|
let testNetworkIndex = 1;
|
|
|
|
|
|
|
|
const findTestNetworkFirstIndex = (_wrapper) => {
|
|
|
|
let i = 1;
|
|
|
|
let found = false;
|
|
|
|
while (!found) {
|
2022-03-16 15:49:25 +01:00
|
|
|
if (
|
|
|
|
_wrapper.find(ColorIndicator).at(i).prop('color') === 'text-muted'
|
|
|
|
) {
|
2021-10-28 21:31:05 +02:00
|
|
|
i += 1;
|
|
|
|
} else {
|
|
|
|
found = true;
|
|
|
|
}
|
|
|
|
}
|
2018-09-24 18:28:04 +02:00
|
|
|
|
2021-10-28 21:31:05 +02:00
|
|
|
testNetworkIndex = i;
|
|
|
|
};
|
|
|
|
|
|
|
|
beforeAll(() => {
|
|
|
|
wrapper = mountWithRouter(<NetworkDropdown store={store} />);
|
|
|
|
findTestNetworkFirstIndex(wrapper);
|
2021-02-04 19:15:23 +01:00
|
|
|
});
|
2018-09-24 18:28:04 +02:00
|
|
|
|
2021-04-15 20:01:46 +02:00
|
|
|
it('checks background color for first ColorIndicator', () => {
|
2021-02-04 19:15:23 +01:00
|
|
|
const colorIndicator = wrapper.find(ColorIndicator).at(0);
|
2021-04-15 20:01:46 +02:00
|
|
|
expect(colorIndicator.prop('color')).toStrictEqual('mainnet');
|
2021-02-04 19:15:23 +01:00
|
|
|
});
|
2018-09-24 18:28:04 +02:00
|
|
|
|
2021-04-15 20:01:46 +02:00
|
|
|
it('checks background color for second ColorIndicator', () => {
|
2021-10-28 21:31:05 +02:00
|
|
|
// find where test networks start in case there are custom RPCs
|
|
|
|
const colorIndicator = wrapper.find(ColorIndicator).at(testNetworkIndex);
|
2021-04-15 20:01:46 +02:00
|
|
|
expect(colorIndicator.prop('color')).toStrictEqual('ropsten');
|
2021-02-04 19:15:23 +01:00
|
|
|
});
|
2018-09-24 18:28:04 +02:00
|
|
|
|
2021-04-15 20:01:46 +02:00
|
|
|
it('checks background color for third ColorIndicator', () => {
|
2021-10-28 21:31:05 +02:00
|
|
|
const colorIndicator = wrapper
|
|
|
|
.find(ColorIndicator)
|
|
|
|
.at(testNetworkIndex + 1);
|
2021-04-15 20:01:46 +02:00
|
|
|
expect(colorIndicator.prop('color')).toStrictEqual('kovan');
|
2021-02-04 19:15:23 +01:00
|
|
|
});
|
2018-09-24 18:28:04 +02:00
|
|
|
|
2021-04-15 20:01:46 +02:00
|
|
|
it('checks background color for fourth ColorIndicator', () => {
|
2021-10-28 21:31:05 +02:00
|
|
|
const colorIndicator = wrapper
|
|
|
|
.find(ColorIndicator)
|
|
|
|
.at(testNetworkIndex + 2);
|
2021-04-15 20:01:46 +02:00
|
|
|
expect(colorIndicator.prop('color')).toStrictEqual('rinkeby');
|
2021-02-04 19:15:23 +01:00
|
|
|
});
|
2018-09-24 18:28:04 +02:00
|
|
|
|
2021-04-15 20:01:46 +02:00
|
|
|
it('checks background color for fifth ColorIndicator', () => {
|
2021-10-28 21:31:05 +02:00
|
|
|
const colorIndicator = wrapper
|
|
|
|
.find(ColorIndicator)
|
|
|
|
.at(testNetworkIndex + 3);
|
2021-04-15 20:01:46 +02:00
|
|
|
expect(colorIndicator.prop('color')).toStrictEqual('goerli');
|
2021-02-04 19:15:23 +01:00
|
|
|
});
|
2019-04-17 19:34:49 +02:00
|
|
|
|
2021-04-15 20:01:46 +02:00
|
|
|
it('checks background color for sixth ColorIndicator', () => {
|
2021-10-28 21:31:05 +02:00
|
|
|
const colorIndicator = wrapper
|
|
|
|
.find(ColorIndicator)
|
|
|
|
.at(testNetworkIndex + 4);
|
|
|
|
expect(colorIndicator.prop('color')).toStrictEqual('localhost');
|
|
|
|
expect(
|
|
|
|
wrapper
|
|
|
|
.find(DropdownMenuItem)
|
|
|
|
.at(testNetworkIndex + 4)
|
|
|
|
.text(),
|
|
|
|
).toStrictEqual('✓localhost');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('checks that Add Network button is rendered', () => {
|
|
|
|
expect(wrapper.find(Button).at(0).children().text()).toStrictEqual(
|
|
|
|
'addNetwork',
|
|
|
|
);
|
|
|
|
});
|
2022-01-05 20:04:34 +01:00
|
|
|
|
|
|
|
it('shows test networks in the dropdown', () => {
|
|
|
|
expect(wrapper.find('.network-dropdown-list li')).toHaveLength(8);
|
|
|
|
});
|
2021-10-28 21:31:05 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
describe('NetworkDropdown in appState is true and show test networks is false', () => {
|
|
|
|
const mockState = {
|
|
|
|
metamask: {
|
|
|
|
network: '1',
|
|
|
|
provider: {
|
|
|
|
type: 'test',
|
|
|
|
},
|
|
|
|
preferences: {
|
|
|
|
showTestNetworks: false,
|
|
|
|
},
|
|
|
|
frequentRpcListDetail: [
|
|
|
|
{ chainId: '0x1a', rpcUrl: 'http://localhost:7545' },
|
|
|
|
{ rpcUrl: 'http://localhost:7546' },
|
|
|
|
],
|
|
|
|
},
|
|
|
|
appState: {
|
|
|
|
networkDropdownOpen: true,
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
|
|
|
global.platform = {
|
|
|
|
openExtensionInBrowser: jest.fn(),
|
|
|
|
};
|
|
|
|
|
|
|
|
const store = createMockStore(mockState);
|
|
|
|
|
|
|
|
beforeAll(() => {
|
|
|
|
wrapper = mountWithRouter(<NetworkDropdown store={store} />);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('checks background color for first ColorIndicator', () => {
|
|
|
|
const colorIndicator = wrapper.find(ColorIndicator).at(0);
|
|
|
|
expect(colorIndicator.prop('color')).toStrictEqual('mainnet');
|
|
|
|
expect(wrapper.find(DropdownMenuItem).at(0).text()).toStrictEqual(
|
|
|
|
'✓mainnet',
|
2021-04-15 20:01:46 +02:00
|
|
|
);
|
2021-02-04 19:15:23 +01:00
|
|
|
});
|
2018-09-24 18:28:04 +02:00
|
|
|
|
2021-10-28 21:31:05 +02:00
|
|
|
it('checks that Add Network button is rendered', () => {
|
|
|
|
expect(wrapper.find(Button).at(0).children().text()).toStrictEqual(
|
|
|
|
'addNetwork',
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
|
|
|
});
|
2022-01-05 20:04:34 +01:00
|
|
|
|
|
|
|
it('does not show test networks in the dropdown', () => {
|
|
|
|
expect(wrapper.find('.network-dropdown-list li')).toHaveLength(3);
|
|
|
|
});
|
2021-02-04 19:15:23 +01:00
|
|
|
});
|
|
|
|
});
|