Added test cases

packages/extension/src/components/molecules/NftCard/NftCard.test.tsx

@@ -0,0 +1,90 @@
+import { render, screen, waitFor, fireEvent, act } from '@testing-library/react';
+
+import { LedgerContext, LedgerContextType } from '../../../contexts';
+import { NftCard, NftCardProps } from './NftCard';
+
+const mockNft = {
+  Flags: 11,
+  Issuer: 'rDGh681kc6V1GKkQB378XhiM1tzkYrnFwQ',
+  NFTokenID: '000B0000867AD7165A812436FBFA175555413C26162BCF380000099A00000000',
+  NFTokenTaxon: 1,
+  URI: '697066733A2F2F6261667962656965356A626736336A6164676979736337796B6B6A64737170777732746A6D786D7935377077716F6A697666356562366B6D6D79612F312E6A736F6E',
+  nft_serial: 0
+};
+
+const mockNFTData = {
+  schema: 'ipfs://QmNpi8rcXEkohca8iXu7zysKKSJYqCvBJn3xJwga8jXqWU',
+  nftType: 'art.v0',
+  name: "Ekiserrepe's Oniric Lo-Fi Rooms Vol.1 NFT #1",
+  description: "Room #1 of Ekiserrepe's Oniric Lo-Fi Rooms Vol.1",
+  image: 'ipfs://bafybeie6pmuddco552t4u7oc7anryqohuj6vl42ngct6ve3q4bjet5piam/1.png',
+  collection: {
+    name: "Ekiserrepe's Oniric Lo-Fi Rooms Vol.1",
+    family: 'Oniric Lo-Fi Rooms'
+  }
+};
+
+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 renderNftCard = (props: NftCardProps) => {
+  act(() => {
+    render(
+      <LedgerContext.Provider value={mockContext}>
+        <NftCard {...props} />
+      </LedgerContext.Provider>
+    );
+  });
+};
+
+describe('NftCard', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  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 });
+    expect(screen.getByTestId('progressbar')).toBeInTheDocument();
+  });
+
+  test('handles error when fetching NFT data', async () => {
+    // Temporarily change the behavior of getNFTData to throw an error
+    mockGetNFTData.mockImplementationOnce(() => {
+      throw new Error('Failed to fetch NFT data');
+    });
+
+    renderNftCard({ nft: mockNft });
+
+    await waitFor(() => expect(mockGetNFTData).toHaveBeenCalled());
+
+    // Check that the NFT data is not displayed when an error occurs
+    expect(screen.queryByTestId('nft_name')).not.toBeInTheDocument();
+  });
+
+  test('button redirects to the correct URL', async () => {
+    const windowOpenSpy = jest.spyOn(window, 'open').mockImplementation();
+
+    renderNftCard({ nft: mockNft });
+    await waitFor(() => expect(mockGetNFTData).toHaveBeenCalled());
+
+    fireEvent.click(screen.getByRole('button'));
+
+    expect(windowOpenSpy).toHaveBeenCalledWith('someurl', '_blank');
+  });
+});

packages/extension/src/components/molecules/NftCard/NftCard.tsx

@@ -54,7 +54,7 @@ export const NftCard: FC<NftCardProps> = ({ nft }) => {
         }}
       >
         {loading ? (
-          <CircularProgress />
+          <CircularProgress data-testid="progressbar" />
         ) : (
           <LazyLoadImage
             alt="nft"
@@ -66,10 +66,19 @@ export const NftCard: FC<NftCardProps> = ({ nft }) => {
             width={150}
           />
         )}
-        <div style={{ fontSize: '16px', color: 'white', marginTop: '10px' }}>{nftData?.name}</div>
-        <div style={{ fontSize: '14px', color: 'grey', marginTop: '10px' }}>
-          {nftData?.description}
-        </div>
+        {nftData && (
+          <>
+            <div
+              style={{ fontSize: '16px', color: 'white', marginTop: '10px' }}
+              data-testid="nft_name"
+            >
+              {nftData.name}
+            </div>
+            <div style={{ fontSize: '14px', color: 'grey', marginTop: '10px' }}>
+              {nftData.description}
+            </div>
+          </>
+        )}
         <Button
           variant="outlined"
           style={{ marginTop: '10px', fontSize: '14px', gap: '10px' }}