How to use alpinejs - 9 common examples

test('can reference elements from event listeners', async () => {
    document.body.innerHTML = `
        <div>
            <span></span>

            <button></button>
        </div>
    `

    Alpine.start()

    expect(document.querySelector('span').innerText).toEqual(undefined)

    document.querySelector('button').click()

    await wait(() =&gt; { expect(document.querySelector('span').innerText).toEqual('lob') })
})

test('auto-detect x-data property changes at run-time', async () => {
    var runObservers = []

    global.MutationObserver = class {
        constructor(callback) { runObservers.push(callback) }
        observe() {}
    }

    document.body.innerHTML = `
        <div>
            <span></span>
        </div>
    `

    Alpine.start()

    expect(document.querySelector('span').innerText).toEqual(0)

    document.querySelector('div').setAttribute('x-data', '{ count: 1 }')

    runObservers[0]([
        {
            addedNodes: [],
            type: 'attributes',
            attributeName: 'x-data',
            target: document.querySelector('div')
        }
    ])

    await wait(() =&gt; { expect(document.querySelector('span').innerText).toEqual(1) })
})

test('can access parent properties after nested components', async () => {
    document.body.innerHTML = `
        <div>
            <div>
                <button>Something</button>
            </div>

            <span></span>
        </div>
    `

    Alpine.start()

    expect(document.querySelector('span').innerText).toEqual('bar')
})

test('x-cloak is removed', async () => {
    document.body.innerHTML = `
        <div>
            <span></span>
        </div>
    `

    expect(document.querySelector('span').getAttribute('x-cloak')).not.toBeNull()

    Alpine.start()

    await wait(() =&gt; { expect(document.querySelector('span').getAttribute('x-cloak')).toBeNull() })
})

test('x-show toggles display: none; with no other style attributes', async () => {
    document.body.innerHTML = `
        <div>
            <span></span>

            <button></button>
        </div>
    `

    Alpine.start()

    expect(document.querySelector('span').getAttribute('style')).toEqual(null)

    document.querySelector('button').click()

    await wait(() =&gt; { expect(document.querySelector('span').getAttribute('style')).toEqual('display: none;') })
})

test('boolean attributes set to false are removed from element', async () => {
    document.body.innerHTML = `
        <div>
            <input>
            <input>
            <input>
            <input>
            <input>
        </div>
    `

    Alpine.start()

    expect(document.querySelectorAll('input')[0].disabled).toBeFalsy()
    expect(document.querySelectorAll('input')[1].checked).toBeFalsy()
    expect(document.querySelectorAll('input')[2].required).toBeFalsy()
    expect(document.querySelectorAll('input')[3].readOnly).toBeFalsy()
    expect(document.querySelectorAll('input')[4].hidden).toBeFalsy()
})

test('data manipulated on component object is reactive', async () => {
    document.body.innerHTML = `
        <div>
            <span></span>
        </div>
    `

    Alpine.start()

    document.querySelector('div').__x.data.foo = 'baz'

    await wait(() =&gt; { expect(document.querySelector('span').innerText).toEqual('baz') })
})

test('x-text on triggered update', async () => {
    document.body.innerHTML = `
        <div>
            <button></button>

            <span></span>
        </div>
    `

    Alpine.start()

    await wait(() =&gt; { expect(document.querySelector('span').innerText).toEqual('') })

    document.querySelector('button').click()

    await wait(() =&gt; { expect(document.querySelector('span').innerText).toEqual('bar') })
})

test('x-model trims value if trim modifier is present', async () => {
    document.body.innerHTML = `
        <div>
            <input>

            <span></span>
        </div>
    `

    Alpine.start()

    fireEvent.input(document.querySelector('input'), { target: { value: 'bar   ' }})

    await wait(() =&gt; { expect(document.querySelector('span').innerText).toEqual('bar') })
})