/* eslint-disable no-undef */
import React from 'react';
import { cleanup, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';

import testWrapper from '../helpers/testWrapper';
import Button from '../components/Button';
import theme from '../helpers/theme';

describe('Button component', () => {
  afterEach(cleanup);

  test('check button content', () => {
    const { getByText } = testWrapper(<Button>btn content</Button>);

    expect(getByText('btn content').textContent).toBe('btn content');
  });

  test('check button primary theme', () => {
    const { getByText } = testWrapper(
      <Button appearance="primary">btn content</Button>,
    );

    expect(getByText('btn content')).toHaveStyle(`
      background-color: ${theme.colors.primary};
      border-color: ${theme.colors.primary};
      color: white;
    `);
  });

  test('check click event', () => {
    let counter = 0;
    const handleClick = (): void => {
      counter += 1;
    };
    const { getByText } = testWrapper(
      <Button onClick={handleClick}>btn content</Button>,
    );

    fireEvent.mouseDown(getByText('btn content'));
    expect(counter).toBe(1);
  });

  test('check disable status', () => {
    const { getByText } = testWrapper(<Button isDisabled>btn content</Button>);

    expect(getByText('btn content')).toBeDisabled();
  });
});