Skip to content

Commit

Permalink
fix: Update AssetPage unit tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@gambinish
gambinish committed Nov 14, 2024
1 parent 8444f06 commit a72111d
Show file tree
Hide file tree
Showing 5 changed files with 113 additions and 63 deletions.
2 changes: 1 addition & 1 deletion ...ents/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ export default function UserPreferencedCurrencyDisplay({
numberOfDecimals={numberOfDecimals}
prefixComponent={prefixComponent}
hideLabel={!showCurrencySuffix}
suffix={showCurrencySuffix && !showEthLogo && currency.toUpperCase()}
suffix={showCurrencySuffix && !showEthLogo && currency}
privacyMode={privacyMode}
/>
);
Expand Down
55 changes: 33 additions & 22 deletions ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,9 +180,10 @@ exports[`AssetPage should render a native asset 1`] = `
class="mm-box multichain-token-list-item mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-column"
data-testid="multichain-token-list-item"
>
<div
class="mm-box multichain-token-list-item__container-cell mm-box--padding-top-2 mm-box--padding-right-4 mm-box--padding-bottom-2 mm-box--padding-left-4 mm-box--display-flex mm-box--flex-direction-row"
<a
class="mm-box multichain-token-list-item__container-cell multichain-token-list-item__container-cell--clickable mm-box--padding-top-2 mm-box--padding-right-4 mm-box--padding-bottom-2 mm-box--padding-left-4 mm-box--display-flex mm-box--flex-direction-row"
data-testid="multichain-token-list-button"
href="#"
>
<div
class="mm-box mm-badge-wrapper multichain-token-list-item__badge mm-box--margin-right-4 mm-box--display-inline-block"
Expand All @@ -199,7 +200,7 @@ exports[`AssetPage should render a native asset 1`] = `
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network multichain-token-list-item__badge__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
>
<img
alt="Ethereum Mainnet logo"
alt="929c0f2f-eac8-49d0-848f-bbf6fdd590c3 logo"
class="mm-avatar-network__network-image"
src="./images/eth_logo.svg"
/>
Expand All @@ -221,35 +222,39 @@ exports[`AssetPage should render a native asset 1`] = `
>
TEST
</span>
<p
class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--color-text-alternative"
data-testid="multichain-token-list-item-token-name"
<div
class="mm-box mm-box--display-flex"
>
TEST
</p>
<p
class="mm-box mm-text mm-text--body-sm-medium mm-text--ellipsis mm-box--color-text-default"
data-testid="token-increase-decrease-percentage-0x0000000000000000000000000000000000000000"
/>
</div>
</div>
<div
class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-flex-end mm-box--width-2/3"
>
<p
class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end mm-box--width-2/3 mm-box--color-text-default"
data-testid="multichain-token-list-item-secondary-value"
/>
>
$0.00
</p>
<p
class="mm-box mm-text mm-text--body-sm-medium mm-text--text-align-end mm-box--color-text-alternative"
data-testid="multichain-token-list-item-value"
>
0 TEST
0
TEST
</p>
</div>
</div>
<div
class="mm-box mm-box--display-flex mm-box--gap-1 mm-box--flex-direction-row mm-box--justify-content-space-between"
/>
</div>
</div>
</a>
</div>
<div
class="mm-box mm-box--margin-top-2 mm-box--display-flex mm-box--gap-7 mm-box--flex-direction-column"
Expand Down Expand Up @@ -470,9 +475,10 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
class="mm-box multichain-token-list-item mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-column"
data-testid="multichain-token-list-item"
>
<div
class="mm-box multichain-token-list-item__container-cell mm-box--padding-top-2 mm-box--padding-right-4 mm-box--padding-bottom-2 mm-box--padding-left-4 mm-box--display-flex mm-box--flex-direction-row"
<a
class="mm-box multichain-token-list-item__container-cell multichain-token-list-item__container-cell--clickable mm-box--padding-top-2 mm-box--padding-right-4 mm-box--padding-bottom-2 mm-box--padding-left-4 mm-box--display-flex mm-box--flex-direction-row"
data-testid="multichain-token-list-button"
href="#"
>
<div
class="mm-box mm-badge-wrapper multichain-token-list-item__badge mm-box--margin-right-4 mm-box--display-inline-block"
Expand All @@ -489,7 +495,7 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network multichain-token-list-item__badge__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
>
<img
alt="Ethereum Mainnet logo"
alt="929c0f2f-eac8-49d0-848f-bbf6fdd590c3 logo"
class="mm-avatar-network__network-image"
src="./images/eth_logo.svg"
/>
Expand Down Expand Up @@ -526,7 +532,9 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
<p
class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end mm-box--width-2/3 mm-box--color-text-default"
data-testid="multichain-token-list-item-secondary-value"
/>
>
$0.00
</p>
<p
class="mm-box mm-text mm-text--body-sm-medium mm-text--text-align-end mm-box--color-text-alternative"
data-testid="multichain-token-list-item-value"
Expand All @@ -541,7 +549,7 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
class="mm-box mm-box--display-flex mm-box--gap-1 mm-box--flex-direction-row mm-box--justify-content-space-between"
/>
</div>
</div>
</a>
</div>
<div
class="mm-box mm-box--margin-top-2 mm-box--display-flex mm-box--gap-7 mm-box--flex-direction-column"
Expand Down Expand Up @@ -953,9 +961,10 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
class="mm-box multichain-token-list-item mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-column"
data-testid="multichain-token-list-item"
>
<div
class="mm-box multichain-token-list-item__container-cell mm-box--padding-top-2 mm-box--padding-right-4 mm-box--padding-bottom-2 mm-box--padding-left-4 mm-box--display-flex mm-box--flex-direction-row"
<a
class="mm-box multichain-token-list-item__container-cell multichain-token-list-item__container-cell--clickable mm-box--padding-top-2 mm-box--padding-right-4 mm-box--padding-bottom-2 mm-box--padding-left-4 mm-box--display-flex mm-box--flex-direction-row"
data-testid="multichain-token-list-button"
href="#"
>
<div
class="mm-box mm-badge-wrapper multichain-token-list-item__badge mm-box--margin-right-4 mm-box--display-inline-block"
Expand All @@ -972,7 +981,7 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network multichain-token-list-item__badge__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
>
<img
alt="Ethereum Mainnet logo"
alt="929c0f2f-eac8-49d0-848f-bbf6fdd590c3 logo"
class="mm-avatar-network__network-image"
src="./images/eth_logo.svg"
/>
Expand Down Expand Up @@ -1009,7 +1018,9 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
<p
class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end mm-box--width-2/3 mm-box--color-text-default"
data-testid="multichain-token-list-item-secondary-value"
/>
>
$0.00
</p>
<p
class="mm-box mm-text mm-text--body-sm-medium mm-text--text-align-end mm-box--color-text-alternative"
data-testid="multichain-token-list-item-value"
Expand All @@ -1024,7 +1035,7 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
class="mm-box mm-box--display-flex mm-box--gap-1 mm-box--flex-direction-row mm-box--justify-content-space-between"
/>
</div>
</div>
</a>
</div>
<div
class="mm-box mm-box--margin-top-2 mm-box--display-flex mm-box--gap-7 mm-box--flex-direction-column"
Expand Down
114 changes: 74 additions & 40 deletions ui/pages/asset/components/asset-page.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { AssetType } from '../../../../shared/constants/transaction';
import { ETH_EOA_METHODS } from '../../../../shared/constants/eth-methods';
import { setBackgroundConnection } from '../../../store/background-connection';
import { mockNetworkState } from '../../../../test/stub/networks';
import useMultiPolling from '../../../hooks/useMultiPolling';
import AssetPage from './asset-page';

// Mock the price chart
Expand All @@ -33,17 +34,36 @@ jest.mock('../../../../shared/constants/network', () => ({
},
}));

jest.mock('../../../hooks/useMultiPolling', () => ({
__esModule: true,
default: jest.fn(),
}));

describe('AssetPage', () => {
const mockStore = {
localeMessages: {
currentLocale: 'en',
},
metamask: {
tokenList: {},
tokenBalances: {},
marketData: {},
allTokens: {},
accountsByChainId: {
'0x1': {
'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3': {
address: 'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3',
balance: '0x00',
},
},
},
currentCurrency: 'usd',
accounts: {},
...mockNetworkState({ chainId: CHAIN_IDS.MAINNET }),
currencyRates: {
TEST: {
conversionRate: 123,
},
ETH: {
conversionRate: 123,
},
Expand All @@ -53,7 +73,7 @@ describe('AssetPage', () => {
internalAccounts: {
accounts: {
'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3': {
address: '0x1',
address: 'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3',
id: 'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3',
metadata: {
name: 'Test Account',
Expand Down Expand Up @@ -119,6 +139,23 @@ describe('AssetPage', () => {
formatRangeToParts: jest.fn(),
};
});
// Clear previous mock implementations
(useMultiPolling as jest.Mock).mockClear();

// Mock implementation for useMultiPolling
(useMultiPolling as jest.Mock).mockImplementation(({ input }) => {
// Mock startPolling and stopPollingByPollingToken for each input
const startPolling = jest.fn().mockResolvedValue('mockPollingToken');
const stopPollingByPollingToken = jest.fn();

input.forEach((inputItem: string) => {
const key = JSON.stringify(inputItem);
// Simulate returning a unique token for each input
startPolling.mockResolvedValueOnce(`mockToken-${key}`);
});

return { startPolling, stopPollingByPollingToken };
});
});

afterEach(() => {
Expand Down Expand Up @@ -320,50 +357,47 @@ describe('AssetPage', () => {
});

it('should render an ERC20 token with prices', async () => {
// jest.useFakeTimers();
try {
const address = '0xe4246B1Ac0Ba6839d9efA41a8A30AE3007185f55';
const marketCap = 456;

// Mock price history
nock('https://price.api.cx.metamask.io')
.get(`/v1/chains/${CHAIN_IDS.MAINNET}/historical-prices/${address}`)
.query(true)
.reply(200, { prices: [[1, 1]] });

const { queryByTestId, container } = renderWithProvider(
<AssetPage asset={{ ...token, address }} optionsButton={null} />,
configureMockStore([thunk])({
...mockStore,
metamask: {
...mockStore.metamask,
marketData: {
[CHAIN_IDS.MAINNET]: {
[address]: {
price: 123,
marketCap,
},
const address = '0xe4246B1Ac0Ba6839d9efA41a8A30AE3007185f55';
const marketCap = 456;

// Mock price history
nock('https://price.api.cx.metamask.io')
.get(`/v1/chains/${CHAIN_IDS.MAINNET}/historical-prices/${address}`)
.query(true)
.reply(200, { prices: [[1, 1]] });

const { queryByTestId, container } = renderWithProvider(
<AssetPage asset={{ ...token, address }} optionsButton={null} />,
configureMockStore([thunk])({
...mockStore,
metamask: {
...mockStore.metamask,
marketData: {
[CHAIN_IDS.MAINNET]: {
[address]: {
price: 123,
marketCap,
currency: 'ETH',
},
},
},
}),
);
},
}),
);

// Verify chart is rendered
await waitFor(() => {
const chart = queryByTestId('asset-price-chart');
expect(chart).toHaveClass('mm-box--background-color-transparent');
});
// Verify chart is rendered
await waitFor(() => {
const chart = queryByTestId('asset-price-chart');
console.log('CHART: ', chart);
expect(chart).toHaveClass('mm-box--background-color-transparent');
});

// Verify market data is rendered
const marketCapElement = queryByTestId('asset-market-cap');
expect(marketCapElement).toHaveTextContent(
`${marketCap * mockStore.metamask.currencyRates.ETH.conversionRate}`,
);
// Verify market data is rendered
const marketCapElement = queryByTestId('asset-market-cap');
expect(marketCapElement).toHaveTextContent(
`${marketCap * mockStore.metamask.currencyRates.ETH.conversionRate}`,
);

expect(container).toMatchSnapshot();
} finally {
// jest.useRealTimers();
}
expect(container).toMatchSnapshot();
});
});
3 changes: 3 additions & 0 deletions ui/pages/asset/components/asset-page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,7 @@ const AssetPage = ({
) as Record<Hex, Hex>;

const { chainId, type, symbol, name, image, decimals } = asset;
console.log(symbol);

const address =
type === AssetType.token
Expand Down Expand Up @@ -155,6 +156,8 @@ const AssetPage = ({
tokenMarketDetails.allTimeHigh > 0 ||
tokenMarketDetails.allTimeLow > 0);

console.log('chart', chainId, address, currentPrice, currency);

return (
<Box
marginLeft="auto"
Expand Down
2 changes: 2 additions & 0 deletions ui/pages/asset/components/chart/asset-chart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,8 @@ const AssetChart = ({
},
} as const;

console.log('THIS: ', currentPrice, loading, prices);

if (!currentPrice || (!loading && !prices)) {
return null;
}
Expand Down

0 comments on commit a72111d

Please sign in to comment.