e-ticket/tests/js/tabs.test.js

import { describe, it, expect, beforeEach } from 'vitest'
import { initTabs } from '../../assets/modules/tabs.js'

function setup() {
    document.body.innerHTML = `
        <div id="tablist">
            <button data-tab="tab-a" style="background-color:#111827;color:white;">Tab A</button>
            <button data-tab="tab-b" style="background-color:white;color:#111827;">Tab B</button>
            <button data-tab="tab-c" style="background-color:white;color:#111827;">Tab C</button>
        </div>
        <div id="tab-a" style="display:block;">Content A</div>
        <div id="tab-b" style="display:none;">Content B</div>
        <div id="tab-c" style="display:none;">Content C</div>
    `
    initTabs()
}

describe('initTabs', () => {
    beforeEach(() => setup())

    it('switches active tab on click', () => {
        document.querySelector('[data-tab="tab-b"]').click()

        expect(document.getElementById('tab-a').style.display).toBe('none')
        expect(document.getElementById('tab-b').style.display).toBe('block')
    })

    it('updates button styles on click', () => {
        const btnA = document.querySelector('[data-tab="tab-a"]')
        const btnB = document.querySelector('[data-tab="tab-b"]')
        btnB.click()

        expect(btnB.style.backgroundColor).toBe('#111827')
        expect(btnB.style.color).toBe('white')
        expect(btnA.style.backgroundColor).toBe('white')
        expect(btnA.style.color).toBe('#111827')
    })

    it('switches back to first tab', () => {
        const btnA = document.querySelector('[data-tab="tab-a"]')
        const btnB = document.querySelector('[data-tab="tab-b"]')

        btnB.click()
        btnA.click()

        expect(document.getElementById('tab-a').style.display).toBe('block')
        expect(document.getElementById('tab-b').style.display).toBe('none')
    })

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

describe('ARIA attributes', () => {
    beforeEach(() => setup())

    it('handles tabs without parent element', () => {
        document.body.innerHTML = `
            <button data-tab="tab-x" style="background-color:#111827;color:white;">X</button>
            <div id="tab-x" style="display:block;">Content X</div>
        `
        initTabs()

        const btn = document.querySelector('[data-tab="tab-x"]')
        expect(btn.getAttribute('role')).toBe('tab')
        expect(document.body.getAttribute('role')).toBe('tablist')
    })

    it('generates id for buttons without id', () => {
        document.body.innerHTML = `
            <div>
                <button data-tab="tab-noid" style="background-color:#111827;color:white;">No ID</button>
            </div>
            <div id="tab-noid" style="display:block;">Content</div>
        `
        initTabs()

        const btn = document.querySelector('[data-tab="tab-noid"]')
        expect(btn.id).toBe('tab-btn-tab-noid')
    })

    it('keeps existing button id', () => {
        document.body.innerHTML = `
            <div>
                <button id="my-custom-id" data-tab="tab-keep" style="background-color:#111827;color:white;">Keep</button>
            </div>
            <div id="tab-keep" style="display:block;">Content</div>
        `
        initTabs()

        expect(document.querySelector('[data-tab="tab-keep"]').id).toBe('my-custom-id')
    })

    it('handles missing panel gracefully', () => {
        document.body.innerHTML = `
            <div>
                <button data-tab="tab-exists" style="background-color:#111827;color:white;">Exists</button>
                <button data-tab="tab-missing" style="background-color:white;color:#111827;">Missing</button>
            </div>
            <div id="tab-exists" style="display:block;">Content</div>
        `
        initTabs()

        const btnMissing = document.querySelector('[data-tab="tab-missing"]')
        expect(btnMissing.getAttribute('role')).toBe('tab')
        expect(btnMissing.getAttribute('aria-selected')).toBe('false')
    })

    it('click on tab with missing panel does not crash', () => {
        document.body.innerHTML = `
            <div>
                <button data-tab="tab-ok" style="background-color:#111827;color:white;">OK</button>
                <button data-tab="tab-nopanel" style="background-color:white;color:#111827;">No Panel</button>
            </div>
            <div id="tab-ok" style="display:block;">Content</div>
        `
        initTabs()

        const btn = document.querySelector('[data-tab="tab-nopanel"]')
        expect(() => btn.click()).not.toThrow()
        expect(btn.getAttribute('aria-selected')).toBe('true')
    })

    it('sets role=tablist on parent', () => {
        expect(document.getElementById('tablist').getAttribute('role')).toBe('tablist')
    })

    it('sets role=tab on each button', () => {
        document.querySelectorAll('[data-tab]').forEach(btn => {
            expect(btn.getAttribute('role')).toBe('tab')
        })
    })

    it('sets aria-controls matching panel id', () => {
        const btn = document.querySelector('[data-tab="tab-b"]')
        expect(btn.getAttribute('aria-controls')).toBe('tab-b')
    })

    it('sets role=tabpanel on panels', () => {
        expect(document.getElementById('tab-a').getAttribute('role')).toBe('tabpanel')
        expect(document.getElementById('tab-b').getAttribute('role')).toBe('tabpanel')
    })

    it('sets aria-labelledby on panels', () => {
        const btnA = document.querySelector('[data-tab="tab-a"]')
        expect(document.getElementById('tab-a').getAttribute('aria-labelledby')).toBe(btnA.id)
    })

    it('sets aria-selected=true on active tab', () => {
        const btnA = document.querySelector('[data-tab="tab-a"]')
        const btnB = document.querySelector('[data-tab="tab-b"]')
        expect(btnA.getAttribute('aria-selected')).toBe('true')
        expect(btnB.getAttribute('aria-selected')).toBe('false')
    })

    it('updates aria-selected on click', () => {
        const btnA = document.querySelector('[data-tab="tab-a"]')
        const btnB = document.querySelector('[data-tab="tab-b"]')
        btnB.click()

        expect(btnA.getAttribute('aria-selected')).toBe('false')
        expect(btnB.getAttribute('aria-selected')).toBe('true')
    })

    it('sets tabindex=0 on active, -1 on inactive', () => {
        const btnA = document.querySelector('[data-tab="tab-a"]')
        const btnB = document.querySelector('[data-tab="tab-b"]')
        expect(btnA.getAttribute('tabindex')).toBe('0')
        expect(btnB.getAttribute('tabindex')).toBe('-1')
    })

    it('updates tabindex on click', () => {
        const btnA = document.querySelector('[data-tab="tab-a"]')
        const btnB = document.querySelector('[data-tab="tab-b"]')
        btnB.click()

        expect(btnA.getAttribute('tabindex')).toBe('-1')
        expect(btnB.getAttribute('tabindex')).toBe('0')
    })
})

describe('keyboard navigation', () => {
    beforeEach(() => setup())

    it('ArrowRight moves to next tab', () => {
        const btnA = document.querySelector('[data-tab="tab-a"]')
        btnA.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }))

        expect(document.querySelector('[data-tab="tab-b"]').getAttribute('aria-selected')).toBe('true')
        expect(document.getElementById('tab-b').style.display).toBe('block')
    })

    it('ArrowLeft moves to previous tab', () => {
        const btnB = document.querySelector('[data-tab="tab-b"]')
        btnB.click()
        btnB.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }))

        expect(document.querySelector('[data-tab="tab-a"]').getAttribute('aria-selected')).toBe('true')
    })

    it('ArrowRight wraps from last to first', () => {
        const btnC = document.querySelector('[data-tab="tab-c"]')
        btnC.click()
        btnC.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }))

        expect(document.querySelector('[data-tab="tab-a"]').getAttribute('aria-selected')).toBe('true')
    })

    it('ArrowLeft wraps from first to last', () => {
        const btnA = document.querySelector('[data-tab="tab-a"]')
        btnA.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }))

        expect(document.querySelector('[data-tab="tab-c"]').getAttribute('aria-selected')).toBe('true')
    })

    it('Home moves to first tab', () => {
        const btnC = document.querySelector('[data-tab="tab-c"]')
        btnC.click()
        btnC.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true }))

        expect(document.querySelector('[data-tab="tab-a"]').getAttribute('aria-selected')).toBe('true')
    })

    it('End moves to last tab', () => {
        const btnA = document.querySelector('[data-tab="tab-a"]')
        btnA.dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }))

        expect(document.querySelector('[data-tab="tab-c"]').getAttribute('aria-selected')).toBe('true')
    })

    it('ArrowDown moves to next tab', () => {
        const btnA = document.querySelector('[data-tab="tab-a"]')
        btnA.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))

        expect(document.querySelector('[data-tab="tab-b"]').getAttribute('aria-selected')).toBe('true')
    })

    it('ArrowUp moves to previous tab', () => {
        const btnB = document.querySelector('[data-tab="tab-b"]')
        btnB.click()
        btnB.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }))

        expect(document.querySelector('[data-tab="tab-a"]').getAttribute('aria-selected')).toBe('true')
    })

    it('other keys do nothing', () => {
        const btnA = document.querySelector('[data-tab="tab-a"]')
        btnA.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))

        expect(btnA.getAttribute('aria-selected')).toBe('true')
    })
})