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

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 theme', () => {
    const { container } = render(<Button appearance="primary">btn content</Button>);
    const btn = container.querySelector('button');
    const style = window.getComputedStyle(btn as HTMLElement) as { [key: string]: any };

    expect(style['border-color']).toBe(color.primary);
    expect(style['background-color']).toBe('rgb(88, 106, 242)');
    expect(style.color).toBe('white');
  });

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

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

  test('disable button', () => {
    let counter = 0;
    const cb = (): void => { counter += 1; };
    const { getByText } = render(<Button isDisabled onClick={cb}>btn content</Button>);

    fireEvent.click(getByText('btn content'));
    expect(counter).toBe(0);
  });
});