import { render, screen, userEvent } from '../test-utils';

import ActionButton from '.';

describe('ActionButton', () => {
  const props = {
    children: 'Personal profile',
    onClick: jest.fn(),
  };

  describe('by default', () => {
    beforeEach(() => {
      render(<ActionButton {...props} />);
    });

    it('renders the text', () => {
      expect(screen.getByText('Personal profile')).toBeInTheDocument();
    });

    it('is not disabled', () => {
      expect(screen.getByRole('button')).toBeEnabled();
    });
  });

  describe('button attributes', () => {
    it('disables the button if disabled', () => {
      render(<ActionButton {...props} disabled />);
      expect(screen.getByRole('button')).toBeDisabled();
    });

    it('passes through custom classes if set', () => {
      render(<ActionButton {...props} className="catsarethebest" />);
      expect(screen.getByRole('button')).toHaveClass('catsarethebest');
    });
  });

  describe('onClick', () => {
    it('calls onClick when clicked', async () => {
      const onClick = jest.fn();
      render(<ActionButton {...props} onClick={onClick} />);
      await userEvent.click(screen.getByRole('button'));
      expect(onClick).toHaveBeenCalledTimes(1);
    });

    it('does not call onClick when clicked if disabled', async () => {
      const onClick = jest.fn();
      render(<ActionButton {...props} disabled onClick={onClick} />);
      await userEvent.click(screen.getByRole('button'));
      expect(onClick).toHaveBeenCalledTimes(0);
    });
  });

  describe('deprecated', () => {
    it('text prop', () => {
      const copy = 'Text prop';
      const onClick = jest.fn();
      render(<ActionButton disabled text={copy} onClick={onClick} />);
      expect(screen.getByText(copy)).toBeInTheDocument();
    });
  });

  describe('priority', () => {
    it('is rendered for primary', () => {
      render(<ActionButton priority="primary" />);
      expect(screen.getByRole('button')).toHaveClass('btn-priority-1');
    });

    it('is rendered for secondary', () => {
      render(<ActionButton priority="secondary" />);
      expect(screen.getByRole('button')).toHaveClass('btn-priority-2');
    });

    it('is backwards compatible if nothing is passed in', () => {
      render(<ActionButton />);
      expect(screen.getByRole('button')).toHaveClass('btn-priority-1');
    });
  });
});