test(04-01): add failing tests for MarketplaceCard component

- 5 tests: name+description rendering, category badge, activate button,
  activated status badge, onToggle callback
- Tests fail as expected (RED phase) - component not yet implemented
This commit is contained in:
2026-06-22 14:46:30 +02:00
parent e50b3c76c5
commit a64f889251
@@ -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<string, string> = {
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(<MarketplaceCard {...baseProps} />);
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(<MarketplaceCard {...baseProps} />);
expect(screen.getByText('Domain-Tools')).toBeInTheDocument();
});
it('shows the activate button and available status badge when isActive is false', () => {
render(<MarketplaceCard {...baseProps} isActive={false} />);
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(<MarketplaceCard {...baseProps} isActive={true} />);
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(<MarketplaceCard {...baseProps} onToggle={onToggle} isActive={false} />);
await user.click(screen.getByRole('button', { name: 'Modul aktivieren' }));
expect(onToggle).toHaveBeenCalledOnce();
expect(onToggle).toHaveBeenCalledWith('mod-1', false);
});
});