import '@testing-library/jest-dom'; import { useNFTContext } from '@/nft/components/NFTProvider'; import { fireEvent, render } from '@testing-library/react'; import { type Mock, afterEach, beforeEach, describe, expect, it, vi, } from 'vitest'; import { NFTTotalCost } from './NFTTotalCost'; vi.mock('@/nft/components/NFTProvider'); describe('NFTTotalCost', () => { const mockUseNFTContext = useNFTContext as Mock; beforeEach(() => { mockUseNFTContext.mockReturnValue({ price: { amount: '0.05', currency: 'ETH', amountUSD: '20', }, mintFee: { amount: '0.05', currency: 'ETH', amountUSD: '20', }, quantity: 2, }); }); afterEach(() => { vi.clearAllMocks(); }); it('should render correctly with given price and quantity', () => { const { getByText } = render(); expect(getByText('Total cost')).toBeInTheDocument(); expect(getByText('$40.00')).toBeInTheDocument(); }); it('should render correctly with a whole number decimal', () => { mockUseNFTContext.mockReturnValue({ price: { amount: '1', currency: 'ETH', amountUSD: '2000', }, mintFee: { amount: '0.05', currency: 'ETH', amountUSD: '20', }, quantity: 1, }); const { getByText } = render(); expect(getByText('Total cost')).toBeInTheDocument(); expect(getByText('$2,000.00')).toBeInTheDocument(); }); it('should not render if price is 0', () => { mockUseNFTContext.mockReturnValue({ price: { amount: '0', currency: 'ETH', amountUSD: 0, }, mintFee: { amount: '0.05', currency: 'ETH', amountUSD: '20', }, quantity: 1, }); const { queryByText } = render(); expect(queryByText('Total cost')).toBeNull(); }); it('should not render if mintFee is 0', () => { mockUseNFTContext.mockReturnValue({ price: { amount: '0.05', currency: 'ETH', amountUSD: '20', }, mintFee: { amount: '0', currency: 'ETH', amountUSD: 0, }, quantity: 1, }); const { queryByText } = render(); expect(queryByText('Total cost')).toBeNull(); }); it('should return null if price amount is not available', () => { mockUseNFTContext.mockReturnValueOnce({ price: null, quantity: 1, }); const { container } = render(); expect(container.firstChild).toBeNull(); }); it('should apply the provided className', () => { const { container } = render(); expect(container.firstChild?.firstChild).toHaveClass('custom-class'); }); it('should show overlay on mouse enter', () => { mockUseNFTContext.mockReturnValue({ price: { amount: '0.05', currency: 'ETH', amountUSD: '20', }, quantity: 2, mintFee: { amount: '0.01', currency: 'ETH', amountUSD: '5', }, }); const { getByTestId, getByText, queryByText } = render(); fireEvent.mouseEnter(getByTestId('ockNFTTotalCostInfo')); expect(getByText('Total cost')).toBeInTheDocument(); expect(getByText('Mint fee')).toBeInTheDocument(); fireEvent.mouseLeave(getByTestId('ockNFTTotalCostInfo')); expect(queryByText('Mint fee')).toBeNull(); }); it('should show overlay on click', () => { mockUseNFTContext.mockReturnValue({ price: { amount: '0.05', currency: 'ETH', amountUSD: '20', }, quantity: 2, mintFee: { amount: '0.01', currency: 'ETH', amountUSD: '5', }, }); const { getByTestId, getByText, queryByText } = render(); fireEvent.click(getByTestId('ockNFTTotalCostInfo')); expect(getByText('Total cost')).toBeInTheDocument(); expect(getByText('Mint fee')).toBeInTheDocument(); fireEvent.click(getByTestId('ockNFTTotalCostInfo')); expect(queryByText('Mint fee')).toBeNull(); }); });