import React from 'react';
import { render, screen } from '@testing-library/react';
import { testComponent } from 'lib/test-utils/common';
import { Highlight } from '../highlight';

describe('<highlight>', () => {
    testComponent(Highlight);

    test('applies style', () => {
        render(<Highlight style={{ marginTop: 10 }}>Test</Highlight>);
        expect(screen.getByTestId('Highlight')).toHaveStyle({ marginTop: '10px' });
    });

    test('renders child text', () => {
        const text = 'some test text';
        render(<Highlight>{text}</Highlight>);

        const highlight = screen.getByText(text);
        expect(highlight).toBeVisible();
        expect(highlight).toHaveClass('Highlight');
    });

    describe('variants', () => {
        test('has `neutral` variant by default', () => {
            render(<Highlight>Test</Highlight>);

            const highlight = screen.getByText('Test');
            expect(highlight).toBeVisible();
            expect(highlight).toHaveClass('Highlight-neutral');
        });

        test('sets variant from prop', () => {
            render(<Highlight variant="info">Test</Highlight>);

            const highlight = screen.getByText('Test');
            expect(highlight).toBeVisible();
            expect(highlight).toHaveClass('Highlight-info');
        });
    });
});