Fix NFTCard unit tests

GemWallet · Jun 28, 2023 · 26f35e1 · 26f35e1
1 parent 6f8b970
commit 26f35e1
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 26 deletions.
diff --git a/packages/extension/src/components/molecules/NFTCard/NFTCard.test.tsx b/packages/extension/src/components/molecules/NFTCard/NFTCard.test.tsx
@@ -1,9 +1,10 @@
 import { render, screen, waitFor, fireEvent, act } from '@testing-library/react';
 
-import { LedgerContext, LedgerContextType } from '../../../contexts';
-import { NFTCard, NftCardProps } from './NftCard';
+import { LedgerContext } from '../../../contexts';
+import { valueLedgerContext } from '../../../mocks';
+import { NFTCard, NFTCardProps } from './NFTCard';
 
-const mockNft = {
+const mockNFT = {
   Flags: 11,
   Issuer: 'rDGh681kc6V1GKkQB378XhiM1tzkYrnFwQ',
   NFTokenID: '000B0000867AD7165A812436FBFA175555413C26162BCF380000099A00000000',
@@ -25,18 +26,12 @@ const mockNFTData = {
 };
 
 const mockGetNFTData = jest.fn(async () => mockNFTData);
-
-const mockContext: LedgerContextType = {
-  getNFTData: mockGetNFTData,
-  sendPayment: jest.fn(),
-  addTrustline: jest.fn(),
-  signMessage: jest.fn(),
-  estimateNetworkFees: jest.fn(),
-  getNFTs: jest.fn(),
-  getTransactions: jest.fn()
+const mockContext = {
+  ...valueLedgerContext,
+  getNFTData: mockGetNFTData
 };
 
-const renderNftCard = (props: NftCardProps) => {
+const renderNFTCard = (props: NFTCardProps) => {
   act(() => {
     render(
       <LedgerContext.Provider value={mockContext}>
@@ -46,20 +41,20 @@ const renderNftCard = (props: NftCardProps) => {
   });
 };
 
-describe('NftCard', () => {
+describe('NFTCard', () => {
   afterEach(() => {
     jest.clearAllMocks();
   });
 
-  test('renders NftCard component correctly', async () => {
-    renderNftCard({ nft: mockNft });
+  test('renders NFTCard component correctly', async () => {
+    renderNFTCard({ NFT: mockNFT });
 
     await waitFor(() => expect(mockGetNFTData).toHaveBeenCalled());
     expect(screen.getByTestId('OpenInNewOutlinedIcon')).toBeInTheDocument();
   });
 
   test('displays CircularProgress while fetching data', () => {
-    renderNftCard({ nft: mockNft });
+    renderNFTCard({ NFT: mockNFT });
     expect(screen.getByTestId('progressbar')).toBeInTheDocument();
   });
 
@@ -69,7 +64,7 @@ describe('NftCard', () => {
       throw new Error('Failed to fetch NFT data');
     });
 
-    renderNftCard({ nft: mockNft });
+    renderNFTCard({ NFT: mockNFT });
 
     await waitFor(() => expect(mockGetNFTData).toHaveBeenCalled());
 
@@ -80,7 +75,7 @@ describe('NftCard', () => {
   test('button redirects to the correct URL', async () => {
     const windowOpenSpy = jest.spyOn(window, 'open').mockImplementation();
 
-    renderNftCard({ nft: mockNft });
+    renderNFTCard({ NFT: mockNFT });
     await waitFor(() => expect(mockGetNFTData).toHaveBeenCalled());
 
     fireEvent.click(screen.getByRole('button'));

diff --git a/packages/extension/src/components/molecules/NFTCard/NFTCard.tsx b/packages/extension/src/components/molecules/NFTCard/NFTCard.tsx
@@ -8,11 +8,11 @@ import { AccountNFToken, NFTData } from '@gemwallet/constants';
 
 import { LedgerContext } from '../../../contexts';
 
-export interface NftCardProps {
-  nft: AccountNFToken;
+export interface NFTCardProps {
+  NFT: AccountNFToken;
 }
 
-export const NFTCard: FC<NftCardProps> = ({ nft }) => {
+export const NFTCard: FC<NFTCardProps> = ({ NFT }) => {
   const { getNFTData } = useContext(LedgerContext);
   const [nftData, setNftData] = useState<NFTData | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
@@ -21,7 +21,7 @@ export const NFTCard: FC<NftCardProps> = ({ nft }) => {
     const fetchNftImg = async () => {
       try {
         setLoading(true);
-        const nftData = await getNFTData({ NFT: nft });
+        const nftData = await getNFTData({ NFT });
         setNftData(nftData);
       } catch (error) {
         setNftData(null);
@@ -30,7 +30,7 @@ export const NFTCard: FC<NftCardProps> = ({ nft }) => {
       }
     };
     fetchNftImg();
-  }, [getNFTData, nft]);
+  }, [getNFTData, NFT]);
 
   const handleViewNftClick = () => {
     window.open('someurl', '_blank'); // TODO: Add redirection url (Potential collaboration with NFT marketplace)?

diff --git a/packages/extension/src/components/organisms/NFTListing/NFTListing.tsx b/packages/extension/src/components/organisms/NFTListing/NFTListing.tsx
@@ -32,7 +32,7 @@ export const NFTListing: FC<NFTListingProps> = ({ loading, account_nfts, onLoadM
     >
       <List dense>
         {account_nfts.map((nft) => (
-          <NFTCard key={nft.NFTokenID} nft={nft} />
+          <NFTCard key={nft.NFTokenID} NFT={nft} />
         ))}
       </List>
     </InfiniteScroll>

diff --git a/...ension/src/components/pages/Nfts/NFTs.tsx → ...ension/src/components/pages/NFTs/NFTs.tsx b/...ension/src/components/pages/Nfts/NFTs.tsx → ...ension/src/components/pages/NFTs/NFTs.tsx
diff --git a/...ension/src/components/pages/Nfts/index.ts → ...ension/src/components/pages/NFTs/index.ts b/...ension/src/components/pages/Nfts/index.ts → ...ension/src/components/pages/NFTs/index.ts
diff --git a/packages/extension/src/components/pages/index.ts b/packages/extension/src/components/pages/index.ts
@@ -18,6 +18,7 @@ export * from './ImportWallet';
 export * from './ListWallets';
 export * from './Login';
 export * from './MintNFT';
+export * from './NFTs';
 export * from './ResetPassword';
 export * from './SendPayment';
 export * from './SetAccount';
@@ -29,4 +30,3 @@ export * from './SignMessage';
 export * from './Transaction';
 export * from './TrustedApps';
 export * from './Welcome';
-export * from './Nfts';