import React from 'react';
import { describe, it, expect } from 'vitest';
import { render, screen, within } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import { Sidebar } from '@/components/layout/Sidebar';

describe('Sidebar', () => {
  it('renders navigation links with ARIA labels', () => {
    render(
      <MemoryRouter initialEntries={['/dashboard']}>
        <Sidebar />
      </MemoryRouter>
    );
    expect(screen.getByLabelText('Dashboard')).toBeInTheDocument();
    expect(screen.getByLabelText('Kontakte')).toBeInTheDocument();
  });

  it('has navigation landmark with aria-label', () => {
    render(
      <MemoryRouter initialEntries={['/dashboard']}>
        <Sidebar />
      </MemoryRouter>
    );
    expect(screen.getByLabelText('Seitenleiste Navigation')).toBeInTheDocument();
  });

  it('all nav links have min 44px touch targets', () => {
    render(
      <MemoryRouter initialEntries={['/dashboard']}>
        <Sidebar />
      </MemoryRouter>
    );
    const navLinks = screen.getAllByRole('link');
    navLinks.forEach((link) => {
      expect(link.className).toContain('min-h-touch');
    });
  });
});
