import { describe, it, expect, vi } from 'vitest';
import { render, fireEvent } from '@testing-library/svelte';
import Button from './Button.svelte';
describe('m-button component', () => {
    it('renders with default classes', () => {
        const { container } = render(Button, {
            props: {},
        });
        const button = container.querySelector('button');
        expect(button).toBeTruthy();
        expect(button.classList.contains('mc-button')).toBe(true);
        expect(button.classList.contains('mc-button--m')).toBe(true);
        expect(button.classList.contains('mc-button--standard')).toBe(true);
    });
    it('applies correct classes for props', () => {
        const { container } = render(Button, {
            props: {
                appearance: 'accent',
                size: 'l',
                ghost: true,
                outlined: true,
                iconposition: 'only',
                isloading: true,
            },
        });
        const button = container.querySelector('button');
        expect(button.classList.contains('mc-button--accent')).toBe(true);
        expect(button.classList.contains('mc-button--l')).toBe(true);
        expect(button.classList.contains('mc-button--ghost')).toBe(true);
        expect(button.classList.contains('mc-button--outlined')).toBe(true);
        expect(button.classList.contains('mc-button--loading')).toBe(true);
        expect(button.classList.contains('mc-button--icon-only')).toBe(true);
    });
    it('renders disabled button', () => {
        const { container } = render(Button, {
            props: {
                disabled: true,
            },
        });
        const button = container.querySelector('button');
        expect(button.disabled).toBe(true);
    });
    it('renders loading spinner when isloading is true', () => {
        const { container } = render(Button, {
            props: {
                isloading: true,
            },
        });
        const loaderIcon = container.querySelector('.mc-button__icon');
        expect(loaderIcon).toBeTruthy();
        expect(loaderIcon?.innerHTML).toContain('svg');
    });
    it('fires click event when clicked', async () => {
        const { container } = render(Button);
        const button = container.querySelector('button');
        const clickHandler = vi.fn();
        button.addEventListener('click', clickHandler);
        await fireEvent.click(button);
        expect(clickHandler).toHaveBeenCalledOnce();
    });
    it('passes additional attributes to button element', () => {
        const { container } = render(Button, {
            props: {
                'aria-label': 'My button',
                name: 'test-button',
                type: 'submit',
            },
        });
        const button = container.querySelector('button');
        expect(button.getAttribute('aria-label')).toBe('My button');
        expect(button.getAttribute('name')).toBe('test-button');
        expect(button.getAttribute('type')).toBe('submit');
    });
});
