import { render, fireEvent } from '@testing-library/svelte';
import { describe, expect, it, vi } from 'vitest';
import TileClickable from './TileClickable.svelte';
describe('m-tile-clickable', () => {
    it('applies the default class', () => {
        const { container } = render(TileClickable);
        const tile = container.querySelector('.mc-tile');
        expect(tile).toBeTruthy();
        expect(tile?.classList.contains('mc-tile--primary')).toBe(false);
        expect(tile?.classList.contains('mc-tile--open')).toBe(true);
    });
    it('applies the class for secondary appearance', () => {
        const { container } = render(TileClickable, { appearance: 'secondary' });
        const tile = container.querySelector('.mc-tile');
        expect(tile?.classList.contains('mc-tile--secondary')).toBe(true);
    });
    it('applies the "mc-tile--bordered" class when bordered is true', () => {
        const { container } = render(TileClickable, { bordered: true });
        const tile = container.querySelector('.mc-tile');
        expect(tile?.classList.contains('mc-tile--bordered')).toBe(true);
    });
    it('applies the correct behavior class for internal navigation', () => {
        const { container } = render(TileClickable, { href: '/internal', internal: true });
        const tile = container.querySelector('.mc-tile');
        expect(tile?.classList.contains('mc-tile--navigate')).toBe(true);
        expect(tile?.getAttribute('target')).toBe('_self');
    });
    it('applies the correct behavior class for external link', () => {
        const { container } = render(TileClickable, { href: 'https://example.com' });
        const tile = container.querySelector('.mc-tile');
        expect(tile?.classList.contains('mc-tile--external-link')).toBe(true);
        expect(tile?.getAttribute('target')).toBe('_blank');
    });
    it('applies the correct behavior class for a button (default)', () => {
        const { container } = render(TileClickable);
        const tile = container.querySelector('.mc-tile');
        expect(tile?.classList.contains('mc-tile--open')).toBe(true);
        expect(tile?.tagName.toLowerCase()).toBe('button');
        expect(tile?.getAttribute('type')).toBe('button');
    });
    it('applies the correct class for iconposition "right"', () => {
        const { container } = render(TileClickable, { iconposition: 'right' });
        const tile = container.querySelector('.mc-tile');
        expect(tile?.classList.contains('mc-tile--action-right')).toBe(true);
    });
    it('emits the "action" event when clicked (button)', async () => {
        const { container } = render(TileClickable);
        const tile = container.querySelector('.mc-tile');
        const eventSpy = vi.fn();
        tile?.addEventListener('action', eventSpy);
        await fireEvent.click(tile);
        expect(eventSpy).toHaveBeenCalledTimes(1);
    });
    it('does not emit "action" event when clicking a link', async () => {
        const { container } = render(TileClickable, { href: 'https://example.com' });
        const tile = container.querySelector('.mc-tile');
        const eventSpy = vi.fn();
        tile?.addEventListener('action', eventSpy);
        await fireEvent.click(tile);
        expect(eventSpy).toHaveBeenCalledTimes(0);
    });
});
