e-ticket/tests/js/api-env-switcher.test.js

import { describe, it, expect, beforeEach } from 'vitest'
import { initApiEnvSwitcher } from '../../assets/modules/api-env-switcher.js'

describe('initApiEnvSwitcher', () => {
    beforeEach(() => {
        document.body.innerHTML = ''
    })

    it('does nothing without env-switcher', () => {
        expect(() => initApiEnvSwitcher()).not.toThrow()
    })

    it('switches to live environment', () => {
        document.body.innerHTML = `
            <div id="env-switcher">
                <button data-env="sandbox" class="env-btn px-5 py-2 font-black uppercase text-xs tracking-widest transition-all cursor-pointer bg-orange-500 text-white">Sandbox</button>
                <button data-env="live" class="env-btn px-5 py-2 font-black uppercase text-xs tracking-widest transition-all cursor-pointer bg-gray-800 text-gray-400">Live</button>
            </div>
            <div data-host="https://example.com">
                <p id="env-base-url">https://example.com/api/sandbox</p>
            </div>
            <p id="env-description">Sandbox desc</p>
            <span class="api-env-prefix text-orange-400">/api/sandbox</span>
            <span class="api-env-prefix text-orange-400">/api/sandbox</span>
        `
        initApiEnvSwitcher()

        document.querySelector('[data-env="live"]').click()

        expect(document.getElementById('env-base-url').textContent).toBe('https://example.com/api/live')
        expect(document.getElementById('env-description').textContent).toContain('production')

        const prefixes = document.querySelectorAll('.api-env-prefix')
        prefixes.forEach(el => {
            expect(el.textContent).toBe('/api/live')
            expect(el.className).toContain('text-green-400')
        })
    })

    it('switches back to sandbox', () => {
        document.body.innerHTML = `
            <div id="env-switcher">
                <button data-env="sandbox" class="env-btn bg-gray-800 text-gray-400">Sandbox</button>
                <button data-env="live" class="env-btn bg-green-600 text-white">Live</button>
            </div>
            <div data-host="https://test.com">
                <p id="env-base-url">https://test.com/api/live</p>
            </div>
            <p id="env-description">Live desc</p>
            <span class="api-env-prefix text-green-400">/api/live</span>
        `
        initApiEnvSwitcher()

        document.querySelector('[data-env="sandbox"]').click()

        expect(document.getElementById('env-base-url').textContent).toBe('https://test.com/api/sandbox')
        expect(document.querySelector('.api-env-prefix').textContent).toBe('/api/sandbox')
    })

    it('uses location.origin when no data-host', () => {
        document.body.innerHTML = `
            <div id="env-switcher">
                <button data-env="sandbox" class="env-btn">Sandbox</button>
                <button data-env="live" class="env-btn">Live</button>
            </div>
            <p id="env-base-url"></p>
            <p id="env-description"></p>
        `
        initApiEnvSwitcher()

        document.querySelector('[data-env="live"]').click()

        expect(document.getElementById('env-base-url').textContent).toContain('/api/live')
    })
})