enabling and disabling tokens tests wip

src/components/layout/Button/index.jsx

@@ -20,7 +20,9 @@ const calculateStyleBased = (minWidth, minHeight) => ({
   minHeight: minHeight && `${minHeight}px`,
 })
 
-const GnoButton = ({ minWidth, minHeight, testId = '', ...props }: Props) => {
+const GnoButton = ({
+  minWidth, minHeight, testId = '', ...props
+}: Props) => {
   const style = calculateStyleBased(minWidth, minHeight)
 
   return <Button style={style} data-testid={testId} {...props} />

src/routes/safe/components/Balances/Tokens/screens/TokenList/index.jsx

@@ -25,6 +25,7 @@ import { setImageToPlaceholder } from '~/routes/safe/components/Balances/utils'
 import { styles } from './style'
 
 export const ADD_CUSTOM_TOKEN_BUTTON_TEST_ID = 'add-custom-token-btn'
+export const TOGGLE_TOKEN_TEST_ID = 'toggle-token-btn'
 
 type Props = {
   classes: Object,
@@ -167,7 +168,11 @@ class Tokens extends React.Component<Props, State> {
                 <ListItemText primary={token.symbol} secondary={token.name} />
                 {token.address !== ETH_ADDRESS && (
                   <ListItemSecondaryAction>
-                    <Switch onChange={this.onSwitch(token)} checked={isActive} />
+                    <Switch
+                      onChange={this.onSwitch(token)}
+                      checked={isActive}
+                      inputProps={{ 'data-testid': `${token.symbol}_${TOGGLE_TOKEN_TEST_ID}` }}
+                    />
                   </ListItemSecondaryAction>
                 )}
               </ListItem>

src/test/builder/safe.dom.utils.js

@@ -119,15 +119,6 @@ export const renderSafeView = (store: Store<GlobalState>, address: string) => {
   return app
 }
 
-export const travelToTokens = (store: Store<GlobalState>, address: string) => {
-  const app = renderApp(store)
-
-  const url = `${SAFELIST_ADDRESS}/${address}${SETTINS_ADDRESS}`
-  history.push(url)
-
-  return app
-}
-
 const INTERVAL = 500
 const MAX_TIMES_EXECUTED = 30
 export const whenSafeDeployed = (): Promise<string> => new Promise((resolve, reject) => {

src/test/builder/tokens.dom.utils.js

@@ -1,23 +1,6 @@
 // @flow
-import * as TestUtils from 'react-dom/test-utils'
-import { travelToTokens } from '~/test/builder/safe.dom.utils'
-import { sleep } from '~/utils/timer'
 import { type Token } from '~/logic/tokens/store/model/token'
 
-export const enableFirstToken = async (store: Store, safeAddress: string) => {
-  const TokensDom = await travelToTokens(store, safeAddress)
-  await sleep(400)
-
-  // WHEN
-  const inputs = TestUtils.scryRenderedDOMComponentsWithTag(TokensDom, 'input')
-
-  const ethTokenInput = inputs[2]
-  expect(ethTokenInput.hasAttribute('disabled')).toBe(true)
-  const firstTokenInput = inputs[0]
-  expect(firstTokenInput.hasAttribute('disabled')).toBe(false)
-  TestUtils.Simulate.change(firstTokenInput, { target: { checked: 'true' } })
-}
-
 export const testToken = (token: Token | typeof undefined, symbol: string) => {
   if (!token) throw new Error()
   expect(token.get('symbol')).toBe(symbol)

src/test/tokens.dom.enabling.test.js

@@ -1,65 +1,68 @@
 // @flow
-import * as TestUtils from 'react-dom/test-utils'
 import { List } from 'immutable'
 import { getWeb3 } from '~/logic/wallets/getWeb3'
-import { type Match } from 'react-router-dom'
 import Checkbox from '@material-ui/core/Checkbox'
-import { getFirstTokenContract, getSecondTokenContract, sendTokenTo } from '~/test/utils/tokenMovements'
+import { getFirstTokenContract, getSecondTokenContract } from '~/test/utils/tokenMovements'
 import { aNewStore } from '~/store'
 import { aMinedSafe } from '~/test/builder/safe.redux.builder'
-import { travelToTokens } from '~/test/builder/safe.dom.utils'
+import { renderSafeView } from '~/test/builder/safe.dom.utils'
 import { sleep } from '~/utils/timer'
-import { buildMathPropsFrom } from '~/test/utils/buildReactRouterProps'
+import { testToken } from '~/test/builder/tokens.dom.utils'
-import { tokenListSelector } from '~/logic/tokens/store/selectors'
+import saveTokens from '~/logic/tokens/store/actions/saveTokens'
-import { getActiveTokenAddresses } from '~/logic/tokens/utils/tokensStorage'
+import { clickOnManageTokens, toggleToken } from './utils/DOMNavigation'
-import { enableFirstToken, testToken } from '~/test/builder/tokens.dom.utils'
+import { BALANCE_ROW_TEST_ID } from '~/routes/safe/components/Balances'
-import * as fetchTokensModule from '~/logic/tokens/store/actions/fetchTokens'
+import { makeToken } from '~/logic/tokens/store/model/token'
-import * as enhancedFetchModule from '~/utils/fetch'
 
 describe('DOM > Feature > Enable and disable default tokens', () => {
   let web3
   let accounts
   let firstErc20Token
   let secondErc20Token
+  let tokens
 
   beforeAll(async () => {
     web3 = getWeb3()
     accounts = await web3.eth.getAccounts()
+
     firstErc20Token = await getFirstTokenContract(web3, accounts[0])
     secondErc20Token = await getSecondTokenContract(web3, accounts[0])
-    // $FlowFixMe
+    tokens = List([
-    enhancedFetchModule.enhancedFetch = jest.fn()
+      makeToken({
-    enhancedFetchModule.enhancedFetch.mockImplementation(() => Promise.resolve({
-      results: [
-        {
         address: firstErc20Token.address,
         name: 'First Token Example',
         symbol: 'FTE',
         decimals: 18,
         logoUri: 'https://upload.wikimedia.org/wikipedia/commons/c/c0/Earth_simple_icon.png',
-        },
+      }),
-        {
+      makeToken({
         address: secondErc20Token.address,
         name: 'Second Token Example',
         symbol: 'STE',
         decimals: 18,
         logoUri: 'https://upload.wikimedia.org/wikipedia/commons/c/c0/Earth_simple_icon.png',
-        },
+      }),
-      ],
+    ])
-    }))
   })
 
-  it('retrieves only ether as active token in first moment', async () => {
+  it('allows to enable and disable tokens', async () => {
     // GIVEN
     const store = aNewStore()
     const safeAddress = await aMinedSafe(store)
-    await store.dispatch(fetchTokensModule.fetchTokens(safeAddress))
+    await store.dispatch(saveTokens(tokens))
 
     // WHEN
-    const TokensDom = await travelToTokens(store, safeAddress)
+    const TokensDom = await renderSafeView(store, safeAddress)
     await sleep(400)
 
+    // Check if only ETH is enabled
+    TokensDom.getAllByTestId(BALANCE_ROW_TEST_ID)
+    console.log(store.getState().tokens.toJS())
+
     // THEN
+    clickOnManageTokens(TokensDom)
+    toggleToken(TokensDom, 'FTE', firstErc20Token.address)
+    toggleToken(TokensDom, 'STE', secondErc20Token.address)
+
     const tokens = TestUtils.scryRenderedComponentsWithType(TokensDom, TokenComponent)
     expect(tokens.length).toBe(3)
 
@@ -71,60 +74,4 @@ describe('DOM > Feature > Enable and disable default tokens', () => {
     if (!ethCheckbox) throw new Error()
     expect(ethCheckbox.props.disabled).toBe(true)
   })
-
-  it('fetch balances of only enabled tokens', async () => {
-    // GIVEN
-    const store = aNewStore()
-    const safeAddress = await aMinedSafe(store)
-    await sendTokenTo(safeAddress, '50', firstErc20Token)
-    await sendTokenTo(safeAddress, '50', secondErc20Token)
-    await store.dispatch(fetchTokensModule.fetchTokens(safeAddress))
-
-    const match: Match = buildMathPropsFrom(safeAddress)
-    let tokenList = tokenListSelector(store.getState(), { match })
-    expect(tokenList.count()).toBe(3)
-
-    await enableFirstToken(store, safeAddress)
-    tokenList = tokenListSelector(store.getState(), { match })
-    expect(tokenList.count()).toBe(3) // assuring the enableToken do not add extra info
-
-    // THEN
-    testToken(tokenList.get(0), 'FTE', true)
-    testToken(tokenList.get(1), 'STE', false)
-    testToken(tokenList.get(2), 'ETH', true)
-
-    const activeTokenList = activeTokensSelector(store.getState(), { match })
-    expect(activeTokenList.count()).toBe(2)
-
-    testToken(activeTokenList.get(0), 'FTE', true)
-    testToken(activeTokenList.get(1), 'ETH', true)
-
-    await store.dispatch(fetchTokensModule.fetchTokens(safeAddress))
-
-    const fundedTokenList = tokenListSelector(store.getState(), { match })
-    expect(fundedTokenList.count()).toBe(3)
-
-    testToken(fundedTokenList.get(0), 'FTE', true, '50')
-    testToken(fundedTokenList.get(1), 'STE', false, '0')
-    testToken(fundedTokenList.get(2), 'ETH', true, '0')
-  })
-
-  it('localStorage always returns a list', async () => {
-    const store = aNewStore()
-    const safeAddress = await aMinedSafe(store)
-    let tokens: List<string> = getActiveTokenAddresses(safeAddress)
-    expect(tokens).toEqual(List([]))
-
-    await store.dispatch(fetchTokensModule.fetchTokens(safeAddress))
-    tokens = getActiveTokenAddresses(safeAddress)
-    expect(tokens.count()).toBe(0)
-
-    await enableFirstToken(store, safeAddress)
-    tokens = getActiveTokenAddresses(safeAddress)
-    expect(tokens.count()).toBe(1)
-
-    await store.dispatch(fetchTokensModule.fetchTokens(safeAddress))
-    tokens = getActiveTokenAddresses(safeAddress)
-    expect(tokens.count()).toBe(1)
-  })
 })

src/test/utils/DOMNavigation/tokens.js

@@ -1,7 +1,7 @@
 // @flow
 import { fireEvent } from '@testing-library/react'
 import { MANAGE_TOKENS_BUTTON_TEST_ID } from '~/routes/safe/components/Balances'
-import { ADD_CUSTOM_TOKEN_BUTTON_TEST_ID } from '~/routes/safe/components/Balances/Tokens/screens/TokenList'
+import { ADD_CUSTOM_TOKEN_BUTTON_TEST_ID, TOGGLE_TOKEN_TEST_ID } from '~/routes/safe/components/Balances/Tokens/screens/TokenList'
 
 export const clickOnManageTokens = (dom: any): void => {
   const btn = dom.getByTestId(MANAGE_TOKENS_BUTTON_TEST_ID)
@@ -14,3 +14,7 @@ export const clickOnAddCustomToken = (dom: any): void => {
 
   fireEvent.click(btn)
 }
+
+export const toggleToken = (dom: any, symbol: string): void => {
+  const btn = dom.getByTestId(`${symbol}_${TOGGLE_TOKEN_TEST_ID}`)
+}