import React from 'react';
import { render } from '../../test-utils';
import 'jest-styled-components';
import { QuizButton } from '..';
import { Size } from '../../types';
import COLORS from '../../styles/colors';
import '@testing-library/jest-dom';


describe('<QuizButton />',()=>{
    it('renders correct quiz button', async () => {
        const{getByText, getByTestId} = render(
            <QuizButton size={Size.Small} resultType={'correct'} text={'this is sample text'} type={'radio'} id={'1'}/>
        );
        expect(getByTestId('txtContainer')).toHaveTextContent('this is sample text');
        expect(getByTestId('txtContainer')).toHaveClass('quiz-button-text');
        expect(getByTestId('btnContainer')).toHaveClass('quiz-button-icon');
    });

    it('renders incorrect quiz button', async () => {
        const{getByText, getByTestId} = render(
            <QuizButton size={Size.Small} resultType={'incorrect'} text={'this is sample text'} type={'checkbox'} id={'1'}/>
        );
        expect(getByTestId('txtContainer')).toHaveTextContent('this is sample text');
        expect(getByTestId('txtContainer')).toHaveClass('quiz-button-text');
        expect(getByTestId('btnContainer')).toHaveClass('quiz-button-icon');
    });

    it('renders partial quiz button', async () => {
        const{getByText, getByTestId} = render(
            <QuizButton size={Size.Small} resultType={'partial'} text={'this is sample text'} type={'radio'} id={'1'}/>
        );
        expect(getByTestId('txtContainer')).toHaveTextContent('this is sample text');
        expect(getByTestId('txtContainer')).toHaveClass('quiz-button-text');
        expect(getByTestId('btnContainer')).toHaveClass('quiz-button-icon');
    });

    it('renders quiz button', async () => {
        const{getByText, getByTestId} = render(
            <QuizButton size={Size.Small} text={'this is sample text'} type={'checkbox'} id={'1'}/>
        );
        expect(getByText('this is sample text')).toHaveTextContent('this is sample text');
        expect(getByTestId('txtContainer')).toHaveStyleRule('background',COLORS.accent1_20);
        expect(getByTestId('btnContainer')).toHaveStyleRule('background',COLORS.accent1_100);
    });

    it('renders selected quiz button', async () => {
        const{getByText} = render(
            <QuizButton size={Size.Small} text={'this is sample text'} selected={true} type={'radio'} id={'1'}/>
        );
        expect(getByText('this is sample text')).toHaveTextContent('this is sample text');
    });
});