import { describe, it, expect } from 'vitest';
import { render } from '@testing-library/svelte';
import Breadcrumb from './Breadcrumb.svelte';
describe('m-breadcrumb component', () => {
    const links = [
        { label: 'Home', href: '/' },
        { label: 'Category', href: '/category' },
        { label: 'Item', href: '/category/item', target: '_blank' },
    ];
    it('renders with default appearance "standard"', () => {
        const { container } = render(Breadcrumb, { props: { links } });
        const nav = container.querySelector('nav.mc-breadcrumb');
        expect(nav).toBeTruthy();
        expect(nav?.classList.contains('mc-breadcrumb--standard')).toBe(true);
        const items = container.querySelectorAll('li.mc-breadcrumb__item');
        expect(items.length).toBe(links.length);
        const anchors = container.querySelectorAll('a.mc-link');
        expect(anchors[anchors.length - 1].classList.contains('mc-breadcrumb__current')).toBe(true);
    });
    it('renders with "inverse" appearance when set', () => {
        const { container } = render(Breadcrumb, {
            props: { links, appearance: 'inverse' },
        });
        const nav = container.querySelector('nav.mc-breadcrumb');
        expect(nav?.classList.contains('mc-breadcrumb--inverse')).toBe(true);
        const anchors = container.querySelectorAll('a.mc-link--inverse');
        expect(anchors.length).toBe(links.length);
    });
    it('applies href and target attributes on links correctly', () => {
        const { container } = render(Breadcrumb, { props: { links } });
        links.forEach((link, i) => {
            const anchor = container.querySelectorAll('a.mc-link')[i];
            expect(anchor).toHaveAttribute('href', link.href);
            if (link.target) {
                expect(anchor).toHaveAttribute('target', link.target);
            }
            else {
                expect(anchor).not.toHaveAttribute('target');
            }
        });
    });
});
