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

describe('Button', () => {
    test('sets glyph classname', () => {
        render(<Button glyph>Button text</Button>);

        expect(screen.getByText('Button text')).toHaveClass('suite-glyph-button');
    });

    test('sets loading classname', () => {
        render(<Button loading>Button text</Button>);

        const btn = screen.getByText('Button text');
        expect(btn).toHaveClass('loading');
        expect(btn).toBeDisabled();
    });

    test('appends all relevant classnames', () => {
        render(
            <Button glyph loading className="buttonclass">
                Button text
            </Button>
        );

        const btn = screen.getByText('Button text');
        expect(btn).toHaveClass('suite-glyph-button');
        expect(btn).toHaveClass('buttonclass');
        expect(btn).toHaveClass('loading');
    });

    test('forwards style to the underlying button', () => {
        render(<Button style={{ marginTop: 10 }}>Button text</Button>);

        expect(screen.getByText('Button text')).toHaveStyle({ marginTop: '10px' });
    });
});