49 lines
1.7 KiB
JavaScript
49 lines
1.7 KiB
JavaScript
|
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()
|
||
|
|
})
|
||
|
|
})
|