import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import 'jest-styled-components';
import { useState } from 'react';
import { describe, expect, it } from 'vitest';
import { Button } from './button';

describe('Button', () => {

  it('should render correctly', async () => {
    const { container } = render(<Button>Button</Button>);
    await userEvent.click(screen.getByRole('button'));
    expect(container).toMatchSnapshot();
    expect(screen.getByRole('button')).toHaveTextContent('Button');
  });

  it('should render empty button correctly', () => {
    const { container } = render(<Button />);
    expect(container).toMatchSnapshot();
  });

  it('should trigger callback function', async () => {
    const Wrapper = () => {
      const [state, setState] = useState<string>('state1');
      return <Button onClick={() => setState('state2')}>{state}</Button>;
    };
    const { container } = render(<Wrapper />);
    expect(screen.getByRole('button')).toHaveTextContent('state1');
    await userEvent.click(screen.getByRole('button'));
    expect(screen.getByRole('button')).toHaveTextContent('state2');
  });

});