MeshiTrack/packages/web/tests/components/TopBar.test.tsx

import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';

const themeMock = vi.hoisted(() => ({
  theme: 'light',
  toggleTheme: vi.fn(),
}));

vi.mock('@/components/ThemeProvider', () => ({
  useTheme: () => themeMock,
}));

vi.mock('@/components/layout/PageHeaderContext', () => ({
  usePageHeader: () => ({
    header: {
      title: 'Test Page',
      subtitle: 'Subtitle here',
      crumbs: ['Home', 'Test Page'],
      actions: null,
    },
  }),
}));

import { TopBar } from '../../src/components/layout/TopBar';

describe('TopBar', () => {
  it('renders title and subtitle', () => {
    render(<TopBar />);
    expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('Test Page');
    expect(screen.getByText('Subtitle here')).toBeInTheDocument();
  });

  it('renders breadcrumbs', () => {
    render(<TopBar />);
    expect(screen.getByText('Home')).toBeInTheDocument();
  });

  it('renders search input', () => {
    render(<TopBar />);
    expect(screen.getByPlaceholderText(/Search medicines/)).toBeInTheDocument();
  });

  it('renders theme toggle button', () => {
    render(<TopBar />);
    expect(screen.getByLabelText('Toggle theme')).toBeInTheDocument();
  });

  it('renders sun icon when theme is dark', () => {
    themeMock.theme = 'dark';
    render(<TopBar />);
    expect(screen.getByLabelText('Toggle theme')).toBeInTheDocument();
  });
});