97 lines
3.5 KiB
JavaScript
97 lines
3.5 KiB
JavaScript
|
import { describe, it, expect, beforeEach } 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')
|
||
|
|
})
|
||
|
|
})
|