import { render, fireEvent } from '@testing-library/svelte';
import { describe, expect, it } from 'vitest';
import TileExpandable from './TileExpandable.svelte';
describe('m-tile-expandable', () => {
    it('applies the default class', () => {
        const { container } = render(TileExpandable);
        const tile = container.querySelector('.mc-tile');
        expect(tile).toBeTruthy();
        expect(tile?.classList.contains('mc-tile--primary')).toBe(false);
        expect(tile?.classList.contains('mc-tile--expandable')).toBe(true);
    });
    it('applies the class for secondary appearance', () => {
        const { container } = render(TileExpandable, { 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(TileExpandable, { bordered: true });
        const tile = container.querySelector('.mc-tile');
        expect(tile?.classList.contains('mc-tile--bordered')).toBe(true);
    });
    it('applies the correct trigger class for icon trigger (default)', () => {
        const { container } = render(TileExpandable);
        const tile = container.querySelector('.mc-tile');
        expect(tile?.classList.contains('mc-tile--trigger-icon')).toBe(true);
    });
    it('applies the correct trigger class for button trigger', () => {
        const { container } = render(TileExpandable, { trigger: 'button' });
        const tile = container.querySelector('.mc-tile');
        expect(tile?.classList.contains('mc-tile--trigger-button')).toBe(true);
    });
    it('opens and closes the content when container trigger is clicked', async () => {
        const { container } = render(TileExpandable, { trigger: 'container' });
        const header = container.querySelector('.mc-tile__header');
        const content = container.querySelector('.mc-tile__content');
        expect(content?.getAttribute('aria-hidden')).toBe('true');
        await fireEvent.click(header);
        expect(content?.getAttribute('aria-hidden')).toBe('false');
        await fireEvent.click(header);
        expect(content?.getAttribute('aria-hidden')).toBe('true');
    });
    it('opens and closes the content when icon trigger is clicked', async () => {
        const { container, getByRole } = render(TileExpandable, { trigger: 'icon' });
        const button = getByRole('button');
        const content = container.querySelector('.mc-tile__content');
        expect(content?.getAttribute('aria-hidden')).toBe('true');
        await fireEvent.click(button);
        expect(content?.getAttribute('aria-hidden')).toBe('false');
        await fireEvent.click(button);
        expect(content?.getAttribute('aria-hidden')).toBe('true');
    });
    it('opens and closes the content when button trigger is clicked', async () => {
        const { container, getByRole } = render(TileExpandable, {
            trigger: 'button',
            buttonlabel: 'See more',
        });
        const button = getByRole('button');
        const content = container.querySelector('.mc-tile__content');
        expect(content?.getAttribute('aria-hidden')).toBe('true');
        await fireEvent.click(button);
        expect(content?.getAttribute('aria-hidden')).toBe('false');
        await fireEvent.click(button);
        expect(content?.getAttribute('aria-hidden')).toBe('true');
    });
});
