Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fet-1613: Wrong NFTs being listed for Avatar selection #823

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

fet-1613: Wrong NFTs being listed for Avatar selection #823

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e76c87c
fet-1613: Wrong NFTs being listed for Avatar selection
Sep 10, 2024
b191bac
fix tests
Sep 10, 2024
a549d25
hide button if no eth address
Sep 11, 2024
27710e3
Merge branch 'main' into fet-1613
LeonmanRolls Sep 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions public/locales/en/transactionFlow.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@
"unknown": "Unknown NFT",
"loadError": "NFT cannot be loaded",
"noNFTs": "No NFTs found for this address.",
"address": {
"owned": "Owned",
"other": "Other"
},
"selected": {
"title": "Selected NFT",
"subtitle": "Are you sure you want to use this NFT?"
Expand Down
40 changes: 31 additions & 9 deletions src/components/@molecules/ProfileEditor/Avatar/AvatarNFT.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,13 @@ import { useAccount, useClient } from 'wagmi'

import * as ThorinComponents from '@ensdomains/thorin'

import { AvatarNFT } from './AvatarNFT'
import { makeMockIntersectionObserver } from '../../../../../test/mock/makeMockIntersectionObserver'
import { AvatarNFT } from './AvatarNFT'

vi.mock('wagmi')

vi.mock('@app/hooks/chain/useCurrentBlockTimestamp', () => ({
default: () => new Date(),
}))
vi.mock('@app/hooks/chain/useChainName', () => ({
useChainName: () => 'mainnet',
}))
Expand All @@ -24,6 +26,7 @@ const mockHandleCancel = vi.fn()
makeMockIntersectionObserver()

const props = {
name: 'test',
handleSubmit: mockHandleSubmit,
handleCancel: mockHandleCancel,
}
Expand Down Expand Up @@ -64,7 +67,7 @@ const generateNFT = (withMedia: boolean, contractAddress?: string) => (_: any, i
},
})

const mockFetch = vi.fn().mockImplementation(() =>
let mockFetch = vi.fn().mockImplementation(() =>
Promise.resolve({
ownedNfts: Array.from({ length: 5 }, generateNFT(true)),
totalCount: 5,
Expand All @@ -75,6 +78,7 @@ global.fetch = vi.fn(() => Promise.resolve({ json: mockFetch }))

beforeEach(() => {
mockFetch.mockClear()
mockFetch = vi.fn()
mockUseAccount.mockReturnValue({ address: `0x${Date.now()}` })
mockUseClient.mockReturnValue({
chain: {
Expand All @@ -97,6 +101,12 @@ describe('<AvatarNFT />', () => {
address: '0x0000000000000000000000000000000000000001',
})
it('should show detail on click', async () => {
mockFetch.mockImplementation(() =>
Promise.resolve({
ownedNfts: Array.from({ length: 5 }, generateNFT(true)),
totalCount: 5,
}),
)
render(<AvatarNFT {...props} />)

await waitFor(() => expect(screen.getByTestId('nft-0-0x0')).toBeVisible())
Expand All @@ -108,6 +118,12 @@ describe('<AvatarNFT />', () => {
})
})
it('should correctly call submit callback', async () => {
mockFetch.mockImplementation(() =>
Promise.resolve({
ownedNfts: Array.from({ length: 5 }, generateNFT(true)),
totalCount: 5,
}),
)
render(<AvatarNFT {...props} />)

await waitFor(() => expect(screen.getByTestId('nft-0-0x0')).toBeVisible())
Expand All @@ -125,9 +141,15 @@ describe('<AvatarNFT />', () => {
)
})
it('should display all NFTs', async () => {
mockFetch.mockImplementation(() =>
Promise.resolve({
ownedNfts: Array.from({ length: 5 }, generateNFT(true)),
totalCount: 5,
}),
)
render(<AvatarNFT {...props} />)

await waitFor(() => expect(mockFetch).toHaveBeenCalledTimes(1))
await waitFor(() => expect(mockFetch).toHaveBeenCalled())
await waitFor(() => expect(screen.getByTestId('nft-0-0x0')).toBeVisible())
expect(screen.getByText('NFT 0')).toBeVisible()
expect(screen.getByTestId('nft-1-0x1')).toBeVisible()
Expand All @@ -148,7 +170,7 @@ describe('<AvatarNFT />', () => {

render(<AvatarNFT {...props} />)

await waitFor(() => expect(mockFetch).toHaveBeenCalledTimes(1))
await waitFor(() => expect(mockFetch).toHaveBeenCalledTimes(2))
await waitFor(() =>
expect(
screen.queryByTestId('nft-0-0x57f1887a8bf19b14fc0df6fd9b2acc9af147ea85'),
Expand All @@ -164,7 +186,7 @@ describe('<AvatarNFT />', () => {
)
render(<AvatarNFT {...props} />)

await waitFor(() => expect(mockFetch).toHaveBeenCalledTimes(1))
await waitFor(() => expect(mockFetch).toHaveBeenCalled())
await waitFor(() => expect(screen.queryByTestId('nft-0-0x0')).not.toBeInTheDocument())
})
it.skip('show load more data on page load trigger', async () => {
Expand All @@ -185,7 +207,7 @@ describe('<AvatarNFT />', () => {

render(<AvatarNFT {...props} />)

await waitFor(() => expect(mockFetch).toHaveBeenCalledTimes(2))
await waitFor(() => expect(mockFetch).toHaveBeenCalledOnce())
await waitFor(
() =>
// @ts-ignore
Expand Down Expand Up @@ -222,7 +244,7 @@ describe('<AvatarNFT />', () => {

render(<AvatarNFT {...props} />)

await waitFor(() => expect(mockFetch).toHaveBeenCalledTimes(1))
await waitFor(() => expect(mockFetch).toHaveBeenCalled())
})

it('should show message if search returns no results', async () => {
Expand All @@ -241,7 +263,7 @@ describe('<AvatarNFT />', () => {
)

render(<AvatarNFT {...props} />)
await waitFor(() => expect(mockFetch).toHaveBeenCalledTimes(1))
await waitFor(() => expect(mockFetch).toHaveBeenCalled())
const searchInput = screen.getByTestId('avatar-search-input')
await userEvent.type(searchInput, 'blahblahblah')
await waitFor(() =>
Expand Down
Loading
Loading