import { describe, it, expect, beforeEach } from 'vitest'
import { initMobileMenu } from '../../assets/modules/mobile-menu.js'

describe('initMobileMenu', () => {
    beforeEach(() => {
        document.body.innerHTML = `
            <button id="mobile-menu-btn" aria-expanded="false">
                <svg id="menu-icon-open"></svg>
                <svg id="menu-icon-close" class="hidden"></svg>
            </button>
            <div id="mobile-menu" class="hidden"></div>
        `
    })

    it('toggles menu visibility on click', () => {
        initMobileMenu()
        const btn = document.getElementById('mobile-menu-btn')
        const menu = document.getElementById('mobile-menu')

        btn.click()
        expect(menu.classList.contains('hidden')).toBe(false)
        expect(btn.getAttribute('aria-expanded')).toBe('true')

        btn.click()
        expect(menu.classList.contains('hidden')).toBe(true)
        expect(btn.getAttribute('aria-expanded')).toBe('false')
    })

    it('toggles icons on click', () => {
        initMobileMenu()
        const btn = document.getElementById('mobile-menu-btn')
        const iconOpen = document.getElementById('menu-icon-open')
        const iconClose = document.getElementById('menu-icon-close')

        btn.click()
        expect(iconOpen.classList.contains('hidden')).toBe(true)
        expect(iconClose.classList.contains('hidden')).toBe(false)

        btn.click()
        expect(iconOpen.classList.contains('hidden')).toBe(false)
        expect(iconClose.classList.contains('hidden')).toBe(true)
    })

    it('does nothing without elements', () => {
        document.body.innerHTML = ''
        expect(() => initMobileMenu()).not.toThrow()
    })
})