Torben Sorensen
19885a50f7
All checks were successful
Deploy to Test Environment / deploy-to-test (push) Successful in 13m30s
67 lines
2.6 KiB
TypeScript
67 lines
2.6 KiB
TypeScript
// src/components/Dashboard.test.tsx
|
|
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
|
import { screen } from '@testing-library/react';
|
|
import { Dashboard } from './Dashboard';
|
|
import { renderWithProviders } from '../tests/utils/renderWithProviders';
|
|
|
|
// Mock child components to isolate Dashboard logic
|
|
// Note: The Dashboard component imports these using '../components/RecipeSuggester'
|
|
// which resolves to the same file as './RecipeSuggester' when inside src/components.
|
|
vi.mock('./RecipeSuggester', () => ({
|
|
RecipeSuggester: () => <div data-testid="recipe-suggester-mock">Recipe Suggester</div>,
|
|
}));
|
|
|
|
vi.mock('./FlyerCountDisplay', () => ({
|
|
FlyerCountDisplay: () => <div data-testid="flyer-count-display-mock">Flyer Count Display</div>,
|
|
}));
|
|
|
|
vi.mock('./Leaderboard', () => ({
|
|
Leaderboard: () => <div data-testid="leaderboard-mock">Leaderboard</div>,
|
|
}));
|
|
|
|
describe('Dashboard Component', () => {
|
|
beforeEach(() => {
|
|
vi.clearAllMocks();
|
|
});
|
|
|
|
it('renders the dashboard title', () => {
|
|
console.log('TEST: Verifying dashboard title render');
|
|
renderWithProviders(<Dashboard />);
|
|
expect(screen.getByRole('heading', { name: /dashboard/i, level: 1 })).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders the RecipeSuggester widget', () => {
|
|
console.log('TEST: Verifying RecipeSuggester presence');
|
|
renderWithProviders(<Dashboard />);
|
|
expect(screen.getByTestId('recipe-suggester-mock')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders the FlyerCountDisplay widget within the "Your Flyers" section', () => {
|
|
console.log('TEST: Verifying FlyerCountDisplay presence and section title');
|
|
renderWithProviders(<Dashboard />);
|
|
|
|
// Check for the section heading
|
|
expect(screen.getByRole('heading', { name: /your flyers/i, level: 2 })).toBeInTheDocument();
|
|
|
|
// Check for the component
|
|
expect(screen.getByTestId('flyer-count-display-mock')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders the Leaderboard widget in the sidebar area', () => {
|
|
console.log('TEST: Verifying Leaderboard presence');
|
|
renderWithProviders(<Dashboard />);
|
|
expect(screen.getByTestId('leaderboard-mock')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders with the correct grid layout classes', () => {
|
|
console.log('TEST: Verifying layout classes');
|
|
const { container } = renderWithProviders(<Dashboard />);
|
|
|
|
// The main grid container
|
|
const gridContainer = container.querySelector('.grid');
|
|
expect(gridContainer).toBeInTheDocument();
|
|
expect(gridContainer).toHaveClass('grid-cols-1');
|
|
expect(gridContainer).toHaveClass('lg:grid-cols-3');
|
|
expect(gridContainer).toHaveClass('gap-6');
|
|
});
|
|
}); |