import { render } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { QuickActionCardSkeleton } from './QuickActionCardSkeleton';
import React from 'react';

describe('QuickActionCardSkeleton', () => {
  it('renders the icon block, badge, title/description lines and action button skeletons', () => {
    const { container } = render(<QuickActionCardSkeleton />);
    const skeletons = container.querySelectorAll('[data-slot="skeleton"]');
    // icon(1) + badge(1) + title(1) + description lines(2) + action button(1) = 6
    expect(skeletons.length).toBe(6);
  });

  it('renders the icon placeholder with rounded square shape', () => {
    const { container } = render(<QuickActionCardSkeleton />);
    expect(container.querySelector('.size-10')).toBeInTheDocument();
  });

  it('renders the full-width action button placeholder', () => {
    const { container } = render(<QuickActionCardSkeleton />);
    expect(container.querySelector('.h-8.w-full.rounded-md')).toBeInTheDocument();
  });

  it('applies a custom className to the root Card', () => {
    const { container } = render(<QuickActionCardSkeleton className="custom-quick-action" />);
    expect(container.querySelector('[data-slot="card"]')).toHaveClass('custom-quick-action');
  });
});