feat: tests for best buying option componend and listings and owners …

…table (#1499)

* feat: tests for listings and owners table

* feat: added best buy option tests

* fix: pr comments

* fix: test not passing

webapp/src/components/AssetPage/BestBuyingOption/BestBuyingOption.spec.tsx

@@ -0,0 +1,205 @@
+import {
+  Bid,
+  ChainId,
+  Item,
+  ListingStatus,
+  Network,
+  NFTCategory,
+  Order,
+  Rarity
+} from '@dcl/schemas'
+import { waitFor } from '@testing-library/react'
+import React, { RefObject } from 'react'
+import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+
+import * as bidAPI from '../../../modules/vendor/decentraland/bid/api'
+import * as orderAPI from '../../../modules/vendor/decentraland/order/api'
+import { renderWithProviders } from '../../../utils/tests'
+import BestBuyingOption from './BestBuyingOption'
+import { formatWeiMANA } from '../../../lib/mana'
+
+jest.mock('../../../modules/vendor/decentraland/nft/api')
+jest.mock('../../../modules/vendor/decentraland/order/api')
+jest.mock('../../../modules/vendor/decentraland/bid/api')
+jest.mock('decentraland-dapps/dist/containers', () => {
+  const module = jest.requireActual('decentraland-dapps/dist/containers')
+  return {
+    ...module,
+    Profile: () => <div></div>
+  }
+})
+
+describe('Best Buying Option', () => {
+  let asset: Item = {
+    contractAddress: '0xaddress',
+    itemId: '1',
+    id: '1',
+    name: 'asset name',
+    thumbnail: '',
+    url: '',
+    category: NFTCategory.WEARABLE,
+    rarity: Rarity.UNIQUE,
+    price: '10',
+    available: 2,
+    isOnSale: false,
+    creator: '0xcreator',
+    beneficiary: null,
+    createdAt: 1671033414000,
+    updatedAt: 1671033414000,
+    reviewedAt: 1671033414000,
+    soldAt: 1671033414000,
+    data: {
+      parcel: undefined,
+      estate: undefined,
+      wearable: undefined,
+      ens: undefined,
+      emote: undefined
+    },
+    network: Network.MATIC,
+    chainId: ChainId.ETHEREUM_GOERLI,
+    firstListedAt: null
+  }
+
+  let orderResponse: Order = {
+    id: '1',
+    marketplaceAddress: '0xmarketplace',
+    contractAddress: '0xaddress',
+    tokenId: '1',
+    owner: '0x92712b730b9a474f99a47bb8b1750190d5959a2b',
+    buyer: null,
+    price: '10',
+    status: ListingStatus.OPEN,
+    expiresAt: 1671033414000,
+    createdAt: 1671033414000,
+    updatedAt: 0,
+    network: Network.MATIC,
+    chainId: ChainId.ETHEREUM_GOERLI
+  }
+
+  let bid: Bid = {
+    id: '1',
+    bidAddress: '0xbid',
+    bidder: 'bidder',
+    seller: 'seller',
+    price: '2',
+    fingerprint: '',
+    status: ListingStatus.OPEN,
+    blockchainId: '1',
+    blockNumber: '',
+    expiresAt: 1671033414000,
+    createdAt: 1671033414000,
+    updatedAt: 0,
+    contractAddress: '0xaddress',
+    tokenId: '',
+    network: Network.MATIC,
+    chainId: ChainId.ETHEREUM_GOERLI
+  }
+
+  afterEach(() => {
+    jest.resetAllMocks()
+  })
+
+  describe('Mint option', () => {
+    it('should render the mint option', async () => {
+      const reference: RefObject<HTMLDivElement> = React.createRef()
+      const { getByText } = renderWithProviders(
+        <BestBuyingOption asset={asset} tableRef={reference} />
+      )
+
+      expect(
+        getByText(t('best_buying_option.minting.title'))
+      ).toBeInTheDocument()
+    })
+
+    it('should render the mint price', async () => {
+      const reference: RefObject<HTMLDivElement> = React.createRef()
+      const { getByText } = renderWithProviders(
+        <BestBuyingOption asset={asset} tableRef={reference} />
+      )
+
+      const price = formatWeiMANA(asset.price)
+
+      expect(getByText(price)).toBeInTheDocument()
+    })
+  })
+
+  describe('Listing option', () => {
+    beforeEach(() => {
+      asset.available = 0
+      ;(orderAPI.orderAPI.fetchOrders as jest.Mock).mockResolvedValueOnce({
+        data: [orderResponse],
+        total: 1
+      })
+      ;(bidAPI.bidAPI.fetchByNFT as jest.Mock).mockResolvedValueOnce({
+        data: [bid],
+        total: 1
+      })
+    })
+
+    it('should render the listing option', async () => {
+      const reference: RefObject<HTMLDivElement> = React.createRef()
+      const { getByText, findByTestId } = renderWithProviders(
+        <BestBuyingOption asset={asset} tableRef={reference} />
+      )
+
+      const loader = await findByTestId('loader')
+
+      await waitFor(() => {
+        expect(loader).not.toBeInTheDocument()
+      })
+
+      expect(
+        getByText(t('best_buying_option.buy_listing.title'))
+      ).toBeInTheDocument()
+    })
+
+    it('should render the listing price and de highest offer for that NFT', async () => {
+      const reference: RefObject<HTMLDivElement> = React.createRef()
+      const { getByText, findByTestId } = renderWithProviders(
+        <BestBuyingOption asset={asset} tableRef={reference} />
+      )
+
+      const loader = await findByTestId('loader')
+
+      await waitFor(() => {
+        expect(loader).not.toBeInTheDocument()
+      })
+
+      const price = formatWeiMANA(orderResponse.price)
+
+      const highestOffer = formatWeiMANA(bid.price)
+
+      expect(getByText(price)).toBeInTheDocument()
+      expect(getByText(highestOffer)).toBeInTheDocument()
+    })
+  })
+
+  describe('No available options', () => {
+    beforeEach(() => {
+      asset.available = 0
+      ;(orderAPI.orderAPI.fetchOrders as jest.Mock).mockResolvedValueOnce({
+        data: [],
+        total: 0
+      })
+      ;(bidAPI.bidAPI.fetchByNFT as jest.Mock).mockResolvedValueOnce({
+        data: [bid],
+        total: 0
+      })
+    })
+
+    it('should render no options available', async () => {
+      const reference: RefObject<HTMLDivElement> = React.createRef()
+      const { getByText, findByTestId } = renderWithProviders(
+        <BestBuyingOption asset={asset} tableRef={reference} />
+      )
+
+      const loader = await findByTestId('loader')
+
+      await waitFor(() => {
+        expect(loader).not.toBeInTheDocument()
+      })
+
+      expect(getByText(t('best_buying_option.empty.title'))).toBeInTheDocument()
+    })
+  })
+})

webapp/src/components/AssetPage/BestBuyingOption/BestBuyingOption.tsx

@@ -101,7 +101,7 @@ const BestBuyingOption = ({ asset, tableRef }: Props) => {
     <div className={styles.BestBuyingOption}>
       {isLoading ? (
         <div className={styles.containerColumn}>
-          <Loader active />
+          <Loader active data-testid="loader" />
         </div>
       ) : buyOption === BuyOptions.MINT && asset && !isNFT(asset) ? (
         <div className={styles.containerColumn}>