import React from 'react';

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

import ButtonClose from '../ButtonClose';
import ButtonKDS from '../ButtonKDS';

import { ThemeProvider } from 'styled-components';

const theme = {
  colors: {
    main: '#000',
    default: '#fff',
    success: 'rgb(71, 176, 75)',
    background: '#ffc200',
  },
  fontSizes: {
    medium: '16px',
  },
};

interface Props {
  children: React.ReactNode;
}
const KDSTheme = ({ children }: Props) => (
  <ThemeProvider theme={theme}>{children}</ThemeProvider>
);

const mockedSetZoomIn = jest.fn();

describe('ButtonClose', () => {
  it('should render button close element', () => {
    render(<ButtonClose setIsZoomIn={mockedSetZoomIn} />);
    const buttonElement = screen.getByTestId('close-button');
    expect(buttonElement).toBeInTheDocument();
  });
  it('should render zoom in button', () => {
    render(
      <KDSTheme>
        <ButtonKDS isIcon={true} text="Zoom In" type="white" />
      </KDSTheme>
    );
    const buttonElement = screen.getByText('Zoom In');
    expect(buttonElement).toBeInTheDocument();
  });
  it('should render white button', () => {
    render(
      <KDSTheme>
        <ButtonKDS isIcon={false} text="Zoom In" type="white" />
      </KDSTheme>
    );
    const buttonElement = screen.getByText('Zoom In');
    expect(buttonElement).toHaveStyle('background-color:#fff');
  });
  it('should render button with icon', () => {
    render(
      <KDSTheme>
        <ButtonKDS isIcon={true} text="Zoom In" type="white" />
      </KDSTheme>
    );
    const buttonElement = screen.getByText('Zoom In');
    const graphicElement = screen.getByTestId('magnifier-icon');
    expect(buttonElement).toContainElement(graphicElement);
  });
  it('should render success button', () => {
    render(
      <KDSTheme>
        <ButtonKDS isIcon={true} text="Zoom In" type="large" />
      </KDSTheme>
    );
    const buttonElement = screen.getByText('Zoom In');
    expect(buttonElement).toHaveStyle('background-color:rgb(71, 176, 75)');
  });
});