kybernus 3.0.1 → 3.2.0

package/templates/ecommerce/apps/web/src/modules/auth/useAuthStore.ts

@@ -0,0 +1,141 @@
+import { create } from 'zustand';
+import { apiFetch } from '../../shared/lib/apiFetch';
+
+export interface AuthUser {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+}
+
+interface AuthState {
+  user: AuthUser | null;
+  accessToken: string | null;
+  login(email: string, password: string): Promise<void>;
+  register(name: string, email: string, password: string): Promise<void>;
+  logout(): Promise<void>;
+  init(): Promise<void>;
+  updateProfile(data: { name?: string; email?: string }): Promise<void>;
+  changePassword(data: { currentPassword: string; newPassword: string }): Promise<void>;
+  deleteAccount(password: string): Promise<void>;
+}
+
+export const useAuthStore = create<AuthState>((set) => ({
+  user: null,
+  // Access token is kept ONLY in memory — never persisted in localStorage.
+  // This prevents XSS attacks from reading the token via JavaScript.
+  // On page load, init() silently exchanges the httpOnly refresh-token cookie
+  // for a fresh access token via POST /api/auth/refresh.
+  accessToken: null,
+
+  async login(email, password) {
+    const res = await fetch('/api/auth/login', {
+      method: 'POST',
+      credentials: 'include', // send & receive httpOnly cookie
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ email, password }),
+    });
+    if (!res.ok) {
+      const data = (await res.json()) as { message?: string };
+      throw new Error(data.message ?? 'Credenciais inválidas');
+    }
+    const data = (await res.json()) as { user: AuthUser; accessToken: string };
+    set({ user: data.user, accessToken: data.accessToken });
+  },
+
+  async register(name, email, password) {
+    const res = await fetch('/api/auth/register', {
+      method: 'POST',
+      credentials: 'include',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name, email, password }),
+    });
+    if (!res.ok) {
+      const data = (await res.json()) as { message?: string };
+      throw new Error(data.message ?? 'Erro ao cadastrar');
+    }
+    const data = (await res.json()) as { user: AuthUser; accessToken: string };
+    set({ user: data.user, accessToken: data.accessToken });
+  },
+
+  async logout() {
+    const token = useAuthStore.getState().accessToken;
+    try {
+      await fetch('/api/auth/logout', {
+        method: 'POST',
+        credentials: 'include',
+        headers: token ? { Authorization: `Bearer ${token}` } : {},
+      });
+    } catch {
+      // ignore — clear local state regardless
+    }
+    set({ user: null, accessToken: null });
+  },
+
+  async init() {
+    // Silently try to obtain a fresh access token using the httpOnly refresh
+    // cookie. If the cookie is absent or expired the request returns 401 and
+    // we leave the user unauthenticated without throwing.
+    try {
+      const res = await fetch('/api/auth/refresh', {
+        method: 'POST',
+        credentials: 'include',
+      });
+      if (!res.ok) return;
+      const data = (await res.json()) as { accessToken: string };
+      // Fetch user profile with the new token
+      const meRes = await fetch('/api/auth/me', {
+        credentials: 'include',
+        headers: { Authorization: `Bearer ${data.accessToken}` },
+      });
+      if (!meRes.ok) return;
+      const user = (await meRes.json()) as AuthUser;
+      set({ user, accessToken: data.accessToken });
+    } catch {
+      // Network error or server unavailable — stay logged out
+    }
+  },
+
+  async updateProfile(data) {
+    const updated = await apiFetch<AuthUser>('/api/me', {
+      method: 'PATCH',
+      body: JSON.stringify(data),
+    });
+    set((s) => ({ user: s.user ? { ...s.user, ...updated } : s.user }));
+  },
+
+  async changePassword(data) {
+    const token = useAuthStore.getState().accessToken;
+    const res = await fetch('/api/me/password', {
+      method: 'PATCH',
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+        ...(token ? { Authorization: `Bearer ${token}` } : {}),
+      },
+      body: JSON.stringify(data),
+    });
+    if (!res.ok) {
+      const body = (await res.json()) as { message?: string };
+      throw new Error(body.message ?? `HTTP ${res.status}`);
+    }
+  },
+
+  async deleteAccount(password) {
+    const token = useAuthStore.getState().accessToken;
+    const res = await fetch('/api/me', {
+      method: 'DELETE',
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+        ...(token ? { Authorization: `Bearer ${token}` } : {}),
+      },
+      body: JSON.stringify({ password }),
+    });
+    if (!res.ok) {
+      const body = (await res.json()) as { message?: string };
+      throw new Error(body.message ?? `HTTP ${res.status}`);
+    }
+    set({ user: null, accessToken: null });
+  },
+}));

