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:
@@ -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);
|
||||||
|
});
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user