Fix/storybook console cleanup (#19244)

* Fix: Fix storybook console error of networkList not being found when passed to createStore * Fix: Remove unused testData imports
MetaMask · Jun 1, 2023 · 20fe6fc · 20fe6fc
1 parent b89630f
commit 20fe6fc
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 103 deletions.
diff --git a/.storybook/test-data.js b/.storybook/test-data.js
@@ -16,81 +16,6 @@ const state = {
     protocol: 'https:',
     url: 'https://metamask.github.io/test-dapp/',
   },
-  networkList: [
-    {
-      blockExplorerUrl: 'https://etherscan.io',
-      chainId: '0x1',
-      iconColor: 'var(--mainnet)',
-      isATestNetwork: false,
-      labelKey: 'mainnet',
-      providerType: 'mainnet',
-      rpcUrl: 'https://mainnet.infura.io/v3/',
-      ticker: 'ETH',
-      viewOnly: true,
-    },
-    {
-      blockExplorerUrl: 'https://goerli.etherscan.io',
-      chainId: '0x5',
-      iconColor: 'var(--color-network-goerli-default)',
-      isATestNetwork: true,
-      labelKey: 'goerli',
-      providerType: 'goerli',
-      rpcUrl: 'https://goerli.infura.io/v3/',
-      ticker: 'ETH',
-      viewOnly: true,
-    },
-    {
-      blockExplorerUrl: 'https://sepolia.etherscan.io',
-      chainId: '0xaa36a7',
-      iconColor: 'var(--color-network-sepolia-default)',
-      isATestNetwork: true,
-      labelKey: 'sepolia',
-      providerType: 'sepolia',
-      rpcUrl: 'https://sepolia.infura.io/v3/',
-      ticker: 'ETH',
-      viewOnly: true,
-    },
-    {
-      blockExplorerUrl: '',
-      chainId: '0x539',
-      iconColor: 'var(--color-network-localhost-default)',
-      isATestNetwork: true,
-      label: 'Localhost 8545',
-      providerType: 'rpc',
-      rpcUrl: 'http://localhost:8545',
-      ticker: 'ETH',
-    },
-    {
-      blockExplorerUrl: 'https://bscscan.com',
-      chainId: '0x38',
-      iconColor: 'var(--color-network-localhost-default)',
-      isATestNetwork: false,
-      label: 'Binance Smart Chain',
-      providerType: 'rpc',
-      rpcUrl: 'https://bsc-dataseed.binance.org/',
-      ticker: 'BNB',
-    },
-    {
-      blockExplorerUrl: 'https://cchain.explorer.avax.network/',
-      chainId: '0xa86a',
-      iconColor: 'var(--color-network-localhost-default)',
-      isATestNetwork: false,
-      label: 'Avalanche',
-      providerType: 'rpc',
-      rpcUrl: 'https://api.avax.network/ext/bc/C/rpc',
-      ticker: 'AVAX',
-    },
-    {
-      blockExplorerUrl: 'https://polygonscan.com',
-      chainId: '0x89',
-      iconColor: 'var(--color-network-localhost-default)',
-      isATestNetwork: false,
-      label: 'Polygon',
-      providerType: 'rpc',
-      rpcUrl: 'https://polygon-rpc.com',
-      ticker: 'MATIC',
-    },
-  ],
   metamask: {
     tokenList: {
       '0x514910771af9ca656af840dff83e8264ecf986ca': {
@@ -1425,23 +1350,6 @@ const state = {
         },
       },
     },
-    swapsState: {
-      quotes: {},
-      fetchParams: null,
-      tokens: null,
-      tradeTxId: null,
-      approveTxId: null,
-      quotesLastFetched: null,
-      customMaxGas: '',
-      customGasPrice: null,
-      selectedAggId: null,
-      customApproveTxData: '',
-      errorKey: '',
-      topAggId: null,
-      routeState: '',
-      swapsFeatureIsLive: false,
-      swapsQuoteRefreshTime: 60000,
-    },
     ensResolutionsByAddress: {},
     pendingApprovals: {},
     pendingApprovalCount: 0,
@@ -1692,4 +1600,80 @@ const state = {
   },
 };
 
+export const networkList =  [
+  {
+    blockExplorerUrl: 'https://etherscan.io',
+    chainId: '0x1',
+    iconColor: 'var(--mainnet)',
+    isATestNetwork: false,
+    labelKey: 'mainnet',
+    providerType: 'mainnet',
+    rpcUrl: 'https://mainnet.infura.io/v3/',
+    ticker: 'ETH',
+    viewOnly: true,
+  },
+  {
+    blockExplorerUrl: 'https://goerli.etherscan.io',
+    chainId: '0x5',
+    iconColor: 'var(--color-network-goerli-default)',
+    isATestNetwork: true,
+    labelKey: 'goerli',
+    providerType: 'goerli',
+    rpcUrl: 'https://goerli.infura.io/v3/',
+    ticker: 'ETH',
+    viewOnly: true,
+  },
+  {
+    blockExplorerUrl: 'https://sepolia.etherscan.io',
+    chainId: '0xaa36a7',
+    iconColor: 'var(--color-network-sepolia-default)',
+    isATestNetwork: true,
+    labelKey: 'sepolia',
+    providerType: 'sepolia',
+    rpcUrl: 'https://sepolia.infura.io/v3/',
+    ticker: 'ETH',
+    viewOnly: true,
+  },
+  {
+    blockExplorerUrl: '',
+    chainId: '0x539',
+    iconColor: 'var(--color-network-localhost-default)',
+    isATestNetwork: true,
+    label: 'Localhost 8545',
+    providerType: 'rpc',
+    rpcUrl: 'http://localhost:8545',
+    ticker: 'ETH',
+  },
+  {
+    blockExplorerUrl: 'https://bscscan.com',
+    chainId: '0x38',
+    iconColor: 'var(--color-network-localhost-default)',
+    isATestNetwork: false,
+    label: 'Binance Smart Chain',
+    providerType: 'rpc',
+    rpcUrl: 'https://bsc-dataseed.binance.org/',
+    ticker: 'BNB',
+  },
+  {
+    blockExplorerUrl: 'https://cchain.explorer.avax.network/',
+    chainId: '0xa86a',
+    iconColor: 'var(--color-network-localhost-default)',
+    isATestNetwork: false,
+    label: 'Avalanche',
+    providerType: 'rpc',
+    rpcUrl: 'https://api.avax.network/ext/bc/C/rpc',
+    ticker: 'AVAX',
+  },
+  {
+    blockExplorerUrl: 'https://polygonscan.com',
+    chainId: '0x89',
+    iconColor: 'var(--color-network-localhost-default)',
+    isATestNetwork: false,
+    label: 'Polygon',
+    providerType: 'rpc',
+    rpcUrl: 'https://polygon-rpc.com',
+    ticker: 'MATIC',
+  },
+]
+
 export default state;
diff --git a/ui/pages/settings/networks-tab/custom-content-search/custom-content-search.stories.js b/ui/pages/settings/networks-tab/custom-content-search/custom-content-search.stories.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import testData from '../../../../../.storybook/test-data';
+import { networkList } from '../../../../../.storybook/test-data';
 import CustomContentSearch from './custom-content-search';
 
 export default {
@@ -19,5 +19,5 @@ export default {
 };
 
 export const CustomContentSearchComponent = (args) => {
-  return <CustomContentSearch {...args} networksList={testData.networkList} />;
+  return <CustomContentSearch {...args} networksList={networkList} />;
 };
diff --git a/ui/pages/settings/networks-tab/custom-content-search/custom-content-search.test.js b/ui/pages/settings/networks-tab/custom-content-search/custom-content-search.test.js
@@ -3,7 +3,7 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import Fuse from 'fuse.js';
 import configureStore from '../../../../store/store';
 import { renderWithProvider } from '../../../../../test/lib/render-helpers';
-import testData from '../../../../../.storybook/test-data';
+import { networkList } from '../../../../../.storybook/test-data';
 import CustomContentSearch from './custom-content-search';
 
 function renderComponent({ componentProps = {} } = {}) {
@@ -15,15 +15,15 @@ describe('CustomContentSearch', () => {
   it('should render custom content search correctly', () => {
     const onSearch = jest.fn();
     const wrapper = renderComponent({
-      componentProps: { onSearch, networksList: testData.networkList },
+      componentProps: { onSearch, networksList: networkList },
     });
     expect(wrapper.getByTestId('search-networks')).toBeDefined();
   });
 
   it('should check placeholder text in TextField input', () => {
     const onSearch = jest.fn();
     const wrapper = renderComponent({
-      componentProps: { onSearch, networksList: testData.networkList },
+      componentProps: { onSearch, networksList: networkList },
     });
     const { getByPlaceholderText } = wrapper;
     expect(
@@ -68,14 +68,14 @@ describe('CustomContentSearch', () => {
 
   it('should check if error is shown if search does not return any network from the list', () => {
     const onSearch = jest.fn();
-    const networksSearchFuse = new Fuse(testData.networkList, {
+    const networksSearchFuse = new Fuse(networkList, {
       keys: ['label', 'labelKey'],
     });
     const fuseSearchResult = networksSearchFuse.search('Optimism');
     const wrapper = renderComponent({
       componentProps: {
         onSearch,
-        networksList: testData.networkList,
+        networksList: networkList,
         searchQueryInput: 'Optimism',
         error: 'No matching results found.',
       },
@@ -90,14 +90,14 @@ describe('CustomContentSearch', () => {
 
   it('should check if error is not shown if search return some network from the list', () => {
     const onSearch = jest.fn();
-    const networksSearchFuse = new Fuse(testData.networkList, {
+    const networksSearchFuse = new Fuse(networkList, {
       keys: ['label', 'labelKey'],
     });
     const fuseSearchResult = networksSearchFuse.search('goerli');
     const wrapper = renderComponent({
       componentProps: {
         onSearch,
-        networksList: testData.networkList,
+        networksList: networkList,
         searchQueryInput: 'Avalanche',
         error: '',
       },

diff --git a/ui/pages/settings/networks-tab/networks-list/network-list.stories.js b/ui/pages/settings/networks-tab/networks-list/network-list.stories.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import testData from '../../../../../.storybook/test-data';
+import { networkList } from '../../../../../.storybook/test-data';
 import NetworksList from './networks-list';
 
 export default {
@@ -19,7 +19,7 @@ export default {
   args: {
     networkDefaultedToProvider: false,
     networkIsSelected: false,
-    networksToRender: testData.networkList,
+    networksToRender: networkList,
   },
 };