feat: cover NFTs container

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(<NFTsContainer />)
+    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(<NFTsContainer />)
+    expect(await screen.findByTestId('fallback')).toBeTruthy()
+  })
+
+  it('renders NFT list when data is available', async () => {
+    render(<NFTsContainer />)
+
+    // 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(<NFTsContainer />)
+    expect(await screen.findByTestId('fallback')).toBeTruthy()
+  })
+})

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(<NoFunds />)
+
+    // 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(<NoFunds />)
+
+    // Check if EmptyToken is rendered by looking for its container
+    expect(screen.getByTestId('empty-token')).toBeTruthy()
+  })
+})

apps/mobile/src/features/Assets/components/NoFunds/NoFunds.tsx

@@ -4,7 +4,7 @@ import EmptyToken from './EmptyToken'
 
 export function NoFunds() {
   return (
-    <View alignItems="center" gap="$4">
+    <View testID="empty-token" alignItems="center" gap="$4">
       <EmptyToken />
       <H3 fontWeight={600}>Add funds to get started</H3>
       <Text textAlign="center" color="$colorSecondary" width="70%" fontSize="$4">

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)
+  }),
 ]

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,