import React from 'react';
import { render } from '../../test-utils';
import { TextButton } from '../index';
import 'jest-styled-components';
import { COLORS } from '../../styles';
import { Size } from '../..';




describe('<TextButton />', () => {
  it('Renders primary button', async () => {
    const { queryByText, getByTestId } = render(
      <TextButton variant="primary" testId="TestButton" size={Size.Large}>
        TestButton
      </TextButton>,
    );
    expect(queryByText('TestButton')).toBeDefined();
    /*expect(getByTestId('TestButton')).toHaveStyleRule('background-color', COLORS.primary);
    expect(getByTestId('TestButton')).toHaveStyleRule('cursor', 'pointer');
    expect(getByTestId('TestButton')).toHaveStyleRule('color', 'white');*/
  });
  it('Renders secondary button', async () => {
    const { queryByText, getByTestId } = render(
      <TextButton variant="secondary" testId="TestButton">
        TestButton
      </TextButton>,
    );
    expect(queryByText('TestButton')).toBeDefined();
    /*expect(getByTestId('TestButton')).toHaveStyleRule('color', COLORS.primary);
    expect(getByTestId('TestButton')).toHaveStyleRule('border-color', COLORS.primary);
    expect(getByTestId('TestButton')).toHaveStyleRule('background-color', 'white');*/
  });
  it('Renders tertiary button', async () => {
    const { queryByText, getByTestId } = render(
      <TextButton variant="tertiary" testId="TestButton">
        TestButton
      </TextButton>,
    );
    expect(queryByText('TestButton')).toBeDefined();
    /*expect(getByTestId('TestButton')).toHaveStyleRule('background-color', 'white');
    expect(getByTestId('TestButton')).toHaveStyleRule('border-color', COLORS.neutral_100);
    expect(getByTestId('TestButton')).toHaveStyleRule('color', COLORS.primary);*/
  });
});