canina/frontend/application/components/__tests__/CartDrawer.test.tsx

"use client";
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import React from 'react';
import CartDrawer from '../CartDrawer';
import { useCartStore } from '../../lib/store/cartStore';
import { productService } from '../../lib/services/productService';

vi.mock('../../lib/store/cartStore', () => ({
  useCartStore: vi.fn(),
}));

vi.mock('../../lib/services/productService', () => ({
  productService: {
    getProducts: vi.fn(),
  },
}));

vi.mock('../../lib/useCatalogMode', () => ({
  useCatalogMode: vi.fn(() => ({
    isCatalogOnly: false,
    showPrices: true,
    allowCart: true,
    allowCheckout: true,
    showPreorderBtn: false,
  })),
}));

import { useCatalogMode } from '../../lib/useCatalogMode';

const mockProduct = {
  id: 'canhydrox-gag',
  name: 'Canhydrox GAG',
  price: '۱,۰۰۰ تومان',
  priceValue: 1000,
  category: 'joints',
  image: '',
};

describe('CartDrawer', () => {
  beforeEach(() => {
    vi.clearAllMocks();
    vi.mocked(productService.getProducts).mockResolvedValue({ data: [], total: 0 });
    vi.mocked(useCatalogMode).mockReturnValue({
      isCatalogOnly: false,
      showPrices: true,
      allowCart: true,
      allowCheckout: true,
      showPreorderBtn: false,
      showOrders: true,
      showWallet: true,
      showCharity: true,
      orderDisabledTitle: '',
      orderDisabledMessage: '',
    });
  });

  it('renders empty cart state when no items in cart', () => {
    vi.mocked(useCartStore).mockReturnValue({
      items: [],
      updateQuantity: vi.fn(),
      removeItem: vi.fn(),
      isSubscribed: false,
      toggleSubscription: vi.fn(),
      getTotal: () => 0,
      getSubtotal: () => 0,
      getDiscount: () => 0,
      coupon: null,
      applyCoupon: vi.fn(),
      addItem: vi.fn(),
    } as unknown as ReturnType<typeof useCartStore>);

    render(<CartDrawer isOpen={true} onClose={vi.fn()} onCheckout={vi.fn()} />);

    expect(screen.getByText('سبد خرید شما خالی است')).toBeInTheDocument();
  });

  it('renders cart items and total when items are present', () => {
    vi.mocked(useCartStore).mockReturnValue({
      items: [{ product: mockProduct, quantity: 2 }],
      updateQuantity: vi.fn(),
      removeItem: vi.fn(),
      isSubscribed: false,
      toggleSubscription: vi.fn(),
      getTotal: () => 2000,
      getSubtotal: () => 2000,
      getDiscount: () => 0,
      coupon: null,
      applyCoupon: vi.fn(),
      addItem: vi.fn(),
    } as unknown as ReturnType<typeof useCartStore>);

    render(<CartDrawer isOpen={true} onClose={vi.fn()} onCheckout={vi.fn()} />);

    expect(screen.getByText('Canhydrox GAG')).toBeInTheDocument();
    expect(screen.getAllByText('۲,۰۰۰').length).toBeGreaterThanOrEqual(1);
  });

  it('triggers updateQuantity when plus/minus buttons are clicked', () => {
    const mockUpdateQuantity = vi.fn();
    vi.mocked(useCartStore).mockReturnValue({
      items: [{ product: mockProduct, quantity: 2 }],
      updateQuantity: mockUpdateQuantity,
      removeItem: vi.fn(),
      isSubscribed: false,
      toggleSubscription: vi.fn(),
      getTotal: () => 2000,
      getSubtotal: () => 2000,
      getDiscount: () => 0,
      coupon: null,
      applyCoupon: vi.fn(),
      addItem: vi.fn(),
    } as unknown as ReturnType<typeof useCartStore>);

    render(<CartDrawer isOpen={true} onClose={vi.fn()} onCheckout={vi.fn()} />);

    const plusBtn = screen.getByTestId('plus-btn');
    const minusBtn = screen.getByTestId('minus-btn');

    fireEvent.click(plusBtn);
    expect(mockUpdateQuantity).toHaveBeenCalledWith('canhydrox-gag', 3);

    fireEvent.click(minusBtn);
    expect(mockUpdateQuantity).toHaveBeenCalledWith('canhydrox-gag', 1);
  });

  it('hides prices, total and coupon code when showPrices is false in catalog mode', () => {
    vi.mocked(useCatalogMode).mockReturnValue({
      isCatalogOnly: true,
      showPrices: false,
      allowCart: true,
      allowCheckout: true,
      showPreorderBtn: false,
      showOrders: false,
      showWallet: false,
      showCharity: false,
      orderDisabledTitle: '',
      orderDisabledMessage: '',
    });

    vi.mocked(useCartStore).mockReturnValue({
      items: [{ product: mockProduct, quantity: 2 }],
      updateQuantity: vi.fn(),
      removeItem: vi.fn(),
      isSubscribed: false,
      toggleSubscription: vi.fn(),
      getTotal: () => 2000,
      getSubtotal: () => 2000,
      getDiscount: () => 0,
      coupon: null,
      applyCoupon: vi.fn(),
      addItem: vi.fn(),
    } as unknown as ReturnType<typeof useCartStore>);

    render(<CartDrawer isOpen={true} onClose={vi.fn()} onCheckout={vi.fn()} />);

    expect(screen.getByText('Canhydrox GAG')).toBeInTheDocument();
    expect(screen.queryByText('کد تخفیف اختصاصی')).not.toBeInTheDocument();
    expect(screen.queryByText('مجموع قابل پرداخت')).not.toBeInTheDocument();
    expect(screen.getByText('تعداد کل اقلام انتخابی')).toBeInTheDocument();
    expect(screen.getByText('۲ قلم کالا')).toBeInTheDocument();
  });
});