// spinnerButton.test.js
import React from 'react';
import { render, screen } from '@testing-library/react';
import SpinnerButton from '../spinnerButton.js';

test("renders a spinner when it's loading", () => {
    // render the button
    render(<SpinnerButton text={''} waiting={true} />);

    // expect a spinner to exist
    expect(screen.getByRole('status')).toBeInTheDocument();
});

// spinnerButton.js
import React from 'react';
import Spinner from 'react-bootstrap/Spinner';
import './styles/spinnerButton.css';

class SpinnerButton extends React.Component {
    render = () => {
        const buttonProps = { ...this.props };
        delete buttonProps.waiting;
        delete buttonProps.text;
        delete buttonProps.spinnerClassName;
        return (
            <button {...buttonProps}>
                {this.props.waiting ? (
                    <Spinner
                        as='li'
                        size='sm'
                        animation='border'
                        role='status'                     /* <= RELEVANT LINE OF CODE */
                        className={this.props.spinnerClassName}
                        aria-hidden='true'
                    >
                        <span></span>
                    </Spinner>
                ) : (
                    this.props.text
                )}
            </button>
        );
    };
}

export default SpinnerButton;