import { describe, it, expect, vi } from 'vitest';
import { render, fireEvent } from '@testing-library/svelte';
import Tab from './Tab.svelte';
describe('mc-tab component', () => {
    it('renders as a <button> by default', () => {
        const { container } = render(Tab);
        const button = container.querySelector('button');
        expect(button).toBeTruthy();
        expect(button?.getAttribute('role')).toBe('tab');
        expect(button?.classList.contains('mc-tabs__tab')).toBe(true);
    });
    it('renders as an <a> when tag="a" is passed', () => {
        const { container } = render(Tab, {
            props: { tag: 'a', href: '/example' },
        });
        const anchor = container.querySelector('a');
        expect(anchor).toBeTruthy();
        expect(anchor?.getAttribute('role')).toBe('tab');
        expect(anchor?.getAttribute('href')).toBe('/example');
        expect(anchor?.classList.contains('mc-tabs__tab')).toBe(true);
    });
    it('applies selected class when selected=true', () => {
        const { container } = render(Tab, {
            props: { selected: true },
        });
        const button = container.querySelector('button');
        expect(button?.getAttribute('aria-selected')).toBe('true');
        expect(button?.classList.contains('mc-tabs__tab--selected')).toBe(true);
    });
    it('applies disabled class when disabled=true', () => {
        const { container } = render(Tab, {
            props: { disabled: true },
        });
        const button = container.querySelector('button');
        expect(button?.classList.contains('mc-tabs__tab--disabled')).toBe(true);
    });
    it('fires click event when clicked', async () => {
        const { container } = render(Tab);
        const button = container.querySelector('button');
        const clickHandler = vi.fn();
        button.addEventListener('click', clickHandler);
        await fireEvent.click(button);
        expect(clickHandler).toHaveBeenCalledOnce();
    });
    it('passes arbitrary attributes to the button element', () => {
        const { container } = render(Tab, {
            props: {
                'aria-label': 'My tab',
                name: 'custom-tab',
                id: 'tab-1',
            },
        });
        const button = container.querySelector('button');
        expect(button.getAttribute('aria-label')).toBe('My tab');
        expect(button.getAttribute('name')).toBe('custom-tab');
        expect(button.getAttribute('id')).toBe('tab-1');
    });
});
