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

import { describe, it, expect, beforeEach, vi } from 'vitest'
import { initCart } from '../../assets/modules/cart.js'

function createBilletterie(billets) {
    let html = '<div id="billetterie">'

    for (const b of billets) {
        html += `
            <div data-cart-item data-billet-id="${b.id}" data-price="${b.price}" data-max="${b.max}">
                <button data-cart-minus></button>
                <input data-cart-qty type="number" min="0" max="${b.max || 99}" value="0" readonly>
                <button data-cart-plus></button>
                <span data-cart-line-total></span>
            </div>
        `
    }

    html += '<span id="cart-total"></span><span id="cart-count"></span><button id="cart-checkout" disabled data-order-url="/order"></button></div>'
    document.body.innerHTML = html
}

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

    it('does nothing without billetterie element', () => {
        expect(() => initCart()).not.toThrow()
    })

    it('does nothing without total element', () => {
        document.body.innerHTML = '<div id="billetterie"></div>'
        expect(() => initCart()).not.toThrow()
    })

    it('initializes with zero totals', () => {
        createBilletterie([{ id: 1, price: '10.00', max: 5 }])
        initCart()

        expect(document.getElementById('cart-total').textContent).toBe('0,00 \u20AC')
        expect(document.getElementById('cart-count').textContent).toBe('0')
        expect(document.getElementById('cart-checkout').disabled).toBe(true)
    })

    it('increments quantity on plus click', () => {
        createBilletterie([{ id: 1, price: '15.00', max: 10 }])
        initCart()

        document.querySelector('[data-cart-plus]').click()

        expect(document.querySelector('[data-cart-qty]').value).toBe('1')
        expect(document.querySelector('[data-cart-line-total]').textContent).toBe('15,00 \u20AC')
        expect(document.getElementById('cart-total').textContent).toBe('15,00 \u20AC')
        expect(document.getElementById('cart-count').textContent).toBe('1')
        expect(document.getElementById('cart-checkout').disabled).toBe(false)
    })

    it('decrements quantity on minus click', () => {
        createBilletterie([{ id: 1, price: '10.00', max: 5 }])
        initCart()

        document.querySelector('[data-cart-plus]').click()
        document.querySelector('[data-cart-plus]').click()
        document.querySelector('[data-cart-minus]').click()

        expect(document.querySelector('[data-cart-qty]').value).toBe('1')
        expect(document.getElementById('cart-total').textContent).toBe('10,00 \u20AC')
    })

    it('does not decrement below zero', () => {
        createBilletterie([{ id: 1, price: '10.00', max: 5 }])
        initCart()

        document.querySelector('[data-cart-minus]').click()

        expect(document.querySelector('[data-cart-qty]').value).toBe('0')
        expect(document.getElementById('cart-total').textContent).toBe('0,00 \u20AC')
    })

    it('respects max quantity', () => {
        createBilletterie([{ id: 1, price: '10.00', max: 2 }])
        initCart()

        document.querySelector('[data-cart-plus]').click()
        document.querySelector('[data-cart-plus]').click()
        document.querySelector('[data-cart-plus]').click()

        expect(document.querySelector('[data-cart-qty]').value).toBe('2')
        expect(document.getElementById('cart-total').textContent).toBe('20,00 \u20AC')
    })

    it('allows unlimited when max is 0', () => {
        createBilletterie([{ id: 1, price: '5.00', max: 0 }])
        initCart()

        for (let i = 0; i < 50; i++) {
            document.querySelector('[data-cart-plus]').click()
        }

        expect(document.querySelector('[data-cart-qty]').value).toBe('50')
        expect(document.getElementById('cart-total').textContent).toBe('250,00 \u20AC')
    })

    it('calculates total for multiple billets', () => {
        createBilletterie([
            { id: 1, price: '10.00', max: 5 },
            { id: 2, price: '25.00', max: 3 },
        ])
        initCart()

        const plusBtns = document.querySelectorAll('[data-cart-plus]')
        plusBtns[0].click()
        plusBtns[0].click()
        plusBtns[1].click()

        // 2 * 10 + 1 * 25 = 45
        expect(document.getElementById('cart-total').textContent).toBe('45,00 \u20AC')
        expect(document.getElementById('cart-count').textContent).toBe('3')
    })

    it('disables checkout when cart is empty again', () => {
        createBilletterie([{ id: 1, price: '10.00', max: 5 }])
        initCart()

        document.querySelector('[data-cart-plus]').click()
        expect(document.getElementById('cart-checkout').disabled).toBe(false)

        document.querySelector('[data-cart-minus]').click()
        expect(document.getElementById('cart-checkout').disabled).toBe(true)
    })

    it('posts cart data on checkout click', () => {
        const fetchMock = vi.fn().mockResolvedValue({
            json: () => Promise.resolve({ redirect: '/commande/1/informations' }),
        })
        globalThis.fetch = fetchMock

        createBilletterie([
            { id: 1, price: '10.00', max: 5 },
            { id: 2, price: '20.00', max: 3 },
        ])
        initCart()

        const plusBtns = document.querySelectorAll('[data-cart-plus]')
        plusBtns[0].click()
        plusBtns[0].click()
        plusBtns[1].click()

        document.getElementById('cart-checkout').click()

        expect(fetchMock).toHaveBeenCalledWith('/order', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify([
                { billetId: '1', qty: 2 },
                { billetId: '2', qty: 1 },
            ]),
        })
    })

    it('does not post when cart is empty on checkout', () => {
        const fetchMock = vi.fn()
        globalThis.fetch = fetchMock

        createBilletterie([{ id: 1, price: '10.00', max: 5 }])
        initCart()

        document.getElementById('cart-checkout').disabled = false
        document.getElementById('cart-checkout').click()

        expect(fetchMock).not.toHaveBeenCalled()
    })

    it('does not post without order url', () => {
        const fetchMock = vi.fn()
        globalThis.fetch = fetchMock

        document.body.innerHTML = `
            <div id="billetterie">
                <div data-cart-item data-billet-id="1" data-price="10" data-max="5">
                    <button data-cart-minus></button>
                    <input data-cart-qty type="number" min="0" max="5" value="0" readonly>
                    <button data-cart-plus></button>
                    <span data-cart-line-total></span>
                </div>
                <span id="cart-total"></span><span id="cart-count"></span>
                <button id="cart-checkout" disabled></button>
            </div>
        `
        initCart()

        document.querySelector('[data-cart-plus]').click()
        document.getElementById('cart-checkout').click()

        expect(fetchMock).not.toHaveBeenCalled()
    })
})