import { describe, it, expect, beforeEach, vi } from 'vitest'
import { initBilletDesigner } from '../../assets/modules/billet-designer.js'
describe('initBilletDesigner', () => {
beforeEach(() => {
document.body.innerHTML = ''
})
it('does nothing without designer element', () => {
expect(() => initBilletDesigner()).not.toThrow()
})
it('does nothing without preview url', () => {
document.body.innerHTML = ''
expect(() => initBilletDesigner()).not.toThrow()
})
it('does nothing without iframe', () => {
document.body.innerHTML = ''
expect(() => initBilletDesigner()).not.toThrow()
})
it('reloads iframe on color input change', () => {
document.body.innerHTML = `
`
initBilletDesigner()
const input = document.querySelector('input[name="bg_color"]')
input.value = '#ff0000'
input.dispatchEvent(new Event('input', { bubbles: true }))
const iframe = document.getElementById('billet-preview-frame')
expect(iframe.src).toContain('bg_color=%23ff0000')
})
it('reloads iframe on checkbox change', () => {
document.body.innerHTML = `
`
initBilletDesigner()
const checkbox = document.querySelector('input[name="show_logo"]')
checkbox.checked = false
checkbox.dispatchEvent(new Event('change', { bubbles: true }))
const iframe = document.getElementById('billet-preview-frame')
expect(iframe.src).toContain('show_logo=0')
})
it('includes all inputs in preview url', () => {
document.body.innerHTML = `
`
initBilletDesigner()
const input = document.querySelector('input[name="bg_color"]')
input.dispatchEvent(new Event('input', { bubbles: true }))
const iframe = document.getElementById('billet-preview-frame')
expect(iframe.src).toContain('bg_color=%23ffffff')
expect(iframe.src).toContain('text_color=%23111111')
expect(iframe.src).toContain('show_logo=1')
})
it('reloads on reload button click', () => {
document.body.innerHTML = `
`
initBilletDesigner()
document.getElementById('billet-reload-preview').click()
const iframe = document.getElementById('billet-preview-frame')
expect(iframe.src).toContain('bg_color=%23aabbcc')
})
it('saves design on save button click', () => {
const fetchMock = vi.fn().mockResolvedValue({ ok: true })
globalThis.fetch = fetchMock
document.body.innerHTML = `
`
initBilletDesigner()
document.getElementById('billet-save-design').click()
expect(fetchMock).toHaveBeenCalledWith('/save', expect.objectContaining({
method: 'POST',
}))
})
it('save does nothing without save url', () => {
const fetchMock = vi.fn()
globalThis.fetch = fetchMock
document.body.innerHTML = `
`
initBilletDesigner()
document.getElementById('billet-save-design').click()
expect(fetchMock).not.toHaveBeenCalled()
})
it('save includes non-checkbox input values in form data', () => {
const fetchMock = vi.fn().mockResolvedValue({ ok: true })
globalThis.fetch = fetchMock
document.body.innerHTML = `
`
initBilletDesigner()
document.getElementById('billet-save-design').click()
const formData = fetchMock.mock.calls[0][1].body
expect(formData.get('invitation_title')).toBe('VIP Pass')
})
it('save includes checkbox values in form data', () => {
const fetchMock = vi.fn().mockResolvedValue({ ok: true })
globalThis.fetch = fetchMock
document.body.innerHTML = `
`
initBilletDesigner()
document.getElementById('billet-save-design').click()
expect(fetchMock).toHaveBeenCalled()
const formData = fetchMock.mock.calls[0][1].body
expect(formData.get('show_logo')).toBe('1')
expect(formData.get('accent_color')).toBe('#000000')
})
})