diff --git a/apps/mobile/src/features/Assets/components/NFTs/NFTs.container.test.tsx b/apps/mobile/src/features/Assets/components/NFTs/NFTs.container.test.tsx new file mode 100644 index 0000000000..d3dedda2a2 --- /dev/null +++ b/apps/mobile/src/features/Assets/components/NFTs/NFTs.container.test.tsx @@ -0,0 +1,59 @@ +import React from 'react' +import { render, screen } from '@/src/tests/test-utils' +import { NFTsContainer } from './NFTs.container' +import { server } from '@/src/tests/server' +import { http, HttpResponse } from 'msw' +import { GATEWAY_URL } from '@/src/config/constants' + +// Mock active safe selector with memoized object +const mockActiveSafe = { chainId: '1', address: '0x123' } + +jest.mock('@/src/store/activeSafeSlice', () => ({ + selectActiveSafe: () => mockActiveSafe, +})) + +describe('NFTsContainer', () => { + afterAll(() => { + server.resetHandlers() + }) + it('renders loading state initially', () => { + render() + expect(screen.getByTestId('fallback')).toBeTruthy() + }) + + it('renders error state when API fails', async () => { + server.use( + http.get(`${GATEWAY_URL}//v2/chains/:chainId/safes/:safeAddress/collectibles`, () => { + return HttpResponse.error() + }), + ) + + render() + expect(await screen.findByTestId('fallback')).toBeTruthy() + }) + + it('renders NFT list when data is available', async () => { + render() + + // First verify we see the loading state + expect(screen.getByTestId('fallback')).toBeTruthy() + + // Then check for NFT content + const nft1 = await screen.findByText('NFT #1') + const nft2 = await screen.findByText('NFT #2') + + expect(nft1).toBeTruthy() + expect(nft2).toBeTruthy() + }) + + it('renders fallback when data is empty', async () => { + server.use( + http.get(`${GATEWAY_URL}//v2/chains/:chainId/safes/:safeAddress/collectibles`, () => { + return HttpResponse.json({ results: [] }) + }), + ) + + render() + expect(await screen.findByTestId('fallback')).toBeTruthy() + }) +}) diff --git a/apps/mobile/src/features/Assets/components/NoFunds/NoFunds.test.tsx b/apps/mobile/src/features/Assets/components/NoFunds/NoFunds.test.tsx new file mode 100644 index 0000000000..628372895e --- /dev/null +++ b/apps/mobile/src/features/Assets/components/NoFunds/NoFunds.test.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import { render, screen } from '@/src/tests/test-utils' +import { NoFunds } from './NoFunds' + +describe('NoFunds', () => { + it('renders the empty token component', () => { + render() + + // Check for the main elements + expect(screen.getByText('Add funds to get started')).toBeTruthy() + expect( + screen.getByText('Send funds to your Safe Account from another wallet by copying your address.'), + ).toBeTruthy() + }) + + it('renders the EmptyToken component', () => { + render() + + // Check if EmptyToken is rendered by looking for its container + expect(screen.getByTestId('empty-token')).toBeTruthy() + }) +}) diff --git a/apps/mobile/src/features/Assets/components/NoFunds/NoFunds.tsx b/apps/mobile/src/features/Assets/components/NoFunds/NoFunds.tsx index b0cf7f0e9d..1c5baad6e8 100644 --- a/apps/mobile/src/features/Assets/components/NoFunds/NoFunds.tsx +++ b/apps/mobile/src/features/Assets/components/NoFunds/NoFunds.tsx @@ -4,7 +4,7 @@ import EmptyToken from './EmptyToken' export function NoFunds() { return ( - +

Add funds to get started

diff --git a/apps/mobile/src/tests/handlers.ts b/apps/mobile/src/tests/handlers.ts index fafdae7897..69258153ad 100644 --- a/apps/mobile/src/tests/handlers.ts +++ b/apps/mobile/src/tests/handlers.ts @@ -1,22 +1,12 @@ import { http, HttpResponse } from 'msw' - -export const mockBalanceData = { - items: [ - { - tokenInfo: { - name: 'Ethereum', - symbol: 'ETH', - decimals: 18, - logoUri: 'https://safe-transaction-assets.safe.global/chains/1/chain_logo.png', - }, - balance: '1000000000000000000', - fiatBalance: '2000', - }, - ], -} +import { mockBalanceData, mockNFTData } from './mocks' +import { GATEWAY_URL } from '../config/constants' export const handlers = [ - http.get('https://safe-client.safe.global//v1/chains/1/safes/0x123/balances/USD', () => { + http.get(`${GATEWAY_URL}//v1/chains/1/safes/0x123/balances/USD`, () => { return HttpResponse.json(mockBalanceData) }), + http.get(`${GATEWAY_URL}//v2/chains/:chainId/safes/:safeAddress/collectibles`, () => { + return HttpResponse.json(mockNFTData) + }), ] diff --git a/apps/mobile/src/tests/mocks.ts b/apps/mobile/src/tests/mocks.ts index 7b1b4861ec..dcbc5e2db9 100644 --- a/apps/mobile/src/tests/mocks.ts +++ b/apps/mobile/src/tests/mocks.ts @@ -20,6 +20,52 @@ import { Transaction, } from '@safe-global/store/gateway/AUTO_GENERATED/transactions' +export const mockBalanceData = { + items: [ + { + tokenInfo: { + name: 'Ethereum', + symbol: 'ETH', + decimals: 18, + logoUri: 'https://safe-transaction-assets.safe.global/chains/1/chain_logo.png', + }, + balance: '1000000000000000000', + fiatBalance: '2000', + }, + ], +} + +export const mockNFTData = { + count: 2, + next: null, + previous: null, + results: [ + { + id: '1', + address: '0x123', + tokenName: 'Cool NFT', + tokenSymbol: 'CNFT', + logoUri: 'https://example.com/nft1.png', + name: 'NFT #1', + description: 'A cool NFT', + tokenId: '1', + uri: 'https://example.com/nft1.json', + imageUri: 'https://example.com/nft1.png', + }, + { + id: '2', + address: '0x456', + tokenName: 'Another NFT', + tokenSymbol: 'ANFT', + logoUri: 'https://example.com/nft2.png', + name: 'NFT #2', + description: 'Another cool NFT', + tokenId: '2', + uri: 'https://example.com/nft2.json', + imageUri: 'https://example.com/nft2.png', + }, + ], +} export const fakeToken = { address: '0x1111111111', decimals: 18,