import { render } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import StatusDot from '../StatusDot';

describe('StatusDot', () => {
    it('renders as a span element', () => {
        const { container } = render(<StatusDot status="operational" />);
        expect(container.firstChild?.nodeName).toBe('SPAN');
    });

    it('applies emerald colour for operational status', () => {
        const { container } = render(<StatusDot status="operational" />);
        expect((container.firstChild as HTMLElement).className).toContain(
            'bg-emerald-400',
        );
    });

    it('applies amber colour for warning status', () => {
        const { container } = render(<StatusDot status="warning" />);
        expect((container.firstChild as HTMLElement).className).toContain(
            'bg-amber-400',
        );
    });

    it('applies red colour for degraded status', () => {
        const { container } = render(<StatusDot status="degraded" />);
        expect((container.firstChild as HTMLElement).className).toContain(
            'bg-red-400',
        );
    });

    it('renders a rounded-full dot', () => {
        const { container } = render(<StatusDot status="operational" />);
        expect((container.firstChild as HTMLElement).className).toContain(
            'rounded-full',
        );
    });

    it('applies glow shadow for operational status', () => {
        const { container } = render(<StatusDot status="operational" />);
        expect((container.firstChild as HTMLElement).className).toContain(
            'shadow-',
        );
    });

    it('does not apply a colour class for an unknown status', () => {
        const { container } = render(<StatusDot status="unknown" />);
        const cls = (container.firstChild as HTMLElement).className;
        expect(cls).not.toContain('bg-emerald');
        expect(cls).not.toContain('bg-amber');
        expect(cls).not.toContain('bg-red');
    });
});