alpine/test/error.spec.js

import Alpine from 'alpinejs'
import { wait } from '@testing-library/dom'

global.MutationObserver = class {
    observe() {}
}

jest.spyOn(window, 'setTimeout').mockImplementation((callback) => {
    callback()
})

const mockConsoleWarn = jest.spyOn(console, 'warn').mockImplementation(() => {})

beforeEach(() => {
    jest.clearAllMocks()
})

test('error in x-data eval contains element, expression and original error', async () => {
    document.body.innerHTML = `
        <div x-data="{ foo: 'bar' ">
            <span x-bind:foo="foo.bar"></span>
        </div>
    `
    await expect(Alpine.start()).rejects.toThrow()
    expect(mockConsoleWarn).toHaveBeenCalledWith(
        `Alpine Error: "SyntaxError: Unexpected token ')'"\n\nExpression: "{ foo: 'bar' "\nElement:`,
        document.querySelector('[x-data]'),
    )
})

test('error in x-init eval contains element, expression and original error', async () => {
    document.body.innerHTML = `
        <div x-data x-init="foo.bar = 'baz'">
        </div>
    `
    await Alpine.start()
    expect(mockConsoleWarn).toHaveBeenCalledWith(
        `Alpine Error: "ReferenceError: foo is not defined"\n\nExpression: "foo.bar = 'baz'"\nElement:`,
        document.querySelector('[x-data]'),
    )
})

test('error in x-spread eval contains element, expression and original error', async () => {
    document.body.innerHTML = `
        <div x-data x-spread="foo.bar">
        </div>
    `
    // swallow the rendering error
    await expect(Alpine.start()).rejects.toThrow()
    expect(mockConsoleWarn).toHaveBeenCalledWith(
        `Alpine Error: "ReferenceError: foo is not defined"\n\nExpression: "foo.bar"\nElement:`,
        document.querySelector('[x-data]'),
    )
})

test('error in x-bind eval contains element, expression and original error', async () => {
    document.body.innerHTML = `
        <div x-data="{ foo: null }">
            <span x-bind:foo="foo.bar"></span>
        </div>
    `
    await Alpine.start()
    expect(mockConsoleWarn).toHaveBeenCalledWith(
        `Alpine Error: "TypeError: Cannot read property 'bar' of null"\n\nExpression: "foo.bar"\nElement:`,
        document.querySelector('[x-bind:foo]'),
    )
})

test('error in x-model eval contains element, expression and original error', async () => {
    document.body.innerHTML = `
        <div x-data="{ foo: null }">
            <input x-model="foo.bar">
        </div>
    `
    await Alpine.start()
    expect(mockConsoleWarn).toHaveBeenCalledWith(
        `Alpine Error: "TypeError: Cannot read property 'bar' of null"\n\nExpression: "foo.bar"\nElement:`,
        document.querySelector('[x-model]',)
    )
})

test('error in x-for eval contains element, expression and original error', async () => {
    document.body.innerHTML = `
        <div x-data="{}">
            <template x-for="element in foo">
                <span x-text="element"></span>
            </template>
        </div>
    `
    await expect(Alpine.start()).rejects.toThrow()
    expect(mockConsoleWarn).toHaveBeenCalledWith(
        `Alpine Error: "ReferenceError: foo is not defined"\n\nExpression: "foo"\nElement:`,
        document.querySelector('[x-for]',)
    )
})

test('error in x-on eval contains element, expression and original error', async () => {
    document.body.innerHTML = `
        <div
            x-data="{hello: null}"
            x-on:click="hello.world"
        ></div>
    `
    await Alpine.start()
    document.querySelector('div').click()
    await wait(() => {
        expect(mockConsoleWarn).toHaveBeenCalledWith(
            `Alpine Error: "TypeError: Cannot read property 'world' of null"\n\nExpression: "hello.world"\nElement:`,
            document.querySelector('[x-data]',)
        )
    })
})