Add shopping cart system on event detail billetterie
- Each billet has +/- quantity buttons with max quantity enforcement - Line total per billet updated in real-time - Cart total and article count at the bottom - Commander button disabled when cart is empty - Full billet description displayed - JS module cart.js with 10 tests covering all cases Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
131
tests/js/cart.test.js
Normal file
131
tests/js/cart.test.js
Normal file
@@ -0,0 +1,131 @@
|
||||
import { describe, it, expect, beforeEach } 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></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)
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user