e-ticket/tests/js/billet-designer.test.js

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 = '<div id="billet-designer"></div>'
        expect(() => initBilletDesigner()).not.toThrow()
    })

    it('does nothing without iframe', () => {
        document.body.innerHTML = '<div id="billet-designer" data-preview-url="/preview"></div>'
        expect(() => initBilletDesigner()).not.toThrow()
    })

    it('reloads iframe on color input change', () => {
        document.body.innerHTML = `
            <div id="billet-designer" data-preview-url="/preview">
                <input type="color" name="bg_color" value="#ffffff">
                <iframe id="billet-preview-frame" src="/preview"></iframe>
            </div>
        `

        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 = `
            <div id="billet-designer" data-preview-url="/preview">
                <input type="checkbox" name="show_logo" checked>
                <iframe id="billet-preview-frame" src="/preview"></iframe>
            </div>
        `

        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 = `
            <div id="billet-designer" data-preview-url="/preview">
                <input type="color" name="bg_color" value="#ffffff">
                <input type="color" name="text_color" value="#111111">
                <input type="checkbox" name="show_logo" checked>
                <iframe id="billet-preview-frame" src="/preview"></iframe>
            </div>
        `

        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 = `
            <div id="billet-designer" data-preview-url="/preview">
                <input type="color" name="bg_color" value="#aabbcc">
                <iframe id="billet-preview-frame" src="/preview"></iframe>
                <button id="billet-reload-preview"></button>
            </div>
        `

        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 = `
            <div id="billet-designer" data-preview-url="/preview" data-save-url="/save">
                <input type="color" name="accent_color" value="#4f46e5">
                <input type="text" name="invitation_title" value="VIP">
                <iframe id="billet-preview-frame" src="/preview"></iframe>
                <button id="billet-save-design"></button>
            </div>
        `

        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 = `
            <div id="billet-designer" data-preview-url="/preview">
                <input type="color" name="accent_color" value="#4f46e5">
                <iframe id="billet-preview-frame" src="/preview"></iframe>
                <button id="billet-save-design"></button>
            </div>
        `

        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 = `
            <div id="billet-designer" data-preview-url="/preview" data-save-url="/save">
                <input type="text" name="invitation_title" value="VIP Pass">
                <iframe id="billet-preview-frame" src="/preview"></iframe>
                <button id="billet-save-design"></button>
            </div>
        `

        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 = `
            <div id="billet-designer" data-preview-url="/preview" data-save-url="/save">
                <input type="checkbox" name="show_logo" checked>
                <input type="color" name="accent_color" value="#000000">
                <iframe id="billet-preview-frame" src="/preview"></iframe>
                <button id="billet-save-design"></button>
            </div>
        `

        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')
    })
})