diff --git a/apps/web/src/app/(portal)/marketplace/components/MarketplaceCard.test.tsx b/apps/web/src/app/(portal)/marketplace/components/MarketplaceCard.test.tsx new file mode 100644 index 0000000..d16bd3c --- /dev/null +++ b/apps/web/src/app/(portal)/marketplace/components/MarketplaceCard.test.tsx @@ -0,0 +1,78 @@ +import { cleanup, render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { afterEach, describe, expect, it, vi } from 'vitest'; + +// Mock next-intl useTranslations +vi.mock('next-intl', () => ({ + useTranslations: () => (key: string) => { + const translations: Record = { + activate: 'Modul aktivieren', + deactivate: 'Deaktivieren', + statusActive: 'Aktiviert', + statusAvailable: 'Verfuegbar', + }; + return translations[key] ?? key; + }, +})); + +import { MarketplaceCard } from './MarketplaceCard'; + +const baseProps = { + id: 'mod-1', + name: 'Domaincheck', + slug: 'domaincheck', + description: { de: 'Pruefe ob eine Domain verfuegbar ist', en: 'Check if a domain is available' }, + icon: 'Globe', + category: 'Domain-Tools', + isActive: false, + isToggling: false, + onToggle: vi.fn(), +}; + +afterEach(() => { + cleanup(); + vi.clearAllMocks(); +}); + +describe('MarketplaceCard', () => { + it('renders the module name and the localized description (de locale)', () => { + render(); + + expect(screen.getByText('Domaincheck')).toBeInTheDocument(); + expect(screen.getByText('Pruefe ob eine Domain verfuegbar ist')).toBeInTheDocument(); + }); + + it('renders a category badge showing the module category', () => { + render(); + + expect(screen.getByText('Domain-Tools')).toBeInTheDocument(); + }); + + it('shows the activate button and available status badge when isActive is false', () => { + render(); + + expect(screen.getByRole('button', { name: 'Modul aktivieren' })).toBeInTheDocument(); + const statusBadge = screen.getByRole('status'); + expect(statusBadge).toHaveTextContent('Verfuegbar'); + }); + + it('shows a green Aktiviert status badge and the deactivate label when isActive is true', () => { + render(); + + const statusBadge = screen.getByRole('status'); + expect(statusBadge).toHaveTextContent('Aktiviert'); + expect(screen.getByRole('button', { name: 'Deaktivieren' })).toBeInTheDocument(); + }); + + it('calls onToggle with the module id and the current active state when clicking the button', async () => { + const onToggle = vi.fn(); + const user = userEvent.setup(); + + render(); + + await user.click(screen.getByRole('button', { name: 'Modul aktivieren' })); + + expect(onToggle).toHaveBeenCalledOnce(); + expect(onToggle).toHaveBeenCalledWith('mod-1', false); + }); +});