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

import Button from '../components/Button';
import { color } from '../constants/style';

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

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

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

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

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

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

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

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

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