flyer-crawler.projectium.com/src/components/UserMenuSkeleton.test.tsx

// src/components/UserMenuSkeleton.test.tsx
import React from 'react';
import { describe, it, expect } from 'vitest';
import { UserMenuSkeleton } from './UserMenuSkeleton';
import { renderWithProviders } from '../tests/utils/renderWithProviders';

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

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

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

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