// src/components/UserMenuSkeleton.test.tsx
import React from 'react';
import { render } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { UserMenuSkeleton } from './UserMenuSkeleton';

describe('UserMenuSkeleton', () => {
  it('should render without crashing', () => {
    const { container } = render(<UserMenuSkeleton />);
    expect(container.firstChild).toBeInTheDocument();
  });

  it('should have the main container with pulse animation', () => {
    const { container } = render(<UserMenuSkeleton />);
    expect(container.firstChild).toHaveClass('animate-pulse');
  });

  it('should render two child placeholder elements', () => {
    const { container } = render(<UserMenuSkeleton />);
    expect(container.firstChild?.childNodes.length).toBe(2);
  });

  it('should render a rectangular placeholder with correct styles', () => {
    const { container } = render(<UserMenuSkeleton />);
    expect(container.querySelector('.rounded-md')).toHaveClass('h-8 w-24 bg-gray-200 dark:bg-gray-700');
  });

  it('should render a circular placeholder with correct styles', () => {
    const { container } = render(<UserMenuSkeleton />);
    expect(container.querySelector('.rounded-full')).toHaveClass('h-10 w-10 bg-gray-200 dark:bg-gray-700');
  });
});