import { render, screen } from '@testing-library/react';
import { ThemeProvider } from '../../../theme';
import AccentCard from './AccentCard';

describe('<AccentCard/>', () => {
  const wrap = (ui: React.ReactNode) => render(<ThemeProvider>{ui}</ThemeProvider>);

  it('renders its children with the tone data attribute', () => {
    wrap(<AccentCard tone="success">content</AccentCard>);
    expect(screen.getByText('content')).toBeInTheDocument();
    expect(screen.getByText('content').closest('[data-accent-tone]')).toHaveAttribute('data-accent-tone', 'success');
  });
});
