import React from 'react';
import { render, screen } from '@testing-library/react';
import { GlyphButton } from '../glyphButton';

describe('<GlyphButton>', () => {
    test('renders button with glyph', () => {
        render(<GlyphButton name="success" />);

        const btn = screen.getByRole('button');
        expect(btn).toBeVisible();
        expect(btn).toContainElement(screen.getByTestId('SuccessGlyphIcon'));
    });

    test('props are passed through to button', () => {
        render(<GlyphButton name="success" loading size="lg" variant="tertiary" />);
        expect(screen.getByRole('button')).toHaveClass('loading btn-lg btn-tertiary');
    });

    test('forwards style to the underlying button', () => {
        render(<GlyphButton name="success" style={{ marginTop: 10 }} />);
        expect(screen.getByRole('button')).toHaveStyle({ marginTop: '10px' });
    });
});