package/templates/ecommerce/apps/web/src/modules/cart/__tests__/CartPage.test.tsx

@@ -0,0 +1,111 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { CartPage } from '../pages/CartPage';
+import { useAuthStore } from '../../auth/useAuthStore';
+
+const mockFetch = jest.fn();
+beforeAll(() => { global.fetch = mockFetch; });
+beforeEach(() => {
+  mockFetch.mockClear();
+  // Set token in Zustand memory state (not localStorage — secure in-memory only)
+  useAuthStore.setState({ accessToken: 'test-token' });
+});
+afterAll(() => useAuthStore.setState({ accessToken: null, user: null }));
+
+function renderPage() {
+  return render(
+    <MemoryRouter>
+      <CartPage />
+    </MemoryRouter>,
+  );
+}
+
+const cartWithItems = {
+  items: [
+    { variantId: 'v1', productId: 'p1', name: 'Camiseta Preta', sku: 'CAM-P', price: 99.9, qty: 2, image: null },
+    { variantId: 'v2', productId: 'p2', name: 'Calça Jeans', sku: 'CAL-J', price: 199.9, qty: 1, image: null },
+  ],
+  subtotal: 399.7,
+  discount: 0,
+  shippingCost: 0,
+  tax: 0,
+  total: 399.7,
+  couponCode: null,
+};
+
+const emptyCart = {
+  items: [],
+  subtotal: 0,
+  discount: 0,
+  shippingCost: 0,
+  tax: 0,
+  total: 0,
+  couponCode: null,
+};
+
+describe('CartPage', () => {
+  it('exibe itens do carrinho com nome, qtd e preço', async () => {
+    mockFetch.mockResolvedValue({
+      ok: true,
+      json: async () => cartWithItems,
+    });
+    renderPage();
+    await waitFor(() => expect(screen.getByText('Camiseta Preta')).toBeInTheDocument());
+    expect(screen.getByText('Calça Jeans')).toBeInTheDocument();
+    expect(screen.getByDisplayValue('2')).toBeInTheDocument();
+  });
+
+  it('exibe total do carrinho', async () => {
+    mockFetch.mockResolvedValue({
+      ok: true,
+      json: async () => cartWithItems,
+    });
+    renderPage();
+    await waitFor(() => {
+      const elements = screen.getAllByText(/399/);
+      expect(elements.length).toBeGreaterThanOrEqual(1);
+    });
+  });
+
+  it('exibe input de cupom e botão aplicar', async () => {
+    mockFetch.mockResolvedValue({
+      ok: true,
+      json: async () => cartWithItems,
+    });
+    renderPage();
+    await waitFor(() => expect(screen.getByPlaceholderText(/cupom|código/i)).toBeInTheDocument());
+    expect(screen.getByRole('button', { name: /aplicar/i })).toBeInTheDocument();
+  });
+
+  it('exibe opções de frete', async () => {
+    mockFetch.mockResolvedValue({
+      ok: true,
+      json: async () => cartWithItems,
+    });
+    renderPage();
+    await waitFor(() => expect(screen.getByPlaceholderText(/cep/i)).toBeInTheDocument());
+    expect(screen.getByRole('button', { name: /calcular/i })).toBeInTheDocument();
+  });
+
+  it('botão "Ir para Checkout" navega para /checkout', async () => {
+    mockFetch.mockResolvedValue({
+      ok: true,
+      json: async () => cartWithItems,
+    });
+    renderPage();
+    await waitFor(() =>
+      expect(screen.getByRole('link', { name: /ir para checkout|finalizar/i })).toBeInTheDocument(),
+    );
+  });
+
+  it('exibe mensagem quando carrinho estiver vazio', async () => {
+    mockFetch.mockResolvedValue({
+      ok: true,
+      json: async () => emptyCart,
+    });
+    renderPage();
+    await waitFor(() =>
+      expect(screen.getByText(/carrinho.*vazio|vazio/i)).toBeInTheDocument(),
+    );
+  });
+});

