113 lines
3.7 KiB
JavaScript
113 lines
3.7 KiB
JavaScript
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]',)
|
|
)
|
|
})
|
|
})
|