import { describe, it, expect } from 'vitest';
import { render } from '@testing-library/svelte';
import Tabs from './Tabs.svelte';
describe('mc-tabs component', () => {
    it('renders <nav> with the base class', () => {
        const { container } = render(Tabs);
        const nav = container.querySelector('nav');
        expect(nav).toBeTruthy();
        expect(nav?.classList.contains('mc-tabs')).toBe(true);
    });
    it('adds the "mc-tabs--centered" class when centered is true', () => {
        const { container } = render(Tabs, {
            props: { centered: true },
        });
        const nav = container.querySelector('nav');
        expect(nav?.classList.contains('mc-tabs--centered')).toBe(true);
    });
    it('renders a <ul> with role="tablist"', () => {
        const { container } = render(Tabs);
        const ul = container.querySelector('ul.mc-tabs__list');
        expect(ul).toBeTruthy();
        expect(ul?.getAttribute('role')).toBe('tablist');
    });
    it('sets aria-label on the tablist when description is provided', () => {
        const description = 'My tab description';
        const { container } = render(Tabs, {
            props: { description },
        });
        const ul = container.querySelector('ul.mc-tabs__list');
        expect(ul?.getAttribute('aria-label')).toBe(description);
    });
    it('renders a divider by default', () => {
        const { container } = render(Tabs);
        const divider = container.querySelector('.mc-divider-horizontal');
        expect(divider).toBeTruthy();
    });
    it('does not render divider when divider is false', () => {
        const { container } = render(Tabs, {
            props: { divider: false },
        });
        const divider = container.querySelector('.mc-divider-horizontal');
        expect(divider).toBeNull();
    });
    it('renders without crashing when value prop is provided', () => {
        const { container } = render(Tabs, {
            props: { value: 2 },
        });
        const nav = container.querySelector('nav');
        expect(nav).toBeTruthy();
    });
});
