2021-12-14 00:41:10 +01:00
import React from 'react' ;
import { fireEvent , screen } from '@testing-library/react' ;
import reactRouterDom from 'react-router-dom' ;
import configureStore from '../../../store/store' ;
import { renderWithProvider } from '../../../../test/jest/rendering' ;
import { EXPERIMENTAL _ROUTE } from '../../../helpers/constants/routes' ;
import { setBackgroundConnection } from '../../../../test/jest' ;
2023-01-25 17:33:06 +01:00
import { hexToDecimal } from '../../../../shared/modules/conversion.utils' ;
2021-12-14 00:41:10 +01:00
import CollectiblesTab from '.' ;
const COLLECTIBLES = [
{
address : '0x495f947276749Ce646f68AC8c248420045cb7b5e' ,
tokenId :
'58076532811975507823669075598676816378162417803895263482849101575514658701313' ,
name : 'Punk #4' ,
creator : {
user : {
username : null ,
} ,
profile _img _url : null ,
address : '0x806627172af48bd5b0765d3449a7def80d6576ff' ,
config : '' ,
} ,
description : 'Red Mohawk bam!' ,
image :
'https://lh3.googleusercontent.com/BdxvLseXcfl57BiuQcQYdJ64v-aI8din7WPk0Pgo3qQFhAUH-B6i-dCqqc_mCkRIzULmwzwecnohLhrcH8A9mpWIZqA7ygc52Sr81hE' ,
standard : 'ERC1155' ,
} ,
{
address : '0x495f947276749Ce646f68AC8c248420045cb7b5e' ,
tokenId :
'58076532811975507823669075598676816378162417803895263482849101574415147073537' ,
name : 'Punk #3' ,
creator : {
user : {
username : null ,
} ,
profile _img _url : null ,
address : '0x806627172af48bd5b0765d3449a7def80d6576ff' ,
config : '' ,
} ,
description : 'Clown PUNK!!!' ,
image :
'https://lh3.googleusercontent.com/H7VrxaalZv4PF1B8U7ADuc8AfuqTVyzmMEDQ5OXKlx0Tqu5XiwsKYj4j_pAF6wUJjLMQbSN_0n3fuj84lNyRhFW9hyrxqDfY1IiQEQ' ,
standard : 'ERC1155' ,
} ,
{
address : '0x495f947276749Ce646f68AC8c248420045cb7b5e' ,
tokenId :
'58076532811975507823669075598676816378162417803895263482849101573315635445761' ,
name : 'Punk #2' ,
creator : {
user : {
username : null ,
} ,
profile _img _url : null ,
address : '0x806627172af48bd5b0765d3449a7def80d6576ff' ,
config : '' ,
} ,
description : 'Got glasses and black hair!' ,
image :
'https://lh3.googleusercontent.com/CHNTSlKB_Gob-iwTq8jcag6XwBkTqBMLt_vEKeBv18Q4AoPFAEPceqK6mRzkad2s5djx6CT5zbGQwDy81WwtNzViK5dQbG60uAWv' ,
standard : 'ERC1155' ,
} ,
{
address : '0x495f947276749Ce646f68AC8c248420045cb7b5e' ,
tokenId :
'58076532811975507823669075598676816378162417803895263482849101572216123817985' ,
name : 'Punk #1' ,
creator : {
user : {
username : null ,
} ,
profile _img _url : null ,
address : '0x806627172af48bd5b0765d3449a7def80d6576ff' ,
config : '' ,
} ,
image :
'https://lh3.googleusercontent.com/4jfPi-nQNWCUXD5qVNVWX7LX2UufU_elEJcvICFlsTdcBXv70asnDEOlI8oKECZxlXq1wseeIXMwmP5tLyOUxMKk' ,
standard : 'ERC1155' ,
} ,
{
address : '0x495f947276749Ce646f68AC8c248420045cb7b5e' ,
tokenId :
'58076532811975507823669075598676816378162417803895263482849101571116612190209' ,
name : 'Punk #4651' ,
creator : {
user : {
username : null ,
} ,
profile _img _url : null ,
address : '0x806627172af48bd5b0765d3449a7def80d6576ff' ,
config : '' ,
} ,
image :
'https://lh3.googleusercontent.com/BdxvLseXcfl57BiuQcQYdJ64v-aI8din7WPk0Pgo3qQFhAUH-B6i-dCqqc_mCkRIzULmwzwecnohLhrcH8A9mpWIZqA7ygc52Sr81hE' ,
standard : 'ERC1155' ,
} ,
{
address : '0xDc7382Eb0Bc9C352A4CbA23c909bDA01e0206414' ,
tokenId : '1' ,
name : 'MUNK #1' ,
description : null ,
image : 'ipfs://QmTSZUNt8AKyDabkyXXXP4oHWDnaVXgNdXoJGEyaYzLbeL' ,
standard : 'ERC721' ,
} ,
{
address : '0xDc7382Eb0Bc9C352A4CbA23c909bDA01e0206414' ,
tokenId : '2' ,
name : 'MUNK #2' ,
description : null ,
image : 'ipfs://QmTSZUNt8AKyDabkyXXXP4oHWDnaVXgNdXoJGEyaYzLbeL' ,
standard : 'ERC721' ,
} ,
{
address : '0xDc7382Eb0Bc9C352A4CbA23c909bDA01e0206414' ,
tokenId : '3' ,
name : 'MUNK #3' ,
description : null ,
image : 'ipfs://QmTSZUNt8AKyDabkyXXXP4oHWDnaVXgNdXoJGEyaYzLbeL' ,
standard : 'ERC721' ,
} ,
] ;
const COLLECTIBLES _CONTRACTS = [
{
address : '0x495f947276749Ce646f68AC8c248420045cb7b5e' ,
name : 'PUNKS' ,
symbol : 'PNKS' ,
schemaName : 'ERC1155' ,
} ,
{
address : '0xDc7382Eb0Bc9C352A4CbA23c909bDA01e0206414' ,
name : 'Munks' ,
symbol : 'MNKS' ,
} ,
] ;
2022-01-27 18:26:33 +01:00
const collectiblesDropdownState = {
2022-07-26 20:10:51 +02:00
'0x495f947276749ce646f68ac8c248420045cb7b5e' : true ,
'0xdc7382eb0bc9c352a4cba23c909bda01e0206414' : true ,
2022-01-27 18:26:33 +01:00
} ;
2021-12-14 00:41:10 +01:00
const ACCOUNT _1 = '0x123' ;
const ACCOUNT _2 = '0x456' ;
const render = ( {
collectibleContracts = [ ] ,
collectibles = [ ] ,
selectedAddress ,
chainId = '0x1' ,
collectiblesDetectionNoticeDismissed = false ,
2022-11-15 19:49:42 +01:00
useNftDetection ,
2021-12-14 00:41:10 +01:00
onAddNFT = jest . fn ( ) ,
} ) => {
2023-01-25 17:33:06 +01:00
const chainIdAsDecimal = hexToDecimal ( chainId ) ;
2021-12-14 00:41:10 +01:00
const store = configureStore ( {
metamask : {
2022-11-15 19:49:42 +01:00
allNfts : {
2021-12-14 00:41:10 +01:00
[ ACCOUNT _1 ] : {
2023-01-25 17:33:06 +01:00
[ chainIdAsDecimal ] : collectibles ,
2021-12-14 00:41:10 +01:00
} ,
} ,
2022-11-15 19:49:42 +01:00
allNftContracts : {
2021-12-14 00:41:10 +01:00
[ ACCOUNT _1 ] : {
2023-01-25 17:33:06 +01:00
[ chainIdAsDecimal ] : collectibleContracts ,
2021-12-14 00:41:10 +01:00
} ,
} ,
provider : { chainId } ,
selectedAddress ,
collectiblesDetectionNoticeDismissed ,
2022-11-15 19:49:42 +01:00
useNftDetection ,
2022-01-27 18:26:33 +01:00
collectiblesDropdownState ,
2021-12-14 00:41:10 +01:00
} ,
} ) ;
return renderWithProvider ( < CollectiblesTab onAddNFT = { onAddNFT } / > , store ) ;
} ;
describe ( 'Collectible Items' , ( ) => {
const detectCollectiblesStub = jest . fn ( ) ;
const setCollectiblesDetectionNoticeDismissedStub = jest . fn ( ) ;
2022-01-03 21:39:41 +01:00
const getStateStub = jest . fn ( ) ;
2022-01-10 17:23:53 +01:00
const checkAndUpdateAllCollectiblesOwnershipStatusStub = jest . fn ( ) ;
2022-01-31 19:56:49 +01:00
const updateCollectibleDropDownStateStub = jest . fn ( ) ;
2021-12-14 00:41:10 +01:00
setBackgroundConnection ( {
2022-07-31 20:26:40 +02:00
setCollectiblesDetectionNoticeDismissed :
setCollectiblesDetectionNoticeDismissedStub ,
2022-11-15 19:49:42 +01:00
detectNfts : detectCollectiblesStub ,
2022-01-03 21:39:41 +01:00
getState : getStateStub ,
2022-11-15 19:49:42 +01:00
checkAndUpdateAllNftsOwnershipStatus :
2022-07-31 20:26:40 +02:00
checkAndUpdateAllCollectiblesOwnershipStatusStub ,
2022-01-31 19:56:49 +01:00
updateCollectibleDropDownState : updateCollectibleDropDownStateStub ,
2021-12-14 00:41:10 +01:00
} ) ;
const historyPushMock = jest . fn ( ) ;
jest
. spyOn ( reactRouterDom , 'useHistory' )
. mockImplementation ( )
. mockReturnValue ( { push : historyPushMock } ) ;
afterEach ( ( ) => {
jest . clearAllMocks ( ) ;
} ) ;
describe ( 'Collectibles Detection Notice' , ( ) => {
it ( 'should render the Collectibles Detection Notice when currently selected network is Mainnet and currently selected account has no collectibles' , ( ) => {
render ( {
selectedAddress : ACCOUNT _2 ,
collectibles : COLLECTIBLES ,
} ) ;
expect ( screen . queryByText ( 'New! NFT detection' ) ) . toBeInTheDocument ( ) ;
} ) ;
it ( 'should not render the Collectibles Detection Notice when currently selected network is Mainnet and currently selected account has collectibles' , ( ) => {
render ( {
selectedAddress : ACCOUNT _1 ,
collectibles : COLLECTIBLES ,
} ) ;
expect ( screen . queryByText ( 'New! NFT detection' ) ) . not . toBeInTheDocument ( ) ;
} ) ;
2022-07-18 16:43:30 +02:00
it ( 'should take user to the experimental settings tab in settings when user clicks "Turn on NFT detection in Settings"' , ( ) => {
2021-12-14 00:41:10 +01:00
render ( {
selectedAddress : ACCOUNT _2 ,
collectibles : COLLECTIBLES ,
} ) ;
fireEvent . click ( screen . queryByText ( 'Turn on NFT detection in Settings' ) ) ;
expect ( historyPushMock ) . toHaveBeenCalledTimes ( 1 ) ;
2022-07-18 16:43:30 +02:00
expect ( historyPushMock ) . toHaveBeenCalledWith (
` ${ EXPERIMENTAL _ROUTE } #autodetect-nfts ` ,
) ;
2021-12-14 00:41:10 +01:00
} ) ;
it ( 'should not render the Collectibles Detection Notice when currently selected network is Mainnet and currently selected account has no collectibles but use collectible autodetection preference is set to true' , ( ) => {
render ( {
selectedAddress : ACCOUNT _1 ,
collectibles : COLLECTIBLES ,
2022-11-15 19:49:42 +01:00
useNftDetection : true ,
2021-12-14 00:41:10 +01:00
} ) ;
expect ( screen . queryByText ( 'New! NFT detection' ) ) . not . toBeInTheDocument ( ) ;
} ) ;
it ( 'should not render the Collectibles Detection Notice when currently selected network is Mainnet and currently selected account has no collectibles but user has dismissed the notice before' , ( ) => {
render ( {
selectedAddress : ACCOUNT _1 ,
collectibles : COLLECTIBLES ,
collectiblesDetectionNoticeDismissed : true ,
} ) ;
expect ( screen . queryByText ( 'New! NFT detection' ) ) . not . toBeInTheDocument ( ) ;
} ) ;
it ( 'should call setCollectibesDetectionNoticeDismissed when users clicks "X"' , ( ) => {
render ( {
selectedAddress : ACCOUNT _2 ,
collectibles : COLLECTIBLES ,
} ) ;
expect (
setCollectiblesDetectionNoticeDismissedStub ,
) . not . toHaveBeenCalled ( ) ;
fireEvent . click (
screen . queryByTestId ( 'collectibles-detection-notice-close' ) ,
) ;
expect ( setCollectiblesDetectionNoticeDismissedStub ) . toHaveBeenCalled ( ) ;
} ) ;
} ) ;
describe ( 'Collections' , ( ) => {
it ( 'should render the name of the collections and number of collectibles in each collection if current account/chainId combination has collectibles' , ( ) => {
render ( {
selectedAddress : ACCOUNT _1 ,
collectibles : COLLECTIBLES ,
collectibleContracts : COLLECTIBLES _CONTRACTS ,
} ) ;
expect ( screen . queryByText ( 'PUNKS (5)' ) ) . toBeInTheDocument ( ) ;
expect ( screen . queryByText ( 'Munks (3)' ) ) . toBeInTheDocument ( ) ;
} ) ;
it ( 'should not render collections if current account/chainId combination has collectibles' , ( ) => {
render ( {
selectedAddress : ACCOUNT _2 ,
collectibles : COLLECTIBLES ,
collectibleContracts : COLLECTIBLES _CONTRACTS ,
} ) ;
expect ( screen . queryByText ( 'PUNKS (5)' ) ) . not . toBeInTheDocument ( ) ;
expect ( screen . queryByText ( 'Munks (3)' ) ) . not . toBeInTheDocument ( ) ;
} ) ;
} ) ;
describe ( 'Collectibles options' , ( ) => {
2022-01-03 21:39:41 +01:00
it ( 'should render a link "Refresh list" when some collectibles are present on mainnet and collectible auto-detection preference is set to true, which, when clicked calls methods DetectCollectibles and checkAndUpdateCollectiblesOwnershipStatus' , ( ) => {
2021-12-14 00:41:10 +01:00
render ( {
selectedAddress : ACCOUNT _1 ,
collectibles : COLLECTIBLES ,
2022-11-15 19:49:42 +01:00
useNftDetection : true ,
2021-12-14 00:41:10 +01:00
} ) ;
expect ( detectCollectiblesStub ) . not . toHaveBeenCalled ( ) ;
2022-01-03 21:39:41 +01:00
expect (
2022-01-10 17:23:53 +01:00
checkAndUpdateAllCollectiblesOwnershipStatusStub ,
2022-01-03 21:39:41 +01:00
) . not . toHaveBeenCalled ( ) ;
2021-12-14 00:41:10 +01:00
fireEvent . click ( screen . queryByText ( 'Refresh list' ) ) ;
expect ( detectCollectiblesStub ) . toHaveBeenCalled ( ) ;
2022-01-10 17:23:53 +01:00
expect (
checkAndUpdateAllCollectiblesOwnershipStatusStub ,
) . toHaveBeenCalled ( ) ;
2022-01-03 21:39:41 +01:00
} ) ;
it ( 'should render a link "Refresh list" when some collectibles are present on a non-mainnet chain, which, when clicked calls a method checkAndUpdateCollectiblesOwnershipStatus' , ( ) => {
render ( {
2022-09-29 05:26:01 +02:00
chainId : '0x5' ,
2022-01-03 21:39:41 +01:00
selectedAddress : ACCOUNT _1 ,
collectibles : COLLECTIBLES ,
2022-11-15 19:49:42 +01:00
useNftDetection : true ,
2022-01-03 21:39:41 +01:00
} ) ;
expect (
2022-01-10 17:23:53 +01:00
checkAndUpdateAllCollectiblesOwnershipStatusStub ,
2022-01-03 21:39:41 +01:00
) . not . toHaveBeenCalled ( ) ;
fireEvent . click ( screen . queryByText ( 'Refresh list' ) ) ;
2022-01-10 17:23:53 +01:00
expect (
checkAndUpdateAllCollectiblesOwnershipStatusStub ,
) . toHaveBeenCalled ( ) ;
2021-12-14 00:41:10 +01:00
} ) ;
2022-08-08 21:01:38 +02:00
it ( ' should render a link "Enable autodetect" when some collectibles are present and collectible auto - detection preference is set to false , which , when clicked sends user to the experimental tab of settings ' , ( ) => {
2021-12-14 00:41:10 +01:00
render ( {
selectedAddress : ACCOUNT _1 ,
collectibles : COLLECTIBLES ,
} ) ;
expect ( historyPushMock ) . toHaveBeenCalledTimes ( 0 ) ;
2022-08-08 21:01:38 +02:00
fireEvent . click ( screen . queryByText ( 'Enable autodetect' ) ) ;
2021-12-14 00:41:10 +01:00
expect ( historyPushMock ) . toHaveBeenCalledTimes ( 1 ) ;
expect ( historyPushMock ) . toHaveBeenCalledWith ( EXPERIMENTAL _ROUTE ) ;
} ) ;
it ( 'should render a link "Import NFTs" when some collectibles are present, which, when clicked calls the passed in onAddNFT method' , ( ) => {
const onAddNFTStub = jest . fn ( ) ;
render ( {
selectedAddress : ACCOUNT _1 ,
collectibles : COLLECTIBLES ,
onAddNFT : onAddNFTStub ,
} ) ;
expect ( onAddNFTStub ) . toHaveBeenCalledTimes ( 0 ) ;
fireEvent . click ( screen . queryByText ( 'Import NFTs' ) ) ;
expect ( onAddNFTStub ) . toHaveBeenCalledTimes ( 1 ) ;
} ) ;
} ) ;
} ) ;