import React from 'react';

import { fireEvent, render } from '@testing-library/react-native';

import Button from '../Button';
import noop from '../../helpers/noop';
import theme from '../../themes/hero';

describe('Button', () => {
  it.each`
    Element
    ${() => <Button text="Button" onPress={noop} />}
    ${() => <Button text="Button" onPress={noop} disabled />}
    ${() => <Button text="Button" onPress={noop} loading />}
    ${() => <Button text="Button" onPress={noop} variant="outlined" />}
  `('renders correctly', async ({ Element }) => {
    const { toJSON } = render(<Element />);
    expect(toJSON()).toMatchSnapshot();
  });

  it('should feedback when users press', () => {
    const callback = jest.fn();
    const { getByText } = render(<Button text="Tap here" onPress={callback} />);

    const button = getByText('Tap here').parent;
    fireEvent.press(button);
    expect(callback).toBeCalledTimes(1);
    expect(button).not.toHaveStyle(theme.button.disabledWrapper);
  });

  it('should not feedback when disabled', () => {
    const callback = jest.fn();
    const { getByText, toJSON } = render(<Button disabled={true} text="Tap here" onPress={callback} />);
    expect(toJSON()).toMatchSnapshot();

    const button = getByText('Tap here').parent;
    expect(() => fireEvent.press(button)).toThrowError('No handler function found for event: "press"');
    expect(button).toHaveStyle(theme.button.disabledWrapper);
  });
});