package/templates/ecommerce/apps/web/src/modules/cart/pages/CartPage.tsx

@@ -0,0 +1,313 @@
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { apiFetch } from '../../../shared/lib/apiFetch';
+import { usePageTitle } from '../../../shared/hooks/usePageTitle';
+
+interface CartItem {
+  variantId: string;
+  productId: string;
+  name: string;
+  sku: string;
+  price: number;
+  qty: number;
+  image: string | null;
+}
+
+interface ShippingOption {
+  id: string;
+  name: string;
+  price: number;
+  days: number;
+}
+
+interface Cart {
+  items: CartItem[];
+  subtotal: number;
+  discount: number;
+  shippingCost: number;
+  tax: number;
+  total: number;
+  couponCode: string | null;
+}
+
+function formatBRL(value: number) {
+  return value.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
+}
+
+export function CartPage() {
+  usePageTitle('Meu Carrinho');
+  const [cart, setCart] = useState<Cart | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const [couponInput, setCouponInput] = useState('');
+  const [couponError, setCouponError] = useState<string | null>(null);
+  const [couponLoading, setCouponLoading] = useState(false);
+
+  const [cepInput, setCepInput] = useState('');
+  const [shippingOptions, setShippingOptions] = useState<ShippingOption[]>([]);
+  const [shippingError, setShippingError] = useState<string | null>(null);
+  const [shippingLoading, setShippingLoading] = useState(false);
+
+  useEffect(() => {
+    apiFetch<Cart>('/api/cart')
+      .then((data) => { setCart(data); setLoading(false); })
+      .catch(() => { setError('Erro ao carregar carrinho'); setLoading(false); });
+  }, []);
+
+  async function handleQtyChange(variantId: string, qty: number) {
+    try {
+      const updated = await apiFetch<Cart>(`/api/cart/items/${variantId}`, {
+        method: 'PATCH',
+        body: JSON.stringify({ qty }),
+      });
+      setCart(updated);
+    } catch {
+      setError('Erro ao atualizar quantidade');
+    }
+  }
+
+  async function handleRemove(variantId: string) {
+    try {
+      const updated = await apiFetch<Cart>(`/api/cart/items/${variantId}`, {
+        method: 'PATCH',
+        body: JSON.stringify({ qty: 0 }),
+      });
+      setCart(updated);
+    } catch {
+      setError('Erro ao remover item');
+    }
+  }
+
+  async function handleApplyCoupon() {
+    if (!couponInput.trim()) return;
+    setCouponLoading(true);
+    setCouponError(null);
+    try {
+      const updated = await apiFetch<Cart>('/api/cart/coupon', {
+        method: 'POST',
+        body: JSON.stringify({ code: couponInput.trim() }),
+      });
+      setCart(updated);
+      setCouponInput('');
+    } catch (err) {
+      setCouponError(err instanceof Error ? err.message : 'Cupom inválido');
+    } finally {
+      setCouponLoading(false);
+    }
+  }
+
+  async function handleCalculateShipping() {
+    if (!cepInput.trim()) return;
+    setShippingLoading(true);
+    setShippingError(null);
+    try {
+      const data = await apiFetch<{ options: ShippingOption[] }>(
+        `/api/cart/shipping?cep=${cepInput.replace(/\D/g, '')}`,
+      );
+      setShippingOptions(data.options);
+    } catch {
+      setShippingError('Erro ao calcular frete. Verifique o CEP informado.');
+    } finally {
+      setShippingLoading(false);
+    }
+  }
+
+  if (loading) {
+    return <p style={{ marginTop: '2rem', color: '#6b7280' }}>Carregando...</p>;
+  }
+
+  if (error) {
+    return <p role="alert" style={{ marginTop: '2rem', color: '#ef4444' }}>{error}</p>;
+  }
+
+  if (!cart || cart.items.length === 0) {
+    return (
+      <main style={{ maxWidth: 680, margin: '4rem auto', textAlign: 'center' }}>
+        <h1 style={{ marginBottom: '1rem' }}>Carrinho</h1>
+        <p style={{ color: '#6b7280', marginBottom: '1.5rem' }}>Seu carrinho está vazio.</p>
+        <Link
+          to="/"
+          style={{
+            display: 'inline-block',
+            padding: '0.6rem 1.5rem',
+            background: 'var(--color-primary)',
+            color: '#fff',
+            borderRadius: 8,
+            textDecoration: 'none',
+            fontWeight: 600,
+          }}
+        >
+          Ver produtos
+        </Link>
+      </main>
+    );
+  }
+
+  return (
+    <main style={{ maxWidth: 880, margin: '2rem auto', display: 'grid', gridTemplateColumns: '1fr 320px', gap: '2rem', alignItems: 'start' }}>
+      {/* Items list */}
+      <section>
+        <h1 style={{ marginBottom: '1.5rem' }}>Carrinho</h1>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+          {cart.items.map((item) => (
+            <div
+              key={item.variantId}
+              style={{
+                display: 'grid',
+                gridTemplateColumns: '56px 1fr auto',
+                gap: '1rem',
+                alignItems: 'center',
+                background: '#fff',
+                border: '1px solid #e5e7eb',
+                borderRadius: 10,
+                padding: '0.875rem 1rem',
+              }}
+            >
+              <div
+                style={{
+                  width: 56,
+                  height: 56,
+                  background: '#f3f4f6',
+                  borderRadius: 6,
+                  overflow: 'hidden',
+                  flexShrink: 0,
+                }}
+              >
+                {item.image && (
+                  <img src={item.image} alt={item.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                )}
+              </div>
+              <div>
+                <p style={{ fontWeight: 600, fontSize: '0.9rem', marginBottom: '0.15rem' }}>{item.name}</p>
+                <p style={{ fontSize: '0.78rem', color: '#6b7280', marginBottom: '0.5rem' }}>SKU: {item.sku}</p>
+                <p style={{ fontWeight: 700, color: 'var(--color-primary)' }}>{formatBRL(item.price)}</p>
+              </div>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', alignItems: 'flex-end' }}>
+                <input
+                  type="number"
+                  min={1}
+                  value={item.qty}
+                  onChange={(e) => handleQtyChange(item.variantId, Number(e.target.value))}
+                  style={{ width: 60, padding: '0.3rem 0.5rem', border: '1px solid #d1d5db', borderRadius: 6, textAlign: 'center' }}
+                />
+                <button
+                  onClick={() => handleRemove(item.variantId)}
+                  style={{ background: 'none', border: 'none', color: '#ef4444', cursor: 'pointer', fontSize: '0.8rem' }}
+                >
+                  Remover
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Summary sidebar */}
+      <aside style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+        {/* Coupon */}
+        <div style={{ background: '#fff', border: '1px solid #e5e7eb', borderRadius: 10, padding: '1rem' }}>
+          <p style={{ fontWeight: 600, marginBottom: '0.6rem', fontSize: '0.875rem' }}>Cupom de desconto</p>
+          <div style={{ display: 'flex', gap: '0.5rem' }}>
+            <input
+              type="text"
+              placeholder="Código do cupom"
+              value={couponInput}
+              onChange={(e) => setCouponInput(e.target.value)}
+              style={{ flex: 1, padding: '0.4rem 0.6rem', border: '1px solid #d1d5db', borderRadius: 6, fontSize: '0.875rem' }}
+            />
+            <button
+              onClick={handleApplyCoupon}
+              disabled={couponLoading}
+              style={{ padding: '0.4rem 0.9rem', background: 'var(--color-primary)', color: '#fff', border: 'none', borderRadius: 6, cursor: 'pointer', fontSize: '0.875rem', fontWeight: 600 }}
+            >
+              {couponLoading ? '...' : 'Aplicar'}
+            </button>
+          </div>
+          {couponError && <p style={{ color: '#ef4444', fontSize: '0.8rem', marginTop: '0.4rem' }}>{couponError}</p>}
+          {cart.couponCode && (
+            <p style={{ color: '#10b981', fontSize: '0.8rem', marginTop: '0.4rem' }}>
+              Cupom <strong>{cart.couponCode}</strong> aplicado
+            </p>
+          )}
+        </div>
+
+        {/* Shipping calculator */}
+        <div style={{ background: '#fff', border: '1px solid #e5e7eb', borderRadius: 10, padding: '1rem' }}>
+          <p style={{ fontWeight: 600, marginBottom: '0.6rem', fontSize: '0.875rem' }}>Calcular frete</p>
+          <div style={{ display: 'flex', gap: '0.5rem' }}>
+            <input
+              type="text"
+              placeholder="CEP (somente números)"
+              value={cepInput}
+              onChange={(e) => setCepInput(e.target.value)}
+              maxLength={9}
+              style={{ flex: 1, padding: '0.4rem 0.6rem', border: '1px solid #d1d5db', borderRadius: 6, fontSize: '0.875rem' }}
+            />
+            <button
+              onClick={handleCalculateShipping}
+              disabled={shippingLoading}
+              style={{ padding: '0.4rem 0.9rem', background: '#6366f1', color: '#fff', border: 'none', borderRadius: 6, cursor: 'pointer', fontSize: '0.875rem', fontWeight: 600 }}
+            >
+              {shippingLoading ? '...' : 'Calcular'}
+            </button>
+          </div>
+          {shippingError && <p style={{ color: '#ef4444', fontSize: '0.8rem', marginTop: '0.4rem' }}>{shippingError}</p>}
+          {shippingOptions.length > 0 && (
+            <ul style={{ marginTop: '0.6rem', listStyle: 'none', display: 'flex', flexDirection: 'column', gap: '0.35rem' }}>
+              {shippingOptions.map((opt) => (
+                <li key={opt.id} style={{ fontSize: '0.82rem', display: 'flex', justifyContent: 'space-between' }}>
+                  <span>{opt.name} ({opt.days} dias)</span>
+                  <span style={{ fontWeight: 600 }}>{formatBRL(opt.price)}</span>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+
+        {/* Order summary */}
+        <div style={{ background: '#fff', border: '1px solid #e5e7eb', borderRadius: 10, padding: '1rem' }}>
+          <p style={{ fontWeight: 700, fontSize: '1rem', marginBottom: '0.75rem' }}>Resumo do pedido</p>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', fontSize: '0.875rem' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+              <span>Subtotal</span>
+              <span>{formatBRL(cart.subtotal)}</span>
+            </div>
+            {cart.discount > 0 && (
+              <div style={{ display: 'flex', justifyContent: 'space-between', color: '#10b981' }}>
+                <span>Desconto</span>
+                <span>- {formatBRL(cart.discount)}</span>
+              </div>
+            )}
+            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+              <span>Frete</span>
+              <span>{cart.shippingCost > 0 ? formatBRL(cart.shippingCost) : 'A calcular'}</span>
+            </div>
+            <hr style={{ margin: '0.4rem 0', border: 'none', borderTop: '1px solid #e5e7eb' }} />
+            <div style={{ display: 'flex', justifyContent: 'space-between', fontWeight: 700, fontSize: '1rem' }}>
+              <span>Total</span>
+              <span style={{ color: 'var(--color-primary)' }}>{formatBRL(cart.total)}</span>
+            </div>
+          </div>
+          <Link
+            to="/checkout"
+            style={{
+              display: 'block',
+              marginTop: '1rem',
+              padding: '0.75rem',
+              background: 'var(--color-primary)',
+              color: '#fff',
+              borderRadius: 8,
+              textDecoration: 'none',
+              textAlign: 'center',
+              fontWeight: 700,
+              fontSize: '0.9rem',
+            }}
+          >
+            Ir para Checkout
+          </Link>
+        </div>
+      </aside>
+    </main>
+  );
+}

package/templates/ecommerce/apps/web/src/modules/catalog/__tests__/ProductCard.test.tsx

@@ -0,0 +1,59 @@
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { ProductCard } from '../components/ProductCard';
+
+const mockProduct = {
+  id: 'prod-1',
+  name: 'Camiseta Básica',
+  slug: 'camiseta-basica',
+  price: 49.9,
+  images: ['https://via.placeholder.com/300'],
+  variants: [
+    { id: 'var-1', sku: 'CAM-P', size: 'P', color: 'Branco', stock: 5 },
+  ],
+};
+
+const outOfStockProduct = {
+  ...mockProduct,
+  id: 'prod-2',
+  slug: 'camiseta-sem-estoque',
+  variants: [{ id: 'var-2', sku: 'CAM-P2', size: 'P', color: 'Preto', stock: 0 }],
+};
+
+function renderCard(product = mockProduct) {
+  return render(
+    <MemoryRouter>
+      <ProductCard product={product} />
+    </MemoryRouter>,
+  );
+}
+
+describe('ProductCard', () => {
+  it('deve exibir nome, preço formatado em BRL e imagem', () => {
+    renderCard();
+
+    expect(screen.getByText('Camiseta Básica')).toBeInTheDocument();
+    // Price should be formatted as BRL currency
+    expect(screen.getByText(/R\$\s*49[,.]?90?/)).toBeInTheDocument();
+    expect(screen.getByRole('img', { name: /camiseta básica/i })).toBeInTheDocument();
+  });
+
+  it('deve exibir badge "Sem Estoque" quando todo o estoque é 0', () => {
+    renderCard(outOfStockProduct);
+
+    expect(screen.getByText(/sem estoque/i)).toBeInTheDocument();
+  });
+
+  it('não deve exibir badge "Sem Estoque" quando há variação disponível', () => {
+    renderCard();
+
+    expect(screen.queryByText(/sem estoque/i)).not.toBeInTheDocument();
+  });
+
+  it('deve ter link que navega para página de detalhe (/products/:slug)', () => {
+    renderCard();
+
+    const link = screen.getByRole('link');
+    expect(link).toHaveAttribute('href', '/products/camiseta-basica');
+  });
+});

package/templates/ecommerce/apps/web/src/modules/catalog/__tests__/ProductFilters.test.tsx

@@ -0,0 +1,56 @@
+import { render, screen, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ProductFilters } from '../components/ProductFilters';
+
+const categories = [
+  { id: 'cat-1', name: 'Camisetas', slug: 'camisetas' },
+  { id: 'cat-2', name: 'Calças', slug: 'calcas' },
+];
+
+describe('ProductFilters', () => {
+  it('deve chamar onFilterChange ao selecionar categoria', async () => {
+    const user = userEvent.setup();
+    const onFilterChange = jest.fn();
+    render(<ProductFilters categories={categories} onFilterChange={onFilterChange} />);
+
+    await user.selectOptions(screen.getByRole('combobox', { name: /categoria/i }), 'camisetas');
+
+    expect(onFilterChange).toHaveBeenCalledWith(
+      expect.objectContaining({ categorySlug: 'camisetas' }),
+    );
+  });
+
+  it('deve debounce a busca por texto (não dispara imediatamente)', async () => {
+    jest.useFakeTimers();
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+    const onFilterChange = jest.fn();
+    render(<ProductFilters categories={categories} onFilterChange={onFilterChange} />);
+
+    await user.type(screen.getByRole('textbox', { name: /buscar/i }), 'cam');
+
+    // Should NOT have been called yet (debounce pending)
+    expect(onFilterChange).not.toHaveBeenCalled();
+
+    act(() => { jest.advanceTimersByTime(400); });
+
+    expect(onFilterChange).toHaveBeenCalledWith(
+      expect.objectContaining({ q: 'cam' }),
+    );
+
+    jest.useRealTimers();
+  });
+
+  it('deve limpar filtros ao clicar em "Limpar"', async () => {
+    const user = userEvent.setup();
+    const onFilterChange = jest.fn();
+    render(<ProductFilters categories={categories} onFilterChange={onFilterChange} />);
+
+    // Select a category first
+    await user.selectOptions(screen.getByRole('combobox', { name: /categoria/i }), 'camisetas');
+    onFilterChange.mockClear();
+
+    await user.click(screen.getByRole('button', { name: /limpar/i }));
+
+    expect(onFilterChange).toHaveBeenCalledWith({});
+  });
+});