import React from 'react';
import { render, screen } from '@testing-library/react';
import { Divider, DividerProps } from '../divider';

describe('<Divider>', () => {
    const renderComponent = (props?: Partial<DividerProps>) => render(<Divider {...props} />);

    test('renders divider', () => {
        renderComponent();

        const divider = screen.getByRole('separator');
        expect(divider).toBeInTheDocument();
        expect(divider).toHaveClass('SuiteDivider-vertical');
    });

    test('accepts classname', () => {
        const className = 'TestClass';
        renderComponent({ className });

        const divider = screen.getByRole('separator');
        expect(divider).toHaveClass(className);
    });

    test('accepts testId', () => {
        const testId = 'TestID';
        renderComponent({ testId });

        const divider = screen.getByTestId(testId);
        expect(divider).toBeInTheDocument();
    });

    test('applies style', () => {
        renderComponent({ style: { marginTop: 10 } });
        const divider = screen.getByRole('separator');
        expect(divider).toHaveStyle({ marginTop: '10px' });
    });

    test('direction prop is set', () => {
        renderComponent({ direction: 'horizontal' });

        const divider = screen.getByRole('separator');
        expect(divider).not.toHaveClass('SuiteDivider-vertical');
        expect(divider).toHaveClass('SuiteDivider-horizontal');
    });

    test('width prop is set', () => {
        renderComponent({ width: 10 });

        const divider = screen.getByRole('separator');
        expect(divider).toHaveStyle({ '--suite-divider-width': '10px' });
    });

    test('height prop is set', () => {
        renderComponent({ height: 10 });

        const divider = screen.getByRole('separator');
        expect(divider).toHaveStyle({ height: '10px' });
    });

    test('margin prop is set', () => {
        renderComponent({ margin: 10 });

        const divider = screen.getByRole('separator');
        expect(divider).toHaveStyle({ '--suite-divider-margin': '10px' });
    });

    test('padding prop is set', () => {
        renderComponent({ padding: 10 });

        const divider = screen.getByRole('separator');
        expect(divider).toHaveStyle({ '--suite-divider-padding': '10px' });
    });
});